opencode-plugin-kit 1.0.0-alpha.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ranjith Raj
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,250 @@
+# opencode-plugin-kit
+
+[![CI](https://github.com/ranjithrajv/opencode-plugin-kit/actions/workflows/ci.yml/badge.svg)](https://github.com/ranjithrajv/opencode-plugin-kit/actions/workflows/ci.yml)
+[![npm version](https://img.shields.io/npm/v/opencode-plugin-kit)](https://www.npmjs.com/package/opencode-plugin-kit)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+Shared building blocks for [OpenCode](https://opencode.ai) sidebar plugins —
+the pieces that every sidebar widget ends up reimplementing. Used by five
+production plugins with **100% test coverage**.
+
+## Status
+
+**v1.0.0-alpha.1** — API stabilized, ready for integration testing.
+
+## Quick Start
+
+```sh
+# npm
+npm install opencode-plugin-kit
+
+# bun
+bun add opencode-plugin-kit
+```
+
+```ts
+import { createViewPicker, createCachedStore } from "opencode-plugin-kit"
+
+// Persisted view picker with slash command + dialog
+const picker = createViewPicker(context, {
+  registry: [
+    { id: "go", title: "Go", description: "Go plan usage" },
+    { id: "zen", title: "Zen", description: "Zen usage" },
+  ],
+  storageKey: "view",
+  command: {
+    id: "usage.view",
+    group: "Usage",
+    name: "usage-view",
+    title: (v) => `Usage footer: view provider (${v.title})`,
+    description: "Pick which provider view the sidebar shows",
+  },
+  dialog: { title: "Usage view", message: "Choose the provider view" },
+  toastPrefix: "Usage footer",
+})
+picker.registerCommand()
+
+// Storage-backed cache (instant restore after TUI restart)
+const cache = createCachedStore<Usage | null>(context, "usage", {
+  initial: null,
+  staleAfterMs: 120_000,
+})
+```
+
+## Why
+
+Every OpenCode sidebar plugin reimplements the same patterns:
+
+- Reading provider lists and auth.json
+- Persisting UI state across TUI restarts
+- Switching views with slash commands + dialogs
+- Polling authenticated endpoints
+- Traversing session messages defensively
+
+Kit extracts these into tested, documented primitives so plugins focus on
+their unique data and rendering.
+
+## Modules
+
+| Module                  | Exports                                                                                                                                                                    | Purpose                                                 |
+| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
+| `providers.ts`          | `ZEN_PROVIDER`, `GO_PROVIDER`, `providerLabel()`, `availableProviders()`, `unwrap()`, `isAssistant()`, `modelId()`, `providerId()`, `readAuth()`, `hasKey()`, `authKeys()` | Provider vocabulary + defensive shape readers           |
+| `rows.ts`               | `short()`, `line()`, `bar()`                                                                                                                                               | Pure text formatting                                    |
+| `format.ts`             | `fmt()`, `fmtCost()`, `until()`                                                                                                                                            | Number/date formatting                                  |
+| `cache.ts`              | `createCachedStore<T>()`                                                                                                                                                   | Storage-backed cache with staleness tracking            |
+| `schemas.ts`            | `parseUsage()`, `parseIntegrationList()`, `connectedProviderIds()`                                                                                                         | Zod schemas for untrusted boundary shapes               |
+| `viewPicker.ts`         | `createViewPicker()`                                                                                                                                                       | Registry + persistence + slash command + dialog + toast |
+| `currentModel.ts`       | `resolveCurrentModel()`                                                                                                                                                    | Resolve active model from session messages              |
+| `connectedProviders.ts` | `createConnectedProviders()`                                                                                                                                               | Reactive integration-list polling                       |
+| `cachedResource.ts`     | `createCachedResource()`                                                                                                                                                   | Stale-while-revalidate resource                         |
+| `messages.ts`           | `walkMessages()`, `sumProviderTokens()`                                                                                                                                    | Defensive message traversal                             |
+| `pollingFetcher.ts`     | `createPollingFetcher()`                                                                                                                                                   | Throttled polling with in-flight guard                  |
+| `sidebarSlot.ts`        | `createSessionResource()`                                                                                                                                                  | Session-reactive data resource                          |
+| `commands.ts`           | `createToggle()`, `registerKeymapCommand()`                                                                                                                                | Toggle command + keymap registration                    |
+| `workspace.ts`          | `resolveLocation()`, `workspaceDirectory()`                                                                                                                                | Workspace location resolution                           |
+| `toast.ts`              | `showToast()`                                                                                                                                                              | Toast helper                                            |
+| `host.ts`               | `KitContext`, `KitMessageShape`                                                                                                                                            | Structural host-contract types                          |
+
+Everything is re-exported from the package root (`src/index.ts`).
+
+## API Reference
+
+### View Picker
+
+```ts
+import { createViewPicker } from "opencode-plugin-kit"
+
+const picker = createViewPicker(context, {
+  registry: readonly PickerOption[],  // View options
+  storageKey: string,                 // Persistence key
+  command: {
+    id: string,                       // Command ID
+    group: string,                    // Command group
+    name: string,                     // Slash command name
+    aliases?: string[],               // Slash aliases
+    title: (current) => string,       // Dynamic title
+    description: string,              // Command description
+  },
+  dialog: { title: string, message: string },
+  toastPrefix?: string,               // Toast prefix on switch
+  selectable?: (entry) => boolean,    // Gate entries (e.g. provider-key check)
+  unavailableMessage?: (entry) => string,
+})
+picker.registerCommand()  // Call once from setup
+picker.current()          // Reactive current entry
+picker.currentID()        // Reactive current ID
+picker.apply(entry)       // Switch without UI
+picker.pick(arg?)         // Open picker or select by arg
+```
+
+### Cached Store
+
+```ts
+import { createCachedStore } from "opencode-plugin-kit"
+
+const cache = createCachedStore<T>(context, key, {
+  initial: T, // Initial value
+  staleAfterMs: number, // Staleness threshold
+})
+cache.value // Current value (restored from storage)
+cache.lastSet // Epoch ms of last set (0 = never)
+cache.stale // True when staleAfterMs elapsed
+cache.set(value) // Update + persist
+```
+
+### Connected Providers
+
+```ts
+import { createConnectedProviders } from "opencode-plugin-kit"
+
+const connected = createConnectedProviders(context, {
+  extra: () => ["huggingface"], // Extra providers (e.g. env-only)
+  pollMs: 30_000, // Poll interval (0 = disable)
+})
+connected.ids() // Reactive Set of connected provider IDs
+connected.has(id) // Check if provider is connected
+connected.refresh() // Force immediate refresh
+connected.stop() // Stop polling
+```
+
+### Polling Fetcher
+
+```ts
+import { createPollingFetcher } from "opencode-plugin-kit"
+
+const fetcher = createPollingFetcher({
+  fetch: () => Promise<T | null>,
+  intervalMs: 60_000,
+  throttleMs: 60_000,     // Min gap between fetches
+  onResult: (value) => void,
+  onError: (err) => void,
+})
+fetcher.refresh()   // Trigger immediate fetch
+fetcher.stop()      // Stop polling
+fetcher.inFlight()  // Whether a fetch is in progress
+```
+
+### Message Traversal
+
+```ts
+import { walkMessages, sumProviderTokens } from "opencode-plugin-kit"
+
+// Fold over a session's messages defensively
+const totals = walkMessages(
+  context,
+  sessionID,
+  (message, acc) => {
+    acc.tokens += message?.tokens?.input ?? 0
+    return acc
+  },
+  { provider: "opencode", since: Date.now() - 3600_000 },
+  { tokens: 0 },
+)
+
+// Convenience: sum tokens for a provider
+const { input, output, cost } = sumProviderTokens(context, sessionID, "opencode")
+```
+
+## Consuming Plugins
+
+| Plugin                                                          | What it does                                                   |
+| --------------------------------------------------------------- | -------------------------------------------------------------- |
+| [opencode-usage-quota-tracker](../opencode-usage-quota-tracker) | Live provider quota + usage in sidebar footer                  |
+| [opencode-model-recommender](../opencode-model-recommender)     | Model recommendations by cache ratio, token cost, session cost |
+| [opencode-skill-lister](../opencode-skill-lister)               | Skills list in sidebar                                         |
+| [opencode-plugin-manager](../opencode-plugin-manager)           | Plugin manager in sidebar                                      |
+
+Link locally with `"opencode-plugin-kit": "file:../opencode-plugin-kit"` in the
+consumer's `package.json`, then `npm install` (or `bun install`).
+
+## Compatibility
+
+The host plugin API is beta; its types are the spec. Kit consumes the context
+structurally — anything the host ships with the expected members satisfies it.
+
+- **No runtime dependency** on `@opencode-ai/plugin` — types only
+- **Optional peer** — declared as optional so consumers share one copy
+- **CI tripwire** — `host.test-d.ts` pins published host types against kit's
+  contract; drift fails CI with a readable diff
+
+## Development
+
+```sh
+# Install
+vp install
+
+# Check (format + lint + typecheck)
+vp check
+
+# Fix issues
+vp check --fix
+
+# Format
+vp fmt
+
+# Lint
+vp lint
+
+# Typecheck
+vp check --typecheck
+
+# Test
+vp test
+
+# Test with coverage
+vp test --coverage
+```
+
+## Contributing
+
+See [CONTRIBUTING.md](CONTRIBUTING.md) — and keep
+[docs/opencode2-api.md](docs/opencode2-api.md) in sync if your change adopts
+a new OpenCode API surface.
+
+Platform patterns proposed for upstreaming into the official plugin API are
+tracked in [docs/UPSTREAM.md](docs/UPSTREAM.md) — absorbing a pattern
+upstream and deleting it here is the project's exit goal, not a failure.
+
+## License
+
+MIT — see [LICENSE](LICENSE).

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "opencode-plugin-kit",
+  "version": "1.0.0-alpha.1",
+  "description": "Shared building blocks for OpenCode sidebar plugins: provider vocabulary, row formatting, defensive message traversal, connected-provider tracking, polling fetcher, cached resources, and a persisted view/filter picker (registry + slash command + dialog + toast).",
+  "keywords": [
+    "opencode",
+    "opencode-plugin",
+    "sidebar",
+    "tui"
+  ],
+  "license": "MIT",
+  "author": "Ranjith Raj",
+  "files": [
+    "src"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "scripts": {
+    "check": "vp check",
+    "check:fix": "vp check --fix",
+    "fmt": "vp fmt",
+    "lint": "vp lint",
+    "typecheck": "vp check --typecheck",
+    "test:types": "vitest run --typecheck",
+    "test:coverage": "vitest run --coverage.enabled"
+  },
+  "devDependencies": {
+    "@opencode-ai/plugin": "0.0.0-beta-19242",
+    "@opencode-ai/sdk": "0.0.0-beta-19234",
+    "@opentui/core": "^0.5.11",
+    "@opentui/solid": "^0.5.11",
+    "@types/node": "^26.5.0",
+    "happy-dom": "^20.14.0",
+    "typescript": "^7.0.2",
+    "vite-plugin-solid": "^2.11.14",
+    "vite-plus": "^0.1.16",
+    "vitest": "^5.0.0"
+  },
+  "peerDependencies": {
+    "@opencode-ai/plugin": ">=1.18.25 <2 || 0.0.0-beta-19242",
+    "solid-js": "1.9.15",
+    "zod": "^4.5.4"
+  },
+  "peerDependenciesMeta": {
+    "@opencode-ai/plugin": {
+      "optional": true
+    }
+  },
+  "packageManager": "bun@1.4.2",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ranjithraj/opencode-plugin-kit.git"
+  }
+}

package/src/cache.ts

@@ -0,0 +1,95 @@
+// Storage-backed cache for sidebar widgets: instant restore of the last
+import type { KitContext } from "./host.ts"
+// known value across TUI restarts, with staleness tracking.
+
+export interface CachedStore<T> {
+  /** Last cached value (restored from plugin storage on restart), or the
+   * `initial` when nothing has been cached yet. */
+  readonly value: T
+  /** Epoch ms of the last successful `set`. 0 when never set. */
+  readonly lastSet: number
+  /** True when `staleAfterMs` has elapsed since the last set (or nothing
+   * was ever set). */
+  readonly stale: boolean
+  /** Cache a value and persist it. */
+  set(value: T): void
+}
+
+interface CacheEntry<T> {
+  value: T
+  at: number
+}
+
+/**
+ * Module-scope, storage-backed cache. Sidebar slots render synchronously, so
+ * the latest successful fetch is what gets painted and a background refresher
+ * keeps it fresh — this encapsulates that pattern:
+ *
+ *   const cache = createCachedStore(context, "usage", { initial: null, staleAfterMs: 120_000 })
+ *   cache.set(fresh)                    // after a successful fetch
+ *   render(cache.value)                 // instant, even after restart
+ *   if (cache.stale) void refetch()     // background refresh
+ */
+export function createCachedStore<T>(
+  context: KitContext,
+  key: string,
+  { initial, staleAfterMs }: { initial: T; staleAfterMs: number },
+): CachedStore<T> {
+  let value = initial
+  let at = 0
+  let persist: ((entry: CacheEntry<T>) => void) | null = null
+
+  // Restore the last known value so a TUI restart shows data immediately
+  // instead of a loading/empty state. Storage unavailable → memory-only.
+  try {
+    const [store] = context.storage.store(key, { initial: { entry: null as CacheEntry<T> | null } })
+    if (store.entry) {
+      value = store.entry.value
+      at = store.entry.at
+    }
+    persist = (entry) => {
+      store.entry = entry
+    }
+  } catch {
+    // No storage; cache stays in-memory only.
+  }
+
+  return {
+    get value() {
+      return value
+    },
+    get lastSet() {
+      return at
+    },
+    get stale() {
+      return at === 0 || Date.now() - at > staleAfterMs
+    },
+    set(next: T) {
+      value = next
+      at = Date.now()
+      persist?.({ value: next, at })
+    },
+  }
+}
+
+/**
+ * Durable storage cell shared by the picker and the toggle: read the
+ * persisted object (or undefined when storage is unavailable) and persist
+ * by mutating it — the host hands back a live cell, so mutation = write.
+ */
+export function persistedCell<T extends object>(context: KitContext, storageKey: string, initial: T) {
+  const read = (): T | undefined => {
+    try {
+      return (context.storage.store(storageKey, { initial }) as [T, T])?.[0]
+    } catch {
+      return undefined
+    }
+  }
+  return {
+    read,
+    persist: (mutate: (value: T) => void): void => {
+      const value = read()
+      if (value) mutate(value)
+    },
+  }
+}

package/src/cachedResource.ts

@@ -0,0 +1,58 @@
+// Stale-while-revalidate resource: combines createResource + createCachedStore
+// into one primitive so sidebar widgets restore instantly from cache, then
+// refresh in the background.
+//
+// Both the model recommender and skill-lister hand-wire "serve cache, refresh
+// behind it" — this encapsulates that dance.
+import { createResource } from "solid-js"
+import type { CachedStore } from "./cache.ts"
+
+export interface CachedResourceOptions<T> {
+  /** Durable cache (from createCachedStore). */
+  readonly cache: CachedStore<T | null>
+}
+
+/**
+ * Create a cached resource that serves the cache instantly, then refetches
+ * in the background. The cache persists across TUI restarts so the sidebar
+ * never shows a loading state.
+ *
+ * @example
+ * const cache = createCachedStore(context, "picks", { initial: null, staleAfterMs: 300_000 })
+ * const cached = createCachedResource(() => sessionID, loadPicks, { cache })
+ * // cached.data() — the resource signal
+ * // cached.refetch() — force a refetch
+ * // cached.set(value) — mutate both resource + cache
+ */
+export function createCachedResource<T>(
+  source: () => string | undefined,
+  loader: (sid: string | undefined) => Promise<T>,
+  options: CachedResourceOptions<T>,
+) {
+  const { cache } = options
+
+  const [data, { refetch, mutate }] = createResource(
+    source,
+    async (sid) => {
+      const result = await loader(sid)
+      cache.set(result)
+      return result
+    },
+    { initialValue: (cache.value ?? undefined) as T | undefined },
+  )
+
+  return {
+    data,
+    refetch: () => {
+      if (cache.stale) void refetch()
+    },
+    // Unconditional refetch — for after external changes (e.g. a config file
+    // edited on disk) where the staleness gate would wrongly skip the reload.
+    refetchNow: () => refetch(),
+    set: (value: T) => {
+      cache.set(value)
+      // Setter<T> overloads don't resolve for bare generics; cast through unknown.
+      ;(mutate as (v: T) => void)(value)
+    },
+  }
+}

package/src/collapsible.tsx

@@ -0,0 +1,86 @@
+// Collapsible sidebar sections — the header pattern shared by the skill
+// lister and the plugin manager (both mirroring the built-in
+// opencode.sidebar.mcp widget). One implementation keeps every sidebar
+// section in lockstep with the built-in instead of drifting per plugin.
+//
+// Two shapes, matching the two patterns the plugins actually render:
+//  - CollapsibleSection: the top-level block. Bold title, ▶/▼ arrow only
+//    above `threshold` items, collapsed summary, content hidden while
+//    collapsed (unless under the threshold).
+//  - CollapsibleGroup: a nested group. Subdued ▸/▾ header with a trailing
+//    count, always toggleable.
+import { createSignal, Show } from "solid-js"
+import type { JSX } from "solid-js"
+import { usePlugin } from "@opencode-ai/plugin/tui"
+
+/** The top-level collapsible sidebar section. */
+export function CollapsibleSection(props: {
+  title: string
+  /** Item count; drives the threshold and the default collapsed summary. */
+  count?: number
+  /** Collapsed summary text; defaults to the count in parentheses. */
+  summary?: string
+  /** The section only expands above this count. Defaults to 2. */
+  threshold?: number
+  /** Always-visible content between the header and the collapsible body
+   * (e.g. the plugin manager's status note). */
+  pinned?: JSX.Element
+  children: JSX.Element
+}) {
+  const theme = usePlugin().theme
+  const [expanded, setExpanded] = createSignal(false)
+  const count = () => props.count ?? 0
+  const threshold = () => props.threshold ?? 2
+  const expandable = () => count() > threshold()
+  return (
+    <box flexDirection="column">
+      <box flexDirection="row" gap={1} onMouseDown={() => expandable() && setExpanded((e) => !e)}>
+        <Show when={expandable()}>
+          <text fg={theme.text.default}>{expanded() ? "▼" : "▶"}</text>
+        </Show>
+        <text fg={theme.text.default}>
+          <b>{props.title}</b>
+        </text>
+        <Show when={!expanded()}>
+          <text fg={theme.text.subdued}> ({props.summary ?? count()})</text>
+        </Show>
+      </box>
+      {props.pinned}
+      <Show when={!expandable() || expanded()}>{props.children}</Show>
+    </box>
+  )
+}
+
+/**
+ * A collapsible group nested inside a section. Children may be a render
+ * function receiving the reactive collapsed state — for content that must
+ * react to the toggle without being hidden by it (the plugin manager's
+ * built-ins hint).
+ */
+export function CollapsibleGroup(props: {
+  title: string
+  count: number
+  defaultCollapsed?: boolean
+  children: JSX.Element | ((collapsed: () => boolean) => JSX.Element)
+}) {
+  const theme = usePlugin().theme
+  const [collapsed, setCollapsed] = createSignal(props.defaultCollapsed ?? false)
+  return (
+    <box flexDirection="column">
+      <box flexDirection="row" gap={1} onMouseDown={() => setCollapsed((c) => !c)}>
+        <text fg={theme.text.subdued}>{collapsed() ? "▸" : "▾"}</text>
+        <text fg={theme.text.subdued}>
+          {props.title} ({props.count})
+        </text>
+      </box>
+      <Show when={!collapsed()}>
+        {(() => {
+          const children = props.children
+          return typeof children === "function" && children.length > 0
+            ? (children as (c: () => boolean) => JSX.Element)(collapsed)
+            : (children as JSX.Element)
+        })()}
+      </Show>
+    </box>
+  )
+}

package/src/commands.ts

@@ -0,0 +1,108 @@
+// Slash/palette command registration: the shared plumbing under
+// createViewPicker and createToggle.
+//
+// Keymap layers are owned by the calling component, so a command must be
+// registered from a rendered `app` slot — a layer registered directly in
+// setup() never becomes active.
+import { createSignal } from "solid-js"
+import type { KitCommandEntry, KitContext } from "./host.ts"
+import { persistedCell } from "./cache.ts"
+import { showToast } from "./toast.ts"
+
+/**
+ * Register one slash/palette command through a keymap layer. `command` may be
+ * a factory — it re-evaluates on every palette render, keeping titles fresh
+ * after the underlying state changes.
+ */
+export function registerKeymapCommand(context: KitContext, command: KitCommandEntry | (() => KitCommandEntry)): void {
+  try {
+    context.ui.slot({
+      append: "app",
+      render: () => {
+        try {
+          const entry = typeof command === "function" ? command() : command
+          context.keymap.layer(() => ({ mode: "global", priority: 10, commands: [entry] }))
+        } catch (err) {
+          console.warn("opencode-plugin-kit: keymap.layer unavailable", err)
+        }
+        return null
+      },
+    })
+  } catch (err) {
+    console.warn("opencode-plugin-kit: ui.slot unavailable", err)
+  }
+}
+
+export interface ToggleCommandConfig {
+  readonly id: string
+  readonly group: string
+  /** Slash name, e.g. "plugins-builtins". */
+  readonly name: string
+  readonly aliases?: string[]
+  readonly description: string
+  /** Palette title; re-evaluated on every palette render. */
+  readonly title: (value: boolean) => string
+}
+
+export interface ToggleConfig {
+  /** Durable storage key (plugin-scoped) for the boolean. */
+  readonly storageKey: string
+  readonly initial: boolean
+  readonly command: ToggleCommandConfig
+  /** Toast message on toggle; omit for a silent toggle. */
+  readonly toast?: (value: boolean) => string
+}
+
+export interface Toggle {
+  readonly value: () => boolean
+  readonly toggle: () => void
+  readonly registerCommand: () => void
+}
+
+/**
+ * A persisted boolean with a slash/palette command to flip it — the
+ * single-toggle counterpart to createViewPicker. The persisted shape is
+ * `{ value: boolean }`; anything unreadable (including a foreign legacy
+ * shape under the same key) falls back to `initial`.
+ */
+export function createToggle(context: KitContext, config: ToggleConfig): Toggle {
+  const [value, setValue] = createSignal(config.initial)
+
+  type StoredToggle = { value?: boolean }
+  const cell = persistedCell<StoredToggle>(context, config.storageKey, { value: config.initial })
+
+  // Restore the persisted pick, if readable.
+  try {
+    const persisted = cell.read()
+    if (persisted && typeof persisted.value === "boolean") setValue(persisted.value)
+  } catch {
+    // In-memory only.
+  }
+
+  const toggle = () => {
+    const next = !value()
+    setValue(next)
+    cell.persist((s) => {
+      s.value = next
+    })
+    const message = config.toast?.(next)
+    if (message) showToast(context, message)
+  }
+
+  const registerCommand = () =>
+    registerKeymapCommand(context, () => ({
+      id: config.command.id,
+      title: config.command.title(value()),
+      description: config.command.description,
+      group: config.command.group,
+      palette: true,
+      slash: {
+        name: config.command.name,
+        aliases: config.command.aliases,
+      },
+      suggested: true,
+      run: () => toggle(),
+    }))
+
+  return { value, toggle, registerCommand }
+}