feat(maestro): render agent-reported detail on web session cards

web/src/catalog.test.ts

@@ -105,6 +105,38 @@ describe("blocked-work indicator (#83)", () => {
   });
 });
 
+describe("agent-reported detail (#112)", () => {
+  const ago = (ms: number): string => new Date(Date.now() - ms).toISOString();
+
+  it("renders the reported detail right after the duration on line 2", () => {
+    const s = session({
+      id: "aaaaaaaa-0000-0000-0000-000000000020",
+      status: "Dead",
+      activity: "Error",
+      activity_since: ago(90_000),
+      activity_detail: "cargo build failed",
+    });
+    const el = renderSidebar(storeWith([s])).el;
+    const line2 = rowFor(el, s.id)?.querySelector<HTMLElement>(".card-line2");
+    expect(line2?.querySelector(".activity-detail")?.textContent).toBe("cargo build failed");
+    const order = [...line2!.children].map((c) => c.className);
+    expect(order.indexOf("activity-detail")).toBeGreaterThan(order.indexOf("activity-duration"));
+    expect(order.indexOf("activity-detail")).toBeLessThan(
+      order.findIndex((c) => c.startsWith("card-flag")),
+    );
+  });
+
+  it("omits the detail when no report is in force", () => {
+    const s = session({
+      id: "aaaaaaaa-0000-0000-0000-000000000021",
+      activity: "Active",
+      activity_since: ago(90_000),
+    });
+    const el = renderSidebar(storeWith([s])).el;
+    expect(rowFor(el, s.id)?.querySelector(".activity-detail")).toBeNull();
+  });
+});
+
 describe("session cards (#107)", () => {
   const ago = (ms: number): string => new Date(Date.now() - ms).toISOString();
 

web/src/catalog.ts

@@ -42,6 +42,9 @@ function metaLine(s: Session, now: number): string {
   const fragments = [
     `<span class="activity-dot" role="img" title="${escapeHtml(stateWord)}" aria-label="${escapeHtml(stateWord)}"></span>`,
     duration ? `<span class="activity-duration">${duration}</span>` : "",
+    s.activity_detail
+      ? `<span class="activity-detail">${escapeHtml(s.activity_detail)}</span>`
+      : "",
     blockers
       ? `<span class="card-flag leaf-blocked" title="Kill will be refused unless forced">⚠ ${escapeHtml(formatInTheWay(blockers))}</span>`
       : "",

web/src/styles.css

@@ -851,6 +851,17 @@ textarea {
   flex: 0 0 auto;
 }
 
+/* Agent-reported detail (#112): sits after the duration, shrinks with an
+   ellipsis so it never pushes the trailing fragments off the line. */
+.activity-detail {
+  color: var(--faint);
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 /* Blocked-work / exited / command fragments recede: the ⚠ glyph already
    signals severity and "exited" dims with the row. */
 .card-flag {