feat: inline activity monitor (status+elapsed+needs-input) & input.required notification

feat: track processing start-times + global needs-input set for activity monitor
refactor: single source of truth for model persistence (remove redundant global writes)
2026-05-30 13:05:43 -04:00 · 2026-05-30 13:00:42 -04:00 · 2026-05-30 13:00:25 -04:00 · 2026-05-30 12:59:37 -04:00 · 2026-05-30 11:21:54 -04:00
15 changed files with 305 additions and 42 deletions
--- a/docs/superpowers/specs/2026-05-30-session-status-indicators-design.md
+++ b/docs/superpowers/specs/2026-05-30-session-status-indicators-design.md
@ -0,0 +1,34 @@
+# Session Status Indicators - Design
+
+Date: 2026-05-30
+Status: Approved (3-distinct-states)
+
+## Problem
+Sidebar session indicator is an animated green dot driven purely by timestamp
+(isActive: diffInMinutes < 10 in sidebar/utils/utils.ts). It lights up for any
+session touched in the last 10 min regardless of whether an agent is running.
+The real processing state (processingSessions Set, event-driven) is only shown
+in the chat-area status bar, never in the sidebar.
+
+## Three States
+- Processing: processingSessions.has(session.id) -> amber dot, animate-ping halo + solid core. Title "Agent running".
+- Recently active: sessionView.isActive && !isProcessing -> static sky-blue dot. Title "Recently active".
+- Idle: neither -> no indicator.
+
+## Data flow (new threading, parallel to currentTime)
+AppContent -> useProjectsState({processingSessions}) -> sidebarSharedProps
+-> Sidebar (SidebarProps) -> projectListProps -> SidebarProjectList
+-> SidebarProjectItem -> SidebarProjectSessions -> SidebarSessionItem.
+processingSessions optional in leaf types -> graceful degrade.
+
+## Files
+1. app/AppContent.tsx - pass processingSessions into useProjectsState
+2. hooks/useProjectsState.ts - accept + sidebarSharedProps + deps
+3. sidebar/types/types.ts - SidebarProps gains processingSessions
+4. sidebar/view/Sidebar.tsx - destructure + projectListProps
+5. sidebar/view/subcomponents/SidebarProjectList.tsx - type + passthrough
+6. sidebar/view/subcomponents/SidebarProjectItem.tsx - type + passthrough
+7. sidebar/view/subcomponents/SidebarProjectSessions.tsx - type + passthrough
+8. sidebar/view/subcomponents/SidebarSessionItem.tsx - 3-state indicator
+
+## Risk: low, additive prop threading + presentational swap. Feature branch, no deploy until reviewed.
--- a/server/claude-sdk.js
+++ b/server/claude-sdk.js
@ -535,13 +535,13 @@ async function queryClaudeSDK(command, options = {}, ws) {
    sdkOptions.canUseTool = async (toolName, input, context) => {
      const requiresInteraction = TOOLS_REQUIRING_INTERACTION.has(toolName);

-      // Dangerously-skip / bypass mode: auto-allow EVERY tool, including interactive
-      // ones (AskUserQuestion, ExitPlanMode). This guarantees zero prompts.
-      if (sdkOptions.permissionMode === 'bypassPermissions') {
-        return { behavior: 'allow', updatedInput: input };
-      }
-
      if (!requiresInteraction) {
+        // Bypass / dangerously-skip: auto-allow normal tools (no prompt). Interactive
+        // tools (AskUserQuestion, ExitPlanMode) are NOT bypassed - they are genuine
+        // requests for user input and must still reach the user and fire a notification.
+        if (sdkOptions.permissionMode === 'bypassPermissions') {
+          return { behavior: 'allow', updatedInput: input };
+        }
        const isDisallowed = (sdkOptions.disallowedTools || []).some(entry =>
          matchesToolPermission(entry, toolName, input)
        );
@ -563,7 +563,7 @@ async function queryClaudeSDK(command, options = {}, ws) {
        provider: 'claude',
        sessionId: capturedSessionId || sessionId || null,
        kind: 'action_required',
-        code: 'permission.required',
+        code: requiresInteraction ? 'input.required' : 'permission.required',
        meta: { toolName, sessionName: sessionSummary },
        severity: 'warning',
        requiresUserAction: true,
--- a/server/services/notification-orchestrator.js
+++ b/server/services/notification-orchestrator.js
@ -116,6 +116,7 @@ function buildPushBody(event) {
    'permission.required': event.meta?.toolName
      ? `Action Required: Tool "${event.meta.toolName}" needs approval`
      : 'Action Required: A tool needs your approval',
+    'input.required': 'Needs your input: Claude is waiting for an answer',
    'run.stopped': event.meta?.stopReason || 'Run Stopped: The run has stopped',
    'run.failed': event.meta?.error ? `Run Failed: ${event.meta.error}` : 'Run Failed: The run encountered an error',
    'agent.notification': event.meta?.message ? String(event.meta.message) : 'You have a new notification',
--- a/src/components/app/AppContent.tsx
+++ b/src/components/app/AppContent.tsx
@ -34,6 +34,10 @@ function AppContentInner() {
    markSessionAsInactive,
    markSessionAsProcessing,
    markSessionAsNotProcessing,
+    processingStartTimes,
+    needsInputSessions,
+    markSessionAsNeedsInput,
+    clearSessionNeedsInput,
  } = useSessionProtection();

  const {
@ -58,8 +62,34 @@ function AppContentInner() {
    latestMessage,
    isMobile,
    activeSessions,
+    processingSessions,
+    processingStartTimes,
+    needsInputSessions,
  });

+  // Observe the shared websocket stream at the app level so the sidebar can show
+  // a "needs input" state for ANY session (not just the open one). A pending
+  // permission / AskUserQuestion marks the session; resolution clears it.
+  useEffect(() => {
+    const msg = latestMessage as { kind?: string; sessionId?: string | null } | null;
+    if (!msg || !msg.kind) {
+      return;
+    }
+    const sid = msg.sessionId || null;
+    if (!sid) {
+      return;
+    }
+    if (msg.kind === 'permission_request') {
+      markSessionAsNeedsInput(sid);
+    } else if (
+      msg.kind === 'permission_cancelled' ||
+      msg.kind === 'complete' ||
+      msg.kind === 'error'
+    ) {
+      clearSessionNeedsInput(sid);
+    }
+  }, [latestMessage, markSessionAsNeedsInput, clearSessionNeedsInput]);
+
  usePaletteOpsRegister({
    openSettings,
    refreshProjects: refreshProjectsSilently,
--- a/src/components/chat/hooks/useChatProviderState.ts
+++ b/src/components/chat/hooks/useChatProviderState.ts
@ -16,6 +16,12 @@ const getPermissionModesForProvider = (provider: LLMProvider): PermissionMode[]
  return ['default', 'acceptEdits', 'bypassPermissions', 'plan'];
 };

+// Per-session model persistence keys.
+// Global key (`${provider}-model`) holds the "last used" default for NEW sessions.
+// Session key (`${provider}-model-${sessionId}`) pins the model for that session.
+const globalModelKey = (provider: string) => `${provider}-model`;
+const sessionModelKey = (provider: string, sessionId: string) => `${provider}-model-${sessionId}`;
+
 interface UseChatProviderStateArgs {
  selectedSession: ProjectSession | null;
 }
@ -26,18 +32,21 @@ export function useChatProviderState({ selectedSession }: UseChatProviderStateAr
  const [provider, setProvider] = useState<LLMProvider>(() => {
    return (localStorage.getItem('selected-provider') as LLMProvider) || 'claude';
  });
-  const [cursorModel, setCursorModel] = useState<string>(() => {
-    return localStorage.getItem('cursor-model') || CURSOR_MODELS.DEFAULT;
-  });
-  const [claudeModel, setClaudeModel] = useState<string>(() => {
-    return localStorage.getItem('claude-model') || CLAUDE_MODELS.DEFAULT;
-  });
-  const [codexModel, setCodexModel] = useState<string>(() => {
-    return localStorage.getItem('codex-model') || CODEX_MODELS.DEFAULT;
-  });
-  const [geminiModel, setGeminiModel] = useState<string>(() => {
-    return localStorage.getItem('gemini-model') || GEMINI_MODELS.DEFAULT;
-  });
+
+  // Initial model values: prefer the per-session pin if a session is already
+  // selected on mount, otherwise the global last-used default.
+  const initialModel = (p: string, fallback: string) => {
+    if (selectedSession?.id) {
+      const pinned = localStorage.getItem(sessionModelKey(p, selectedSession.id));
+      if (pinned) return pinned;
+    }
+    return localStorage.getItem(globalModelKey(p)) || fallback;
+  };
+
+  const [cursorModel, setCursorModelState] = useState<string>(() => initialModel('cursor', CURSOR_MODELS.DEFAULT));
+  const [claudeModel, setClaudeModelState] = useState<string>(() => initialModel('claude', CLAUDE_MODELS.DEFAULT));
+  const [codexModel, setCodexModelState] = useState<string>(() => initialModel('codex', CODEX_MODELS.DEFAULT));
+  const [geminiModel, setGeminiModelState] = useState<string>(() => initialModel('gemini', GEMINI_MODELS.DEFAULT));

  // Live model lists — fall back to static constants until API responds
  const [claudeModelOptions, setClaudeModelOptions] = useState<ModelOption[]>(CLAUDE_MODELS.OPTIONS);
@ -45,7 +54,43 @@ export function useChatProviderState({ selectedSession }: UseChatProviderStateAr
  const [geminiModelOptions] = useState<ModelOption[]>(GEMINI_MODELS.OPTIONS);
  const [cursorModelOptions] = useState<ModelOption[]>(CURSOR_MODELS.OPTIONS);

-  // Fetch live model list and validate the saved claude model
+  // Persisted setters: write BOTH the per-session pin (if a session is active)
+  // and the global last-used default, then update state.
+  const makePersistedSetter = useCallback(
+    (p: string, setState: (v: string) => void) => (value: string) => {
+      setState(value);
+      localStorage.setItem(globalModelKey(p), value);
+      if (selectedSession?.id) {
+        localStorage.setItem(sessionModelKey(p, selectedSession.id), value);
+      }
+    },
+    [selectedSession?.id],
+  );
+
+  const setCursorModel = useCallback(makePersistedSetter('cursor', setCursorModelState), [makePersistedSetter]);
+  const setClaudeModel = useCallback(makePersistedSetter('claude', setClaudeModelState), [makePersistedSetter]);
+  const setCodexModel = useCallback(makePersistedSetter('codex', setCodexModelState), [makePersistedSetter]);
+  const setGeminiModel = useCallback(makePersistedSetter('gemini', setGeminiModelState), [makePersistedSetter]);
+
+  // When the selected session changes, load each provider's pinned model for
+  // that session (falling back to the global default). This is what stops a
+  // model picked in session A from leaking into session B.
+  useEffect(() => {
+    if (!selectedSession?.id) {
+      return;
+    }
+    const load = (p: string, setState: (v: string) => void, fallback: string) => {
+      const pinned = localStorage.getItem(sessionModelKey(p, selectedSession.id));
+      const next = pinned || localStorage.getItem(globalModelKey(p)) || fallback;
+      setState(next);
+    };
+    load('cursor', setCursorModelState, CURSOR_MODELS.DEFAULT);
+    load('claude', setClaudeModelState, CLAUDE_MODELS.DEFAULT);
+    load('codex', setCodexModelState, CODEX_MODELS.DEFAULT);
+    load('gemini', setGeminiModelState, GEMINI_MODELS.DEFAULT);
+  }, [selectedSession?.id]);
+
+  // Fetch live Claude model list and validate the current claude model
  useEffect(() => {
    authenticatedFetch('/api/models')
      .then((res) => {
@ -57,18 +102,21 @@ export function useChatProviderState({ selectedSession }: UseChatProviderStateAr
        const options: ModelOption[] = data.claude;
        setClaudeModelOptions(options);

-        // Validate saved model — if it's no longer in the list, reset to default
-        setClaudeModel((current) => {
+        setClaudeModelState((current) => {
          const valid = options.some((o) => o.value === current);
          if (valid) return current;
          const fallback = options[0]?.value ?? CLAUDE_MODELS.DEFAULT;
-          localStorage.setItem('claude-model', fallback);
+          localStorage.setItem(globalModelKey('claude'), fallback);
+          if (selectedSession?.id) {
+            localStorage.setItem(sessionModelKey('claude', selectedSession.id), fallback);
+          }
          return fallback;
        });
      })
      .catch(() => {
-        // Static fallback already in place — nothing to do
+        // Static fallback already in place
      });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const lastProviderRef = useRef(provider);
@ -119,8 +167,8 @@ export function useChatProviderState({ selectedSession }: UseChatProviderStateAr
        }

        const modelId = data.config.model.modelId as string;
-        if (!localStorage.getItem('cursor-model')) {
-          setCursorModel(modelId);
+        if (!localStorage.getItem(globalModelKey('cursor'))) {
+          setCursorModelState(modelId);
        }
      })
      .catch((error) => {
--- a/src/components/chat/view/subcomponents/ModelSelectorBar.tsx
+++ b/src/components/chat/view/subcomponents/ModelSelectorBar.tsx
@ -97,7 +97,6 @@ export default function ModelSelectorBar({
      gemini: setGeminiModel,
    };
    setters[provider]?.(modelValue);
-    localStorage.setItem(`${provider}-model`, modelValue);
    setOpen(false);
    setSearch('');
  };
--- a/src/components/chat/view/subcomponents/ProviderSelectionEmptyState.tsx
+++ b/src/components/chat/view/subcomponents/ProviderSelectionEmptyState.tsx
@ -174,16 +174,12 @@ export default function ProviderSelectionEmptyState({
    (providerId: LLMProvider, modelValue: string) => {
      if (providerId === "claude") {
        setClaudeModel(modelValue);
-        localStorage.setItem("claude-model", modelValue);
      } else if (providerId === "codex") {
        setCodexModel(modelValue);
-        localStorage.setItem("codex-model", modelValue);
      } else if (providerId === "gemini") {
        setGeminiModel(modelValue);
-        localStorage.setItem("gemini-model", modelValue);
      } else {
        setCursorModel(modelValue);
-        localStorage.setItem("cursor-model", modelValue);
      }
    },
    [setClaudeModel, setCursorModel, setCodexModel, setGeminiModel],
--- a/src/components/sidebar/types/types.ts
+++ b/src/components/sidebar/types/types.ts
@ -56,6 +56,9 @@ export type SidebarProps = {
  settingsInitialTab: string;
  onCloseSettings: () => void;
  isMobile: boolean;
+  processingSessions?: Set<string>;
+  processingStartTimes?: Map<string, number>;
+  needsInputSessions?: Set<string>;
 };

 export type SessionViewModel = {
--- a/src/components/sidebar/view/Sidebar.tsx
+++ b/src/components/sidebar/view/Sidebar.tsx
@ -39,6 +39,9 @@ function Sidebar({
  settingsInitialTab,
  onCloseSettings,
  isMobile,
+  processingSessions,
+  processingStartTimes,
+  needsInputSessions,
 }: SidebarProps) {
  const { t } = useTranslation(['sidebar', 'common']);
  const { isPWA } = useDeviceSettings({ trackMobile: false });
@ -152,6 +155,9 @@ function Sidebar({
    editingName,
    initialSessionsLoaded,
    currentTime,
+    processingSessions,
+    processingStartTimes,
+    needsInputSessions,
    editingSession,
    editingSessionName,
    deletingProjects,
--- a/src/components/sidebar/view/subcomponents/SidebarProjectItem.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarProjectItem.tsx
@ -23,6 +23,9 @@ type SidebarProjectItemProps = {
  initialSessionsLoaded: boolean;
  isLoadingMoreSessions: boolean;
  currentTime: Date;
+  processingSessions?: Set<string>;
+  processingStartTimes?: Map<string, number>;
+  needsInputSessions?: Set<string>;
  editingSession: string | null;
  editingSessionName: string;
  tasksEnabled: boolean;
@ -69,6 +72,9 @@ export default function SidebarProjectItem({
  initialSessionsLoaded,
  isLoadingMoreSessions,
  currentTime,
+  processingSessions,
+  processingStartTimes,
+  needsInputSessions,
  editingSession,
  editingSessionName,
  tasksEnabled,
@ -412,6 +418,9 @@ export default function SidebarProjectItem({
        hasMoreSessions={Boolean(project.sessionMeta?.hasMore)}
        isLoadingMoreSessions={isLoadingMoreSessions}
        currentTime={currentTime}
+        processingSessions={processingSessions}
+        processingStartTimes={processingStartTimes}
+        needsInputSessions={needsInputSessions}
        editingSession={editingSession}
        editingSessionName={editingSessionName}
        onEditingSessionNameChange={onEditingSessionNameChange}
--- a/src/components/sidebar/view/subcomponents/SidebarProjectList.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarProjectList.tsx
@ -19,6 +19,9 @@ export type SidebarProjectListProps = {
  editingName: string;
  initialSessionsLoaded: Set<string>;
  currentTime: Date;
+  processingSessions?: Set<string>;
+  processingStartTimes?: Map<string, number>;
+  needsInputSessions?: Set<string>;
  editingSession: string | null;
  editingSessionName: string;
  deletingProjects: Set<string>;
@ -63,6 +66,9 @@ export default function SidebarProjectList({
  editingName,
  initialSessionsLoaded,
  currentTime,
+  processingSessions,
+  processingStartTimes,
+  needsInputSessions,
  editingSession,
  editingSessionName,
  deletingProjects,
@ -131,6 +137,9 @@ export default function SidebarProjectList({
              initialSessionsLoaded={initialSessionsLoaded.has(project.projectId)}
              isLoadingMoreSessions={loadingMoreProjects.has(project.projectId)}
              currentTime={currentTime}
+              processingSessions={processingSessions}
+              processingStartTimes={processingStartTimes}
+              needsInputSessions={needsInputSessions}
              editingSession={editingSession}
              editingSessionName={editingSessionName}
              tasksEnabled={tasksEnabled}
--- a/src/components/sidebar/view/subcomponents/SidebarProjectSessions.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarProjectSessions.tsx
@ -16,6 +16,9 @@ type SidebarProjectSessionsProps = {
  hasMoreSessions: boolean;
  isLoadingMoreSessions: boolean;
  currentTime: Date;
+  processingSessions?: Set<string>;
+  processingStartTimes?: Map<string, number>;
+  needsInputSessions?: Set<string>;
  editingSession: string | null;
  editingSessionName: string;
  onEditingSessionNameChange: (value: string) => void;
@ -62,6 +65,9 @@ export default function SidebarProjectSessions({
  hasMoreSessions,
  isLoadingMoreSessions,
  currentTime,
+  processingSessions,
+  processingStartTimes,
+  needsInputSessions,
  editingSession,
  editingSessionName,
  onEditingSessionNameChange,
@ -121,6 +127,9 @@ export default function SidebarProjectSessions({
              session={session}
              selectedSession={selectedSession}
              currentTime={currentTime}
+              processingSessions={processingSessions}
+              processingStartTimes={processingStartTimes}
+              needsInputSessions={needsInputSessions}
              editingSession={editingSession}
              editingSessionName={editingSessionName}
              onEditingSessionNameChange={onEditingSessionNameChange}
--- a/src/components/sidebar/view/subcomponents/SidebarSessionItem.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarSessionItem.tsx
@ -13,6 +13,9 @@ type SidebarSessionItemProps = {
  session: SessionWithProvider;
  selectedSession: ProjectSession | null;
  currentTime: Date;
+  processingSessions?: Set<string>;
+  processingStartTimes?: Map<string, number>;
+  needsInputSessions?: Set<string>;
  editingSession: string | null;
  editingSessionName: string;
  onEditingSessionNameChange: (value: string) => void;
@ -58,11 +61,25 @@ const formatCompactSessionAge = (dateString: string, currentTime: Date): string
  return `${diffInDays}d`;
 };

+/** Live elapsed for a running session: Xs, then Mm Ss. */
+const formatElapsed = (ms: number): string => {
+  const totalSeconds = Math.max(0, Math.floor(ms / 1000));
+  if (totalSeconds < 60) {
+    return `${totalSeconds}s`;
+  }
+  const m = Math.floor(totalSeconds / 60);
+  const s = totalSeconds % 60;
+  return `${m}m ${s.toString().padStart(2, '0')}s`;
+};
+
 export default function SidebarSessionItem({
  project,
  session,
  selectedSession,
  currentTime,
+  processingSessions,
+  processingStartTimes,
+  needsInputSessions,
  editingSession,
  editingSessionName,
  onEditingSessionNameChange,
@ -76,6 +93,16 @@ export default function SidebarSessionItem({
 }: SidebarSessionItemProps) {
  const sessionView = createSessionViewModel(session, currentTime, t);
  const isSelected = selectedSession?.id === session.id;
+  const isNeedsInput = needsInputSessions?.has(session.id) ?? false;
+  const isProcessing = (processingSessions?.has(session.id) ?? false) && !isNeedsInput;
+  const isRecentlyActive = sessionView.isActive && !isProcessing && !isNeedsInput;
+  const processingStart = processingStartTimes?.get(session.id);
+  const elapsedLabel =
+    (isProcessing || isNeedsInput) && processingStart
+      ? formatElapsed(currentTime.getTime() - processingStart)
+      : '';
+  const activityLabel = isNeedsInput ? 'Needs input' : isProcessing ? elapsedLabel : '';
+  const activityClass = isNeedsInput ? 'text-rose-400' : 'text-amber-400';
  const compactSessionAge = formatCompactSessionAge(sessionView.sessionTime, currentTime);

  // Sessions are owned by a project identified by `projectId` (DB primary key)
@ -95,20 +122,47 @@ export default function SidebarSessionItem({

  return (
    <div className="group relative">
-      {sessionView.isActive && (
-        <div className="absolute left-0 top-1/2 -translate-x-1 -translate-y-1/2 transform">
-          <div className="h-2 w-2 animate-pulse rounded-full bg-green-500" />
+      {isNeedsInput ? (
+        <div
+          className="absolute left-0 top-1/2 -translate-x-1 -translate-y-1/2 transform"
+          title={t('sessions.needsInput', { defaultValue: 'Needs your input' })}
+        >
+          <span className="relative flex h-2.5 w-2.5">
+            <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-rose-400 opacity-75" />
+            <span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-rose-500" />
+          </span>
        </div>
-      )}
+      ) : isProcessing ? (
+        <div
+          className="absolute left-0 top-1/2 -translate-x-1 -translate-y-1/2 transform"
+          title={t('sessions.agentRunning', { defaultValue: 'Agent running' })}
+        >
+          <span className="relative flex h-2 w-2">
+            <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-amber-400 opacity-75" />
+            <span className="relative inline-flex h-2 w-2 rounded-full bg-amber-500" />
+          </span>
+        </div>
+      ) : isRecentlyActive ? (
+        <div
+          className="absolute left-0 top-1/2 -translate-x-1 -translate-y-1/2 transform"
+          title={t('sessions.recentlyActive', { defaultValue: 'Recently active' })}
+        >
+          <span className="block h-1.5 w-1.5 rounded-full bg-sky-400/70" />
+        </div>
+      ) : null}

      <div className="md:hidden">
        <div
          className={cn(
            'p-2 mx-3 my-0.5 rounded-md bg-card border active:scale-[0.98] transition-all duration-150 relative',
            isSelected ? 'bg-primary/5 border-primary/20' : '',
-            !isSelected && sessionView.isActive
-              ? 'border-green-500/30 bg-green-50/5 dark:bg-green-900/5'
-              : 'border-border/30',
+            !isSelected && isNeedsInput
+              ? 'border-rose-500/40 bg-rose-50/10 dark:bg-rose-900/10'
+              : !isSelected && isProcessing
+                ? 'border-amber-500/40 bg-amber-50/10 dark:bg-amber-900/10'
+                : !isSelected && isRecentlyActive
+                  ? 'border-sky-500/20'
+                  : 'border-border/30',
          )}
          onClick={selectMobileSession}
        >
@ -125,9 +179,11 @@ export default function SidebarSessionItem({
            <div className="min-w-0 flex-1">
              <div className="flex items-center gap-2">
                <div className="truncate text-xs font-medium text-foreground">{sessionView.sessionName}</div>
-                {compactSessionAge && (
+                {activityLabel ? (
+                  <span className={`ml-auto flex-shrink-0 text-[11px] font-medium ${activityClass}`}>{activityLabel}</span>
+                ) : compactSessionAge ? (
                  <span className="ml-auto flex-shrink-0 text-[11px] text-muted-foreground">{compactSessionAge}</span>
-                )}
+                ) : null}
              </div>
              <div className="mt-0.5 flex items-center">
                {sessionView.messageCount > 0 && (
@ -167,11 +223,13 @@ export default function SidebarSessionItem({
            <div className="min-w-0 flex-1">
              <div className="flex items-center gap-2">
                <div className="truncate text-xs font-medium text-foreground">{sessionView.sessionName}</div>
-                {compactSessionAge && (
+                {activityLabel ? (
+                  <span className={`ml-auto flex-shrink-0 text-[11px] font-medium ${activityClass}`}>{activityLabel}</span>
+                ) : compactSessionAge ? (
                  <span className="ml-auto flex-shrink-0 text-[11px] text-muted-foreground transition-opacity duration-200 group-hover:opacity-0">
                    {compactSessionAge}
                  </span>
-                )}
+                ) : null}
              </div>
              <div className="mt-0.5 flex items-center">
                {sessionView.messageCount > 0 && <Badge variant="secondary" className="px-1 py-0 text-xs">{sessionView.messageCount}</Badge>}
--- a/src/hooks/useProjectsState.ts
+++ b/src/hooks/useProjectsState.ts
@ -18,6 +18,9 @@ type UseProjectsStateArgs = {
  latestMessage: AppSocketMessage | null;
  isMobile: boolean;
  activeSessions: Set<string>;
+  processingSessions: Set<string>;
+  processingStartTimes: Map<string, number>;
+  needsInputSessions: Set<string>;
 };

 type FetchProjectsOptions = {
@ -241,6 +244,9 @@ export function useProjectsState({
  latestMessage,
  isMobile,
  activeSessions,
+  processingSessions,
+  processingStartTimes,
+  needsInputSessions,
 }: UseProjectsStateArgs) {
  const [projects, setProjects] = useState<Project[]>([]);
  const [selectedProject, setSelectedProject] = useState<Project | null>(null);
@ -830,6 +836,9 @@ export function useProjectsState({
      settingsInitialTab,
      onCloseSettings: () => setShowSettings(false),
      isMobile,
+      processingSessions,
+      processingStartTimes,
+      needsInputSessions,
    }),
    [
      handleNewSession,
@ -847,6 +856,9 @@ export function useProjectsState({
      selectedProject,
      selectedSession,
      showSettings,
+      processingSessions,
+      processingStartTimes,
+      needsInputSessions,
    ],
  );

--- a/src/hooks/useSessionProtection.ts
+++ b/src/hooks/useSessionProtection.ts
@ -3,6 +3,10 @@ import { useCallback, useState } from 'react';
 export function useSessionProtection() {
  const [activeSessions, setActiveSessions] = useState<Set<string>>(new Set());
  const [processingSessions, setProcessingSessions] = useState<Set<string>>(new Set());
+  // sessionId -> epoch ms when processing began (for the live elapsed timer)
+  const [processingStartTimes, setProcessingStartTimes] = useState<Map<string, number>>(new Map());
+  // sessions waiting on the user (permission / AskUserQuestion pending)
+  const [needsInputSessions, setNeedsInputSessions] = useState<Set<string>>(new Set());

  const markSessionAsActive = useCallback((sessionId?: string | null) => {
    if (!sessionId) {
@ -30,6 +34,16 @@ export function useSessionProtection() {
    }

    setProcessingSessions((prev) => new Set([...prev, sessionId]));
+    setProcessingStartTimes((prev) => {
+      // Preserve an existing start time so the elapsed timer doesn't reset on
+      // repeated marks for the same run.
+      if (prev.has(sessionId)) {
+        return prev;
+      }
+      const next = new Map(prev);
+      next.set(sessionId, Date.now());
+      return next;
+    });
  }, []);

  const markSessionAsNotProcessing = useCallback((sessionId?: string | null) => {
@ -42,14 +56,49 @@ export function useSessionProtection() {
      next.delete(sessionId);
      return next;
    });
+    setProcessingStartTimes((prev) => {
+      if (!prev.has(sessionId)) {
+        return prev;
+      }
+      const next = new Map(prev);
+      next.delete(sessionId);
+      return next;
+    });
+  }, []);
+
+  const markSessionAsNeedsInput = useCallback((sessionId?: string | null) => {
+    if (!sessionId) {
+      return;
+    }
+
+    setNeedsInputSessions((prev) => new Set([...prev, sessionId]));
+  }, []);
+
+  const clearSessionNeedsInput = useCallback((sessionId?: string | null) => {
+    if (!sessionId) {
+      return;
+    }
+
+    setNeedsInputSessions((prev) => {
+      if (!prev.has(sessionId)) {
+        return prev;
+      }
+      const next = new Set(prev);
+      next.delete(sessionId);
+      return next;
+    });
  }, []);

  return {
    activeSessions,
    processingSessions,
+    processingStartTimes,
+    needsInputSessions,
    markSessionAsActive,
    markSessionAsInactive,
    markSessionAsProcessing,
    markSessionAsNotProcessing,
+    markSessionAsNeedsInput,
+    clearSessionNeedsInput,
  };
 }
Author	SHA1	Message	Date
ZGaetano	8464b33de0	feat: inline activity monitor (status+elapsed+needs-input) & input.required notification	2026-05-30 13:05:43 -04:00
ZGaetano	9c2ac65635	feat: track processing start-times + global needs-input set for activity monitor	2026-05-30 13:00:42 -04:00
ZGaetano	7d9d4fa2bc	refactor: single source of truth for model persistence (remove redundant global writes)	2026-05-30 13:00:25 -04:00
ZGaetano	23e70b6f0b	feat: per-session model persistence (model no longer bleeds across sessions)	2026-05-30 12:59:37 -04:00
ZGaetano	4b08855e13	feat(sidebar): 3-state session indicators driven by real processing state	2026-05-30 11:21:54 -04:00