Implemented session state indicator

Author: Relrin

packages/ui/src/features/chat/types.ts

@@ -4,6 +4,13 @@ import type { AskUserQuestion } from "@pi-deck/core/protocol/events.js";
 
 export type ToolCallStatus = "pending" | "running" | "done" | "error" | "cancelled";
 
+/**
+ * Coarse, per-session lifecycle state surfaced as the colour-coded status dot in the left rail
+ * (`PidSessionRow`). Derived from the live message/tool state plus the last turn's outcome — see
+ * `selectSessionRailStatus`. Priority when several could apply: waiting > working > failed > done.
+ */
+export type RailStatus = "working" | "waiting" | "done" | "failed" | "idle";
+
 /**
  * Inline approval surfaced on a tool-call card when the agent-mode plugin needs the user's
  * decision before letting the tool run. Set when `session.tool.approval.requested` arrives

packages/ui/src/features/chat/useMessagesStore.ts

@@ -6,6 +6,7 @@ import { useComposerStore } from "./composer/useComposerStore.js";
 import type {
   AssistantMessageEntry,
   MessageEntry,
+  RailStatus,
   ToolCallEntry,
   ToolCallStatus,
   UserMessageImage,
@@ -15,6 +16,8 @@ interface SessionMessageState {
   messages: MessageEntry[];
   toolCalls: Record<string, ToolCallEntry>;
   isTurnInFlight: boolean;
+  lastOutcome?: "ok" | "failed";
+  outcomeViewed?: boolean;
 }
 
 interface MessagesStoreState {
@@ -63,6 +66,8 @@ interface MessagesStoreState {
   ) => void;
   endTurn: (sessionId: string, cancelled: boolean | undefined) => void;
   markTurnInFlight: (sessionId: string, value: boolean) => void;
+  markTurnFailed: (sessionId: string) => void;
+  markViewed: (sessionId: string) => void;
   clearSession: (sessionId: string) => void;
   /**
    * Replace the chat transcript + tool-call cache for a session with the snapshot the
@@ -484,7 +489,14 @@ export const useMessagesStore = create<MessagesStoreState>((set) => ({
       return {
         bySession: {
           ...state.bySession,
-          [sessionId]: { ...session, messages, toolCalls, isTurnInFlight: false },
+          [sessionId]: {
+            ...session,
+            messages,
+            toolCalls,
+            isTurnInFlight: false,
+            lastOutcome: cancelled ? "failed" : "ok",
+            outcomeViewed: false,
+          },
         },
       };
     }),
@@ -495,7 +507,38 @@ export const useMessagesStore = create<MessagesStoreState>((set) => ({
       return {
         bySession: {
           ...state.bySession,
-          [sessionId]: { ...session, isTurnInFlight: value },
+          [sessionId]: value
+            ? { ...session, isTurnInFlight: true, lastOutcome: undefined, outcomeViewed: false }
+            : { ...session, isTurnInFlight: false },
+        },
+      };
+    }),
+
+  markTurnFailed: (sessionId) =>
+    set((state) => {
+      const session = state.bySession[sessionId];
+      if (!session?.isTurnInFlight) return state;
+      return {
+        bySession: {
+          ...state.bySession,
+          [sessionId]: {
+            ...session,
+            isTurnInFlight: false,
+            lastOutcome: "failed",
+            outcomeViewed: false,
+          },
+        },
+      };
+    }),
+
+  markViewed: (sessionId) =>
+    set((state) => {
+      const session = state.bySession[sessionId];
+      if (!session || session.outcomeViewed) return state;
+      return {
+        bySession: {
+          ...state.bySession,
+          [sessionId]: { ...session, outcomeViewed: true },
         },
       };
     }),
@@ -576,6 +619,26 @@ export function selectTurnInFlight(sessionId: string | undefined) {
     sessionId ? (state.bySession[sessionId]?.isTurnInFlight ?? false) : false;
 }
 
+/**
+ * Coarse rail status for a session's status dot.
+ */
+export function selectSessionRailStatus(sessionId: string | undefined) {
+  return (state: MessagesStoreState): RailStatus => {
+    if (!sessionId) return "idle";
+    const session = state.bySession[sessionId];
+    if (!session) return "idle";
+    for (const call of Object.values(session.toolCalls)) {
+      if (call.pendingApproval || call.pendingAsk) return "waiting";
+    }
+    if (session.isTurnInFlight) return "working";
+    if (!session.outcomeViewed) {
+      if (session.lastOutcome === "failed") return "failed";
+      if (session.lastOutcome === "ok") return "done";
+    }
+    return "idle";
+  };
+}
+
 /**
  * Identify the most recent assistant message in a session. Used by `PlanCard` to hide its
  * Approve/Revise footer on stale plans — once a newer assistant turn lands, the prior plan

packages/ui/src/features/sessions/PidSessionRow.tsx

@@ -2,11 +2,12 @@ import type { SessionSummary } from "@pi-deck/core/domain/session.js";
 import { useEffect, useRef, useState } from "react";
 import { ConfirmDialog } from "../../components/dialogs/ConfirmDialog.js";
 import { InlineRename } from "../../components/InlineRename.js";
-import { Package, Pencil, Trash2 } from "../../components/icons/index.js";
+import { CheckCheck, Package, Pencil, Trash2 } from "../../components/icons/index.js";
 import { ContextMenu, type ContextMenuItem } from "../../components/ui/ContextMenu.js";
 import { relativeTime } from "../../lib/format/relative-time";
 import { useNavStore } from "../../lib/useNavStore";
-import { useMessagesStore } from "../chat/useMessagesStore.js";
+import type { RailStatus } from "../chat/types.js";
+import { selectSessionRailStatus, useMessagesStore } from "../chat/useMessagesStore.js";
 import { warmSession } from "./sessionWarmup.js";
 import { useSessionsStore } from "./useSessionsStore";
 
@@ -16,6 +17,15 @@ const HOVER_PREFETCH_DELAY_MS = 150;
 // to sit alongside `var(--t-12)` mono labels.
 const MENU_ICON_SIZE = 14;
 
+// Accessible name for the status dot per state. `idle` gets no label (it's the resting default —
+// labelling every quiet row just adds screen-reader noise).
+const STATUS_LABEL: Record<Exclude<RailStatus, "idle">, string> = {
+  working: "Running",
+  waiting: "Waiting for your input",
+  done: "Finished",
+  failed: "Failed",
+};
+
 export interface PidSessionRowProps {
   session: SessionSummary;
   active: boolean;
@@ -24,11 +34,20 @@ export interface PidSessionRowProps {
 export function PidSessionRow({ session, active }: PidSessionRowProps) {
   const [confirmOpen, setConfirmOpen] = useState(false);
   const [editing, setEditing] = useState(false);
-  // The session is "live" while its worker is mid-turn (prompt sent, no turn-end yet).
-  // Only the active session can ever be in flight — but we still key by session id so the
-  // selector cost stays per-row and the rendered dot follows the right session if the user
-  // switches focus mid-turn.
-  const live = useMessagesStore((s) => s.bySession[session.id]?.isTurnInFlight ?? false);
+  // Coarse lifecycle for the status dot: working / waiting / done / failed / idle. Keyed by
+  // session id so the cost stays per-row and the dot follows the right session across focus
+  // switches. The selector returns a primitive, so a stable status doesn't re-render the row.
+  const status = useMessagesStore(selectSessionRailStatus(session.id));
+
+  // Viewing the session you're focused on clears its done/failed dot to neutral idle. Covers the
+  // "finished while you're already watching it" case; `activateSession` covers "switched to a
+  // finished session", and the "Mark as completed" menu item is a manual trigger for the same
+  // `markViewed` — acknowledging the turn without opening the session.
+  useEffect(() => {
+    if (active && (status === "done" || status === "failed")) {
+      useMessagesStore.getState().markViewed(session.id);
+    }
+  }, [active, status, session.id]);
 
   const onClick = () => {
     if (editing) return;
@@ -63,7 +82,20 @@ export function PidSessionRow({ session, active }: PidSessionRowProps) {
     [],
   );
 
+  // "Mark as completed" acknowledges a finished/failed turn — it greys the dot to idle without
+  // opening the session. Only meaningful when there's a terminal outcome to acknowledge.
+  const canAcknowledge = status === "done" || status === "failed";
   const menuItems: ContextMenuItem[] = [
+    ...(canAcknowledge
+      ? ([
+          {
+            label: "Mark as completed",
+            icon: <CheckCheck size={MENU_ICON_SIZE} aria-hidden />,
+            onSelect: () => useMessagesStore.getState().markViewed(session.id),
+          },
+          { kind: "separator" },
+        ] satisfies ContextMenuItem[])
+      : []),
     {
       label: "Rename",
       icon: <Pencil size={MENU_ICON_SIZE} aria-hidden />,
@@ -106,9 +138,11 @@ export function PidSessionRow({ session, active }: PidSessionRowProps) {
           title={session.title}
         >
           <span
-            className="pid-rail-row-marker"
-            data-state={active ? "active" : "idle"}
-            aria-hidden
+            className="pid-rail-row-dot"
+            data-status={status}
+            {...(status === "idle"
+              ? { "aria-hidden": true }
+              : { role: "img", "aria-label": STATUS_LABEL[status], title: STATUS_LABEL[status] })}
           />
           <span className="pid-rail-row-main">
             {editing ? (
@@ -127,16 +161,7 @@ export function PidSessionRow({ session, active }: PidSessionRowProps) {
             )}
             {session.branch ? <span className="pid-rail-row-branch">{session.branch}</span> : null}
           </span>
-          {live ? (
-            <span
-              className="pid-rail-row-live"
-              role="status"
-              aria-label="Session is running"
-              title="Running"
-            />
-          ) : (
-            <span className="pid-rail-row-meta">{relativeTime(session.lastActivityAt)}</span>
-          )}
+          <span className="pid-rail-row-meta">{relativeTime(session.lastActivityAt)}</span>
         </button>
       </ContextMenu>
       <ConfirmDialog

packages/ui/src/features/sessions/useSessionsStore.ts

@@ -404,6 +404,9 @@ export const useSessionsStore = create<SessionsStoreState>((set, get) => ({
     const targetProjectId = summary?.projectId ?? previousProjectId;
 
     set({ activeSessionId: id });
+    // Opening a session counts as viewing it: clear any unviewed done/failed outcome so its rail
+    // dot settles to neutral idle instead of lingering green/red.
+    useMessagesStore.getState().markViewed(id);
 
     if (targetProjectId && targetProjectId !== previousProjectId) {
       projectsStore.setActive(targetProjectId);

packages/ui/src/lib/transport/event-router.ts

@@ -287,7 +287,8 @@ export function routeEvent(topic: string, rawPayload: unknown): void {
       return;
     }
     case EVENT_SESSION_WORKER_EXIT: {
-      useMessagesStore.getState().markTurnInFlight(sessionId, false);
+      // A worker that dies mid-turn is a failed turn (red rail dot); an idle shutdown is a no-op.
+      useMessagesStore.getState().markTurnFailed(sessionId);
       // The worker is gone — drop its warm marker so a later hover/open re-spawns it.
       forgetWarmedSession(sessionId);
       return;
@@ -314,7 +315,8 @@ export function routeEvent(topic: string, rawPayload: unknown): void {
       const event = payload.event as { type?: string; message?: string } | undefined;
       if (event?.type === "prompt_error") {
         useNotificationStore.getState().error(event.message ?? "pi reported a prompt error");
-        useMessagesStore.getState().markTurnInFlight(sessionId, false);
+        // Turn-level error: clear the in-flight flag and record a failed outcome for the rail dot.
+        useMessagesStore.getState().markTurnFailed(sessionId);
       }
       return;
     }

packages/ui/src/theme/components.css

@@ -1555,55 +1555,80 @@
   color: var(--ink-0);
   border-left-color: var(--accent);
 }
-/* Lifecycle marker — mirrors the ◯ / ◉ pair from the design mockup as CSS shapes so the
-   two states are guaranteed to share an outer size (the actual unicode fisheye renders
-   smaller than the open circle in most mono fonts). All dimensions are integer pixels and
-   centring uses flex, so the inner dot can't drift sub-pixel off-axis. */
-.pid-rail-row-marker {
-  width: 12px;
-  height: 12px;
+/* Status dot — a single left-aligned indicator encoding the session's live state by hue + motion */
+.pid-rail-row-dot {
+  position: relative;
   flex: 0 0 auto;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid var(--ink-3);
-  border-radius: 50%;
+  width: 8px;
+  height: 8px;
   box-sizing: border-box;
+  border-radius: 50%;
+  /* idle default — neutral, slightly recessive. */
+  color: var(--ink-3);
+  background: currentColor;
+}
+/* Idle reads as an empty ring — a hollow neutral circle, visually distinct from the filled
+   live states. box-sizing: border-box keeps the 8px outer size so it never reflows the title. */
+.pid-rail-row-dot[data-status="idle"] {
   background: transparent;
+  border: 1.5px solid currentColor;
+  opacity: 0.8;
 }
-.pid-rail-row-marker[data-state="active"] {
-  border-color: var(--accent);
+.pid-rail-row-dot[data-status="working"] {
+  color: var(--mod);
 }
-.pid-rail-row-marker[data-state="active"]::after {
+.pid-rail-row-dot[data-status="waiting"] {
+  color: var(--info);
+  animation: pid-status-pulse 1.4s ease-in-out infinite;
+}
+.pid-rail-row-dot[data-status="done"] {
+  color: var(--add);
+}
+.pid-rail-row-dot[data-status="failed"] {
+  color: var(--del);
+}
+/* Ring / halo. Working animates an expanding ring; waiting/done/failed hold a steady halo so
+   they read as "settled but notable". Idle has none. */
+.pid-rail-row-dot[data-status="working"]::after,
+.pid-rail-row-dot[data-status="waiting"]::after,
+.pid-rail-row-dot[data-status="done"]::after,
+.pid-rail-row-dot[data-status="failed"]::after {
   content: "";
-  width: 6px;
-  height: 6px;
+  position: absolute;
+  inset: -3px;
   border-radius: 50%;
-  background: var(--accent);
+  border: 1.5px solid currentColor;
 }
-.pid-rail-row-live {
-  flex: 0 0 auto;
-  width: 7px;
-  height: 7px;
-  /* Pulls the dot inboard so it sits roughly where the centre of a 2-char timestamp
-     ("5h") would land, instead of flush against the row's right padding. */
-  margin-right: 6px;
-  border-radius: 50%;
-  background: var(--add);
-  box-shadow: 0 0 0 0 var(--add);
-  animation: pid-rail-row-pulse 1.6s ease-out infinite;
+.pid-rail-row-dot[data-status="working"]::after {
+  animation: pid-rail-row-ring 1.5s ease-out infinite;
+}
+.pid-rail-row-dot[data-status="waiting"]::after {
+  opacity: 0.4;
+}
+.pid-rail-row-dot[data-status="done"]::after {
+  opacity: 0.3;
+}
+.pid-rail-row-dot[data-status="failed"]::after {
+  opacity: 0.35;
 }
-@keyframes pid-rail-row-pulse {
+@keyframes pid-rail-row-ring {
   0% {
-    box-shadow: 0 0 0 0 oklch(0.78 0.16 145 / 0.55);
+    transform: scale(0.55);
+    opacity: 0.7;
   }
   100% {
-    box-shadow: 0 0 0 6px oklch(0.78 0.16 145 / 0);
+    transform: scale(1.9);
+    opacity: 0;
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .pid-rail-row-live {
+  .pid-rail-row-dot[data-status="waiting"] {
+    animation: none;
+  }
+  /* Drop the expanding ring but keep a static one so working stays distinguishable. */
+  .pid-rail-row-dot[data-status="working"]::after {
     animation: none;
+    opacity: 0.4;
   }
 }
 .pid-rail-row-main {