Skip to content

feat: docs panel, prompts icons, sessions icons, v0.0.52#200

Merged
ymkiux merged 6 commits into
mainfrom
feat/docs-registry-default-npmmirror
Jun 17, 2026
Merged

feat: docs panel, prompts icons, sessions icons, v0.0.52#200
ymkiux merged 6 commits into
mainfrom
feat/docs-registry-default-npmmirror

Conversation

@ymkiux

@ymkiux ymkiux commented Jun 16, 2026

Copy link
Copy Markdown
Collaborator

Summary

  • Default registry preset changed from official to npmmirror; remove official option from docs panel
  • Fix long command overflow in docs panel: switch from horizontal scroll to word-break wrapping, copy button uses flex layout to stay visible on all screen sizes
  • Replace prompts editor toolbar text buttons with SVG icon buttons with tooltips
  • Export generates .md file with dynamic prefix (agents/claude) based on active sub-tab
  • Fix sessions panel copy-link and copy-path icons: use distinct chain-link and folder icons instead of identical clipboard icons
  • Bump version to 0.0.52

Summary by CodeRabbit

  • Changes
    • Updated the default package registry preset and fallback displays to npmmirror across the web UI.
    • Removed the official/default registry option from the docs panel and preset list.
    • Updated the prompts/agents editor toolbar to use icon-only buttons with tooltips.
    • Agent export now downloads as a .md file with a timestamped name.
  • Style
    • Refined the docs command box layout for improved wrapping/clipping, and adjusted mobile overflow handling for install/command rows.

- Change default registry preset from official to npmmirror
- Remove official registry button from docs panel
- Add max-width to command display to keep copy button visible
- Update status strip fallback to show npmmirror
@coderabbitai

coderabbitai Bot commented Jun 16, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 6640ceaf-8116-4e60-9d05-15f595d9d2e1

📥 Commits

Reviewing files that changed from the base of the PR and between 5ff920c and 9a4afa7.

⛔ Files ignored due to path filters (1)
  • package-lock.json is excluded by !**/package-lock.json
📒 Files selected for processing (3)
  • package.json
  • web-ui/partials/index/panel-sessions.html
  • web-ui/res/web-ui-render.precompiled.js

📝 Walkthrough

Walkthrough

The default npm install registry preset is changed from 'default' (official) to 'npmmirror' in the Vue app state, templates, and precompiled render. The official/default preset button is removed from the docs panel preset selector. All fallback display labels switch from the i18n common.defaultOfficial string to the literal 'npmmirror'. The docs command box styling is restructured to use multi-line text wrapping with constrained overflow behavior instead of horizontal scrolling. The agents/prompts editor toolbar buttons are refactored to icon-only SVG rendering with tooltip titles and per-button disabled state logic. The agents export feature is updated to generate markdown files with prefixed, timestamped filenames. Session preview button icons are refreshed and the package version is incremented to 0.0.52.

Changes

Registry Default, Docs Layout, and Agents Editor Updates

Layer / File(s) Summary
npmmirror as default preset: state, templates, and precompiled render
web-ui/app.js, web-ui/partials/index/panel-docs.html, web-ui/partials/index/layout-header.html, web-ui/res/web-ui-render.precompiled.js
installRegistryPreset default value changed from 'default' to 'npmmirror' in app state. The official/default preset button is removed from the docs panel preset selector. All fallback display labels for installRegistryPreview changed from t('common.defaultOfficial') to the literal 'npmmirror' in both template partials and the precompiled render.
Docs panel command box text wrapping and responsive overflow
web-ui/styles/docs-panel.css
.docs-command-box gains overflow: hidden and max-width: 100% to constrain content spillover. The .install-command text area changes from single-line, horizontally scrollable layout (white-space: nowrap, overflow-x: auto) to multi-line wrapping with white-space: normal, word-break: break-all, and overflow-wrap: break-word. Mobile responsive adjustments (max-width: 720px) remove previous layout overrides and replace them with overflow: hidden applied to .docs-install-row and .docs-command-row.
Agents editor toolbar icon-only UI with tooltips and disabled states
web-ui/partials/index/panel-prompts.html, web-ui/res/web-ui-render.precompiled.js
Agents toolbar buttons (export, copy, paste, cancel, back, apply/save/preview) are refactored to use SVG icons instead of localized text labels with tooltip :title attributes for accessibility. The apply button's displayed content switches from state-dependent text to conditional icons. Disabled state logic is updated to include explicit per-button conditions: export/copy/paste tied to agentsLoading/agentsSaving/agentsDiffVisible; workflow actions tied to agentsSaving/agentsDiffLoading.
Agents export with markdown format and timestamped filenames
web-ui/modules/app.methods.session-actions.mjs
The exportAgentsContent() method is updated to generate markdown (.md) filenames with a prefix based on this.promptsSubTab (claude- or agents-), followed by a YYYYMMDD-HHMMSS timestamp. The file download MIME type is changed from text/plain;charset=utf-8 to text/markdown;charset=utf-8.
Session preview button icons and release version update
web-ui/partials/index/panel-sessions.html, web-ui/res/web-ui-render.precompiled.js, package.json
SVG icon contents for the "copy session link" and "copy session path" buttons are replaced in both source template and precompiled render. Package version is incremented from 0.0.51 to 0.0.52.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐇 Hop hop, the mirror is set,
No more "official" to fret!
npmmirror leads the way,
Buttons wear icons, not text display.
Words now wrap, exports timestamp with pride—
A tidy layout and features worldwide! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately summarizes the main changes: setting npmmirror as default registry and fixing command display issues.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/docs-registry-default-npmmirror

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ast-grep (0.43.0)
web-ui/res/web-ui-render.precompiled.js

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

