fix(web): widen folder rail, add right gutter, pill the waiting-since value

.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
+    }
+  ]
+}

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 />

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',

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 ? (
             <>
@@ -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: 14, top: 6 }}>
-                  <StatusPill status="pending" style={{ fontSize: 9.5, padding: '1px 7px' }} />
-                </span>
-              )}
             </div>
           ))}
           {cursor !== null && (

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;

web/src/components/ds/inbox/ConversationRow.jsx

@@ -2,13 +2,13 @@ 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 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" }}
@@ -33,14 +33,17 @@ 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>
         <span style={{ minWidth: 44, textAlign: "right", fontSize: 12.5, fontVariantNumeric: "tabular-nums" }}>
           <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)", border: "1px solid var(--ht-ink-dim)", borderRadius: 999, padding: "1px 7px", fontVariantNumeric: "tabular-nums" }}>{time}</span>}
+        </span>
       </div>
     </div>
   );