From 0168703d4fcc4e971139eb25b73ce6e46fdf1d64 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Sun, 3 May 2026 22:00:05 +0100
Subject: [PATCH] fix(ui): make idle session badges transient

Keep idle status visible only briefly after active work finishes so the session list and headers emphasize meaningful state changes instead of permanent idle noise.
---
 packages/ui/src/components/instance-tab.tsx   | 41 ++++++++++------
 .../components/instance/instance-shell2.tsx   |  6 ++-
 packages/ui/src/components/session-list.tsx   | 21 +++++----
 packages/ui/src/stores/session-api.ts         | 17 ++++---
 packages/ui/src/stores/session-events.ts      |  9 ++++
 packages/ui/src/stores/session-state.ts       |  3 +-
 packages/ui/src/stores/session-status.test.ts | 27 +++++++++++
 packages/ui/src/stores/session-status.ts      | 47 ++++++++++++++++++-
 packages/ui/src/types/session.ts              | 19 ++++++++
 9 files changed, 156 insertions(+), 34 deletions(-)

diff --git a/packages/ui/src/components/instance-tab.tsx b/packages/ui/src/components/instance-tab.tsx
index f345f637..a2c80299 100644
--- a/packages/ui/src/components/instance-tab.tsx
+++ b/packages/ui/src/components/instance-tab.tsx
@@ -1,4 +1,4 @@
-import { Component, createMemo } from "solid-js"
+import { Component, Show, createEffect, createMemo, createSignal, onCleanup } from "solid-js"
 import type { Instance } from "../types/instance"
 import { getInstanceSessionIndicatorStatus } from "../stores/session-status"
 import { FolderOpen, ShieldAlert, X } from "lucide-solid"
