feat: add collapsible tag limit to TagInput

[impoiler]

Summary

Adds collapsible tag support to the TagInput component and applies it to the keyword lists on the Complexity Router page. When a keyword list exceeds a configurable limit, tags beyond that limit are hidden behind a gradient overlay with a "Show more" toggle, keeping the UI compact while still allowing full access to all tags.

Changes

• Added collapsedTagLimit and expandButtonTestId props to TagInput. When collapsedTagLimit is provided, the component renders in a collapsible layout: tags beyond the limit are hidden with a fade gradient, and "Show more" / "Show less" buttons toggle the expanded state. The collapsed state auto-resets when the tag count drops back to or below the limit.
• Set KEYWORD_COLLAPSED_LIMIT = 8 on the Complexity Router page and passed it along with a expandButtonTestId to each keyword TagInput.
• Standardized border radius tokens from rounded-lg/rounded-md/rounded-full to rounded-sm across the Complexity Router page for visual consistency.
• Reformatted index.html inline shell skeleton from a single minified line to readable, indented HTML and CSS.

Type of change

• Bug fix
• Feature
• Refactor
• Documentation
• Chore/CI

Affected areas

• Core (Go)
• Transports (HTTP)
• Providers/Integrations
• Plugins
• UI (React)
• Docs

How to test

cd ui
pnpm i || npm i
pnpm test || npm test
pnpm build || npm run build

1. Navigate to the Complexity Router page.
2. Add more than 8 keywords to any keyword list.
3. Verify that tags beyond 8 are hidden with a gradient overlay and a "Show more" button appears.
4. Click "Show more" and confirm all tags are visible with a "Show less" button.
5. Click "Show less" and confirm the list collapses again.
6. Remove tags until 8 or fewer remain and confirm the list stays expanded without the toggle controls.

Screenshots/Recordings

Before/after screenshots of the keyword lists with collapse behavior recommended.

Breaking changes

• Yes
• No

Related issues

Security considerations

None.

Checklist

• I read docs/contributing/README.md and followed the guidelines
• I added/updated tests where appropriate
• I updated documentation where needed
• I verified builds succeed (Go and UI)
• I verified the CI pipeline passes locally if applicable

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: ea39364f-86b7-43d9-b59d-cc0ba92dc96e

📥 Commits

Reviewing files that changed from the base of the PR and between 8c7f9db and 3f6bbd6.

📒 Files selected for processing (4)

• ui/app/workspace/audit-logs/page.tsx
• ui/app/workspace/complexity-router/page.tsx
• ui/components/ui/tagInput.tsx
• ui/components/ui/truncatedLabel.tsx

✅ Files skipped from review due to trivial changes (2)

• ui/components/ui/truncatedLabel.tsx
• ui/app/workspace/audit-logs/page.tsx

🚧 Files skipped from review as they are similar to previous changes (2)

• ui/app/workspace/complexity-router/page.tsx
• ui/components/ui/tagInput.tsx

---

📝 Walkthrough

Summary by CodeRabbit

• New Features
  • Long tag lists can now collapse and expand, making dense tag inputs easier to scan.
  • The complexity page now uses a more compact card and section layout, with an improved expand control and updated footer layering.
• Style
  • Several UI elements were refined with smaller corner radii for a tighter visual appearance.
• Bug Fixes
  • Minor page structure and export adjustments help keep key workspace screens rendering consistently.

Walkthrough

The PR adds collapsible keyword tags to the Complexity Router’s TagInput, wires the new props into the page, updates several router card radii and the docs link, and includes two small file cleanup edits.

Changes

Keyword tag collapse and router UI updates

Layer / File(s)	Summary
TagInput collapse behavior ui/components/ui/tagInput.tsx	TagInput adds optional collapse props, tracks visible and hidden tags, and renders expand/collapse controls around the tag list.
Complexity Router wiring and styling ui/app/workspace/complexity-router/page.tsx	The page defines the collapse limit, passes it into keyword TagInput, switches the docs button href, and changes several card and banner border radius classes.
Supporting file cleanup ui/app/workspace/audit-logs/page.tsx, ui/components/ui/truncatedLabel.tsx	AuditLogsPage keeps the same logic with a closing-brace adjustment, and TruncatedLabel is explicitly exported from its module.

Sequence Diagram(s)

sequenceDiagram
  participant ComplexityRouterPage
  participant TagInput
  participant User
  ComplexityRouterPage->>TagInput: passes collapsedTagLimit and expandButtonTestId
  TagInput->>User: renders visible tags and expand control
  User->>TagInput: clicks "Show more"
  TagInput->>User: expands hidden tags
  User->>TagInput: clicks "Show less"
  TagInput->>User: collapses back to the limit

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

A bunny hopped through tags so neat,
Then clicked “Show more” — a tiny treat. 🐰
The cards now wear a softer round,
And docs links hop where they are found.

🚥 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
Title check	✅ Passed	The title clearly describes the main change: adding collapsible tag support to TagInput.
Description check	✅ Passed	The description follows the template closely and includes the required summary, changes, testing, and impact sections.
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.

✨ 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 06-26-refactor_workspace_complexity-router_page_ui_changes

---

_{Comment @coderabbitai help to get the list of available commands.}

