feat: add sidebar clock with toggle command

packages/opencode/src/cli/cmd/tui/app.tsx

@@ -251,6 +251,7 @@ function App() {
     renderer.clearSelection()
   }
   const [terminalTitleEnabled, setTerminalTitleEnabled] = createSignal(kv.get("terminal_title_enabled", true))
+  const [sidebarClockEnabled, setSidebarClockEnabled] = createSignal(kv.get("sidebar_clock_visible", true))
 
   createEffect(() => {
     console.log(JSON.stringify(route.data))
@@ -652,6 +653,19 @@ function App() {
         dialog.clear()
       },
     },
+    {
+      title: sidebarClockEnabled() ? "Hide sidebar clock" : "Show sidebar clock",
+      value: "system.toggle.sidebar_clock",
+      category: "System",
+      onSelect: (dialog) => {
+        setSidebarClockEnabled((prev) => {
+          const next = !prev
+          kv.set("sidebar_clock_visible", next)
+          return next
+        })
+        dialog.clear()
+      },
+    },
   ])
 
   createEffect(() => {

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

@@ -1,5 +1,5 @@
 import { useSync } from "@tui/context/sync"
-import { createMemo, For, Show, Switch, Match } from "solid-js"
+import { createMemo, For, Show, Switch, Match, createSignal, onMount, onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useTheme } from "../../context/theme"
 import { Locale } from "@/util/locale"
@@ -67,6 +67,19 @@ export function Sidebar(props: { sessionID: string; overlay?: boolean }) {
     sync.data.provider.some((x) => x.id !== "opencode" || Object.values(x.models).some((y) => y.cost?.input !== 0)),
   )
   const gettingStartedDismissed = createMemo(() => kv.get("dismissed_getting_started", false))
+  const showSidebarClock = createMemo(() => kv.get("sidebar_clock_visible", true))
+
+  const formatTime = () => {
+    const now = new Date()
+    return now.toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit", hour12: false })
+  }
+
+  const [clockTime, setClockTime] = createSignal(formatTime())
+
+  onMount(() => {
+    const interval = setInterval(() => setClockTime(formatTime()), 10000)
+    onCleanup(() => clearInterval(interval))
+  })
 
   return (
     <Show when={session()}>
@@ -307,13 +320,18 @@ export function Sidebar(props: { sessionID: string; overlay?: boolean }) {
             <span style={{ fg: theme.textMuted }}>{directory().split("/").slice(0, -1).join("/")}/</span>
             <span style={{ fg: theme.text }}>{directory().split("/").at(-1)}</span>
           </text>
-          <text fg={theme.textMuted}>
-            <span style={{ fg: theme.success }}>•</span> <b>Open</b>
-            <span style={{ fg: theme.text }}>
-              <b>Code</b>
-            </span>{" "}
-            <span>{Installation.VERSION}</span>
-          </text>
+          <box flexDirection="row" justifyContent="space-between">
+            <text fg={theme.textMuted}>
+              <span style={{ fg: theme.success }}>•</span> <b>Open</b>
+              <span style={{ fg: theme.text }}>
+                <b>Code</b>
+              </span>{" "}
+              <span>{Installation.VERSION}</span>
+            </text>
+            <Show when={showSidebarClock()}>
+              <text fg={theme.text}>{clockTime()}</text>
+            </Show>
+          </box>
         </box>
       </box>
     </Show>