From 8e1010dc3f58a49246ef57d854817b06ae809c9c Mon Sep 17 00:00:00 2001
From: Timo Clasen <goebeltimo@gmail.com>
Date: Mon, 3 Nov 2025 22:30:55 +0100
Subject: [PATCH] feat(TUI): don't show /share hint if sharing is disabled
 (#3835)

---
 .../src/cli/cmd/tui/routes/session/header.tsx | 80 ++++++++++++-------
 1 file changed, 53 insertions(+), 27 deletions(-)

diff --git a/packages/opencode/src/cli/cmd/tui/routes/session/header.tsx b/packages/opencode/src/cli/cmd/tui/routes/session/header.tsx
index 4427d5ea..01904251 100644
--- a/packages/opencode/src/cli/cmd/tui/routes/session/header.tsx
+++ b/packages/opencode/src/cli/cmd/tui/routes/session/header.tsx
@@ -1,17 +1,38 @@
-import { createMemo, Match, Show, Switch } from "solid-js"
+import { type Accessor, createMemo, Match, Show, Switch } from "solid-js"
 import { useRouteData } from "@tui/context/route"
 import { useSync } from "@tui/context/sync"
 import { pipe, sumBy } from "remeda"
 import { useTheme } from "@tui/context/theme"
 import { SplitBorder } from "@tui/component/border"
-import type { AssistantMessage } from "@opencode-ai/sdk"
+import type { AssistantMessage, Session } from "@opencode-ai/sdk"
+
+const Title = (props: { session: Accessor<Session> }) => {
+  const { theme } = useTheme()
+  return (
+    <text fg={theme.text}>
+      <span style={{ bold: true, fg: theme.accent }}>#</span>{" "}
+      <span style={{ bold: true }}>{props.session().title}</span>
+    </text>
+  )
+}
+
+const ContextInfo = (props: { context: Accessor<string | undefined>; cost: Accessor<string> }) => {
+  const { theme } = useTheme()
+  return (
+    <Show when={props.context()}>
+      <text fg={theme.textMuted} wrapMode="none" flexShrink={0}>
+        {props.context()} ({props.cost()})
+      </text>
+    </Show>
+  )
+}
 
 export function Header() {
   const route = useRouteData("session")
   const sync = useSync()
-  const { theme } = useTheme()
   const session = createMemo(() => sync.session.get(route.sessionID)!)
   const messages = createMemo(() => sync.data.message[route.sessionID] ?? [])
+  const shareEnabled = createMemo(() => sync.data.config.share !== "disabled")
 
   const cost = createMemo(() => {
     const total = pipe(
@@ -43,6 +64,8 @@ export function Header() {
     return result
   })
 
+  const { theme } = useTheme()
+
   return (
     <box
       paddingLeft={1}
@@ -51,31 +74,34 @@ export function Header() {
       borderColor={theme.backgroundElement}
       flexShrink={0}
     >
-      <text fg={theme.text}>
-        <span style={{ bold: true, fg: theme.accent }}>#</span>{" "}
-        <span style={{ bold: true }}>{session().title}</span>
-      </text>
-      <box flexDirection="row" justifyContent="space-between" gap={1}>
-        <box flexGrow={1} flexShrink={1}>
-          <Switch>
-            <Match when={session().share?.url}>
-              <text fg={theme.textMuted} wrapMode="word">
-                {session().share!.url}
-              </text>
-            </Match>
-            <Match when={true}>
-              <text fg={theme.text} wrapMode="word">
-                /share <span style={{ fg: theme.textMuted }}>to create a shareable link</span>
-              </text>
-            </Match>
-          </Switch>
+      <Show
+        when={shareEnabled()}
+        fallback={
+          <box flexDirection="row" justifyContent="space-between" gap={1}>
+            <Title session={session} />
+            <ContextInfo context={context} cost={cost} />
+          </box>
+        }
+      >
+        <Title session={session} />
+        <box flexDirection="row" justifyContent="space-between" gap={1}>
+          <box flexGrow={1} flexShrink={1}>
+            <Switch>
+              <Match when={session().share?.url}>
+                <text fg={theme.textMuted} wrapMode="word">
+                  {session().share!.url}
+                </text>
+              </Match>
+              <Match when={true}>
+                <text fg={theme.text} wrapMode="word">
+                  /share <span style={{ fg: theme.textMuted }}>to create a shareable link</span>
+                </text>
+              </Match>
+            </Switch>
+          </box>
+          <ContextInfo context={context} cost={cost} />
         </box>
-        <Show when={context()}>
-          <text fg={theme.textMuted} wrapMode="none" flexShrink={0}>
-            {context()} ({cost()})
-          </text>
-        </Show>
-      </box>
+      </Show>
     </box>
   )
 }