fix(frontend): bound mobile topic activity status

Author: Donovan Yohan

frontend/src/components/TopicSidebarShell.tsx

@@ -72,6 +72,14 @@ type TopicSendInput = typeof sendSessionInput;
 
 const DISCONNECTED_SESSION_CONTROL_REASON =
   'session offline/disconnected — controls unavailable until reconnect';
+const TOPIC_LATEST_STATUS_MAX_LENGTH = 96;
+
+function boundedTopicLatestStatus(value: string): string {
+  const trimmed = value.trim();
+  return trimmed.length > TOPIC_LATEST_STATUS_MAX_LENGTH
+    ? `${trimmed.slice(0, TOPIC_LATEST_STATUS_MAX_LENGTH - 3)}...`
+    : trimmed;
+}
 
 function topicPrimarySession(
   item: TopicNavItem
@@ -158,20 +166,23 @@ function topicPrimaryAction(item: TopicNavItem): {
 function topicLatestStatus(item: TopicNavItem): string {
   const session = topicPrimarySession(item);
   if (session?.agentState === 'permission-prompt') {
-    return session.currentActivity?.detail
+    const status = session.currentActivity?.detail
       ? `${item.statusLabel} · ${session.currentActivity.detail}`
       : item.statusLabel;
+    return boundedTopicLatestStatus(status);
   }
   if (session?.currentActivity) {
     const detail = session.currentActivity.detail
       ? ` · ${session.currentActivity.detail}`
       : '';
-    return `${session.currentActivity.tool}${detail}`;
+    return boundedTopicLatestStatus(`${session.currentActivity.tool}${detail}`);
   }
   if (item.surfaces.length > 0) {
-    return `${item.statusLabel} · ${item.surfaces[0]!.label}`;
+    return boundedTopicLatestStatus(
+      `${item.statusLabel} · ${item.surfaces[0]!.label}`
+    );
   }
-  return item.routingLabel ?? item.statusLabel;
+  return boundedTopicLatestStatus(item.routingLabel ?? item.statusLabel);
 }
 
 function TopicBadge({ item }: { item: TopicNavItem }) {

test/topic-sidebar-shell.test.ts

@@ -243,6 +243,38 @@ describe('TopicSidebarView', () => {
     expect(mobileRows[1]?.textContent).toContain('Routine lane');
   });
 
+  it('bounds mobile topic latest status from raw activity text', async () => {
+    const longToolName = 'tool-name-'.repeat(30);
+    await renderView({
+      topics: [
+        makeTopic({
+          linkedRefs: { sessionIds: ['waiting-session'] },
+        }),
+      ],
+      sessions: [
+        makeSession({
+          id: 'waiting-session',
+          displayName: 'waiting lane',
+          agentState: 'waiting-for-input',
+          currentActivity: { tool: longToolName },
+        }),
+      ],
+      surfaces: [],
+    });
+
+    const mobileRowStatus = container.querySelector(
+      '.topic-mobile-row__status'
+    )?.textContent;
+    const mobileDetailLatest = container.querySelector(
+      '.topic-mobile-detail__latest'
+    )?.textContent;
+
+    expect(mobileRowStatus).toBe(`${longToolName.slice(0, 93)}...`);
+    expect(mobileDetailLatest).toBe(`${longToolName.slice(0, 93)}...`);
+    expect(mobileRowStatus?.length).toBeLessThanOrEqual(96);
+    expect(mobileDetailLatest?.length).toBeLessThanOrEqual(96);
+  });
+
   it('uses the bounded topic search as the only mobile search surface', async () => {
     await renderView();