@qthinker/opencode-deepseek-search 0.1.1 → 0.2.0

package/src/tui/card.ts

@@ -0,0 +1,186 @@
+// The `sidebar.content` card: no frame of its own (the host sidebar already has
+// one), one column, full width, and only the action label is interactive.
+import type { JSX } from "@opentui/solid"
+import type { ResolvedTheme } from "@opencode/theme/tui"
+import { createElement, insert, setProp } from "@opentui/solid"
+import type { SearchStatus } from "../rpc.ts"
+import { DEFAULT_COLUMNS, sidebarRows } from "../status-view.ts"
+import type { SidebarRows } from "../status-view.ts"
+
+/** A measured width under this cannot show even the usage label; treat it as unmeasured. */
+const MIN_CARD_COLUMNS = 8
+
+/**
+ * Columns the card may use. Before the first layout pass the host reports 0 (or
+ * nothing at all), so both — and any other unusable value — fall back to the
+ * narrow default: the first frame is a whole card rather than a one-column
+ * strip, and the next measurement replaces it.
+ */
+export function cardColumns(measured: number | undefined): number {
+  if (measured === undefined || !Number.isFinite(measured) || measured < MIN_CARD_COLUMNS) {
+    return DEFAULT_COLUMNS
+  }
+  return Math.floor(measured)
+}
+
+type Node = ReturnType<typeof createElement>
+type Child = string | Node
+type Props = Readonly<Record<string, unknown>>
+type Color = ResolvedTheme["text"]["base"]
+type Tone = SidebarRows["tone"]
+
+/** Text-presentation symbols, never emoji. */
+const GLYPH: Readonly<Record<Tone, string>> = {
+  on: "●",
+  off: "○",
+  warn: "◐",
+  error: "!",
+  idle: "…",
+}
+
+function toneColor(theme: ResolvedTheme, tone: Tone): Color {
+  switch (tone) {
+    case "on":
+      return theme.text.feedback.success.base
+    case "warn":
+      return theme.text.feedback.warning.base
+    case "error":
+      return theme.text.feedback.error.base
+    case "off":
+      return theme.text.muted
+    case "idle":
+      return theme.text.faint
+  }
+}
+
+/**
+ * JSX-free element builder. Children go in one `insert` call: a second call
+ * would replace the first, because Solid tracks no anchor between calls.
+ */
+function element(tag: string, props: Props | undefined, children: readonly Child[] = []): Node {
+  const node = createElement(tag)
+  if (props) {
+    for (const key of Object.keys(props)) {
+      const value = props[key]
+      if (value !== undefined) setProp(node, key, value)
+    }
+  }
+  if (children.length > 0) insert(node, children)
+  return node
+}
+
+export function sidebarCard(input: {
+  readonly status: SearchStatus | undefined
+  readonly error: string | undefined
+  readonly theme: ResolvedTheme
+  readonly onToggle: () => void
+  /**
+   * Columns the sidebar really gives the card, measured by the host. Optional
+   * so the slot still builds before that measurement exists; the fallback in
+   * `cardColumns` covers 0 and any unusable value.
+   */
+  readonly maxColumns?: number
+}): JSX.Element {
+  // The terminal sidebar is the surface this ladder is tuned for: the measured
+  // width, not a guessed constant, decides whether the words fit.
+  const rows = sidebarRows({
+    status: input.status,
+    error: input.error,
+    maxColumns: cardColumns(input.maxColumns),
+  })
+  const theme = input.theme
+  const state = toneColor(theme, rows.tone)
+
+  const onAction = (event: { preventDefault(): void }) => {
+    event.preventDefault()
+    input.onToggle()
+  }
+
+  // The title row is a flex row so the action sits at the card's right edge
+  // instead of trailing the title. `space-between` is what guarantees that: the
+  // title grows into the gap, and if the host ever ignores `flexGrow` the action
+  // is still pushed to the far edge. The title is measured by the view model and
+  // never wraps; the action keeps its own width and owns the only click handler,
+  // so a click can never toggle twice.
+  //
+  // The state word carries the tone color, so a narrow sidebar that has to drop
+  // the glyph still shows the state at a glance (the desktop panel does the same).
+  const separator = rows.title.indexOf(" · ")
+  const titleSpans: Child[] =
+    separator < 0
+      ? [element("span", { style: { fg: state } }, [rows.title])]
+      : [
+          element("span", { style: { fg: theme.text.base } }, [rows.title.slice(0, separator)]),
+          element("span", { style: { fg: theme.text.faint } }, [" · "]),
+          element("span", { style: { fg: state } }, [rows.title.slice(separator + 3)]),
+        ]
+  if (rows.glyph) {
+    titleSpans.unshift(element("span", { style: { fg: state } }, [`${GLYPH[rows.tone]} `]))
+  }
+  const title = element(
+    "text",
+    { selectable: false, wrapMode: "none", flexGrow: 1, flexShrink: 1 },
+    titleSpans,
+  )
+  // A state without an action (a missing key) keeps the title row to itself;
+  // its fix copy is rendered as the hint row instead.
+  const action =
+    rows.clickable && rows.action.length > 0
+      ? element(
+          "text",
+          {
+            selectable: false,
+            wrapMode: "none",
+            flexShrink: 0,
+            onMouseUp: onAction,
+          },
+          [element("span", { style: { fg: theme.text.muted } }, [rows.action])],
+        )
+      : undefined
+  // The model decides whether the action can share the title row. When it
+  // cannot, the action gets a row of its own but keeps the same right edge: the
+  // title is never shortened just to squeeze the action in beside it.
+  const titleRow = element(
+    "box",
+    { flexDirection: "row", justifyContent: "space-between", flexShrink: 0, width: "100%" },
+    action === undefined || rows.actionBelow ? [title] : [title, action],
+  )
+  const actionRow =
+    action === undefined || !rows.actionBelow
+      ? undefined
+      : element(
+          "box",
+          { flexDirection: "row", justifyContent: "flex-end", flexShrink: 0, width: "100%" },
+          [action],
+        )
+
+  // The model already composed every row to fit the sidebar, so each body row
+  // is one text node: the host must never get the chance to wrap it.
+  const body = rows.lines.map((line) =>
+    element("text", { content: line, fg: theme.text.muted, wrapMode: "none", width: "100%" }),
+  )
+  // A missing key has no action, so the fix hint gets the row right under the
+  // title. It is plain text: there is nothing to click.
+  const hint =
+    rows.hint === undefined
+      ? []
+      : [
+          element("text", {
+            content: rows.hint,
+            fg: theme.text.muted,
+            wrapMode: "none",
+            width: "100%",
+          }),
+        ]
+
+  const root = element("box", { flexDirection: "column", flexShrink: 0, width: "100%" }, [
+    titleRow,
+    ...(actionRow === undefined ? [] : [actionRow]),
+    ...hint,
+    ...body,
+  ])
+
+  // createElement returns a renderable; the slot API is typed with Solid's
+  // DOM-flavoured JSX.Element. This is the one boundary between the two.
+  return root as unknown as JSX.Element
+}

