Conversation
Contributor
📝 WalkthroughWalkthroughMoves left-panel header out of LeftSidePanel into parent templates via a new leftPanelHeaderTitle slot, removes PanelHeader and RightSidePanel templates, adjusts left-panel toggle logic/icons, adds multiple UI Changes
Possibly related PRs
Suggested reviewers
✨ Finishing touches
Comment |
🎭 Playwright Tests:
|
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 01/24/2026, 12:16:39 AM UTC 🔗 Links🎉 Your Storybook is ready for review! |
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 22.3 kB (baseline 22.3 kB) • ⚪ 0 BMain entry bundles and manifests
Status: 1 added / 1 removed Graph Workspace — 948 kB (baseline 949 kB) • 🟢 -567 BGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 80.7 kB (baseline 80.7 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 9 added / 9 removed Panels & Settings — 440 kB (baseline 440 kB) • 🟢 -8 BConfiguration panels, inspectors, and settings screens
Status: 12 added / 12 removed User & Accounts — 3.94 kB (baseline 3.94 kB) • ⚪ 0 BAuthentication, profile, and account management bundles
Status: 3 added / 3 removed Editors & Dialogs — 2.83 kB (baseline 2.83 kB) • ⚪ 0 BModals, dialogs, drawers, and in-app editors
Status: 2 added / 2 removed UI Components — 33.7 kB (baseline 33.7 kB) • ⚪ 0 BReusable component library chunks
Status: 5 added / 5 removed Data & Services — 3.17 MB (baseline 3.17 MB) • 🟢 -530 BStores, services, APIs, and repositories
Status: 8 added / 8 removed Utilities & Hooks — 24 kB (baseline 24 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 7 added / 7 removed Vendor & Third-Party — 10.7 MB (baseline 10.7 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Other — 6.42 MB (baseline 6.42 MB) • 🟢 -192 BBundles that do not match a named category
Status: 30 added / 30 removed |
dosubot
bot
added
the
size:S
DrJKL
added
Design
coderabbitai
bot
requested review from
Yorha4D,
christian-byrne and
viva-jinyi
Add select-none to cards, nav items, badges, headers, and labels Improves touch/mobile UX by preventing accidental selection Amp-Thread-ID: https://ampcode.com/threads/T-019be83a-cf2b-7079-8ca9-45fcda1d5fff Co-authored-by: Amp <amp@ampcode.com>
DrJKL
changed the title
- Carry forward existing assets into new state instead of starting empty - Track seen IDs during load to identify stale models - Prune only after all batches complete, keeping models visible during refresh Amp-Thread-ID: https://ampcode.com/threads/T-019becc8-344e-73bf-a360-63dae4c05c1f Co-authored-by: Amp <amp@ampcode.com>
- Add flex flex-col to nav in BaseModalLayout - Remove wrapper div around leftPanel slot - Flatten LeftSidePanel by moving scroll behavior to root div Amp-Thread-ID: https://ampcode.com/threads/T-019bece9-b915-722e-9da2-0012cb224a9c Co-authored-by: Amp <amp@ampcode.com>
dosubot
bot
added
the
size:L
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 5
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (4)
src/components/widget/SampleModelSelector.vue (2)
93-100: Avoid using the!important prefix for Tailwind classes.Line 95 uses
!bg-white !text-neutral-900which violates the coding guideline prohibiting the!important prefix. Consider either:
- Creating a dedicated Button variant for this styling need
- Using the
cn()utility with proper class ordering to override defaults- Using semantic design tokens instead of hardcoded colors
As per coding guidelines, never use
!importantor the!important prefix for Tailwind classes.
189-190: Consider adding explicit type annotations for better TypeScript safety.These refs are typed as
Ref<never[]>due to the empty array initialization, which may cause type issues when items are added. Adding explicit types would improve type safety.💡 Suggested improvement
-const selectedFrameworks = ref([]) -const selectedProjects = ref([]) +const selectedFrameworks = ref<string[]>([]) +const selectedProjects = ref<string[]>([])Adjust the type based on whether the MultiSelect stores values or full option objects.
src/components/widget/layout/BaseModalLayout.stories.ts (1)
390-391: Consider addingaria-labelfor accessibility.This icon-only button lacks visible text content. Per repository conventions, icon-only buttons should have an
aria-labelfor screen reader accessibility.♿ Suggested accessibility improvement
- <Button size="icon" class="!bg-white !text-neutral-900" `@click`="() => {}"> + <Button size="icon" class="!bg-white !text-neutral-900" aria-label="Info" `@click`="() => {}"> <i class="icon-[lucide--info] size-4" /> </Button>src/components/widget/layout/BaseModalLayout.vue (1)
218-230: Consider migrating layout styles to Tailwind utilities.Per coding guidelines, Vue components should avoid
<style>blocks. While these layout rules are more complex, most can be expressed with Tailwind:
height: 80vh→h-[80vh]width: 90vw→w-[90vw]max-width: 1280px→max-w-[1280px]aspect-ratio: 20/13→aspect-[20/13]The media query could use a responsive breakpoint prefix or a custom breakpoint defined in the theme.
🤖 Fix all issues with AI agents
In `@src/components/widget/layout/BaseModalLayout.vue`:
- Around line 20-28: The hide-left-panel Button in BaseModalLayout uses the
inverted condition `!notMobile && showLeftPanel`, which only renders on mobile;
update the condition to `notMobile && showLeftPanel` so the button appears on
non-mobile (desktop) when the left panel is visible, and apply the same fix to
the matching toggle condition elsewhere in the component (the other Button that
references notMobile and showLeftPanel) so toggleLeftPanel is available on
desktop.
- Around line 39-47: The v-if on the "show left panel" Button is inverted: it
currently uses "!notMobile && !showLeftPanel" so it only appears on mobile;
change the condition to "notMobile && !showLeftPanel" so the Button (component
named Button with aria-label t('g.showLeftPanel') and `@click`="toggleLeftPanel")
is rendered on desktop when the left panel is hidden.
In `@src/components/widget/panel/LeftSidePanel.vue`:
- Line 5: Replace the v-for key that currently uses the array index with a
stable unique identifier from each nav item: update the <template v-for="(item,
index) in navItems" :key="index"> usage to use a unique property such as item.id
or, for group items, item.title (or generate a stable id property on navItems if
missing); ensure any components or elements inside the loop reference the new
key and that navItems entries consistently expose the chosen unique field (e.g.,
add id to items lacking one).
In `@src/stores/assetsStore.ts`:
- Around line 402-410: The loop that prunes stale models currently iterates
directly over state.assets.keys() while deleting entries, which can mutate the
iterator; change it to first collect the keys into an array (e.g., const ids =
Array.from(state.assets.keys()) ) and then iterate over that array to call
state.assets.delete(id) for ids not in seenIds; update the block referencing
state.assets, seenIds, assetsArrayCache and preserve the
assetsArrayCache.delete(key) call afterwards.
- Around line 373-378: The current merge loop adds each asset to state.assets
and then immediately recreates the Map on every batch iteration (see the loop
that iterates over newAssets, uses seenIds.add(asset.id) and
state.assets.set(asset.id, asset), followed by state.assets = new
Map(state.assets)); to avoid repeated reactive triggers, move the Map recreation
(state.assets = new Map(state.assets)) out of the per-asset loop and perform it
once after the entire batching/while loop and pruning logic completes so
reactivity is triggered only once per full update; if you intentionally need
per-asset reactivity for UI reasons, document that decision near the loop and
keep the current placement.
- Use stable keys in v-for loop (title or id instead of index) - Avoid mutating Map while iterating by collecting stale IDs first Amp-Thread-ID: https://ampcode.com/threads/T-019bed55-d7cb-73d9-aa76-b6e83b027829 Co-authored-by: Amp <amp@ampcode.com>
DrJKL
added
the
New Browser Test Expectations
|
Updating Playwright Expectations |
github-actions
bot
removed
the
New Browser Test Expectations
christian-byrne
approved these changes
Jan 24, 2026
DrJKL
added
needs-backport
|
1 similar comment
|
DrJKL
added a commit
that referenced
this pull request
Jan 25, 2026
Refactors modal dialog layouts for improved flexibility and consistency. **Changes:** - Add dedicated slot for left panel header title with dynamic content/icons - Consolidate side panel rendering within `BaseModalLayout` - Remove redundant `PanelHeader` and `RightSidePanel` components - Apply `select-none` to text elements to prevent accidental selection --------- Co-authored-by: Amp <amp@ampcode.com>
This was referenced Jan 25, 2026
DrJKL
added a commit
that referenced
this pull request
Jan 25, 2026
Backport of #8041 to `cloud/1.37`. **Original PR:** #8041 ## Changes - Consolidated ManagerDialogContent, ManagerHeader, ManagerNavSidebar, RegistrySearchBar, and SearchFilterDropdown into single ManagerDialog component - Added v-model:rightPanelOpen to BaseModalLayout for external panel state control - Removed unused useResponsiveCollapse composable, TabItem and SearchOption types - Moved action buttons (Install All/Update All) from header-right-area to contentFilter area ## Conflict Resolution - **GlobalDialog.vue**: Kept settings-dialog-workspace styles, removed manager-dialog styles (now in BaseModalLayout) - **BaseModalLayout.vue**: Kept HEAD version (from #8256 backport) which has improved grid-based layout with accessibility features ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8306-backport-cloud-1-37-refactor-Manager-dialog-simplification-2f36d73d365081078518cc62ea736708) by [Unito](https://www.unito.io) Co-authored-by: Jin Yi <jin12cc@gmail.com> Co-authored-by: GitHub Action <action@github.com> Co-authored-by: github-actions <github-actions@github.com>
DrJKL
added a commit
that referenced
this pull request
Jan 25, 2026
Refactors modal dialog layouts for improved flexibility and consistency. **Changes:** - Add dedicated slot for left panel header title with dynamic content/icons - Consolidate side panel rendering within `BaseModalLayout` - Remove redundant `PanelHeader` and `RightSidePanel` components - Apply `select-none` to text elements to prevent accidental selection --------- Co-authored-by: Amp <amp@ampcode.com>
DrJKL
added a commit
that referenced
this pull request
Jan 25, 2026
Backport of #8256 to cloud/1.37 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8308-backport-cloud-1-37-Updates-More-Modal-Modification-2f36d73d365081939779c594614e3a1b) by [Unito](https://www.unito.io) Co-authored-by: Amp <amp@ampcode.com>
This was referenced Jan 28, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Refactors modal dialog layouts for improved flexibility and consistency.
Changes:
BaseModalLayoutPanelHeaderandRightSidePanelcomponentsselect-noneto text elements to prevent accidental selection