feat(opencode): extend gutter to assistant messages, add seconds to popup

The gutter mode now renders an HH:MM column on assistant messages too,
not just user messages — closes the original ask in opencode#8634
("Add timestamp next to messages in chat (both agent and user messages)").
Assistant message body is wrapped in flexDirection="row" only when gutter
mode is active; non-gutter modes keep the existing fragment layout
untouched. Assistant text lands at column 9 (gutter 6 + paddingLeft 3),
which is also where user text lands (gutter 6 + border 1 + paddingLeft 2),
so the two sides align visually.

The timestamp popup now shows HH:MM:SS instead of HH:MM, addressing
opencode#20406 ("Add seconds to message timestamp display"). 24-hour
formatting is used consistently for both gutter and popup to avoid
opencode#28804 (Bun ignores system locale → spurious AM/PM on Linux).

Three new unit tests for hourMinuteSecond bring the suite to 14/14.

Author: guysoft

packages/opencode/src/cli/cmd/tui/routes/session/dialog-timestamp.tsx

@@ -2,12 +2,23 @@ import { TextAttributes } from "@opentui/core"
 import { useTheme } from "../../context/theme"
 import { useDialog, type DialogContext } from "../../ui/dialog"
 import { useBindings } from "../../keymap"
-import { Locale } from "@/util/locale"
+import { hourMinuteSecond } from "../../util/timestamps"
 
 export type DialogTimestampProps = {
   created: number
 }
 
+// Seconds-precision datetime for the popup. The gutter renders fixed HH:MM
+// because alignment matters there; the popup is where users come for precision
+// (debugging, auditing, distinguishing messages sent close together — see
+// opencode#20406). 24-hour formatting matches the gutter and side-steps
+// opencode#28804 (Bun ignoring system locale → spurious AM/PM on Linux).
+function preciseDateTime(input: number): string {
+  const date = new Date(input)
+  const localDate = date.toLocaleDateString()
+  return `${hourMinuteSecond(input)} · ${localDate}`
+}
+
 function relative(input: number, now: number): string {
   const delta = Math.max(0, now - input)
   if (delta < 60_000) return "just now"
@@ -49,7 +60,7 @@ export function DialogTimestamp(props: DialogTimestampProps) {
         </text>
       </box>
       <box paddingBottom={1} gap={1}>
-        <text fg={theme.text}>{Locale.datetime(props.created)}</text>
+        <text fg={theme.text}>{preciseDateTime(props.created)}</text>
         <text fg={theme.textMuted}>{relative(props.created, Date.now())}</text>
       </box>
     </box>

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

@@ -1451,6 +1451,7 @@ function UserMessage(props: {
 function AssistantMessage(props: { message: AssistantMessage; parts: Part[]; last: boolean }) {
   const ctx = use()
   const local = useLocal()
+  const dialog = useDialog()
   const { theme } = useTheme()
   const sync = useSync()
   const messages = createMemo(() => sync.data.message[props.message.sessionID] ?? [])
@@ -1469,8 +1470,11 @@ function AssistantMessage(props: { message: AssistantMessage; parts: Part[]; las
   })
 
   const childShortcut = useCommandShortcut("session.child.first")
+  const isGutter = createMemo(() => ctx.timestampsMode() === "gutter")
 
-  return (
+  // Assistant message body — rendered as-is when timestamps_mode != "gutter", or
+  // wrapped in a horizontal row alongside a gutter cell when "gutter" is active.
+  const body = () => (
     <>
       <For each={props.parts}>
         {(part, index) => {
@@ -1537,6 +1541,30 @@ function AssistantMessage(props: { message: AssistantMessage; parts: Part[]; las
       </Switch>
     </>
   )
+
+  return (
+    <Show when={isGutter()} fallback={body()}>
+      {/* In gutter mode, lay the message row out horizontally: HH:MM column on
+       * the left, message content on the right. The first part of an assistant
+       * message has marginTop=1 (TextPart/ReasoningPart/ToolPart all do), so
+       * the gutter uses the same paddingTop to align vertically with the first
+       * line of text. flexShrink=0 on the gutter keeps it from collapsing on
+       * narrow terminals; the body column gets flexGrow=1 to take the rest. */}
+      <box flexDirection="row" flexShrink={0}>
+        <box
+          width={TIMESTAMP_GUTTER_WIDTH}
+          paddingTop={1}
+          flexShrink={0}
+          onMouseUp={() => DialogTimestamp.show(dialog, props.message.time.created)}
+        >
+          <text fg={theme.textMuted}>{hourMinute(props.message.time.created)}</text>
+        </box>
+        <box flexDirection="column" flexGrow={1}>
+          {body()}
+        </box>
+      </box>
+    </Show>
+  )
 }
 
 const PART_MAPPING = {

packages/opencode/src/cli/cmd/tui/util/timestamps.ts

@@ -31,3 +31,14 @@ export function hourMinute(input: number): string {
   const minutes = String(date.getMinutes()).padStart(2, "0")
   return `${hours}:${minutes}`
 }
+
+// "HH:MM:SS" 24-hour, locale-independent. Used by the message timestamp popup
+// — alignment doesn't matter there, but seconds-level precision does. Closes
+// the spirit of opencode#20406 (users want seconds for debugging / auditing).
+export function hourMinuteSecond(input: number): string {
+  const date = new Date(input)
+  const hours = String(date.getHours()).padStart(2, "0")
+  const minutes = String(date.getMinutes()).padStart(2, "0")
+  const seconds = String(date.getSeconds()).padStart(2, "0")
+  return `${hours}:${minutes}:${seconds}`
+}

packages/opencode/test/cli/cmd/tui/timestamps.test.ts

@@ -2,6 +2,7 @@ import { describe, expect, test } from "bun:test"
 import {
   getTimestampsMode,
   hourMinute,
+  hourMinuteSecond,
   nextTimestampsMode,
   normalizeTimestampsMode,
   TIMESTAMPS_MODES,
@@ -80,3 +81,20 @@ describe("hourMinute", () => {
     expect(hourMinute(ms)).toBe("23:45")
   })
 })
+
+describe("hourMinuteSecond", () => {
+  test("returns 8-cell HH:MM:SS, zero-padded, 24-hour", () => {
+    const ms = new Date(2025, 0, 2, 7, 5, 9).getTime()
+    expect(hourMinuteSecond(ms)).toBe("07:05:09")
+  })
+
+  test("23:59:59 boundary", () => {
+    const ms = new Date(2025, 0, 2, 23, 59, 59).getTime()
+    expect(hourMinuteSecond(ms)).toBe("23:59:59")
+  })
+
+  test("midnight", () => {
+    const ms = new Date(2025, 0, 2, 0, 0, 0).getTime()
+    expect(hourMinuteSecond(ms)).toBe("00:00:00")
+  })
+})