From 81d6560bf795095f9570d817a3ae3c2e45ded9a2 Mon Sep 17 00:00:00 2001
From: h <h@kotikot.com>
Date: Wed, 2 Sep 2026 04:43:04 +0200
Subject: [PATCH] style(ui): flat menu sheets, digests folded with job runs,
 shorter spend caption

---
 ui/src/lib/panel/panel.css          | 51 +++++++++++++++++++++++++++++
 ui/src/lib/rail/days.ts             |  2 +-
 ui/src/lib/rail/rail.svelte         | 35 ++++++++++++++------
 ui/src/lib/shell/instruments.svelte |  2 +-
 4 files changed, 78 insertions(+), 12 deletions(-)

diff --git a/ui/src/lib/panel/panel.css b/ui/src/lib/panel/panel.css
index 055249f..3787815 100644
--- a/ui/src/lib/panel/panel.css
+++ b/ui/src/lib/panel/panel.css
@@ -211,3 +211,54 @@
     left: 1.125rem;
   }
 }
+
+/* Menus and selects: one quiet sheet, rows that stay inside it. Unlayered
+   on purpose - the generated components carry pill utilities of their own. */
+[data-slot="dropdown-menu-content"],
+[data-slot="context-menu-content"],
+[data-slot="select-content"] {
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-ring-offset-shadow: 0 0 #0000;
+  padding: 0.25rem;
+  background: var(--popover);
+  border: 1px solid var(--border);
+  border-radius: 0.625rem;
+  box-shadow: var(--shadow-float);
+}
+[data-slot="dropdown-menu-content"]::before,
+[data-slot="context-menu-content"]::before,
+[data-slot="select-content"]::before {
+  display: none;
+}
+[data-slot="dropdown-menu-item"],
+[data-slot="dropdown-menu-checkbox-item"],
+[data-slot="context-menu-item"],
+[data-slot="context-menu-checkbox-item"],
+[data-slot="select-item"] {
+  min-height: 1.75rem;
+  padding: 0.375rem 0.5rem;
+  font-weight: 400;
+  border-radius: 0.375rem;
+}
+[data-slot="select-item"] {
+  padding-right: 2rem;
+}
+[data-slot="dropdown-menu-checkbox-item"],
+[data-slot="context-menu-checkbox-item"] {
+  padding-right: 2rem;
+}
+[data-slot$="-item"]:focus,
+[data-slot$="-item"][data-highlighted] {
+  color: var(--accent-foreground);
+  background: var(--accent);
+}
+[data-slot$="-item"][data-variant="destructive"]:focus,
+[data-slot$="-item"][data-variant="destructive"][data-highlighted] {
+  color: var(--destructive);
+  background: color-mix(in oklab, var(--destructive) 12%, transparent);
+}
+[data-slot="dropdown-menu-separator"],
+[data-slot="context-menu-separator"] {
+  margin: 0.25rem -0.25rem;
+  background: var(--border);
+}
diff --git a/ui/src/lib/rail/days.ts b/ui/src/lib/rail/days.ts
index d6fc534..99f9a8a 100644
--- a/ui/src/lib/rail/days.ts
+++ b/ui/src/lib/rail/days.ts
@@ -136,7 +136,7 @@ export function daySummary(group: DayGroup, today: boolean): string {
     parts.push(count(group.deep.length, "deep", "deep"));
   }
   if (group.forks.length) {
-    parts.push(count(group.forks.length, "fork"));
+    parts.push(count(group.forks.length, "digest"));
   }
   if (group.jobs.length) {
     parts.push(count(group.jobs.length, "job run"));
diff --git a/ui/src/lib/rail/rail.svelte b/ui/src/lib/rail/rail.svelte
index 0a1d5a0..16a4ae2 100644
--- a/ui/src/lib/rail/rail.svelte
+++ b/ui/src/lib/rail/rail.svelte
@@ -133,6 +133,22 @@
 
   const refresh = () => index.load().catch(() => undefined);
 
+  // What the agent did on its own that day: digests and scheduled runs.
+  function quietSummary(group: DayGroup): string {
+    const parts: string[] = [];
+    if (group.forks.length) {
+      parts.push(
+        `${group.forks.length} ${group.forks.length === 1 ? "digest" : "digests"}`
+      );
+    }
+    if (group.jobs.length) {
+      parts.push(
+        `${group.jobs.length} ${group.jobs.length === 1 ? "job run" : "job runs"}`
+      );
+    }
+    return parts.join(" · ");
+  }
+
   const linkOf = (id: string) => href?.(id);
 </script>
 
@@ -294,7 +310,7 @@
                   {row}
                 />
               {/each}
-              {#each [...group.forks, ...group.others] as row (row.id)}
+              {#each group.others as row (row.id)}
                 <Strip
                   {client}
                   current={row.id === selected}
@@ -306,28 +322,27 @@
                   {row}
                 />
               {/each}
-              {#if group.jobs.length > 0}
-                {@const shownJobs = jobsOpen.has(group.day)}
+              {#if group.forks.length + group.jobs.length > 0}
+                {@const shownQuiet = jobsOpen.has(group.day)}
                 <button
-                  aria-expanded={shownJobs}
+                  aria-expanded={shownQuiet}
                   class="strip w-full text-left text-muted-foreground text-xs"
                   onclick={() => toggleJobs(group.day)}
                   type="button"
                 >
                   <span class="size-5"></span>
                   <span>
-                    {group.jobs.length}
-                    {group.jobs.length === 1 ? "job run" : "job runs"}
-                    · {shownJobs ? "hide" : "show"}
+                    {quietSummary(group)}
+                    · {shownQuiet ? "hide" : "show"}
                   </span>
                   <span></span>
                 </button>
-                {#if shownJobs}
-                  {#each group.jobs as row (row.id)}
+                {#if shownQuiet}
+                  {#each [...group.forks, ...group.jobs] as row (row.id)}
                     <Strip
                       {client}
                       current={row.id === selected}
-                      detail={row.last_item?.text ?? ""}
+                      detail={row.last_item?.text ?? `${row.kind} · ${row.status}`}
                       href={linkOf(row.id)}
                       {now}
                       onChanged={refresh}
diff --git a/ui/src/lib/shell/instruments.svelte b/ui/src/lib/shell/instruments.svelte
index 804b6d8..689e6e9 100644
--- a/ui/src/lib/shell/instruments.svelte
+++ b/ui/src/lib/shell/instruments.svelte
@@ -129,7 +129,7 @@
       <span class="tabular font-semibold text-2xl leading-none tracking-tight">
         {fmtMoney(spend)}
       </span>
-      <span class="text-muted-foreground text-xs">API-price equivalent</span>
+      <span class="text-muted-foreground text-xs">in API price</span>
     </div>
   {/if}
 </div>