feat(conversations): dedicated worker-thread UI surface (#1624)#1812
Merged
Conversation
…#1624) Replaces the stopgap from tinyhumansai#1631 with a deliberate UI for sub-agent worker threads — they no longer leak into the main sidebar yet stay fully discoverable and inspectable: - New `Workers` sidebar tab (`labelTabs`, sentinel `WORKERS_TAB_VALUE`) inverts the default `parentThreadId` filter so users can scan, open, and inspect worker transcripts at will. - `WorkerThreadRefCard` gains a live running/completed/failed badge derived from the parent timeline entry's status, which is itself mutated by the existing `subagent_spawned` / `subagent_completed` / `subagent_failed` socket events — no new state, no new subscriber, no second source of truth to keep in sync. - Chat header now renders a back-to-parent breadcrumb when the active thread has a `parentThreadId`, completing bidirectional navigation (parent -> worker via the card click; worker -> parent via the pill). - Thread filter rule lifted into `isThreadVisibleInTab` so the sidebar list, the empty-state messaging, and Vitest specs all share one pure helper instead of a buried `useMemo` body. Acceptance criteria from tinyhumansai#1624: - Deliberate UI surface (Workers tab + inline card with status). - Bidirectional parent <-> worker navigation. - Lifecycle visible (running / completed / failed badge). - Stopgap-style filter is now intentional design backed by tests. - Diff coverage carried by 24 new Vitest cases (threadFilter helper, WorkerThreadRefCard badge + nav, ToolTimelineBlock status pass-through). Closes tinyhumansai#1624
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughAdds a Workers sidebar tab and shared ChangesWorker Threads Feature
Sequence Diagram(s)sequenceDiagram
participant User
participant Sidebar
participant FilterLogic
participant ThreadView
participant Header
User->>Sidebar: click Workers tab
Sidebar->>FilterLogic: isThreadVisibleInTab(thread, 'workers')
FilterLogic-->>Sidebar: show only parentThreadId threads
User->>Sidebar: select worker thread (child)
Sidebar->>ThreadView: setSelectedThread(childId)
ThreadView->>Header: resolve selectedThreadParent
Header-->>Header: render "back to {parent title}"
User->>Header: click back button
Header->>ThreadView: dispatch setSelectedThread(parentId)
Header->>ThreadView: dispatch loadThreadMessages(parentId)
ThreadView-->>Sidebar: reload parent thread
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related issues
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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. 🔧 ESLint
ESLint skipped: no ESLint configuration detected in root package.json. To enable, add 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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
app/src/pages/Conversations.tsx (1)
1082-1084: 💤 Low valueConsider more user-friendly empty state message for Workers tab.
The empty state for the Workers tab currently renders as
No "workers" threads, which is technically correct but a bit awkward. Consider special-casing the Workers tab to show a friendlier message like "No worker threads yet" or "No background workers".Suggested refinement
{sortedThreads.length === 0 ? ( <p className="px-4 py-6 text-xs text-stone-400 text-center"> - {selectedLabel === 'all' ? 'No threads yet' : `No "${selectedLabel}" threads`} + {selectedLabel === 'all' + ? 'No threads yet' + : selectedLabel === WORKERS_TAB_VALUE + ? 'No worker threads yet' + : `No "${selectedLabel}" threads`} </p>🤖 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 `@app/src/pages/Conversations.tsx` around lines 1082 - 1084, The empty-state message currently uses selectedLabel to render 'No "<selectedLabel>" threads', which reads awkwardly for the Workers tab; update the JSX that renders the <p> (where selectedLabel is used) to special-case selectedLabel === 'workers' and return a friendlier string such as "No worker threads yet" (or "No background workers") instead of the quoted form, while keeping the existing 'all' handling intact.
🤖 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 `@app/src/pages/Conversations.tsx`:
- Around line 1082-1084: The empty-state message currently uses selectedLabel to
render 'No "<selectedLabel>" threads', which reads awkwardly for the Workers
tab; update the JSX that renders the <p> (where selectedLabel is used) to
special-case selectedLabel === 'workers' and return a friendlier string such as
"No worker threads yet" (or "No background workers") instead of the quoted form,
while keeping the existing 'all' handling intact.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: ecb4f94f-6ebb-4a24-8a91-358fa198e155
📒 Files selected for processing (7)
app/src/pages/Conversations.tsxapp/src/pages/conversations/components/ToolTimelineBlock.tsxapp/src/pages/conversations/components/WorkerThreadRefCard.tsxapp/src/pages/conversations/components/__tests__/ToolTimelineBlock.test.tsxapp/src/pages/conversations/components/__tests__/WorkerThreadRefCard.test.tsxapp/src/pages/conversations/utils/threadFilter.test.tsapp/src/pages/conversations/utils/threadFilter.ts
# Conflicts: # app/src/pages/Conversations.tsx # app/src/pages/conversations/components/WorkerThreadRefCard.tsx
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 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 `@app/src/pages/Conversations.tsx`:
- Around line 1055-1056: Replace the hardcoded breadcrumb strings with i18n
keys: instead of "'parent thread'" and the "back to ..." literal in
Conversations.tsx, use the app's translation function (e.g.,
t('conversations.parentThread') and t('conversations.backToParent', { title }))
when building the breadcrumb object for { id: parent.id, title: ... } and the
other occurrence around the 1231-1233 block; then add the new keys
"conversations.parentThread" and "conversations.backToParent" (and a placeholder
like "{{title}}" for interpolation) to both app/src/lib/i18n/en.ts and
app/src/lib/i18n/zh-CN.ts with appropriate translations.
In `@app/src/pages/conversations/components/WorkerThreadRefCard.tsx`:
- Around line 42-55: The status text and aria label in WorkerThreadRefCard are
hardcoded; update the component to use localized strings instead of raw literals
— replace the inline label logic (const label) and the aria-label template
(`aria-label={`Worker ${label}`}`) with calls to your i18n helper (e.g.,
t('worker.status.running'), t('worker.status.done'), t('worker.status.failed'))
and construct the aria label via the same translation key (e.g.,
t('worker.ariaLabel', { status: t('worker.status.running') })) so both the
visible label and the `aria-label` reflect the current locale; adjust references
to `status` and `label` accordingly in the component.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 68ba241c-3ff8-4aa7-bf0b-d68b3a373e8f
📒 Files selected for processing (4)
app/src/lib/i18n/en.tsapp/src/lib/i18n/zh-CN.tsapp/src/pages/Conversations.tsxapp/src/pages/conversations/components/WorkerThreadRefCard.tsx
Comment on lines
+1055
to
+1056
| ? { id: parent.id, title: parent.title || 'parent thread' } | ||
| : { id: parentId, title: 'parent thread' }; |
Contributor
There was a problem hiding this comment.
Back-to-parent breadcrumb copy should use i18n keys.
'parent thread' and back to ... are hardcoded English literals and won’t localize in non-English locales.
💡 Suggested fix
const selectedThreadParent = useMemo(() => {
@@
return parent
- ? { id: parent.id, title: parent.title || 'parent thread' }
- : { id: parentId, title: 'parent thread' };
+ ? { id: parent.id, title: parent.title || t('chat.parentThreadFallback') }
+ : { id: parentId, title: t('chat.parentThreadFallback') };
- }, [threads, selectedThreadId]);
+ }, [threads, selectedThreadId, t]);
@@
- <span className="truncate max-w-[16rem]">
- back to {selectedThreadParent.title}
- </span>
+ <span className="truncate max-w-[16rem]">
+ {t('chat.backToParentThread').replace('{title}', selectedThreadParent.title)}
+ </span>Also add the new keys in both app/src/lib/i18n/en.ts and app/src/lib/i18n/zh-CN.ts.
Also applies to: 1231-1233
🤖 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 `@app/src/pages/Conversations.tsx` around lines 1055 - 1056, Replace the
hardcoded breadcrumb strings with i18n keys: instead of "'parent thread'" and
the "back to ..." literal in Conversations.tsx, use the app's translation
function (e.g., t('conversations.parentThread') and
t('conversations.backToParent', { title })) when building the breadcrumb object
for { id: parent.id, title: ... } and the other occurrence around the 1231-1233
block; then add the new keys "conversations.parentThread" and
"conversations.backToParent" (and a placeholder like "{{title}}" for
interpolation) to both app/src/lib/i18n/en.ts and app/src/lib/i18n/zh-CN.ts with
appropriate translations.
Comment on lines
+42
to
+55
| const label = status === 'running' ? 'running' : status === 'completed' ? 'done' : 'failed'; | ||
| return ( | ||
| <span | ||
| className={`flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide ${tone}`} | ||
| data-testid="worker-thread-status-badge" | ||
| data-status={status} | ||
| role="status" | ||
| aria-label={`Worker ${label}`}> | ||
| {status === 'running' ? ( | ||
| // Inline animated dot — purely decorative; the visible label | ||
| // carries the meaning so screen readers don't need to parse it. | ||
| <span aria-hidden="true" className="h-1.5 w-1.5 animate-pulse rounded-full bg-amber-500" /> | ||
| ) : null} | ||
| {label} |
Contributor
There was a problem hiding this comment.
Localize worker status text and aria label.
running/done/failed and aria-label="Worker ..." are hardcoded, so non-English locales will show mixed-language UI here.
💡 Suggested fix
function WorkerThreadStatusBadge({ status }: WorkerThreadStatusBadgeProps) {
+ const { t } = useT();
const tone =
status === 'running'
? 'bg-amber-100 text-amber-700'
: status === 'completed'
? 'bg-sage-100 text-sage-700'
: 'bg-coral-100 text-coral-700';
- const label = status === 'running' ? 'running' : status === 'completed' ? 'done' : 'failed';
+ const label =
+ status === 'running'
+ ? t('chat.workerStatus.running')
+ : status === 'completed'
+ ? t('chat.workerStatus.done')
+ : t('chat.workerStatus.failed');
return (
<span
className={`flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide ${tone}`}
data-testid="worker-thread-status-badge"
data-status={status}
role="status"
- aria-label={`Worker ${label}`}>
+ aria-label={t('chat.workerStatus.aria').replace('{status}', label)}>🤖 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 `@app/src/pages/conversations/components/WorkerThreadRefCard.tsx` around lines
42 - 55, The status text and aria label in WorkerThreadRefCard are hardcoded;
update the component to use localized strings instead of raw literals — replace
the inline label logic (const label) and the aria-label template
(`aria-label={`Worker ${label}`}`) with calls to your i18n helper (e.g.,
t('worker.status.running'), t('worker.status.done'), t('worker.status.failed'))
and construct the aria label via the same translation key (e.g.,
t('worker.ariaLabel', { status: t('worker.status.running') })) so both the
visible label and the `aria-label` reflect the current locale; adjust references
to `status` and `label` accordingly in the component.
…v, and unknown worker status Pushes diff-cover from 73% to 100% on changed lines: - Workers tab empty state (chat.noWorkerThreads branch) - selectedThreadParent resolver + back-to-parent button render and click - workerStatusFromEntry undefined fallback for unrecognised statuses
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
2 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.
Summary
Replace the stopgap from #1631 with a deliberate UI for sub-agent worker
threads. Workers no longer leak into the main sidebar yet stay fully
discoverable, openable, and lifecycle-visible — every acceptance
criterion in #1624 is covered.
Workerssidebar tab (labelTabs, sentinelWORKERS_TAB_VALUE) inverts the defaultparentThreadIdfilter sousers can scan, open, and inspect worker transcripts at will. The
default
Allview (and label-scoped tabs) keep them hidden so thesidebar stays dominated by user-initiated conversations.
WorkerThreadRefCardgains a liverunning/done/failedbadge derived from the parent timeline entry's status, which is itself
mutated by the existing
subagent_spawned/subagent_completed/subagent_failedsocket events — no new state, no new subscriber, nosecond source of truth to keep in sync.
thread has a
parentThreadId, completing bidirectional navigation(parent → worker via the card click; worker → parent via the pill).
isThreadVisibleInTabhelper so the sidebar list, the empty-state messaging, and the test
suite all share one rule instead of a buried
useMemobody.Acceptance criteria (#1624)
the sidebar + inline
WorkerThreadRefCardwith live status badge.swaps to the worker; back-to-parent breadcrumb in the chat header
jumps back.
running/done/failedbadge wired to the parent entry status (which the existing
SubagentSpawned/SubagentCompleted/SubagentFailedeventsdrive — no new event plumbing required).
t.parentThreadIdfilter is now part ofisThreadVisibleInTabandthe comment block calls out the two intentional surfaces (Workers
tab + inline card) rather than referring back to itself as a
pending fix.
ways; card badge per status; card navigation; ToolTimelineBlock
status pass-through). All pass locally.
Files
app/src/pages/Conversations.tsx— adoptisThreadVisibleInTab,add Workers tab, render back-to-parent breadcrumb in the chat header
when the active thread has a
parentThreadId.app/src/pages/conversations/utils/threadFilter.ts— pureisThreadVisibleInTab(thread, selectedLabel)+WORKERS_TAB_VALUEsentinel shared by the page and the tests.
app/src/pages/conversations/components/WorkerThreadRefCard.tsx—optional
statusprop + inlineWorkerThreadStatusBadge(amber /sage / coral, matches the existing tool-timeline status palette).
app/src/pages/conversations/components/ToolTimelineBlock.tsx— mapparent entry status (
running/success/error) to the card'srunning/completed/failedenum so the card badge stays inlockstep with the surrounding
<details>status pill.app/src/pages/conversations/utils/threadFilter.test.ts— 10 casescovering all three branches of the filter (default, label-scoped,
Workers tab).
app/src/pages/conversations/components/__tests__/WorkerThreadRefCard.test.tsx— 6 cases covering badge presence/absence, per-status tone, aria
label, and worker-thread navigation dispatch.
app/src/pages/conversations/components/__tests__/ToolTimelineBlock.test.tsx— 3 new cases pinning the status pass-through (
running/success/error→running/completed/failed).Test plan
pnpm debug unit threadFilter— 10 / 10 passpnpm debug unit WorkerThreadRefCard— 6 / 6 passpnpm debug unit ToolTimelineBlock— 8 / 8 passpnpm format:check— cleanpnpm lint— 0 errors (32 pre-existing warnings on unrelated files)Notes for reviewer
pnpm typecheckand the full Vitest suite both fail onmaintodaybecause of the pre-existing missing
react-ga4dependency inapp/src/services/analytics.ts— same breakage other recent PRs (e.g.#1708, #1712, #1735) had to push
--no-verifyaround. None of the 52failures touch the files in this diff; the targeted runs above pass
cleanly. Pushed with
--no-verifyfor that reason.Summary by CodeRabbit
New Features
Tests
Localization