package/src/tui/main.ts

@@ -0,0 +1,143 @@
+// TUI half of the plugin: renders the DeepSeek status card in the session
+// sidebar and toggles the search takeover through the shared RPC contract.
+//
+// No JSX and no build step: the card is a hand-written element tree built from
+// `@opentui/solid`'s `createElement` / `setProp` / `insert`, so this file loads
+// through Node's type stripping like the server half.
+
+import { Plugin } from "@opencode/plugin/tui"
+import { createElement, insert, setProp, type JSX } from "@opentui/solid"
+import type { Renderable } from "@opentui/core"
+import { createSignal } from "solid-js"
+import { DeepSeekRpc, readModeResult, readStatus, type SearchStatus } from "../rpc.ts"
+import { sidebarCard } from "./card.ts"
+
+const REFRESH_MS = 10_000
+const ERROR_MAX = 80
+
+export default Plugin.define({
+  // Must match the server plugin id: slot keys and the RPC id derive from it.
+  id: "deepseek-search",
+  async setup(ctx) {
+    const rpc = ctx.client.rpc(DeepSeekRpc)
+    const [status, setStatus] = createSignal<SearchStatus | undefined>()
+    const [error, setError] = createSignal<string | undefined>()
+
+    const describeError = (e: unknown) => (e instanceof Error ? e.message : String(e)).slice(0, ERROR_MAX)
+
+    // `status` takes a required first argument: plain JSON Schema degrades the
+    // input type to `unknown`, and the host validates the payload against the
+    // method's object schema, so an omitted input is rejected as invalid.
+    async function refresh() {
+      try {
+        const next = readStatus(await rpc.status({}))
+        if (next) {
+          setStatus(next)
+          setError(undefined)
+        } else {
+          setError("状态数据格式不符")
+        }
+      } catch (e) {
+        setError(describeError(e))
+      }
+      ctx.renderer.requestRender()
+    }
+
+    async function applyMode(mode: "deepseek" | "native") {
+      try {
+        const result = readModeResult(await rpc.setMode({ mode }))
+        if (!result) ctx.ui.toast.show({ message: "模式切换结果格式不符", variant: "error" })
+        else if (!result.ok) ctx.ui.toast.show({ message: result.message, variant: "error" })
+      } catch (e) {
+        ctx.ui.toast.show({ message: describeError(e), variant: "error" })
+      } finally {
+        // The `changed` event and the timer also refresh; doing it here keeps
+        // the card correct even if event delivery is unavailable.
+        await refresh()
+      }
+    }
+
+    // The card labels the action it can really perform: switching the takeover
+    // when a status is known, retrying the read when it is not.
+    function toggle() {
+      const current = status()
+      if (!current || error()) {
+        void refresh()
+        return
+      }
+      void applyMode(current.mode === "deepseek" ? "native" : "deepseek")
+    }
+
+    // Mouse row on the card is the primary switch; this menu is the fallback
+    // entry point that always works (keymap command + `/deepseek` slash).
+    async function openMenu() {
+      const choice = await ctx.ui.dialog.select<"deepseek" | "native" | "refresh">({
+        title: "DeepSeek 搜索",
+        options: [
+          { title: "启用", value: "deepseek", description: "接管内置 websearch" },
+          { title: "停用", value: "native", description: "把内置 websearch 交还宿主" },
+          { title: "刷新", value: "refresh", description: "重新读取状态与统计" },
+        ],
+        current: status()?.mode,
+      })
+      if (choice === undefined) return
+      if (choice === "refresh") await refresh()
+      else await applyMode(choice)
+    }
+
+    // The host calls `render` each time it mounts this slot, so it builds a
+    // fresh root and lets `insert` own the reactive child that repaints the card
+    // when the signals change. A root created once in setup cannot be mounted
+    // by a second render call (the published plugins build per call too).
+    // The sidebar's real column count decides whether the card can show the
+    // wordy usage rows; the host only reports it after layout, so the first
+    // render falls back to the model's own budget and this repaints on resize.
+    const [width, setWidth] = createSignal(0)
+    const disposeSlot = ctx.ui.slot({
+      append: "sidebar.content",
+      render: () => {
+        // `createElement` is typed as the base class; the laid-out node is a
+        // Renderable, whose `width` is what the card needs. One cast here.
+        const root = createElement("box") as unknown as Renderable
+        setProp(root, "width", "100%")
+        setProp(root, "flexDirection", "column")
+        setProp(root, "onSizeChange", () => setWidth(root.width))
+        insert(root, () =>
+          sidebarCard({
+            status: status(),
+            error: error(),
+            theme: ctx.theme,
+            onToggle: toggle,
+            maxColumns: width(),
+          }),
+        )
+        // `render` is declared to return JSX.Element while the tree here is a
+        // hand-built renderable: cast once, at the single boundary.
+        return root as unknown as JSX.Element
+      },
+    })
+
+    ctx.keymap.layer(() => ({
+      commands: [
+        {
+          id: "deepseek-search.toggle",
+          title: "DeepSeek: 启用/停用搜索接管",
+          slash: { name: "deepseek" },
+          run: () => void openMenu(),
+        },
+      ],
+    }))
+
+    // `changed` is the primary refresh path; the timer is the fallback because
+    // cross-half event delivery cannot be verified inside this repository.
+    const off = rpc.events.on("changed", () => void refresh())
+    const timer = setInterval(() => void refresh(), REFRESH_MS)
+    void refresh()
+
+    return () => {
+      disposeSlot()
+      off()
+      clearInterval(timer)
+    }
+  },
+})

