fix(desktop): avoid transient terminal tab labels

Author: Sg312

apps/desktop/src/main/terminal/session.ts

@@ -438,7 +438,12 @@ export class TerminalSession {
     const directory = this.cwd ? (this.cwd.split('/').filter(Boolean).pop() ?? '/') : null
     return {
       terminalId: this.terminalId,
-      title: this.foregroundCommand?.trim() || directory || 'Terminal',
+      // The directory, always: whether to show the running command instead is
+      // a presentation choice, and the panel makes it (it holds a label back
+      // until a command has run long enough to be worth naming). Reporting the
+      // command here would also mean gating `running` to match, and that is
+      // data the agent reads — it must stay true the instant a command starts.
+      title: directory || 'Terminal',
       cwd: this.cwd,
       running: this.foregroundCommand,
       interactive: this.altScreen,

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/terminal-session/terminal-session.tsx

@@ -18,7 +18,7 @@ import { WebglAddon } from '@xterm/addon-webgl'
 import { Terminal } from '@xterm/xterm'
 import { useTheme } from 'next-themes'
 import '@xterm/xterm/css/xterm.css'
-import { MAX_TERMINALS } from '@sim/terminal-protocol'
+import { MAX_TERMINALS, type TerminalTabState } from '@sim/terminal-protocol'
 import { TERMINAL_SESSION_RESOURCE_ID } from '@/lib/copilot/resources/types'
 import {
   closeTerminal,
@@ -40,6 +40,61 @@ import { useCopilotTerminalStore } from '@/stores/copilot-terminal/store'
 
 const logger = createLogger('TerminalSession')
 
+/**
+ * How long a command must run before the tab names it.
+ *
+ * A tab that says what it is busy with is useful for a build you left running
+ * in the background, and pure noise for `ls` — swapping the label and spinning
+ * the icon for thirty milliseconds reads as a glitch. Waiting a beat keeps the
+ * signal and drops the flicker.
+ */
+const COMMAND_SETTLE_MS = 1_000
+
+function sameIds(a: ReadonlySet<string>, b: ReadonlySet<string>): boolean {
+  return a.size === b.size && [...a].every((id) => b.has(id))
+}
+
+/**
+ * The terminals whose command has been running long enough to show. Returns a
+ * stable set, so a tab strip that would render identically does not re-render.
+ */
+function useSettledCommands(tabs: TerminalTabState[]): ReadonlySet<string> {
+  const [settled, setSettled] = useState<ReadonlySet<string>>(() => new Set())
+  const startedAt = useRef(new Map<string, number>())
+
+  useEffect(() => {
+    const started = startedAt.current
+    const live = new Set(tabs.map((tab) => tab.terminalId))
+    for (const id of [...started.keys()]) {
+      if (!live.has(id)) started.delete(id)
+    }
+    for (const tab of tabs) {
+      if (!tab.running) started.delete(tab.terminalId)
+      else if (!started.has(tab.terminalId)) started.set(tab.terminalId, Date.now())
+    }
+
+    const recompute = () => {
+      const now = Date.now()
+      const next = new Set<string>()
+      let soonest = Number.POSITIVE_INFINITY
+      for (const [id, at] of started) {
+        const elapsed = now - at
+        if (elapsed >= COMMAND_SETTLE_MS) next.add(id)
+        else soonest = Math.min(soonest, COMMAND_SETTLE_MS - elapsed)
+      }
+      setSettled((current) => (sameIds(current, next) ? current : next))
+      return soonest
+    }
+
+    const soonest = recompute()
+    if (!Number.isFinite(soonest)) return
+    const timer = setTimeout(recompute, Math.max(0, soonest))
+    return () => clearTimeout(timer)
+  }, [tabs])
+
+  return settled
+}
+
 /**
  * How long the panel must stop changing size before the PTY is told about it.
  * Long enough to cover a divider drag, short enough that a deliberate resize
@@ -427,6 +482,7 @@ function TerminalView({
  */
 export function TerminalSession() {
   const { tabs, activeTerminalId } = useCopilotTerminalStore((state) => state.tabs)
+  const settledCommands = useSettledCommands(tabs)
   const { removeResource } = useMothershipResources()
   const [startError, setStartError] = useState<string | null>(null)
 
@@ -456,18 +512,23 @@ export function TerminalSession() {
   // It is the only sign that something is running in a tab nobody is looking at.
   const items = useMemo<TabStripItem[]>(
     () =>
-      tabs.map((tab) => ({
-        id: tab.terminalId,
-        title: tab.title,
-        icon:
-          tab.running && !tab.interactive ? (
-            <Loader className='size-[12px] shrink-0 animate-spin text-[var(--text-icon)]' />
-          ) : (
-            <TerminalWindow className='size-[12px] shrink-0 text-[var(--text-icon)]' />
-          ),
-        active: tab.terminalId === activeTerminalId,
-      })),
-    [tabs, activeTerminalId]
+      tabs.map((tab) => {
+        // A command only reaches the tab once it has run long enough to be
+        // worth naming; until then the tab stays as its directory.
+        const naming = settledCommands.has(tab.terminalId) ? tab.running : null
+        return {
+          id: tab.terminalId,
+          title: naming ?? tab.title,
+          icon:
+            naming && !tab.interactive ? (
+              <Loader className='size-[12px] shrink-0 animate-spin text-[var(--text-icon)]' />
+            ) : (
+              <TerminalWindow className='size-[12px] shrink-0 text-[var(--text-icon)]' />
+            ),
+          active: tab.terminalId === activeTerminalId,
+        }
+      }),
+    [tabs, activeTerminalId, settledCommands]
   )
 
   const [contextTerminalId, setContextTerminalId] = useState<string | null>(null)