improve model footer

Author: thdxr

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

@@ -860,6 +860,11 @@ export function Session() {
                     </Match>
                     <Match when={message.role === "assistant"}>
                       <AssistantMessage
+                        user={
+                          messages().findLast(
+                            (item) => item.id === (message as AssistantMessage).parentID,
+                          ) as UserMessage
+                        }
                         last={lastAssistant()?.id === message.id}
                         message={message as AssistantMessage}
                         parts={sync.data.part[message.id] ?? []}
@@ -993,7 +998,7 @@ function UserMessage(props: {
   )
 }
 
-function AssistantMessage(props: { message: AssistantMessage; parts: Part[]; last: boolean }) {
+function AssistantMessage(props: { message: AssistantMessage; parts: Part[]; last: boolean; user: UserMessage }) {
   const local = useLocal()
   const { theme } = useTheme()
   const ctx = use()
@@ -1038,13 +1043,15 @@ function AssistantMessage(props: { message: AssistantMessage; parts: Part[]; las
         >
           <box paddingLeft={3}>
             <text marginTop={1}>
-              <span style={{ fg: local.agent.color(props.message.mode) }}>{Locale.titlecase(props.message.mode)}</span>{" "}
-              <span style={{ fg: theme.textMuted }}>
-                {props.message.modelID}
-                {ctx.showTimestamps() &&
-                  props.message.time.completed &&
-                  ` · ${Locale.todayTimeOrDateTime(props.message.time.completed)}`}
-              </span>
+              <span style={{ fg: local.agent.color(props.message.mode) }}>▣</span>{" "}
+              <span style={{ fg: theme.text }}>{Locale.titlecase(props.message.mode)}</span>{" "}
+              <span style={{ fg: theme.textMuted }}>⬝{props.message.modelID}</span>
+              <Show when={props.message.time.completed}>
+                <span style={{ fg: theme.textMuted }}>
+                  {" "}
+                  ⬝{Locale.duration(props.message.time.completed! - props.user.time.created)}
+                </span>
+              </Show>
             </text>
           </box>
         </Match>

packages/opencode/src/util/locale.ts

@@ -37,6 +37,28 @@ export namespace Locale {
     return num.toString()
   }
 
+  export function duration(input: number) {
+    if (input < 1000) {
+      return `${input}ms`
+    }
+    if (input < 60000) {
+      return `${(input / 1000).toFixed(1)}s`
+    }
+    if (input < 3600000) {
+      const minutes = Math.floor(input / 60000)
+      const seconds = Math.floor((input % 60000) / 1000)
+      return `${minutes}m ${seconds}s`
+    }
+    if (input < 86400000) {
+      const hours = Math.floor(input / 3600000)
+      const minutes = Math.floor((input % 3600000) / 60000)
+      return `${hours}h ${minutes}m`
+    }
+    const hours = Math.floor(input / 3600000)
+    const days = Math.floor((input % 3600000) / 86400000)
+    return `${days}d ${hours}h`
+  }
+
   export function truncate(str: string, len: number): string {
     if (str.length <= len) return str
     return str.slice(0, len - 1) + "…"