feat(web): show thread shortId across main app surfaces

[pedroscosta]

Summary

• Surface per-org thread shortId in the main-app UI now that it's used in URLs but never visible.
• Inbox list item shows #123 muted before the avatar; chips, breadcrumbs (thread + archive), related threads, search results, and the playground sidebar show it muted after the title.
• Threads with a null shortId (legacy rows) render nothing — no placeholder, no extra spacing.

Test plan

• Threads inbox: #123 appears muted before the avatar; legacy threads render cleanly.
• Open a thread: breadcrumb shows Thread name #123.
• Open an archived thread: breadcrumb shows Thread name #123.
• Hover/inline ThreadChip shows Name #123.
• Related Threads sidebar on the thread page shows #123 after each name.
• Search results page shows #123 after each thread name.
• Playground sidebar shows #123 after each thread name.
• bun run --filter web typecheck passes.

🤖 Generated with Claude Code

---

Summary by cubic

Show the per-org thread shortId across the app so the URL ID is visible. Displays a muted “#123” near thread titles and hides it for legacy threads.

• New Features

  • Threads inbox: show #123 before the avatar.
  • Breadcrumbs (thread and archive), thread chips, related threads, search results, and playground sidebar: show after the name.
  • Do not render anything when shortId is null.

• Bug Fixes

  • Playground threads list: correct empty state when there are no threads.

^{Written for commit e072ce9. Summary will update on new commits. Review in cubic}

Summary by CodeRabbit

• New Features
  • Thread short identifiers now display throughout the application, including in thread chips, search results, thread lists, breadcrumbs, and related threads sections. When available, identifiers appear with a # prefix, providing users with a quick, consistent way to reference and identify threads across the interface.

[coderabbitai]

📝 Walkthrough

Walkthrough

Display of thread short identifiers (prefixed with #) is added across multiple UI components throughout the web application. The short identifier appears conditionally when the thread's shortId property is non-null, maintaining existing layouts when unavailable.

Changes

Cohort / File(s)	Summary
Chip Components apps/web/src/components/chips.tsx	Updated BaseThreadChip and ThreadChip to render thread name with styled foreground color and conditionally append shortId as secondary text.
Thread List Displays apps/web/src/components/threads/related-threads-section.tsx, apps/web/src/routes/app/_workspace/_main/threads/index.tsx, apps/web/src/routes/app/_workspace/_main/playground/index.tsx	Added conditional display of shortId prefixed with # alongside thread names in list items and search results.
Thread Page Headers apps/web/src/routes/app/_workspace/_main/threads/$id/index.tsx, apps/web/src/routes/app/_workspace/_main/threads/archive/$id.tsx, apps/web/src/routes/app/_workspace/_main/search/index.tsx	Updated breadcrumb and header layouts to display thread name in flex rows with optional shortId suffix using secondary text styling.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~15 minutes

Possibly related PRs

• feat(web): add BaseThreadChip and ThreadChip components #199: Directly modifies the BaseThreadChip and ThreadChip components that are updated with shortId display logic in this PR.
• feat(web): add routes for open and assigned threads #184: Changes the same thread breadcrumb files (threads/$id/index.tsx and archive/$id.tsx) in this PR to render breadcrumb styling and content.
• feat(web): add breadcrumbs to individual thread page #38: Adds breadcrumb structure to thread page headers that this PR subsequently enhances with styled thread names and optional shortId display.

Suggested reviewers

• danielmoural

Poem

🐰 A thread short ID springs to view,
With hashtags neat and styling true,
From chips to breadcrumbs, all align,
Each component shows its sign,
The threads shine bright in every line!

🚥 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 accurately describes the main change: adding thread shortId display across multiple UI surfaces in the web app.
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.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ 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/web-thread-shortid-ui

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@apps/web/src/routes/app/_workspace/_main/playground/index.tsx`:
- Around line 106-129: Remove the unsafe "as any[]" casts around threads: use
the inferred typed value from useLiveQuery (threads) directly by replacing the
casts with proper null-coalescing/optional chaining; e.g., use threads?.map(...)
or (threads ?? []).map(...) for the mapping and change the empty check to use
threads?.length or (threads ?? []).length (e.g., (threads?.length ?? 0) === 0)
so handleSelectThread, selectedThreadId, and the button rendering keep strict
typing without any "as any[]" assertions.

🪄 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: 5fe992ab-9516-40c5-b3e1-8d292c8ce51b

📥 Commits

Reviewing files that changed from the base of the PR and between 63bb281 and eb1fd5a.

📒 Files selected for processing (7)

• apps/web/src/components/chips.tsx
• apps/web/src/components/threads/related-threads-section.tsx
• apps/web/src/routes/app/_workspace/_main/playground/index.tsx
• apps/web/src/routes/app/_workspace/_main/search/index.tsx
• apps/web/src/routes/app/_workspace/_main/threads/$id/index.tsx
• apps/web/src/routes/app/_workspace/_main/threads/archive/$id.tsx
• apps/web/src/routes/app/_workspace/_main/threads/index.tsx

[cubic-dev-ai]

No issues found across 7 files

Confidence score: 5/5

• Automated review surfaced no issues in the provided summaries.
• No files require special attention.

_{Auto-approved: This is a low-risk UI enhancement that surfaces an existing data field (shortId) across several application views. It contains no core logic changes, migrations, or architectural shifts.}

[cubic-dev-ai]

0 issues found across 1 file (changes from recent commits).

_{Auto-approved: Cosmetic UI changes to display the thread shortId in various components. No changes to core business logic or data integrity.}