shell-tab-activity-indicator (squashed)

Author: frenchie4111

src/main/index.ts

@@ -845,7 +845,7 @@ function registerIpcHandlers(): void {
     const win = BrowserWindow.fromWebContents(event.sender)
     if (!win) return
     const extraEnv = isClaude ? config.claudeEnvVars : undefined
-    ptyManager.create(id, cwd, cmd, args, win, extraEnv)
+    ptyManager.create(id, cwd, cmd, args, win, extraEnv, !isClaude)
   })
 
   ipcMain.on('pty:write', (_, id: string, data: string) => {

src/main/pty-manager.ts

@@ -1,5 +1,6 @@
 import * as pty from 'node-pty'
 import { BrowserWindow } from 'electron'
+import { execFile } from 'child_process'
 import { log } from './debug'
 import { cleanupTerminalLog } from './hooks'
 
@@ -9,10 +10,17 @@ interface PtyInstance {
   pty: pty.IPty
   status: PtyStatus
   windowId: number
+  isShell: boolean
+  activityActive: boolean
+  activityProcess?: string
+  hasBeenIdle: boolean
 }
 
+const SHELL_ACTIVITY_POLL_MS = 1500
+
 export class PtyManager {
   private ptys = new Map<string, PtyInstance>()
+  private activityTimer: NodeJS.Timeout | null = null
 
   hasTerminal(id: string): boolean {
     return this.ptys.has(id)
@@ -24,7 +32,8 @@ export class PtyManager {
     command: string,
     args: string[],
     window: BrowserWindow,
-    extraEnv?: Record<string, string>
+    extraEnv?: Record<string, string>,
+    isShell: boolean = false
   ): void {
     log('pty', `create id=${id} cmd=${command} args=${JSON.stringify(args)} cwd=${cwd}`)
     if (this.ptys.has(id)) {
@@ -57,7 +66,10 @@ export class PtyManager {
     const instance: PtyInstance = {
       pty: ptyProcess,
       status: 'processing',
-      windowId: window.id
+      windowId: window.id,
+      isShell,
+      activityActive: false,
+      hasBeenIdle: false
     }
 
     ptyProcess.onData((data: string) => {
@@ -80,6 +92,76 @@ export class PtyManager {
     })
 
     this.ptys.set(id, instance)
+    if (isShell) this.ensureActivityPoller()
+  }
+
+  private ensureActivityPoller(): void {
+    if (this.activityTimer) return
+    this.activityTimer = setInterval(() => this.pollShellActivity(), SHELL_ACTIVITY_POLL_MS)
+  }
+
+  private pollShellActivity(): void {
+    const shellInstances: Array<[string, PtyInstance]> = []
+    for (const entry of this.ptys) {
+      if (entry[1].isShell) shellInstances.push(entry)
+    }
+    if (shellInstances.length === 0) {
+      if (this.activityTimer) {
+        clearInterval(this.activityTimer)
+        this.activityTimer = null
+      }
+      return
+    }
+
+    execFile('ps', ['-A', '-o', 'pid=,ppid=,comm='], (err, stdout) => {
+      if (err) return
+      // Build ppid → first child comm map (walk once)
+      const childrenByPpid = new Map<number, string[]>()
+      for (const line of stdout.split('\n')) {
+        const trimmed = line.trim()
+        if (!trimmed) continue
+        const match = trimmed.match(/^(\d+)\s+(\d+)\s+(.+)$/)
+        if (!match) continue
+        const ppid = parseInt(match[2], 10)
+        const comm = match[3].trim()
+        const list = childrenByPpid.get(ppid)
+        if (list) list.push(comm)
+        else childrenByPpid.set(ppid, [comm])
+      }
+
+      for (const [id, instance] of shellInstances) {
+        const shellPid = instance.pty.pid
+        if (!shellPid) continue
+
+        const directChildren = childrenByPpid.get(shellPid) || []
+        const rawActive = directChildren.length > 0
+
+        // Arm detection only after we've seen the shell quiescent at least
+        // once. This skips login-shell init (nvm, starship, git subprocs)
+        // without needing a hardcoded timer.
+        if (!instance.hasBeenIdle) {
+          if (!rawActive) instance.hasBeenIdle = true
+          continue
+        }
+
+        const active = rawActive
+        const processName = active ? directChildren[0] : undefined
+        if (
+          active !== instance.activityActive ||
+          processName !== instance.activityProcess
+        ) {
+          instance.activityActive = active
+          instance.activityProcess = processName
+          const win = BrowserWindow.fromId(instance.windowId)
+          if (win && !win.isDestroyed()) {
+            win.webContents.send('terminal:shell-activity', id, {
+              active,
+              processName
+            })
+          }
+        }
+      }
+    })
   }
 
   write(id: string, data: string): void {
@@ -129,6 +211,10 @@ export class PtyManager {
     for (const [id] of this.ptys) {
       this.kill(id, signal)
     }
+    if (this.activityTimer) {
+      clearInterval(this.activityTimer)
+      this.activityTimer = null
+    }
   }
 
   /** Get the window that owns a terminal, for routing status updates */

src/preload/index.ts

@@ -296,6 +296,19 @@ contextBridge.exposeInMainWorld('api', {
     ipcRenderer.on('terminal:status', handler)
     return () => ipcRenderer.removeListener('terminal:status', handler)
   },
+  onShellActivity: (
+    callback: (id: string, payload: { active: boolean; processName?: string }) => void
+  ) => {
+    const handler = (
+      _event: Electron.IpcRendererEvent,
+      id: string,
+      payload: { active: boolean; processName?: string }
+    ): void => {
+      callback(id, payload)
+    }
+    ipcRenderer.on('terminal:shell-activity', handler)
+    return () => ipcRenderer.removeListener('terminal:shell-activity', handler)
+  },
   // Activity log
   recordActivity: (worktreePath: string, state: string) => {
     ipcRenderer.send('activity:record', worktreePath, state)

src/renderer/App.tsx

@@ -74,6 +74,9 @@ export default function App(): JSX.Element {
   }, [panes, activePaneId])
   const [statuses, setStatuses] = useState<Record<string, PtyStatus>>({})
   const [pendingTools, setPendingTools] = useState<Record<string, PendingTool | null>>({})
+  const [shellActivity, setShellActivity] = useState<
+    Record<string, { active: boolean; processName?: string }>
+  >({})
   const [prStatuses, setPrStatuses] = useState<Record<string, PRStatus | null>>({})
   const [mergedPaths, setMergedPaths] = useState<Record<string, boolean>>({})
   const [prLoading, setPrLoading] = useState(false)
@@ -578,6 +581,12 @@ const setQuestStep = useCallback((next: QuestStep) => {
     return cleanup
   }, [terminalToWorktree, markActive, fetchPRStatus])
 
+  useEffect(() => {
+    return window.api.onShellActivity((id, payload) => {
+      setShellActivity((prev) => ({ ...prev, [id]: payload }))
+    })
+  }, [])
+
   // Auto-focus the active terminal when switching worktrees so the user can
   // start typing immediately. Deferred to the next frame so the xterm layer
   // is visible (TerminalPanels use display:none for inactive worktrees).
@@ -1478,6 +1487,14 @@ const setQuestStep = useCallback((next: QuestStep) => {
     worktreePendingTools[wt.path] = pending
   }
 
+  const worktreeShellActivity: Record<string, boolean> = {}
+  for (const wt of worktrees) {
+    const tabs = terminalTabs[wt.path] || []
+    worktreeShellActivity[wt.path] = tabs.some(
+      (tab) => tab.type === 'shell' && shellActivity[tab.id]?.active
+    )
+  }
+
   // Record activity-log transitions whenever a worktree's effective state changes.
   // Merged worktrees are terminal — once we've recorded 'merged' we stop
   // overwriting with pty state so the timeline keeps the purple tail.
@@ -1632,6 +1649,7 @@ const setQuestStep = useCallback((next: QuestStep) => {
             activeWorktreeId={activeWorktreeId}
             statuses={worktreeStatuses}
             pendingTools={worktreePendingTools}
+            shellActivity={worktreeShellActivity}
             prStatuses={prStatuses}
             mergedPaths={mergedPaths}
             prLoading={prLoading}
@@ -1690,6 +1708,7 @@ const setQuestStep = useCallback((next: QuestStep) => {
                 panes={paneList}
                 focusedPaneId={activePaneId[wt.path] || paneList[0]?.id || ''}
                 statuses={statuses}
+                shellActivity={shellActivity}
                 visible={isVisible}
                 claudeCommand={claudeCommand}
                 nameClaudeSessions={nameClaudeSessions}

src/renderer/components/Sidebar.tsx

@@ -15,6 +15,7 @@ interface SidebarProps {
   activeWorktreeId: string | null
   statuses: Record<string, PtyStatus>
   pendingTools: Record<string, PendingTool | null>
+  shellActivity: Record<string, boolean>
   prStatuses: Record<string, PRStatus | null>
   mergedPaths?: Record<string, boolean>
   prLoading: boolean
@@ -50,6 +51,7 @@ export function Sidebar({
   activeWorktreeId,
   statuses,
   pendingTools,
+  shellActivity,
   prStatuses,
   mergedPaths,
   prLoading,
@@ -279,6 +281,7 @@ export function Sidebar({
                   isActive={wt.path === activeWorktreeId}
                   status={statuses[wt.path] || 'idle'}
                   pendingTool={pendingTools[wt.path] || null}
+                  shellActive={!!shellActivity[wt.path]}
                   prStatus={prStatuses[wt.path]}
                   isMerged={group.key === 'merged'}
                   repoLabel={showRepoLabelsOnTabs ? repoLabelFor(wt.repoRoot) : undefined}

src/renderer/components/TerminalPanel.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useCallback } from 'react'
-import { X, Plus, Sparkles, Code2, SplitSquareHorizontal } from 'lucide-react'
+import { X, Plus, Sparkles, Code2, SplitSquareHorizontal, Loader2 } from 'lucide-react'
 import {
   SortableContext,
   horizontalListSortingStrategy,
@@ -16,6 +16,7 @@ interface TerminalPanelProps {
   isFocused: boolean
   paneCount: number
   statuses: Record<string, PtyStatus>
+  shellActivity: Record<string, { active: boolean; processName?: string }>
   repoLabel: string
   branch: string
   registerSlot: (paneId: string, el: HTMLDivElement | null) => void
@@ -37,12 +38,13 @@ interface SortableTabProps {
   tab: TerminalTab
   isActive: boolean
   status: PtyStatus
+  shellActivity?: { active: boolean; processName?: string }
   showClose: boolean
   onSelect: () => void
   onClose: () => void
 }
 
-function SortableTab({ tab, isActive, status, showClose, onSelect, onClose }: SortableTabProps): JSX.Element {
+function SortableTab({ tab, isActive, status, shellActivity, showClose, onSelect, onClose }: SortableTabProps): JSX.Element {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id: tab.id
   })
@@ -77,9 +79,19 @@ function SortableTab({ tab, isActive, status, showClose, onSelect, onClose }: So
       }`}
       onClick={onSelect}
     >
-      {tab.type !== 'diff' && (
+      {tab.type === 'shell' ? (
+        shellActivity?.active ? (
+          <Loader2
+            size={10}
+            className="animate-spin text-fg-bright"
+            aria-label={`Running: ${shellActivity.processName || '?'}`}
+          />
+        ) : (
+          <span className="w-1.5 h-1.5 rounded-full bg-faint" />
+        )
+      ) : tab.type !== 'diff' && tab.type !== 'file' ? (
         <span className={`w-1.5 h-1.5 rounded-full ${TAB_STATUS_DOT[status]}`} />
-      )}
+      ) : null}
       <span>{tab.label}</span>
       {showClose && (
         <Tooltip label="Close tab" action="closeTab">
@@ -104,6 +116,7 @@ export function TerminalPanel({
   pane,
   paneCount,
   statuses,
+  shellActivity,
   repoLabel,
   branch,
   registerSlot,
@@ -146,6 +159,7 @@ export function TerminalPanel({
                 tab={tab}
                 isActive={tab.id === pane.activeTabId}
                 status={statuses[tab.id] || 'idle'}
+                shellActivity={shellActivity[tab.id]}
                 showClose={pane.tabs.length > 1 || paneCount > 1}
                 onSelect={() => onSelectTab(tab.id)}
                 onClose={() => onCloseTab(tab.id)}

src/renderer/components/WorkspaceView.tsx

@@ -22,6 +22,7 @@ interface WorkspaceViewProps {
   panes: WorkspacePane[]
   focusedPaneId: string
   statuses: Record<string, PtyStatus>
+  shellActivity: Record<string, { active: boolean; processName?: string }>
   visible: boolean
   claudeCommand: string
   nameClaudeSessions: boolean
@@ -51,6 +52,7 @@ export function WorkspaceView({
   panes,
   focusedPaneId,
   statuses,
+  shellActivity,
   visible,
   claudeCommand,
   nameClaudeSessions,
@@ -155,6 +157,7 @@ export function WorkspaceView({
               isFocused={pane.id === focusedPaneId}
               paneCount={panes.length}
               statuses={statuses}
+              shellActivity={shellActivity}
               repoLabel={repoLabel}
               branch={branch}
               registerSlot={registerSlot}

src/renderer/components/WorktreeTab.tsx

@@ -1,4 +1,4 @@
-import { GitPullRequest, RotateCw, Trash2 } from 'lucide-react'
+import { GitPullRequest, RotateCw, Trash2, Loader2 } from 'lucide-react'
 import type { Worktree, PtyStatus, PendingTool, PRStatus } from '../types'
 import { Tooltip } from './Tooltip'
 import { RepoIcon } from './RepoIcon'
@@ -12,6 +12,7 @@ interface WorktreeTabProps {
   isActive: boolean
   status: PtyStatus
   pendingTool?: PendingTool | null
+  shellActive?: boolean
   prStatus?: PRStatus | null
   isMerged?: boolean
   /** When set, shows a small repo hint next to the branch name. Used in
@@ -55,7 +56,7 @@ const PR_STATE_COLOR: Record<string, string> = {
   closed: 'text-danger'
 }
 
-export function WorktreeTab({ worktree, isActive, status, pendingTool, prStatus, isMerged, repoLabel, cmdOrdinal, onClick, onDelete, onContinue }: WorktreeTabProps): JSX.Element {
+export function WorktreeTab({ worktree, isActive, status, pendingTool, shellActive, prStatus, isMerged, repoLabel, cmdOrdinal, onClick, onDelete, onContinue }: WorktreeTabProps): JSX.Element {
   const metaHeld = useMetaHeld()
   const displayStatus: PtyStatus | 'merged' = isMerged ? 'merged' : status
   const showPendingTool = displayStatus === 'needs-approval' && pendingTool
@@ -90,6 +91,13 @@ export function WorktreeTab({ worktree, isActive, status, pendingTool, prStatus,
         className={`w-2 h-2 rounded-full shrink-0 ${STATUS_COLORS[displayStatus]}`}
         title={STATUS_LABELS[displayStatus]}
       />
+      {shellActive && (
+        <Loader2
+          size={11}
+          className="animate-spin text-fg-bright shrink-0"
+          aria-label="Shell activity"
+        />
+      )}
       {prStatus && (
         <span className="relative shrink-0">
           <GitPullRequest

src/renderer/types.ts

@@ -330,6 +330,9 @@ export interface ElectronAPI {
   onStatusChange(
     callback: (id: string, status: PtyStatus, pendingTool: PendingTool | null) => void
   ): () => void
+  onShellActivity(
+    callback: (id: string, payload: { active: boolean; processName?: string }) => void
+  ): () => void
   onTerminalExit(callback: (id: string, exitCode: number) => void): () => void
 
   recordActivity(worktreePath: string, state: string): void