tui: redesign tips display on home screen

packages/opencode/src/cli/cmd/tui/component/did-you-know.tsx

@@ -1,51 +0,0 @@
-import { createMemo, createSignal, For } from "solid-js"
-import { useTheme } from "@tui/context/theme"
-import { TIPS } from "./tips"
-
-type TipPart = { text: string; highlight: boolean }
-
-function parseTip(tip: string): TipPart[] {
-  const parts: TipPart[] = []
-  const regex = /\{highlight\}(.*?)\{\/highlight\}/g
-  let lastIndex = 0
-  let match
-
-  while ((match = regex.exec(tip)) !== null) {
-    if (match.index > lastIndex) {
-      parts.push({ text: tip.slice(lastIndex, match.index), highlight: false })
-    }
-    parts.push({ text: match[1], highlight: true })
-    lastIndex = regex.lastIndex
-  }
-
-  if (lastIndex < tip.length) {
-    parts.push({ text: tip.slice(lastIndex), highlight: false })
-  }
-
-  return parts
-}
-
-const [tipIndex, setTipIndex] = createSignal(Math.floor(Math.random() * TIPS.length))
-
-export function randomizeTip() {
-  setTipIndex(Math.floor(Math.random() * TIPS.length))
-}
-
-export function DidYouKnow() {
-  const { theme } = useTheme()
-
-  const tipParts = createMemo(() => parseTip(TIPS[tipIndex()]))
-
-  return (
-    <box flexDirection="row" maxWidth="100%">
-      <text flexShrink={0} style={{ fg: theme.warning }}>
-        ● Tip{" "}
-      </text>
-      <text flexShrink={1}>
-        <For each={tipParts()}>
-          {(part) => <span style={{ fg: part.highlight ? theme.text : theme.textMuted }}>{part.text}</span>}
-        </For>
-      </text>
-    </box>
-  )
-}

packages/opencode/src/cli/cmd/tui/component/tips.tsx

@@ -1,4 +1,51 @@
-export const TIPS = [
+import { createMemo, createSignal, For } from "solid-js"
+import { useTheme } from "@tui/context/theme"
+
+type TipPart = { text: string; highlight: boolean }
+
+function parse(tip: string): TipPart[] {
+  const parts: TipPart[] = []
+  const regex = /\{highlight\}(.*?)\{\/highlight\}/g
+  const found = Array.from(tip.matchAll(regex))
+  const state = found.reduce(
+    (acc, match) => {
+      const start = match.index ?? 0
+      if (start > acc.index) {
+        acc.parts.push({ text: tip.slice(acc.index, start), highlight: false })
+      }
+      acc.parts.push({ text: match[1], highlight: true })
+      acc.index = start + match[0].length
+      return acc
+    },
+    { parts, index: 0 },
+  )
+
+  if (state.index < tip.length) {
+    parts.push({ text: tip.slice(state.index), highlight: false })
+  }
+
+  return parts
+}
+
+export function Tips() {
+  const theme = useTheme().theme
+  const parts = parse(TIPS[Math.floor(Math.random() * TIPS.length)])
+
+  return (
+    <box flexDirection="row" maxWidth="100%">
+      <text flexShrink={0} style={{ fg: theme.warning }}>
+        ● Tip{" "}
+      </text>
+      <text flexShrink={1}>
+        <For each={parts}>
+          {(part) => <span style={{ fg: part.highlight ? theme.text : theme.textMuted }}>{part.text}</span>}
+        </For>
+      </text>
+    </box>
+  )
+}
+
+const TIPS = [
   "Type {highlight}@{/highlight} followed by a filename to fuzzy search and attach files",
   "Start a message with {highlight}!{/highlight} to run shell commands directly (e.g., {highlight}!ls -la{/highlight})",
   "Press {highlight}Tab{/highlight} to cycle between Build and Plan agents",
@@ -78,7 +125,7 @@ export const TIPS = [
   "Set agent {highlight}temperature{/highlight} from 0.0 (focused) to 1.0 (creative)",
   "Configure {highlight}maxSteps{/highlight} to limit agentic iterations per request",
   'Set {highlight}"tools": {"bash": false}{/highlight} to disable specific tools',
-  'Use {highlight}"mcp_*": false{/highlight} to disable all tools from an MCP server',
+  'Set {highlight}"mcp_*": false{/highlight} to disable all tools from an MCP server',
   "Override global tool settings per agent configuration",
   'Set {highlight}"share": "auto"{/highlight} to automatically share all sessions',
   'Set {highlight}"share": "disabled"{/highlight} to prevent any session sharing',