sync

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

@@ -1,7 +1,9 @@
-import { createMemo, Match, Show, Switch } from "solid-js"
+import { createMemo, Match, onCleanup, onMount, Show, Switch } from "solid-js"
 import { useTheme } from "../../context/theme"
 import { useSync } from "../../context/sync"
 import { useDirectory } from "../../context/directory"
+import { useConnected } from "../../component/dialog-model"
+import { createStore } from "solid-js/store"
 
 export function Footer() {
   const { theme } = useTheme()
@@ -10,27 +12,64 @@ export function Footer() {
   const mcpError = createMemo(() => Object.values(sync.data.mcp).some((x) => x.status === "failed"))
   const lsp = createMemo(() => Object.keys(sync.data.lsp))
   const directory = useDirectory()
+  const connected = useConnected()
+
+  const [store, setStore] = createStore({
+    welcome: false,
+  })
+
+  onMount(() => {
+    function tick() {
+      if (connected()) return
+      if (!store.welcome) {
+        setStore("welcome", true)
+        timeout = setTimeout(() => tick(), 5000)
+        return
+      }
+
+      if (store.welcome) {
+        setStore("welcome", false)
+        timeout = setTimeout(() => tick(), 10_000)
+        return
+      }
+    }
+    let timeout = setTimeout(() => tick(), 10_000)
+
+    onCleanup(() => {
+      clearTimeout(timeout)
+    })
+  })
+
   return (
     <box flexDirection="row" justifyContent="space-between" gap={1} flexShrink={0}>
       <text fg={theme.textMuted}>{directory()}</text>
       <box gap={2} flexDirection="row" flexShrink={0}>
-        <text fg={theme.text}>
-          <span style={{ fg: theme.success }}>•</span> {lsp().length} LSP
-        </text>
-        <Show when={mcp().length}>
-          <text fg={theme.text}>
-            <Switch>
-              <Match when={mcpError()}>
-                <span style={{ fg: theme.error }}>⊙ </span>
-              </Match>
-              <Match when={true}>
-                <span style={{ fg: theme.success }}>⊙ </span>
-              </Match>
-            </Switch>
-            {mcp().length} MCP
-          </text>
-        </Show>
-        <text fg={theme.textMuted}>/status</text>
+        <Switch>
+          <Match when={store.welcome}>
+            <text fg={theme.text}>
+              Get started <span style={{ fg: theme.textMuted }}>/connect</span>
+            </text>
+          </Match>
+          <Match when={connected()}>
+            <text fg={theme.text}>
+              <span style={{ fg: theme.success }}>•</span> {lsp().length} LSP
+            </text>
+            <Show when={mcp().length}>
+              <text fg={theme.text}>
+                <Switch>
+                  <Match when={mcpError()}>
+                    <span style={{ fg: theme.error }}>⊙ </span>
+                  </Match>
+                  <Match when={true}>
+                    <span style={{ fg: theme.success }}>⊙ </span>
+                  </Match>
+                </Switch>
+                {mcp().length} MCP
+              </text>
+            </Show>
+            <text fg={theme.textMuted}>/status</text>
+          </Match>
+        </Switch>
       </box>
     </box>
   )