From eb1fd5a3998547e0333f72564d50e8d1a1158f48 Mon Sep 17 00:00:00 2001
From: Pedro Costa <scosta.pedro.manoel@gmail.com>
Date: Wed, 29 Apr 2026 14:22:11 -0300
Subject: [PATCH 1/2] feat(web): show thread shortId across main app surfaces

Surfaces the per-org thread shortId in the threads inbox, breadcrumbs
(thread + archive), thread chips, related threads, search results, and
the playground sidebar. Inbox keeps the id before the avatar; everywhere
else it trails the title as muted "#123".

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 apps/web/src/components/chips.tsx             | 16 +++++++-
 .../threads/related-threads-section.tsx       |  5 +++
 .../app/_workspace/_main/playground/index.tsx | 37 ++++++++++++-------
 .../app/_workspace/_main/search/index.tsx     |  5 +++
 .../_workspace/_main/threads/$id/index.tsx    |  9 ++++-
 .../_workspace/_main/threads/archive/$id.tsx  |  9 ++++-
 .../app/_workspace/_main/threads/index.tsx    |  5 +++
 7 files changed, 68 insertions(+), 18 deletions(-)

diff --git a/apps/web/src/components/chips.tsx b/apps/web/src/components/chips.tsx
index d0402ecf..c9790b2a 100644
--- a/apps/web/src/components/chips.tsx
+++ b/apps/web/src/components/chips.tsx
@@ -46,7 +46,12 @@ export function BaseThreadChip({
         fallback={thread.author?.name}
         src={thread.author?.user?.image ?? undefined}
       />
-      {thread.name}
+      <span className="text-foreground-primary">{thread.name}</span>
+      {thread.shortId != null && (
+        <span className="text-foreground-secondary tabular-nums">
+          #{thread.shortId}
+        </span>
+      )}
     </BaseButton>
   );
 }
