Feat/tool call timestamps

packages/opencode/src/cli/cmd/tui/routes/session/index.tsx

@@ -7,6 +7,7 @@ import {
   For,
   Match,
   on,
+  onCleanup,
   onMount,
   Show,
   Switch,
@@ -33,6 +34,7 @@ import { Prompt, type PromptRef } from "@tui/component/prompt"
 import type { AssistantMessage, Part, ToolPart, UserMessage, TextPart, ReasoningPart } from "@opencode-ai/sdk/v2"
 import { useLocal } from "@tui/context/local"
 import { Locale } from "@/util/locale"
+import { SLOW_TOOL_MS, formatElapsed, type Elapsed } from "./timing"
 import type { Tool } from "@/tool/tool"
 import type { ReadTool } from "@/tool/read"
 import type { WriteTool } from "@/tool/write"
@@ -152,7 +154,7 @@ export function Session() {
   const [sidebarOpen, setSidebarOpen] = createSignal(false)
   const [conceal, setConceal] = createSignal(true)
   const [showThinking, setShowThinking] = kv.signal("thinking_visibility", true)
-  const [timestamps, setTimestamps] = kv.signal<"hide" | "show">("timestamps", "hide")
+  const [timestamps, setTimestamps] = kv.signal<"hide" | "show">("timestamps", "show")
   const [showDetails, setShowDetails] = kv.signal("tool_details_visibility", true)
   const [showAssistantMetadata, setShowAssistantMetadata] = kv.signal("assistant_metadata_visibility", true)
   const [showScrollbar, setShowScrollbar] = kv.signal("scrollbar_visible", true)
@@ -615,12 +617,12 @@ export function Session() {
       },
     },
     {
-      title: showTimestamps() ? "Hide timestamps" : "Show timestamps",
+      title: showTimestamps() ? "Hide tool timing" : "Show tool timing",
       value: "session.toggle.timestamps",
       category: "Session",
       slash: {
         name: "timestamps",
-        aliases: ["toggle-timestamps"],
+        aliases: ["toggle-timestamps", "timing", "toggle-timing"],
       },
       onSelect: (dialog) => {
         setTimestamps((prev) => (prev === "show" ? "hide" : "show"))
@@ -1690,6 +1692,25 @@ function ToolTitle(props: { fallback: string; when: any; icon: string; children:
   )
 }
 
+// Elapsed time (ms) for a tool part. Returns undefined for "pending" (no start yet),
+// ticks at 1Hz while "running", freezes to end-start on "completed"/"error".
+function useElapsed(part: () => ToolPart | undefined) {
+  const [now, setNow] = createSignal(Date.now())
+  createEffect(() => {
+    if (part()?.state.status !== "running") return
+    const id = setInterval(() => setNow(Date.now()), 1000)
+    onCleanup(() => clearInterval(id))
+  })
+  return createMemo<Elapsed | undefined>(() => {
+    const p = part()
+    if (!p) return undefined
+    const s = p.state
+    if (s.status === "pending") return undefined
+    if (s.status === "running") return { start: s.time.start, ms: now() - s.time.start, running: true }
+    return { start: s.time.start, ms: s.time.end - s.time.start, running: false }
+  })
+}
+
 function InlineTool(props: {
   icon: string
   iconColor?: RGBA
@@ -1729,6 +1750,14 @@ function InlineTool(props: {
       error()?.includes("user dismissed"),
   )
 
+  const elapsed = useElapsed(() => props.part)
+  const timingVisible = createMemo(() => ctx.showTimestamps() && !!elapsed())
+  const timingColor = createMemo(() => {
+    const e = elapsed()
+    if (e?.running && e.ms >= SLOW_TOOL_MS) return theme.warning
+    return theme.textMuted
+  })
+
   return (
     <box
       marginTop={margin()}
@@ -1771,6 +1800,12 @@ function InlineTool(props: {
             <Show fallback={<>~ {props.pending}</>} when={props.complete}>
               <span style={{ fg: props.iconColor }}>{props.icon}</span> {props.children}
             </Show>
+            <Show when={timingVisible()}>
+              <span style={{ fg: timingColor() }}>
+                {" · "}
+                {formatElapsed(elapsed()!)}
+              </span>
+            </Show>
           </text>
         </Match>
       </Switch>
@@ -1788,10 +1823,18 @@ function BlockTool(props: {
   part?: ToolPart
   spinner?: boolean
 }) {
+  const ctx = use()
   const { theme } = useTheme()
   const renderer = useRenderer()
   const [hover, setHover] = createSignal(false)
   const error = createMemo(() => (props.part?.state.status === "error" ? props.part.state.error : undefined))
+  const elapsed = useElapsed(() => props.part)
+  const timingVisible = createMemo(() => ctx.showTimestamps() && !!elapsed())
+  const timingColor = createMemo(() => {
+    const e = elapsed()
+    if (e?.running && e.ms >= SLOW_TOOL_MS) return theme.warning
+    return theme.textMuted
+  })
   return (
     <box
       border={["left"]}
@@ -1814,11 +1857,19 @@ function BlockTool(props: {
         when={props.spinner}
         fallback={
           <text paddingLeft={3} fg={theme.textMuted}>
-            {props.title}
+            <span>{props.title}</span>
+            <Show when={timingVisible()}>
+              <span style={{ fg: timingColor() }}>
+                {"  "}
+                {formatElapsed(elapsed()!)}
+              </span>
+            </Show>
           </text>
         }
       >
-        <Spinner color={theme.textMuted}>{props.title.replace(/^# /, "")}</Spinner>
+        <Spinner color={theme.textMuted}>
+          {props.title.replace(/^# /, "") + (timingVisible() ? `  ${formatElapsed(elapsed()!)}` : "")}
+        </Spinner>
       </Show>
       {props.children}
       <Show when={error()}>

packages/opencode/src/cli/cmd/tui/routes/session/sidebar.tsx

@@ -1,10 +1,10 @@
 import { useSync } from "@tui/context/sync"
-import { createMemo, For, Show, Switch, Match } from "solid-js"
+import { createEffect, createMemo, createSignal, For, onCleanup, Show, Switch, Match } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useTheme } from "../../context/theme"
 import { Locale } from "@/util/locale"
 import path from "path"
-import type { AssistantMessage } from "@opencode-ai/sdk/v2"
+import type { AssistantMessage, ToolPart } from "@opencode-ai/sdk/v2"
 import { Global } from "@/global"
 import { Installation } from "@/installation"
 import { useKeybind } from "../../context/keybind"
@@ -62,6 +62,39 @@ export function Sidebar(props: { sessionID: string; overlay?: boolean }) {
     }
   })
 
+  // altimate_change start - total tool time
+  // Flatten every tool part in this session so we can sum execution time across
+  // completed/error tools and live-tick any tool that's still running.
+  const toolParts = createMemo<ToolPart[]>(() => {
+    const out: ToolPart[] = []
+    for (const message of messages()) {
+      const parts = sync.data.part[message.id]
+      if (!parts) continue
+      for (const part of parts) {
+        if (part.type === "tool") out.push(part)
+      }
+    }
+    return out
+  })
+  const hasRunningTool = createMemo(() => toolParts().some((p) => p.state.status === "running"))
+  const [nowToolTime, setNowToolTime] = createSignal(Date.now())
+  createEffect(() => {
+    if (!hasRunningTool()) return
+    const id = setInterval(() => setNowToolTime(Date.now()), 1000)
+    onCleanup(() => clearInterval(id))
+  })
+  const toolTime = createMemo(() => {
+    let ms = 0
+    const tick = nowToolTime()
+    for (const part of toolParts()) {
+      const s = part.state
+      if (s.status === "running") ms += tick - s.time.start
+      else if (s.status === "completed" || s.status === "error") ms += s.time.end - s.time.start
+    }
+    return ms
+  })
+  // altimate_change end
+
   const directory = useDirectory()
   const kv = useKV()
 
@@ -107,6 +140,13 @@ export function Sidebar(props: { sessionID: string; overlay?: boolean }) {
               <text fg={theme.textMuted}>{context()?.tokens ?? 0} tokens</text>
               <text fg={theme.textMuted}>{context()?.percentage ?? 0}% used</text>
               <text fg={theme.textMuted}>{cost()} spent</text>
+              {/* altimate_change start - total tool time */}
+              <Show when={toolTime() > 0}>
+                <text fg={theme.textMuted}>
+                  {Locale.duration(toolTime())} in tools{hasRunningTool() ? " (running)" : ""}
+                </text>
+              </Show>
+              {/* altimate_change end */}
             </box>
             {/* altimate_change start - trace section */}
             <box>

packages/opencode/src/cli/cmd/tui/routes/session/timing.ts

@@ -0,0 +1,17 @@
+import { Locale } from "@/util/locale"
+
+// Threshold above which a still-running tool is rendered in the warning color.
+export const SLOW_TOOL_MS = 30_000
+
+export interface Elapsed {
+  start: number
+  ms: number
+  running: boolean
+}
+
+// Single source of truth for the "HH:MM:SS · running 12.3s" suffix shown
+// next to a tool call. Separator/prefix lives at the call site because it
+// differs by surface (inline vs block).
+export function formatElapsed(e: Elapsed): string {
+  return `${Locale.clockTime(e.start)} · ${e.running ? "running " : ""}${Locale.duration(e.ms)}`
+}

packages/opencode/src/util/locale.ts

@@ -8,6 +8,11 @@ export namespace Locale {
     return date.toLocaleTimeString(undefined, { timeStyle: "short" })
   }
 
+  export function clockTime(input: number): string {
+    const date = new Date(input)
+    return date.toLocaleTimeString(undefined, { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit" })
+  }
+
   export function datetime(input: number): string {
     const date = new Date(input)
     const localTime = time(input)

packages/opencode/test/util/locale.test.ts

@@ -51,6 +51,21 @@ describe("Locale.duration", () => {
   })
 })
 
+describe("Locale.clockTime", () => {
+  test("renders HH:MM:SS in 24-hour form", () => {
+    // 2024-01-15T03:04:05 in the host's local time, since the helper formats local time.
+    const d = new Date(2024, 0, 15, 3, 4, 5).getTime()
+    const out = Locale.clockTime(d)
+    expect(out).toMatch(/^\d{2}:\d{2}:\d{2}$/)
+    expect(out).toBe("03:04:05")
+  })
+
+  test("zero-pads single digit components", () => {
+    const d = new Date(2024, 0, 15, 9, 0, 7).getTime()
+    expect(Locale.clockTime(d)).toBe("09:00:07")
+  })
+})
+
 describe("Locale.truncateMiddle", () => {
   test("returns original if short enough", () => {
     expect(Locale.truncateMiddle("hello", 35)).toBe("hello")