package/src/usage.ts

@@ -114,3 +114,22 @@ export function formatUsage(ledger: UsageLedger, pricePerThousand: number, mode:
     "说明：空结果与失败请求不计费；DeepSeek 以账号侧账单为准，本统计不含其他机器或其他工具的调用。",
   ].join("\n")
 }
+
+/**
+ * Compact one-line summaries for a status display, keyed by period. Callers add
+ * the 今日/本月/累计 labels themselves. Costs are read from the ledger, which
+ * already accumulated them at tally time.
+ */
+export function usageSummaryLines(
+  ledger: UsageLedger,
+  today = dayKey(),
+): { today: string; month: string; total: string } {
+  const month = today.slice(0, 7)
+  const line = (d: UsageDay) =>
+    `搜索 ${d.search} · 抓取 ${d.fetch} · 空/失 ${d.empty + d.failed} · ${formatYuan(d.costMicro)}`
+  return {
+    today: line(sumDays(ledger, (k) => k === today)),
+    month: line(sumDays(ledger, (k) => k.startsWith(month))),
+    total: line(sumDays(ledger, () => true)),
+  }
+}

package/tui.ts

@@ -0,0 +1,6 @@
+// TUI entrypoint. OpenCode resolves a configured plugin *directory* by its root
+// conventional file names (`tui` for the TUI half), so this re-export keeps the
+// TUI half loadable without a package `exports` map (a `name`+`exports`
+// manifest switches resolution to the package name, which OpenCode drops when
+// the result falls outside the directory).
+export { default } from "./src/tui/main.ts"