feat(tui): show /connect tip when user has no models configured (#24014)

2 files changed, 16 insertions, 8 deletions

diff --git a/packages/opencode/src/cli/cmd/tui/feature-plugins/home/tips-view.tsx b/packages/opencode/src/cli/cmd/tui/feature-plugins/home/tips-view.tsx
index 1a9d907bb..c7a7b211f 100644
--- a/packages/opencode/src/cli/cmd/tui/feature-plugins/home/tips-view.tsx
+++ b/packages/opencode/src/cli/cmd/tui/feature-plugins/home/tips-view.tsx
@@ -1,4 +1,4 @@
-import { For } from "solid-js"
+import { createMemo, For } from "solid-js"
 import { DEFAULT_THEMES, useTheme } from "@tui/context/theme"
 
 const themeCount = Object.keys(DEFAULT_THEMES).length
@@ -30,9 +30,12 @@ function parse(tip: string): TipPart[] {
   return parts
 }
 
-export function Tips() {
+const NO_MODELS_TIP = "Run {highlight}/connect{/highlight} to add an AI provider and start coding"
+
+export function Tips(props: { connected?: boolean }) {
   const theme = useTheme().theme
-  const parts = parse(TIPS[Math.floor(Math.random() * TIPS.length)])
+  const randomTip = TIPS[Math.floor(Math.random() * TIPS.length)]
+  const parts = createMemo(() => parse(props.connected === false ? NO_MODELS_TIP : randomTip))
 
   return (
     <box flexDirection="row" maxWidth="100%">
@@ -40,7 +43,7 @@ export function Tips() {
         ● Tip{" "}
       </text>
       <text flexShrink={1}>
-        <For each={parts}>
+        <For each={parts()}>
           {(part) => <span style={{ fg: part.highlight ? theme.text : theme.textMuted }}>{part.text}</span>}
         </For>
       </text>
diff --git a/packages/opencode/src/cli/cmd/tui/feature-plugins/home/tips.tsx b/packages/opencode/src/cli/cmd/tui/feature-plugins/home/tips.tsx
index c0e02f74a..26c03ee34 100644
--- a/packages/opencode/src/cli/cmd/tui/feature-plugins/home/tips.tsx
+++ b/packages/opencode/src/cli/cmd/tui/feature-plugins/home/tips.tsx
@@ -4,11 +4,11 @@ import { Tips } from "./tips-view"
 
 const id = "internal:home-tips"
 
-function View(props: { show: boolean }) {
+function View(props: { show: boolean; connected: boolean }) {
   return (
     <box height={4} minHeight={0} width="100%" maxWidth={75} alignItems="center" paddingTop={3} flexShrink={1}>
       <Show when={props.show}>
-        <Tips />
+        <Tips connected={props.connected} />
       </Show>
     </box>
   )
@@ -35,8 +35,13 @@ const tui: TuiPlugin = async (api) => {
       home_bottom() {
         const hidden = createMemo(() => api.kv.get("tips_hidden", false))
         const first = createMemo(() => api.state.session.count() === 0)
-        const show = createMemo(() => !first() && !hidden())
-        return <View show={show()} />
+        const connected = createMemo(() =>
+          api.state.provider.some(
+            (item) => item.id !== "opencode" || Object.values(item.models).some((model) => model.cost?.input !== 0),
+          ),
+        )
+        const show = createMemo(() => (!first() || !connected()) && !hidden())
+        return <View show={show()} connected={connected()} />
       },
     },
   })