Skip to content

feat: Agent sessions UI improvements - #649

Merged
ilyabo merged 3 commits into
mainfrom
feat--Agent-sessions-UI-improvements
May 20, 2026
Merged

ilyabo merged 3 commits into
mainfrom
feat--Agent-sessions-UI-improvements

Conversation

@ilyabo

@ilyabo ilyabo commented May 20, 2026 •

Copy link
Copy Markdown
Collaborator

Summary by CodeRabbit

  • New Features

    • TabStrip component now supports customizable font sizes
    • Added ability to customize search dropdown content rendering
    • EditableText component now accepts custom styling options
    • New utility for cleaner error message display
  • Documentation

    • Updated UI component documentation with TabStrip guidance
  • Style & Refinements

    • Improved visual alignment and sizing across tabs, controls, and buttons
    • Enhanced text rendering consistency in tab labels and search dropdowns

Review Change Stack

@coderabbitai

coderabbitai Bot commented May 20, 2026 •

Copy link
Copy Markdown
Contributor
📝 Walkthrough

Walkthrough

This PR enhances the TabStrip component with fontSize customization and a renderSearchItemLabel callback for search dropdown rendering, reorganizes time/error utilities, adds style support to EditableText, and integrates these changes throughout the AI and UI core packages.

Changes

TabStrip Enhancement and UI Integration

Layer / File(s) Summary
Time and error utility functions
packages/utils/src/time.ts, packages/utils/src/errors.ts, packages/utils/src/index.ts
New formatDateTimeSimple formats dates as YYYY-MM-DD HH:mm; new getErrorMessageForDisplay normalizes error strings and removes query prefixes; exports consolidated into proper modules.
EditableText custom style support
packages/ui/src/components/editable-text.tsx
Component accepts optional style prop with conditional caretColor control based on editing state, enabling styled inline editing within TabStrip.
TabStrip context infrastructure and helpers
packages/ui/src/components/tab-strip.tsx
TabStripContextValue extended with fontSize and renderSearchItemLabel; useOptionalTabStripContext and font size style helpers added for consistent propagation across subcomponents.
SortableTab and drag overlay fontSize application
packages/ui/src/components/tab-strip.tsx
SortableTab applies computed fontSize to tab triggers and inline rename; TabDragOverlay accepts and applies fontSize prop for drag preview consistency.
Search dropdown and custom label rendering
packages/ui/src/components/tab-strip.tsx
TabStripSearchDropdown threads renderSearchItemLabel and fontSize into label rendering; DropdownTabItems implements renderLabel prop to customize visible labels across search results, open/closed groups, and empty states.
TabStripButton fontSize context integration
packages/ui/src/components/tab-strip.tsx
TabStripButton and TabStripNewButton read fontSize from context and merge into inline styles.
TabStripProps contract and root component
packages/ui/src/components/tab-strip.tsx
renderTabTitle removed and replaced with renderSearchItemLabel; fontSize prop added; TabStripRoot injects props into context and applies fontSize to root container.
AiCore session naming and UI styling
packages/ai-core/src/AiSlice.ts, packages/ai-core/src/components/SessionControls.tsx, packages/ai-core/src/components/AnalysisResult.tsx
AiSlice uses formatDateTimeSimple for default session names; SessionControls wires fontSize="0.75rem" and renderSearchItemLabel to TabStrip; AnalysisResult adjusts copy button sizing.
TabStrip documentation and final UI adjustments
packages/ui/README.md, apps/sqlrooms-cli-ui/src/workspace/ArtifactsContainerPanel.tsx, packages/webcontainer/src/components/CodeView.tsx
README documents fontSize and renderSearchItemLabel props; ArtifactsContainerPanel applies fontSize={13}; CodeView migrates from renderTabTitle to renderTabLabel.

🎯 4 (Complex) | ⏱️ ~75 minutes

Suggested reviewers

  • bdjulbic
  • mihajlo-stojkovic