@@ -20,9 +20,18 @@ function getPathBasename(path: string): string {
 
 const InstanceTab: Component<InstanceTabProps> = (props) => {
   const { t } = useI18n()
-  const aggregatedStatus = createMemo(() => getInstanceSessionIndicatorStatus(props.instance.id))
+  const [now, setNow] = createSignal(Date.now())
+
+  createEffect(() => {
+    if (typeof window === "undefined") return
+    const timer = window.setInterval(() => setNow(Date.now()), 1000)
+    onCleanup(() => window.clearInterval(timer))
+  })
+
+  const aggregatedStatus = createMemo(() => getInstanceSessionIndicatorStatus(props.instance.id, now()))
   const statusClassName = createMemo(() => {
     const status = aggregatedStatus()
+    if (!status) return null
     return status === "permission" ? "session-permission" : `session-${status}`
   })
   const statusTitle = createMemo(() => {
@@ -33,8 +42,10 @@ const InstanceTab: Component<InstanceTabProps> = (props) => {
         return t("instanceTab.status.compacting")
       case "working":
         return t("instanceTab.status.working")
-      default:
+      case "idle":
         return t("instanceTab.status.idle")
+      default:
+        return null
     }
   })
 
@@ -51,17 +62,19 @@ const InstanceTab: Component<InstanceTabProps> = (props) => {
         <span class="tab-label">
           {getPathBasename(props.instance.folder)}
         </span>
-        <span
-          class={`status-indicator session-status ml-auto ${statusClassName()}`}
-          title={statusTitle()}
-          aria-label={t("instanceTab.status.ariaLabel", { status: statusTitle() })}
-        >
-          {aggregatedStatus() === "permission" ? (
-            <ShieldAlert class="w-3.5 h-3.5" aria-hidden="true" />
-          ) : (
-            <span class="status-dot" />
-          )}
-        </span>
+        <Show when={statusClassName() && statusTitle()}>
+          <span
+            class={`status-indicator session-status ml-auto ${statusClassName()}`}
+            title={statusTitle() ?? undefined}
+            aria-label={t("instanceTab.status.ariaLabel", { status: statusTitle() ?? "" })}
+          >
+            {aggregatedStatus() === "permission" ? (
+              <ShieldAlert class="w-3.5 h-3.5" aria-hidden="true" />
+            ) : (
+              <span class="status-dot" />
+            )}
+          </span>
+        </Show>
         <span
           class="tab-close"
           onClick={(e) => {
diff --git a/packages/ui/src/components/instance/instance-shell2.tsx b/packages/ui/src/components/instance/instance-shell2.tsx
index e940b43d..eaa231cc 100644
--- a/packages/ui/src/components/instance/instance-shell2.tsx
+++ b/packages/ui/src/components/instance/instance-shell2.tsx
@@ -41,7 +41,7 @@ import SessionSidebar from "./shell/SessionSidebar"
 import { useSessionSidebarRequests } from "./shell/useSessionSidebarRequests"
 import RightPanel from "./shell/right-panel/RightPanel"
 import { useDrawerChrome } from "./shell/useDrawerChrome"
-import { getRetrySeconds, getSessionRetry, getSessionStatus } from "../../stores/session-status"
+import { getRetrySeconds, getSessionRetry, getSessionStatus, shouldShowSessionStatus } from "../../stores/session-status"
 import { Maximize2, ShieldAlert } from "lucide-solid"
 import type { PromptInputApi } from "../prompt-input/types"
 
@@ -329,6 +329,10 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
 
     const status = getSessionStatus(props.instance.id, activeSessionId)
     const retry = getSessionRetry(props.instance.id, activeSessionId)
+    const showStatus = shouldShowSessionStatus(props.instance.id, activeSessionId, now())
+    if (!showStatus) {
+      return null
+    }
     const text = retry
       ? (() => {
           const seconds = getRetrySeconds(retry.next, now())
diff --git a/packages/ui/src/components/session-list.tsx b/packages/ui/src/components/session-list.tsx
index a3c94ea9..8408a3ef 100644
--- a/packages/ui/src/components/session-list.tsx
+++ b/packages/ui/src/components/session-list.tsx
@@ -1,7 +1,7 @@
 import { Component, For, Show, createSignal, createMemo, createEffect, JSX, onCleanup } from "solid-js"
 import type { SessionStatus } from "../types/session"
 import type { SessionThread } from "../stores/session-state"
-import { getRetrySeconds, getSessionRetry, getSessionStatus } from "../stores/session-status"
+import { getRetrySeconds, getSessionRetry, getSessionStatus, shouldShowSessionStatus } from "../stores/session-status"
 import { Bot, User, Copy, Trash2, Pencil, ShieldAlert, ChevronDown, Search, Square, CheckSquare, MinusSquare, Split, RotateCw } from "lucide-solid"
 import KeyboardHint from "./keyboard-hint"
 import SessionRenameDialog from "./session-rename-dialog"
@@ -427,6 +427,7 @@ const SessionList: Component<SessionListProps> = (props) => {
     const needsQuestion = () => Boolean((session() as any)?.pendingQuestion)
     const needsInput = () => needsPermission() || needsQuestion()
     const statusClassName = () => (needsInput() ? "session-permission" : `session-${retry() ? "retrying" : status()}`)
+    const showStatus = () => needsInput() || shouldShowSessionStatus(props.instanceId, rowProps.sessionId, now())
     const statusText = () =>
       needsPermission()
         ? t("sessionList.status.needsPermission")
@@ -520,14 +521,16 @@ const SessionList: Component<SessionListProps> = (props) => {
                   <ChevronDown class={`w-3.5 h-3.5 transition-transform ${rowProps.expanded ? "" : "-rotate-90"}`} />
                 </span>
               </Show>
-              <span
-                class={`status-indicator session-status session-status-list ${statusClassName()} notranslate`}
-                title={statusTooltip()}
-                translate="no"
-              >
-                {needsInput() ? <ShieldAlert class="w-3.5 h-3.5" aria-hidden="true" /> : <span class="status-dot" />}
-                {statusText()}
-              </span>
+              <Show when={showStatus()}>
+                <span
+                  class={`status-indicator session-status session-status-list ${statusClassName()} notranslate`}
+                  title={statusTooltip()}
+                  translate="no"
+                >
+                  {needsInput() ? <ShieldAlert class="w-3.5 h-3.5" aria-hidden="true" /> : <span class="status-dot" />}
+                  {statusText()}
+                </span>
+              </Show>
               <Show when={showWorktreeBadge()}>
                 <span class="status-indicator session-status-list worktree-indicator" title={`Worktree: ${worktreeSlug()}`}>
                   <Split class="w-3.5 h-3.5" aria-hidden="true" />
diff --git a/packages/ui/src/stores/session-api.ts b/packages/ui/src/stores/session-api.ts
index 9c3520b9..9771aba1 100644
--- a/packages/ui/src/stores/session-api.ts
+++ b/packages/ui/src/stores/session-api.ts
@@ -1,4 +1,4 @@
-import { mapSdkSessionRetry, mapSdkSessionStatus, type Session, type SessionStatus } from "../types/session"
+import { getIdleSinceForStatusTransition, mapSdkSessionRetry, mapSdkSessionStatus, type Session, type SessionStatus } from "../types/session"
 import type { Message } from "../types/message"
 import type { FileDiff } from "@opencode-ai/sdk/v2/client"
 
@@ -175,6 +175,7 @@ async function fetchSessions(instanceId: string): Promise<void> {
         model: existingSession?.model ?? { providerId: "", modelId: "" },
         status,
         retry,
+        idleSince: getIdleSinceForStatusTransition(existingStatus, status, existingSession?.idleSince),
         version: apiSession.version,
         time: {
           ...apiSession.time,
@@ -273,6 +274,7 @@ async function createSession(instanceId: string, agent?: string): Promise<Sessio
       agent: selectedAgent,
       model: defaultModel,
       status: "idle",
+      idleSince: null,
       version: response.data.version,
       time: {
         ...response.data.time,
@@ -378,12 +380,13 @@ async function forkSession(
     title: info.title || "Forked Session",
     parentId: info.parentID || null,
     agent: info.agent || "",
-    model: {
-      providerId: info.model?.providerID || "",
-      modelId: info.model?.modelID || "",
-    },
-    status: "idle",
-    version: "0",
+     model: {
+       providerId: info.model?.providerID || "",
+       modelId: info.model?.modelID || "",
+     },
+     status: "idle",
+     idleSince: null,
+     version: "0",
     time: info.time ? { ...info.time } : { created: Date.now(), updated: Date.now() },
     revert: info.revert
       ? {
diff --git a/packages/ui/src/stores/session-events.ts b/packages/ui/src/stores/session-events.ts
index 1068636c..ef4764b0 100644
--- a/packages/ui/src/stores/session-events.ts
+++ b/packages/ui/src/stores/session-events.ts
@@ -41,6 +41,7 @@ import {
 import { showAlertDialog } from "./alerts"
 import {
   createClientSession,
+  getIdleSinceForStatusTransition,
   mapSdkSessionRetry,
   mapSdkSessionStatus,
   type Session,
@@ -161,6 +162,7 @@ function applySessionStatus(instanceId: string, sessionId: string, status: Sessi
 
     session.status = status
     session.retry = status === "working" ? nextRetry : null
+    session.idleSince = getIdleSinceForStatusTransition(current, status, session.idleSince)
 
     // Auto-expand the parent thread when a child session starts working.
     // Users can still collapse it; we only expand on the transition.
@@ -227,6 +229,11 @@ async function fetchSessionInfo(instanceId: string, sessionId: string, directory
         model: existing?.model ?? fetched.model,
         status: existing?.status === "compacting" ? "compacting" : fetched.status,
         retry: existing?.status === "compacting" ? null : fetched.retry,
+        idleSince: getIdleSinceForStatusTransition(
+          existing?.status,
+          existing?.status === "compacting" ? "compacting" : fetched.status,
+          existing?.idleSince,
+        ),
         pendingPermission: existing?.pendingPermission ?? fetched.pendingPermission,
         pendingQuestion: existing?.pendingQuestion ?? false,
       }
@@ -458,6 +465,7 @@ function handleSessionUpdate(instanceId: string, event: EventSessionUpdated): vo
       },
       status: "idle",
       retry: null,
+      idleSince: null,
       version: info.version || "0",
       time: info.time
         ? { ...info.time }
@@ -600,6 +608,7 @@ function handleSessionCompacted(instanceId: string, event: EventSessionCompacted
     withSession(instanceId, sessionID, (session) => {
       session.status = "working"
       session.retry = null
+      session.idleSince = null
     })
   } else {
     ensureSessionStatus(instanceId, sessionID, "working", (event as any)?.directory)
diff --git a/packages/ui/src/stores/session-state.ts b/packages/ui/src/stores/session-state.ts
index c4703e0b..79e600bf 100644
--- a/packages/ui/src/stores/session-state.ts
+++ b/packages/ui/src/stores/session-state.ts
@@ -1,6 +1,6 @@
 import { batch, createSignal } from "solid-js"
 
-import type { Session, SessionStatus, Agent, Provider } from "../types/session"
+import { getIdleSinceForStatusTransition, type Session, type SessionStatus, type Agent, type Provider } from "../types/session"
 import { deleteSession, loadMessages } from "./session-api"
 import { showToastNotification } from "../lib/notifications"
 import { messageStoreBus } from "./message-v2/bus"
@@ -353,6 +353,7 @@ function setSessionStatus(instanceId: string, sessionId: string, status: Session
     if (session.status === status) return false
     const previous = session.status
     session.status = status
+    session.idleSince = getIdleSinceForStatusTransition(previous, status, session.idleSince)
     if (status !== "working") {
       session.retry = null
     }
diff --git a/packages/ui/src/stores/session-status.test.ts b/packages/ui/src/stores/session-status.test.ts
index 2413743d..1d674e1f 100644
--- a/packages/ui/src/stores/session-status.test.ts
+++ b/packages/ui/src/stores/session-status.test.ts
@@ -1,6 +1,8 @@
 import assert from "node:assert/strict"
 import { describe, it } from "node:test"
 
+import { getIdleSinceForStatusTransition } from "../types/session.ts"
+import { IDLE_STATUS_VISIBILITY_MS, shouldShowIdleStatus } from "./session-status.ts"
 import { shouldSessionHoldWakeLock } from "./wake-lock-eligibility.ts"
 
 describe("shouldSessionHoldWakeLock", () => {
@@ -18,3 +20,28 @@ describe("shouldSessionHoldWakeLock", () => {
     assert.equal(shouldSessionHoldWakeLock({ status: "working", pendingPermission: false, pendingQuestion: true }), false)
   })
 })
+
+describe("idle status visibility", () => {
+  it("shows idle briefly after transitioning from active work", () => {
+    const idleSince = getIdleSinceForStatusTransition("working", "idle", null, 1_000)
+
+    assert.equal(idleSince, 1_000)
+    assert.equal(shouldShowIdleStatus({ status: "idle", idleSince }, 1_000), true)
+    assert.equal(shouldShowIdleStatus({ status: "idle", idleSince }, 1_000 + IDLE_STATUS_VISIBILITY_MS - 1), true)
+    assert.equal(shouldShowIdleStatus({ status: "idle", idleSince }, 1_000 + IDLE_STATUS_VISIBILITY_MS), false)
+  })
+
+  it("does not show idle for sessions that started idle", () => {
+    const idleSince = getIdleSinceForStatusTransition(undefined, "idle", null, 1_000)
+
+    assert.equal(idleSince, null)
+    assert.equal(shouldShowIdleStatus({ status: "idle", idleSince }, 1_000), false)
+  })
+
+  it("clears idle visibility when work resumes", () => {
+    const idleSince = getIdleSinceForStatusTransition("idle", "working", 1_000, 2_000)
+
+    assert.equal(idleSince, null)
+    assert.equal(shouldShowIdleStatus({ status: "working", idleSince }, 2_000), false)
+  })
+})
diff --git a/packages/ui/src/stores/session-status.ts b/packages/ui/src/stores/session-status.ts
index 7ce17fac..5238cfaf 100644
--- a/packages/ui/src/stores/session-status.ts
+++ b/packages/ui/src/stores/session-status.ts
@@ -2,6 +2,8 @@ import type { Session, SessionRetryState, SessionStatus } from "../types/session
 import { getInstanceSessionIndicatorStatusCached, sessions } from "./session-state"
 import { shouldSessionHoldWakeLock } from "./wake-lock-eligibility"
 
+export const IDLE_STATUS_VISIBILITY_MS = 5000
+
 function getSession(instanceId: string, sessionId: string): Session | null {
   const instanceSessions = sessions().get(instanceId)
   return instanceSessions?.get(sessionId) ?? null
@@ -35,14 +37,55 @@ export function getSessionRetry(instanceId: string, sessionId: string): SessionR
   return session?.retry ?? null
 }
 
+export function shouldShowIdleStatus(session: Pick<Session, "status" | "idleSince"> | null | undefined, now = Date.now()): boolean {
+  if (!session || session.status !== "idle") {
+    return false
+  }
+
+  if (typeof session.idleSince !== "number") {
+    return false
+  }
+
+  return now - session.idleSince < IDLE_STATUS_VISIBILITY_MS
+}
+
+export function shouldShowSessionStatus(instanceId: string, sessionId: string, now = Date.now()): boolean {
+  const session = getSession(instanceId, sessionId)
+  if (!session) {
+    return false
+  }
+
+  if (session.pendingPermission || session.pendingQuestion || session.retry) {
+    return true
+  }
+
+  return session.status !== "idle" || shouldShowIdleStatus(session, now)
+}
+
 export function getRetrySeconds(next: number, now = Date.now()): number {
   return Math.max(0, Math.round((next - now) / 1000))
 }
 
 export type InstanceSessionIndicatorStatus = "permission" | SessionStatus
 
-export function getInstanceSessionIndicatorStatus(instanceId: string): InstanceSessionIndicatorStatus {
-  return getInstanceSessionIndicatorStatusCached(instanceId)
+export function getInstanceSessionIndicatorStatus(instanceId: string, now = Date.now()): InstanceSessionIndicatorStatus | null {
+  const aggregated = getInstanceSessionIndicatorStatusCached(instanceId)
+  if (aggregated !== "idle") {
+    return aggregated
+  }
+
+  const instanceSessions = sessions().get(instanceId)
+  if (!instanceSessions) {
+    return null
+  }
+
+  for (const session of instanceSessions.values()) {
+    if (shouldShowIdleStatus(session, now)) {
+      return "idle"
+    }
+  }
+
+  return null
 }
 
 export function isSessionBusy(instanceId: string, sessionId: string): boolean {
diff --git a/packages/ui/src/types/session.ts b/packages/ui/src/types/session.ts
index de1a6e8d..9b5e736e 100644
--- a/packages/ui/src/types/session.ts
+++ b/packages/ui/src/types/session.ts
@@ -22,6 +22,23 @@ export interface SessionRetryState {
   next: number
 }
 
+export function getIdleSinceForStatusTransition(
+  previousStatus: SessionStatus | null | undefined,
+  nextStatus: SessionStatus,
+  previousIdleSince: number | null | undefined,
+  now = Date.now(),
+): number | null {
+  if (nextStatus !== "idle") {
+    return null
+  }
+
+  if (previousStatus && previousStatus !== "idle") {
+    return now
+  }
+
+  return previousIdleSince ?? null
+}
+
 export function mapSdkSessionStatus(status: SDKSessionStatus | null | undefined): SessionStatus {
   if (!status || status.type === "idle") {
     return "idle"
@@ -58,6 +75,7 @@ export interface Session
   pendingQuestion?: boolean // Indicates if session is waiting on user input
   status: SessionStatus // Single source of truth for session status
   retry?: SessionRetryState | null // Retry metadata for transient backoff states
+  idleSince?: number | null // Timestamp for short-lived idle badge visibility after active work completes
   diff?: FileDiff[] // Session-level file diffs (hydrated via session.diff)
 }
 
@@ -76,6 +94,7 @@ export function createClientSession(
     agent,
     model,
     status,
+    idleSince: null,
   }
 }