tips as plugin

packages/opencode/src/cli/cmd/tui/feature-plugins/home/tips-view.tsx

@@ -1,4 +1,4 @@
-import { createMemo, createSignal, For } from "solid-js"
+import { For } from "solid-js"
 import { DEFAULT_THEMES, useTheme } from "@tui/context/theme"
 
 const themeCount = Object.keys(DEFAULT_THEMES).length

packages/opencode/src/cli/cmd/tui/feature-plugins/home/tips.tsx

@@ -0,0 +1,46 @@
+import type { TuiPlugin } from "@opencode-ai/plugin/tui"
+import { createMemo, Show } from "solid-js"
+import { Tips } from "./tips-view"
+
+function View(props: { show: boolean }) {
+  return (
+    <box height={4} minHeight={0} width="100%" maxWidth={75} alignItems="center" paddingTop={3} flexShrink={1}>
+      <Show when={props.show}>
+        <Tips />
+      </Show>
+    </box>
+  )
+}
+
+const tui: TuiPlugin = async (api) => {
+  const hidden = createMemo(() => api.kv.get("tips_hidden", false))
+  const first = createMemo(() => api.state.session.count() === 0)
+  const show = createMemo(() => !first() && !hidden())
+
+  api.command.register(() => [
+    {
+      title: hidden() ? "Show tips" : "Hide tips",
+      value: "tips.toggle",
+      keybind: "tips_toggle",
+      category: "System",
+      hidden: api.route.current.name !== "home",
+      onSelect() {
+        api.kv.set("tips_hidden", !hidden())
+        api.ui.dialog.clear()
+      },
+    },
+  ])
+
+  api.slots.register({
+    order: 100,
+    slots: {
+      home_bottom() {
+        return <View show={show()} />
+      },
+    },
+  })
+}
+
+export default {
+  tui,
+}

packages/opencode/src/cli/cmd/tui/plugin/api.tsx

@@ -131,6 +131,9 @@ function stateApi(sync: ReturnType<typeof useSync>): TuiApi["state"] {
       return sync.data.provider
     },
     session: {
+      count() {
+        return sync.data.session.length
+      },
       diff(sessionID) {
         return sync.data.session_diff[sessionID] ?? []
       },

packages/opencode/src/cli/cmd/tui/plugin/internal.ts

@@ -1,3 +1,4 @@
+import * as HomeTips from "../feature-plugins/home/tips"
 import * as SidebarTitle from "../feature-plugins/sidebar/title"
 import * as SidebarContext from "../feature-plugins/sidebar/context"
 import * as SidebarMcp from "../feature-plugins/sidebar/mcp"
@@ -13,6 +14,10 @@ export type InternalTuiPlugin = {
 }
 
 export const INTERNAL_TUI_PLUGINS: InternalTuiPlugin[] = [
+  {
+    name: "home-tips",
+    module: HomeTips,
+  },
   {
     name: "sidebar-title",
     module: SidebarTitle,

packages/opencode/src/cli/cmd/tui/routes/home.tsx

@@ -1,9 +1,7 @@
 import { Prompt, type PromptRef } from "@tui/component/prompt"
 import { createEffect, createMemo, Match, on, onMount, Show, Switch } from "solid-js"
 import { useTheme } from "@tui/context/theme"
-import { useKeybind } from "@tui/context/keybind"
 import { Logo } from "../component/logo"
-import { Tips } from "../component/tips"
 import { Locale } from "@/util/locale"
 import { useSync } from "../context/sync"
 import { Toast } from "../ui/toast"
@@ -12,8 +10,6 @@ import { useDirectory } from "../context/directory"
 import { useRouteData } from "@tui/context/route"
 import { usePromptRef } from "../context/prompt"
 import { Installation } from "@/installation"
-import { useKV } from "../context/kv"
-import { useCommandDialog } from "../component/dialog-command"
 import { useLocal } from "../context/local"
 import { TuiPluginRuntime } from "../plugin"
 
@@ -22,11 +18,9 @@ let once = false
 
 export function Home() {
   const sync = useSync()
-  const kv = useKV()
   const { theme } = useTheme()
   const route = useRouteData("home")
   const promptRef = usePromptRef()
-  const command = useCommandDialog()
   const mcp = createMemo(() => Object.keys(sync.data.mcp).length > 0)
   const mcpError = createMemo(() => {
     return Object.values(sync.data.mcp).some((x) => x.status === "failed")
@@ -36,27 +30,6 @@ export function Home() {
     return Object.values(sync.data.mcp).filter((x) => x.status === "connected").length
   })
 
-  const isFirstTimeUser = createMemo(() => sync.data.session.length === 0)
-  const tipsHidden = createMemo(() => kv.get("tips_hidden", false))
-  const showTips = createMemo(() => {
-    // Don't show tips for first-time users
-    if (isFirstTimeUser()) return false
-    return !tipsHidden()
-  })
-
-  command.register(() => [
-    {
-      title: tipsHidden() ? "Show tips" : "Hide tips",
-      value: "tips.toggle",
-      keybind: "tips_toggle",
-      category: "System",
-      onSelect: (dialog) => {
-        kv.set("tips_hidden", !tipsHidden())
-        dialog.clear()
-      },
-    },
-  ])
-
   const Hint = (
     <box flexShrink={0} flexDirection="row" gap={1}>
       <Show when={connectedMcpCount() > 0}>
@@ -104,8 +77,6 @@ export function Home() {
   )
   const directory = useDirectory()
 
-  const keybind = useKeybind()
-
   return (
     <>
       <box flexGrow={1} alignItems="center" paddingLeft={2} paddingRight={2}>
@@ -127,25 +98,7 @@ export function Home() {
             workspaceID={route.workspaceID}
           />
         </box>
-        <TuiPluginRuntime.Slot
-          name="home_tips"
-          mode="replace"
-          show_tips={showTips()}
-          tips_hidden={tipsHidden()}
-          first_time_user={isFirstTimeUser()}
-        >
-          <box height={4} minHeight={0} width="100%" maxWidth={75} alignItems="center" paddingTop={3} flexShrink={1}>
-            <Show when={showTips()}>
-              <Tips />
-            </Show>
-          </box>
-        </TuiPluginRuntime.Slot>
-        <TuiPluginRuntime.Slot
-          name="home_below_tips"
-          show_tips={showTips()}
-          tips_hidden={tipsHidden()}
-          first_time_user={isFirstTimeUser()}
-        />
+        <TuiPluginRuntime.Slot name="home_bottom" />
         <box flexGrow={1} minHeight={0} />
         <Toast />
       </box>