@@ -77,7 +82,14 @@ export function ThreadChip({
       />
       <HoverCardContent className="max-w-96 w-full flex flex-col gap-3">
         <div className="flex flex-col gap-1">
-          <div className="font-medium text-sm">{thread.name}</div>
+          <div className="font-medium text-sm flex items-center gap-1.5">
+            <span className="text-foreground-primary">{thread.name}</span>
+            {thread.shortId != null && (
+              <span className="text-foreground-secondary tabular-nums font-normal">
+                #{thread.shortId}
+              </span>
+            )}
+          </div>
           <div className="flex items-center gap-2">
             <Avatar
               variant="user"
diff --git a/apps/web/src/components/threads/related-threads-section.tsx b/apps/web/src/components/threads/related-threads-section.tsx
index 111e6fc5..ca93b2aa 100644
--- a/apps/web/src/components/threads/related-threads-section.tsx
+++ b/apps/web/src/components/threads/related-threads-section.tsx
@@ -44,6 +44,11 @@ const RelatedThreadResult = ({ result }: { result: SimilarThreadResult }) => {
         src={thread.author.user?.image}
       />
       <div className="grow shrink truncate">{thread.name}</div>
+      {thread.shortId != null && (
+        <span className="text-foreground-secondary text-sm tabular-nums">
+          #{thread.shortId}
+        </span>
+      )}
       <div className="flex gap-1 ml-auto">
         <ChevronRightIcon className="size-4" />
       </div>
diff --git a/apps/web/src/routes/app/_workspace/_main/playground/index.tsx b/apps/web/src/routes/app/_workspace/_main/playground/index.tsx
index a6349174..bb15de80 100644
--- a/apps/web/src/routes/app/_workspace/_main/playground/index.tsx
+++ b/apps/web/src/routes/app/_workspace/_main/playground/index.tsx
@@ -103,20 +103,29 @@ function PlaygroundPage() {
             Threads
           </div>
           <div className="flex-1 overflow-y-auto">
-            {(threads as any[])?.map((thread: { id: string; name: string }) => (
-              <button
-                key={thread.id}
-                type="button"
-                onClick={() => handleSelectThread(thread.id)}
-                className={`w-full text-left px-4 py-2.5 text-sm border-b hover:bg-foreground-tertiary/10 transition-colors ${
-                  selectedThreadId === thread.id
-                    ? "bg-foreground-tertiary/15 font-medium"
-                    : ""
-                }`}
-              >
-                <div className="truncate">{thread.name}</div>
-              </button>
-            ))}
+            {(threads as any[])?.map(
+              (thread: { id: string; name: string; shortId: number | null }) => (
+                <button
+                  key={thread.id}
+                  type="button"
+                  onClick={() => handleSelectThread(thread.id)}
+                  className={`w-full text-left px-4 py-2.5 text-sm border-b hover:bg-foreground-tertiary/10 transition-colors ${
+                    selectedThreadId === thread.id
+                      ? "bg-foreground-tertiary/15 font-medium"
+                      : ""
+                  }`}
+                >
+                  <div className="truncate flex items-center gap-1.5">
+                    <span className="truncate">{thread.name}</span>
+                    {thread.shortId != null && (
+                      <span className="text-foreground-secondary tabular-nums font-normal shrink-0">
+                        #{thread.shortId}
+                      </span>
+                    )}
+                  </div>
+                </button>
+              ),
+            )}
             {(!threads || (threads as any[]).length === 0) && (
               <div className="px-4 py-8 text-sm text-foreground-secondary text-center">
                 No threads found
diff --git a/apps/web/src/routes/app/_workspace/_main/search/index.tsx b/apps/web/src/routes/app/_workspace/_main/search/index.tsx
index a48b5abf..7b6fb1b9 100644
--- a/apps/web/src/routes/app/_workspace/_main/search/index.tsx
+++ b/apps/web/src/routes/app/_workspace/_main/search/index.tsx
@@ -67,6 +67,11 @@ const SearchResultItem = ({ messageId }: SearchResultItemProps) => {
           <div className="flex items-center gap-2">
             <Avatar variant="user" size="md" fallback={thread?.author?.name} />
             <div>{thread?.name}</div>
+            {thread?.shortId != null && (
+              <span className="text-foreground-secondary text-sm tabular-nums">
+                #{thread.shortId}
+              </span>
+            )}
           </div>
           <div className="flex items-center gap-2">
             <div className="flex items-center gap-1.5 mr-1">
diff --git a/apps/web/src/routes/app/_workspace/_main/threads/$id/index.tsx b/apps/web/src/routes/app/_workspace/_main/threads/$id/index.tsx
index d873d15d..a0690ab0 100644
--- a/apps/web/src/routes/app/_workspace/_main/threads/$id/index.tsx
+++ b/apps/web/src/routes/app/_workspace/_main/threads/$id/index.tsx
@@ -267,7 +267,14 @@ function RouteComponent() {
                     </BreadcrumbItem>
                     <BreadcrumbSeparator />
                     <BreadcrumbItem>
-                      <BreadcrumbPage>{thread.name}</BreadcrumbPage>
+                      <BreadcrumbPage className="flex items-center gap-1.5">
+                        <span>{thread.name}</span>
+                        {thread.shortId != null && (
+                          <span className="text-foreground-secondary tabular-nums font-normal">
+                            #{thread.shortId}
+                          </span>
+                        )}
+                      </BreadcrumbPage>
                     </BreadcrumbItem>
                   </BreadcrumbList>
                 </Breadcrumb>
diff --git a/apps/web/src/routes/app/_workspace/_main/threads/archive/$id.tsx b/apps/web/src/routes/app/_workspace/_main/threads/archive/$id.tsx
index 6e285702..a5f50cd8 100644
--- a/apps/web/src/routes/app/_workspace/_main/threads/archive/$id.tsx
+++ b/apps/web/src/routes/app/_workspace/_main/threads/archive/$id.tsx
@@ -160,7 +160,14 @@ function RouteComponent() {
                     </BreadcrumbItem>
                     <BreadcrumbSeparator />
                     <BreadcrumbItem>
-                      <BreadcrumbPage>{thread.name}</BreadcrumbPage>
+                      <BreadcrumbPage className="flex items-center gap-1.5">
+                        <span>{thread.name}</span>
+                        {thread.shortId != null && (
+                          <span className="text-foreground-secondary tabular-nums font-normal">
+                            #{thread.shortId}
+                          </span>
+                        )}
+                      </BreadcrumbPage>
                     </BreadcrumbItem>
                   </BreadcrumbList>
                 </Breadcrumb>
diff --git a/apps/web/src/routes/app/_workspace/_main/threads/index.tsx b/apps/web/src/routes/app/_workspace/_main/threads/index.tsx
index e0615298..721e6501 100644
--- a/apps/web/src/routes/app/_workspace/_main/threads/index.tsx
+++ b/apps/web/src/routes/app/_workspace/_main/threads/index.tsx
@@ -347,6 +347,11 @@ export function ThreadsList({ fixedFilters = {}, subTitle }: ThreadsListProps) {
                 >
                   <div className="flex justify-between">
                     <div className="flex items-center gap-2">
+                      {thread?.shortId != null && (
+                        <span className="text-foreground-secondary text-sm tabular-nums">
+                          #{thread.shortId}
+                        </span>
+                      )}
                       <Avatar
                         variant="user"
                         size="md"

From e072ce9198999f661bd145657f2092fa5e21520d Mon Sep 17 00:00:00 2001
From: Pedro Costa <scosta.pedro.manoel@gmail.com>
Date: Wed, 29 Apr 2026 14:39:05 -0300
Subject: [PATCH 2/2] fix

---
 .../app/_workspace/_main/playground/index.tsx | 46 +++++++++----------
 1 file changed, 22 insertions(+), 24 deletions(-)

diff --git a/apps/web/src/routes/app/_workspace/_main/playground/index.tsx b/apps/web/src/routes/app/_workspace/_main/playground/index.tsx
index bb15de80..4e477ba3 100644
--- a/apps/web/src/routes/app/_workspace/_main/playground/index.tsx
+++ b/apps/web/src/routes/app/_workspace/_main/playground/index.tsx
@@ -103,30 +103,28 @@ function PlaygroundPage() {
             Threads
           </div>
           <div className="flex-1 overflow-y-auto">
-            {(threads as any[])?.map(
-              (thread: { id: string; name: string; shortId: number | null }) => (
-                <button
-                  key={thread.id}
-                  type="button"
-                  onClick={() => handleSelectThread(thread.id)}
-                  className={`w-full text-left px-4 py-2.5 text-sm border-b hover:bg-foreground-tertiary/10 transition-colors ${
-                    selectedThreadId === thread.id
-                      ? "bg-foreground-tertiary/15 font-medium"
-                      : ""
-                  }`}
-                >
-                  <div className="truncate flex items-center gap-1.5">
-                    <span className="truncate">{thread.name}</span>
-                    {thread.shortId != null && (
-                      <span className="text-foreground-secondary tabular-nums font-normal shrink-0">
-                        #{thread.shortId}
-                      </span>
-                    )}
-                  </div>
-                </button>
-              ),
-            )}
-            {(!threads || (threads as any[]).length === 0) && (
+            {threads?.map((thread) => (
+              <button
+                key={thread.id}
+                type="button"
+                onClick={() => handleSelectThread(thread.id)}
+                className={`w-full text-left px-4 py-2.5 text-sm border-b hover:bg-foreground-tertiary/10 transition-colors ${
+                  selectedThreadId === thread.id
+                    ? "bg-foreground-tertiary/15 font-medium"
+                    : ""
+                }`}
+              >
+                <div className="truncate flex items-center gap-1.5">
+                  <span className="truncate">{thread.name}</span>
+                  {thread.shortId != null && (
+                    <span className="text-foreground-secondary tabular-nums font-normal shrink-0">
+                      #{thread.shortId}
+                    </span>
+                  )}
+                </div>
+              </button>
+            ))}
+            {(threads?.length ?? 0) === 0 && (
               <div className="px-4 py-8 text-sm text-foreground-secondary text-center">
                 No threads found
               </div>