[impoiler]

• feat: add collapsible tag limit to TagInput #4730 👈 (View in Graphite)
• fix: update audit logs page layout classes and add newline at EOF #4719
• refactor: extract TruncatedLabel component and replace inline truncation logic #4716
• feat: add TruncatedLabel component with tooltip on overflow #4715
• fix: use parseAsSafeArrayOf for logs page array query params to handle special characters in URLs #4714
• dev

This stack of pull requests is managed by Graphite. Learn more about stacking.

[greptile-apps]

Confidence Score: 4/5

The complexity-router wiring and visual changes are solid, but the collapsed-state keyboard and input interactions in TagInput have open edge cases that affect user-visible behaviour.

The collapsible layout in TagInput introduces a state where users can interact with the input (type a tag, press Enter, or press Backspace) while tags are hidden, and receive no reliable visual feedback. Adding a tag while collapsed silently places it in the invisible portion of the list; the only signal is the "Show N more" counter incrementing. These interactions remain unguarded in the final diff.

ui/components/ui/tagInput.tsx — the collapsed-state interaction paths need review before merging

Important Files Changed

Filename	Overview
ui/components/ui/tagInput.tsx	Adds collapsible layout behind two separate render paths; open edge cases remain around hidden-tag interactions (Backspace on invisible tags, no visual feedback when adding while collapsed, fixed h-[75px] height in expanded state)
ui/app/workspace/complexity-router/page.tsx	Correctly wires KEYWORD_COLLAPSED_LIMIT and expandButtonTestId into TagInput; adds z-10 to sticky footer to prevent tag content from overlaying it; all existing data-testid attributes are preserved
ui/app/workspace/audit-logs/page.tsx	Trailing newline removed — no functional change
ui/components/ui/truncatedLabel.tsx	Trailing newline removed — no functional change

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[TagInput renders] --> B{collapsedTagLimit\nprovided?}
    B -- No --> C[Simple flat layout\nall tags + input inline]
    B -- Yes --> D{value.length >\ncollapsedTagLimit?}
    D -- No --> E[Collapsible layout\nall tags visible\nno collapse UI]
    D -- Yes --> F{tagsExpanded?}
    F -- false\n= isCollapsed --> G[Collapsed view\nfirst N tags + gradient\nShow more button + dimmed input]
    F -- true --> H[Expanded view\nall tags visible\nShow less button]
    G -- Click Show more --> H
    H -- Click Show less --> G
    H -- Remove tag until\ncount <= limit --> I[useEffect fires\nsetTagsExpanded false]
    I --> E
    G -- Backspace in empty input --> J[⚠ Removes last hidden tag\nno visual feedback]
    G -- Type + Enter --> K[⚠ New tag appended\nto hidden portion\nno badge appears]

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
    A[TagInput renders] --> B{collapsedTagLimit\nprovided?}
    B -- No --> C[Simple flat layout\nall tags + input inline]
    B -- Yes --> D{value.length >\ncollapsedTagLimit?}
    D -- No --> E[Collapsible layout\nall tags visible\nno collapse UI]
    D -- Yes --> F{tagsExpanded?}
    F -- false\n= isCollapsed --> G[Collapsed view\nfirst N tags + gradient\nShow more button + dimmed input]
    F -- true --> H[Expanded view\nall tags visible\nShow less button]
    G -- Click Show more --> H
    H -- Click Show less --> G
    H -- Remove tag until\ncount <= limit --> I[useEffect fires\nsetTagsExpanded false]
    I --> E
    G -- Backspace in empty input --> J[⚠ Removes last hidden tag\nno visual feedback]
    G -- Type + Enter --> K[⚠ New tag appended\nto hidden portion\nno badge appears]

Loading

_{Reviews (3): Last reviewed commit: "refactor: workspace/complexity-router pa..." | Re-trigger Greptile}

[coderabbitai]

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 `@ui/components/ui/tagInput.tsx`:
- Around line 21-24: Normalize the new public `collapsedTagLimit` prop in
`TagInput` before using it for collapse logic, since `canCollapse`,
`visibleTags`, and `hiddenTagCount` currently assume a valid positive integer.
In `tagInput.tsx`, clamp the incoming limit to a positive integer once, then
base the `isCollapsed`/`visibleTags` slice and hidden-count math on that
normalized value instead of the raw prop. This will keep `TagInput` from
producing invalid states when `collapsedTagLimit` is `0`, negative, or
fractional.

🪄 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 Plus

Run ID: 7245a848-bdff-46ae-b4fb-cd8b7ae3aa7c

📥 Commits

Reviewing files that changed from the base of the PR and between 3ab32b4 and 8c7f9db.

📒 Files selected for processing (4)

• ui/app/workspace/audit-logs/page.tsx
• ui/app/workspace/complexity-router/page.tsx
• ui/components/ui/tagInput.tsx
• ui/components/ui/truncatedLabel.tsx

[akshaydeo]

Merge activity

• Jun 26, 1:47 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• Jun 26, 1:53 PM UTC: Graphite rebased this pull request as part of a merge.
• Jun 26, 1:54 PM UTC: @akshaydeo merged this pull request with Graphite.

The base branch was changed.