🐰 A tabstrip walks into a bar, "fontSize me!" it cries,
With labels rendering soft and search results that comprise,
The EditableText in its finest style attire,
While AiCore sessions spark with time—a rabbit's desire! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 42.86% 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 'feat: Agent sessions UI improvements' accurately captures the main focus of the changeset, which consists of multiple UI-related adjustments across agent session components.
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--Agent-sessions-UI-improvements

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.

@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: 2

🧹 Nitpick comments (1)
packages/ui/README.md (1)

122-123: ⚡ Quick win

Consider adding a code example for renderSearchItemLabel.

The documentation mentions renderSearchItemLabel but doesn't show how to use it. A brief example would help users understand the callback signature and return type.

💡 Suggested example
<TabStrip
  tabs={tabs}
  openTabs={openTabs}
  selectedTabId={selectedTabId}
  renderSearchItemLabel={(tab) => (
    <div className="flex items-center gap-2">
      {tab.isLoading && <Spinner size="sm" />}
      <span>{tab.name}</span>
    </div>
  )}
/>
🤖 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 `@packages/ui/README.md` around lines 122 - 123, Add a short usage example
showing the renderSearchItemLabel callback on the TabStrip component to
demonstrate the callback signature and return value; update the README to
include a minimal JSX snippet that shows TabStrip with props (tabs, openTabs,
selectedTabId) and renderSearchItemLabel returning a small element (e.g., a
container with an optional Spinner and the tab.name) so readers can see how to
render custom row content and access tab properties.
🤖 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 `@packages/ui/README.md`:
- Around line 110-119: The README example uses fontSize="12px" but the
implementation in ArtifactsContainerPanel.tsx passes fontSize={13}, causing a
type mismatch; update either the example or the component to be consistent: if
TabStrip.fontSize expects a number (e.g., number pixels) change the README
example to use a numeric value (fontSize={13}) and document units in README, or
if it should accept CSS strings update the component/prop type in
ArtifactsContainerPanel.tsx/TabStrip to accept string | number and handle string
units internally; reference the TabStrip prop and the usage in
ArtifactsContainerPanel.tsx when making the change.

In `@packages/utils/src/errors.ts`:
- Line 13: The replacement currently removes the sequence "Query failed: Error:
" anywhere in msg; change the logic in the code that sets msg (the msg variable
assignment in packages/utils/src/errors.ts) so the cleanup only removes that
sequence when it appears at the start of the message — e.g., use a
start-anchored regex or a startsWith check and slice off the prefix — so only
leading "Query failed: Error: " is stripped.

---

Nitpick comments:
In `@packages/ui/README.md`:
- Around line 122-123: Add a short usage example showing the
renderSearchItemLabel callback on the TabStrip component to demonstrate the
callback signature and return value; update the README to include a minimal JSX
snippet that shows TabStrip with props (tabs, openTabs, selectedTabId) and
renderSearchItemLabel returning a small element (e.g., a container with an
optional Spinner and the tab.name) so readers can see how to render custom row
content and access tab properties.
🪄 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: defaults

Review profile: CHILL

Plan: Pro

Run ID: 004183d0-84b7-4b94-832f-5619ffedd05f

📥 Commits

Reviewing files that changed from the base of the PR and between 8537413 and 2aa7830.

📒 Files selected for processing (11)
  • apps/sqlrooms-cli-ui/src/workspace/ArtifactsContainerPanel.tsx
  • packages/ai-core/src/AiSlice.ts
  • packages/ai-core/src/components/AnalysisResult.tsx
  • packages/ai-core/src/components/SessionControls.tsx
  • packages/ui/README.md
  • packages/ui/src/components/editable-text.tsx
  • packages/ui/src/components/tab-strip.tsx
  • packages/utils/src/errors.ts
  • packages/utils/src/index.ts
  • packages/utils/src/time.ts
  • packages/webcontainer/src/components/CodeView.tsx

Comment thread packages/ui/README.md
Comment thread packages/utils/src/errors.ts
@ilyabo
ilyabo merged commit 8b7e71e into main May 20, 2026
4 checks passed
@ilyabo
ilyabo deleted the feat--Agent-sessions-UI-improvements branch May 20, 2026 19:56
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