ymkiux added 2 commits June 16, 2026 23:12
- Position copy button absolutely to stay visible during scroll
- Add right padding to command box for button space
- Update mobile responsive layout for absolute positioning
…ility

Switch command display from horizontal scroll to word-break wrapping,
change copy button from absolute positioning to flex layout so it
remains visible regardless of command length.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
web-ui/styles/docs-panel.css (1)

122-124: ⚡ Quick win

Use less aggressive command wrapping to preserve token readability.

Line 123 uses word-break: break-all, which can split command tokens (--flags, package names) mid-token and make copy/scan verification harder. Prefer natural token-preserving wrapping.

Suggested CSS adjustment
 .docs-command-box .install-command {
     flex: 1;
     min-width: 0;
@@
-    white-space: normal;
-    word-break: break-all;
-    overflow-wrap: break-word;
+    white-space: normal;
+    word-break: normal;
+    overflow-wrap: anywhere;
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@web-ui/styles/docs-panel.css` around lines 122 - 124, The word-break property
in the docs-panel.css file is set to break-all, which aggressively breaks
command tokens in the middle and reduces readability. Replace the word-break:
break-all property with word-break: break-word or simply remove it entirely and
rely on the overflow-wrap: break-word property that is already present, which
will preserve token boundaries while still allowing wrapping when necessary.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@web-ui/styles/docs-panel.css`:
- Around line 122-124: The word-break property in the docs-panel.css file is set
to break-all, which aggressively breaks command tokens in the middle and reduces
readability. Replace the word-break: break-all property with word-break:
break-word or simply remove it entirely and rely on the overflow-wrap:
break-word property that is already present, which will preserve token
boundaries while still allowing wrapping when necessary.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 8fae1e56-159f-4a36-8504-583cfcfb3e3f

📥 Commits

Reviewing files that changed from the base of the PR and between 58edc23 and ed4dc2b.

📒 Files selected for processing (1)
  • web-ui/styles/docs-panel.css
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
  • GitHub Check: ci (18)

ymkiux added 2 commits June 17, 2026 23:31
Replace all 6 text buttons in the prompts editor toolbar with
inline SVG icons and title tooltips. Export function now generates
.md files with dynamic prefix (agents/claude) based on active sub-tab.
Replace clipboard icon with chain-link icon for copy-link button
and folder icon for copy-path button to distinguish the two actions.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@web-ui/res/web-ui-render.precompiled.js`:
- Around line 6025-6156: The icon-only buttons in the toolbar
(exportAgentsContent, copyAgentsContent, pasteAgentsContent, loadPromptsContent,
resetAgentsDiffState, and applyAgentsContent) are missing accessible names that
screen readers can announce. Currently they only have a title attribute which is
not accessible to assistive technology. Add an aria-label attribute to each
button element in the props object, using the same translation key that is used
for the title attribute, so that screen readers can properly announce the
button's purpose alongside the visual tooltip.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 9df12bb3-b6d8-48d4-97e8-061e925774f2

📥 Commits

Reviewing files that changed from the base of the PR and between ed4dc2b and 5ff920c.

📒 Files selected for processing (3)
  • web-ui/modules/app.methods.session-actions.mjs
  • web-ui/partials/index/panel-prompts.html
  • web-ui/res/web-ui-render.precompiled.js
📜 Review details
🔇 Additional comments (3)
web-ui/partials/index/panel-prompts.html (2)

45-65: LGTM!


68-82: LGTM!

web-ui/modules/app.methods.session-actions.mjs (1)

343-354: LGTM!

Comment thread web-ui/res/web-ui-render.precompiled.js
@ymkiux ymkiux changed the title fix(docs): default registry to npmmirror and fix command display feat: docs panel, prompts icons, sessions icons, v0.0.52 Jun 17, 2026
@ymkiux ymkiux merged commit d15c556 into main Jun 17, 2026
11 checks passed
@ymkiux ymkiux deleted the feat/docs-registry-default-npmmirror branch June 17, 2026 15:41
@coderabbitai

coderabbitai Bot commented Jun 17, 2026

Copy link
Copy Markdown
Contributor

Caution

Failed to replace (edit) comment. This is likely due to insufficient permissions or the comment being deleted.

Error details
{}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant