From 124ecb4302e5ab08632b2dd44c790ee9c426279e Mon Sep 17 00:00:00 2001
From: TJ Baker <1617679+zaridan@users.noreply.github.com>
Date: Sat, 25 Jul 2026 08:31:37 -0700
Subject: [PATCH 1/3] fix(web): widen folder rail, add right gutter, pill the
 waiting-since value
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Inbox list column polish, from a side-by-side review of the list surface:

- Folder rail 190px -> 220px, so labels and counts stop crowding.
- Right gutter 14px -> 24px on both the conversation rows and the header
  band. The Number and Waiting-since columns stay right-aligned; they were
  simply flush against the content edge with no breathing room.
- The waiting-since value becomes a rounded pill, reusing the same chip
  treatment as the message-count badge one column over rather than
  introducing a new one. Measured against `relativeTime`'s widest possible
  output ("Mar 14, 2025", 91px) — fits the 96px column with room to spare.

ConversationRow.jsx is a design-system file, so the same change was pushed
back up to the Helpthread design project (components/inbox/ConversationRow.jsx)
and read back byte-identical, per the app -> design reconcile rule in
CLAUDE.md. The folder rail and header band live in app screens that have no
upstream counterpart yet, so nothing to reconcile there.

Also adds .claude/launch.json so the web and API dev servers are startable
from any worktree.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .claude/launch.json                             | 17 +++++++++++++++++
 web/src/components/FolderNav.tsx                |  2 +-
 web/src/components/InboxScreen.tsx              |  2 +-
 web/src/components/ds/inbox/ConversationRow.jsx |  6 ++++--
 4 files changed, 23 insertions(+), 4 deletions(-)
 create mode 100644 .claude/launch.json

diff --git a/.claude/launch.json b/.claude/launch.json
new file mode 100644
index 0000000..c4a72f6
--- /dev/null
+++ b/.claude/launch.json
@@ -0,0 +1,17 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "helpthread-api",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run", "dev:api"],
+      "port": 8787
+    },
+    {
+      "name": "helpthread-web",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run", "dev", "--workspace=@helpthread/web"],
+      "port": 3000
+    }
+  ]
+}
diff --git a/web/src/components/FolderNav.tsx b/web/src/components/FolderNav.tsx
index 9f5e2de..70640c9 100644
--- a/web/src/components/FolderNav.tsx
+++ b/web/src/components/FolderNav.tsx
@@ -114,7 +114,7 @@ export function FolderNav({
     <nav
       aria-label="Folders"
       style={{
-        width: 190,
+        width: 220,
         flexShrink: 0,
         minHeight: 0,
         display: 'flex',
diff --git a/web/src/components/InboxScreen.tsx b/web/src/components/InboxScreen.tsx
index d8ddff9..3004387 100644
--- a/web/src/components/InboxScreen.tsx
+++ b/web/src/components/InboxScreen.tsx
@@ -283,7 +283,7 @@ export function InboxScreen({
         flexDirection: 'column',
       }}
     >
-      <ToolbarBand>
+      <ToolbarBand style={{ paddingRight: 24 }}>
         <div style={{ display: 'flex', alignItems: 'center', gap: 14, width: '100%' }}>
           {selected.size > 0 ? (
             <>
diff --git a/web/src/components/ds/inbox/ConversationRow.jsx b/web/src/components/ds/inbox/ConversationRow.jsx
index e8d1d7d..cf997d8 100644
--- a/web/src/components/ds/inbox/ConversationRow.jsx
+++ b/web/src/components/ds/inbox/ConversationRow.jsx
@@ -8,7 +8,7 @@ export function ConversationRow({ customerName, customerEmail, subject, preview,
   selected = false, onClick }) {
   return (
     <div onClick={onClick}
-      style={{ display: "flex", alignItems: "center", gap: 14, padding: "9px 14px",
+      style={{ display: "flex", alignItems: "center", gap: 14, padding: "9px 24px 9px 14px",
         borderBottom: "1px solid var(--ht-divider)", cursor: "pointer",
         background: selected ? "var(--ht-surface-2)" : "transparent",
         boxShadow: selected ? "inset 2.5px 0 0 var(--ht-accent)" : "none" }}
@@ -40,7 +40,9 @@ export function ConversationRow({ customerName, customerEmail, subject, preview,
           <span style={{ color: "var(--ht-ink-dim)", fontSize: 11 }}>#</span>
           <span style={{ fontWeight: 600, color: "var(--ht-ink-muted)" }}>{number}</span>
         </span>
-        <span style={{ fontSize: 12.5, color: "var(--ht-ink-dim)", fontVariantNumeric: "tabular-nums", minWidth: 96, textAlign: "right" }}>{time}</span>
+        <span style={{ minWidth: 96, textAlign: "right" }}>
+          {time && <span style={{ fontSize: 11.5, fontWeight: 600, color: "var(--ht-ink-muted)", background: "var(--ht-surface-2)", borderRadius: 999, padding: "2px 8px", fontVariantNumeric: "tabular-nums" }}>{time}</span>}
+        </span>
       </div>
     </div>
   );

From bfaae5c39dc44ff03b93fff9475052d1c4c4d01f Mon Sep 17 00:00:00 2001
From: TJ Baker <1617679+zaridan@users.noreply.github.com>
Date: Sat, 25 Jul 2026 08:49:06 -0700
Subject: [PATCH 2/3] fix(web): align the pending badge with the new right
 gutter
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The pending StatusPill is absolutely positioned over the row and was still
pinned at right: 14 — the old gutter — so it protruded 10px past every other
right-hand element once the gutter moved to 24.

Caught by CodeRabbit on #163 and confirmed in the running app: with a
conversation set to pending, the badge sat 14px from the viewport edge while
the waiting-since pill sat at 24px. Both now measure 24px.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 web/src/components/InboxScreen.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/InboxScreen.tsx b/web/src/components/InboxScreen.tsx
index 3004387..52255ad 100644
--- a/web/src/components/InboxScreen.tsx
+++ b/web/src/components/InboxScreen.tsx
@@ -391,7 +391,7 @@ export function InboxScreen({
                 }}
               />
               {c.status === 'pending' && (
-                <span style={{ position: 'absolute', right: 14, top: 6 }}>
+                <span style={{ position: 'absolute', right: 24, top: 6 }}>
                   <StatusPill status="pending" style={{ fontSize: 9.5, padding: '1px 7px' }} />
                 </span>
               )}

From 1fd537e96b60fff5fbc9af9bc4df4aee1460d3b8 Mon Sep 17 00:00:00 2001
From: TJ Baker <1617679+zaridan@users.noreply.github.com>
Date: Sun, 2 Aug 2026 10:56:12 -0700
Subject: [PATCH 3/3] fix(web): give the status badge its own slot; outline the
 waiting-since pill
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two defects found by independent review of #163, both verified in the running
app before and after the fix.

1. The waiting-since pill was invisible on hover and on the keyboard-focused
   row. Its fill was var(--ht-surface-2) — the exact token the row already
   uses for both states — so the pill's shape vanished on whichever row the
   Agent was looking at. The count chip has the same fill but only renders
   when a thread has more than one message, so it never showed the problem.
   The pill is now an outline (1px, no fill, padding 1px 7px to keep the
   outer box the same size — measured 77.28 x 17.00 before and after).

   The outline is var(--ht-ink-dim), NOT var(--ht-border). The obvious token
   is the wrong one: --ht-border measures 1.3:1 against the hover background
   and effectively disappears on exactly the row this fix exists for.
   --ht-ink-dim measures 4.30:1 at rest and 3.76:1 on hover, clearing
   WCAG 1.4.11's 3:1 for a component boundary in both themes.

2. The pending StatusPill was an absolutely-positioned overlay at right: 24,
   landing on top of the waiting-since pill. ConversationRow now takes a
   `badge` slot, rendered inline at the head of the right-hand group, and
   InboxScreen passes the StatusPill into it. Measured overlap with the time
   pill: 0px, down from 63px wide by 13px tall. The row wrapper's
   position: relative went with the overlay it existed to anchor.

   The slot has no reserved width. That is a deliberate trade: rows without a
   badge keep their full subject column, and rows with one lose ~77px. Below
   roughly 830px of window width a pending row shows no subject text while
   its neighbours still do. Reserving a fixed slot would spread that cost
   evenly across every row instead; the maintainer chose the unreserved slot.

Also updates the inbox loading skeleton, which still had the old 14px right
gutter and would have jittered 10px on every folder switch. Measured 51.00px
per skeleton row against 51.00px per real row.

This closes #164 rather than deferring it.

ConversationRow.jsx, its .d.ts, and its .prompt.md were pushed to the
Helpthread design project — the badge slot is a design-system API addition,
and the prompt doc records why the border token is --ht-ink-dim so the
"obvious" value does not get restored later as a bug.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 web/src/app/(shell)/inbox/[folder]/loading.tsx   |  4 ++--
 web/src/components/InboxScreen.tsx               | 11 +++++------
 web/src/components/ds/inbox/ConversationRow.d.ts |  4 +++-
 web/src/components/ds/inbox/ConversationRow.jsx  |  9 +++++----
 4 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/web/src/app/(shell)/inbox/[folder]/loading.tsx b/web/src/app/(shell)/inbox/[folder]/loading.tsx
index f59d36a..fbcd7d3 100644
--- a/web/src/app/(shell)/inbox/[folder]/loading.tsx
+++ b/web/src/app/(shell)/inbox/[folder]/loading.tsx
@@ -13,7 +13,7 @@ function SkeletonRow() {
         display: 'flex',
         alignItems: 'center',
         gap: 14,
-        padding: '9px 14px',
+        padding: '9px 24px 9px 14px',
         borderBottom: '1px solid var(--ht-divider)',
       }}
     >
@@ -38,7 +38,7 @@ export default function InboxLoading() {
         flexDirection: 'column',
       }}
     >
-      <ToolbarBand />
+      <ToolbarBand style={{ paddingRight: 24 }} />
       <div>
         <SkeletonRow />
         <SkeletonRow />
diff --git a/web/src/components/InboxScreen.tsx b/web/src/components/InboxScreen.tsx
index 52255ad..7c85ed0 100644
--- a/web/src/components/InboxScreen.tsx
+++ b/web/src/components/InboxScreen.tsx
@@ -369,7 +369,6 @@ export function InboxScreen({
                 if (el) rowRefs.current.set(c.id, el)
                 else rowRefs.current.delete(c.id)
               }}
-              style={{ position: 'relative' }}
             >
               <ConversationRow
                 customerName={nameFromEmail(c.customerEmail)}
@@ -379,6 +378,11 @@ export function InboxScreen({
                 count={c.threadCount > 1 ? String(c.threadCount) : ''}
                 number={String(c.number)}
                 time={relativeTime(c.updatedAt)}
+                badge={
+                  c.status === 'pending' ? (
+                    <StatusPill status="pending" style={{ fontSize: 9.5, padding: '1px 7px' }} />
+                  ) : null
+                }
                 showCheckbox={showCheckboxColumn}
                 checked={selected.has(c.id)}
                 onCheck={() => toggleOne(c.id)}
@@ -390,11 +394,6 @@ export function InboxScreen({
                   router.push(`/conversations/${c.id}`)
                 }}
               />
-              {c.status === 'pending' && (
-                <span style={{ position: 'absolute', right: 24, top: 6 }}>
-                  <StatusPill status="pending" style={{ fontSize: 9.5, padding: '1px 7px' }} />
-                </span>
-              )}
             </div>
           ))}
           {cursor !== null && (
diff --git a/web/src/components/ds/inbox/ConversationRow.d.ts b/web/src/components/ds/inbox/ConversationRow.d.ts
index 60e17bf..5c42fc4 100644
--- a/web/src/components/ds/inbox/ConversationRow.d.ts
+++ b/web/src/components/ds/inbox/ConversationRow.d.ts
@@ -9,8 +9,10 @@ export interface ConversationRowProps {
   count?: string;
   /** human conversation number (#N) */
   number?: string;
-  /** relative waiting time */
+  /** relative waiting time; empty hides the pill but keeps its column slot */
   time?: string;
+  /** status badge rendered in its own slot ahead of the count pill */
+  badge?: React.ReactNode;
   starred?: boolean;
   onStar?: () => void;
   checked?: boolean;
diff --git a/web/src/components/ds/inbox/ConversationRow.jsx b/web/src/components/ds/inbox/ConversationRow.jsx
index cf997d8..9aaa9ed 100644
--- a/web/src/components/ds/inbox/ConversationRow.jsx
+++ b/web/src/components/ds/inbox/ConversationRow.jsx
@@ -2,10 +2,10 @@ import React from "react";
 import { Avatar } from "../core/Avatar.jsx";
 
 /** Full-bleed inbox table row: checkbox · customer · star · subject/preview ·
- *  count slot · #number · waiting time. Hairline bottom border. */
+ *  badge slot · count slot · #number · waiting time. Hairline bottom border. */
 export function ConversationRow({ customerName, customerEmail, subject, preview, count = "",
-  number = "", time = "", starred = false, onStar, checked = false, onCheck, showCheckbox = true,
-  selected = false, onClick }) {
+  number = "", time = "", badge = null, starred = false, onStar, checked = false, onCheck,
+  showCheckbox = true, selected = false, onClick }) {
   return (
     <div onClick={onClick}
       style={{ display: "flex", alignItems: "center", gap: 14, padding: "9px 24px 9px 14px",
@@ -33,6 +33,7 @@ export function ConversationRow({ customerName, customerEmail, subject, preview,
         <div style={{ marginTop: 1, fontSize: 12, color: "var(--ht-ink-dim)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{preview}</div>
       </div>
       <div style={{ display: "flex", alignItems: "center", gap: 14, flexShrink: 0 }}>
+        {badge}
         <span style={{ minWidth: 36, display: "flex", justifyContent: "flex-end" }}>
           {count && <span style={{ fontSize: 11.5, fontWeight: 600, color: "var(--ht-ink-dim)", background: "var(--ht-surface-2)", borderRadius: 999, padding: "2px 8px", fontVariantNumeric: "tabular-nums" }}>{count}</span>}
         </span>
@@ -41,7 +42,7 @@ export function ConversationRow({ customerName, customerEmail, subject, preview,
           <span style={{ fontWeight: 600, color: "var(--ht-ink-muted)" }}>{number}</span>
         </span>
         <span style={{ minWidth: 96, textAlign: "right" }}>
-          {time && <span style={{ fontSize: 11.5, fontWeight: 600, color: "var(--ht-ink-muted)", background: "var(--ht-surface-2)", borderRadius: 999, padding: "2px 8px", fontVariantNumeric: "tabular-nums" }}>{time}</span>}
+          {time && <span style={{ fontSize: 11.5, fontWeight: 600, color: "var(--ht-ink-muted)", border: "1px solid var(--ht-ink-dim)", borderRadius: 999, padding: "1px 7px", fontVariantNumeric: "tabular-nums" }}>{time}</span>}
         </span>
       </div>
     </div>