From 093ca69c302497a25c02ca1449bb09cc0a6196e9 Mon Sep 17 00:00:00 2001
From: btema2 <Btema2>
Date: Sun, 14 Jun 2026 16:53:13 +0200
Subject: [PATCH 1/7] feat: skill picker recently-used section with drill-down
 and fuzzy description search

Add recently-used skills tracking across TUI, CLI, and web interfaces.
Skills are recorded on selection and persisted to disk with 30-day TTL.

- New recent-skills.ts utility with in-memory cache and fire-and-forget persistence
- TUI DialogSkill: 'Recently Used' category at top of skill list
- CLI RunSkillSelectBody: recent skills pinned at top, right arrow drill-down
  to show skill description in-place, left arrow to return
- Web SlashPopover: 'Recently Used' section above full skill list
- Fuzzy search now includes description field across TUI and web

Right arrow dispatch is confirmed safe: useKeyboard global listeners fire
before the <input> element's own keypress handler via emitWithPriority.
---
 packages/app/src/components/prompt-input.tsx  |   2 +-
 .../components/prompt-input/slash-popover.tsx |  52 +++++++-
 packages/core/src/util/recent-skills.ts       | 111 ++++++++++++++++++
 .../src/cli/cmd/run/footer.command.tsx        |  95 ++++++++++++---
 .../opencode/src/cli/cmd/run/footer.view.tsx  |   2 +
 packages/tui/src/component/dialog-skill.tsx   |  21 +++-
 packages/tui/src/ui/dialog-select.tsx         |   4 +-
 7 files changed, 264 insertions(+), 23 deletions(-)
 create mode 100644 packages/core/src/util/recent-skills.ts

diff --git a/packages/app/src/components/prompt-input.tsx b/packages/app/src/components/prompt-input.tsx
index cbec31d522f5..480e87db0bc0 100644
--- a/packages/app/src/components/prompt-input.tsx
+++ b/packages/app/src/components/prompt-input.tsx
@@ -767,7 +767,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
   } = useFilteredList<SlashCommand>({
     items: slashCommands,
     key: (x) => x?.id,
-    filterKeys: ["trigger", "title"],
+    filterKeys: ["trigger", "title", "description"],
     onSelect: handleSlashSelect,
   })
 
diff --git a/packages/app/src/components/prompt-input/slash-popover.tsx b/packages/app/src/components/prompt-input/slash-popover.tsx
index d8c4bd035c75..e2bb99b272e7 100644
--- a/packages/app/src/components/prompt-input/slash-popover.tsx
+++ b/packages/app/src/components/prompt-input/slash-popover.tsx
@@ -1,7 +1,8 @@
-import { Component, For, Match, Show, Switch } from "solid-js"
+import { Component, For, Match, Show, Switch, createMemo } from "solid-js"
 import { FileIcon } from "@opencode-ai/ui/file-icon"
 import { Icon } from "@opencode-ai/ui/icon"
 import { getDirectory, getFilename } from "@opencode-ai/core/util/path"
+import { getTopRecentSkills, recordSkillUsage } from "@opencode-ai/core/util/recent-skills"
 
 export type AtOption =
   | { type: "agent"; name: string; display: string }
@@ -34,6 +35,8 @@ type PromptPopoverProps = {
 }
 
 export const PromptPopover: Component<PromptPopoverProps> = (props) => {
+  const recentNames = createMemo(() => getTopRecentSkills(5))
+
   return (
     <Show when={props.popover}>
       <div
@@ -98,6 +101,48 @@ export const PromptPopover: Component<PromptPopoverProps> = (props) => {
               when={props.slashFlat.length > 0}
               fallback={<div class="text-text-weak px-2 py-1">{props.t("prompt.popover.emptyCommands")}</div>}
             >
+              <Show when={recentNames().length > 0}>
+                <div class="px-2 py-1 text-11-medium text-text-subtle uppercase tracking-wide">Recently Used</div>
+                <For each={recentNames()}>
+                  {(name) => {
+                    const cmd = props.slashFlat.find((c) => c.id === name)
+                    if (!cmd) return null
+                    return (
+                      <button
+                        data-slash-id={cmd.id}
+                        classList={{
+                          "w-full flex items-center justify-between gap-4 rounded-md px-2 py-1": true,
+                          "bg-surface-raised-base-hover": props.slashActive === cmd.id,
+                        }}
+                        onClick={() => {
+                          recordSkillUsage(cmd.id)
+                          props.onSlashSelect(cmd)
+                        }}
+                        onMouseEnter={() => props.setSlashActive(cmd.id)}
+                      >
+                        <div class="flex items-center gap-2 min-w-0">
+                          <span class="text-14-regular text-text-strong whitespace-nowrap">/{cmd.trigger}</span>
+                          <Show when={cmd.description}>
+                            <span class="text-14-regular text-text-weak truncate">{cmd.description}</span>
+                          </Show>
+                        </div>
+                        <div class="flex items-center gap-2 shrink-0">
+                          <Show when={cmd.type === "custom" && cmd.source !== "command"}>
+                            <span class="text-11-regular text-text-subtle px-1.5 py-0.5 bg-surface-base rounded">
+                              {cmd.source === "skill"
+                                ? props.t("prompt.slash.badge.skill")
+                                : cmd.source === "mcp"
+                                  ? props.t("prompt.slash.badge.mcp")
+                                  : props.t("prompt.slash.badge.custom")}
+                            </span>
+                          </Show>
+                        </div>
+                      </button>
+                    )
+                  }}
+                </For>
+                <div class="border-t border-border-base my-1" />
+              </Show>
               <For each={props.slashFlat}>
                 {(cmd) => (
                   <button
@@ -106,7 +151,10 @@ export const PromptPopover: Component<PromptPopoverProps> = (props) => {
                       "w-full flex items-center justify-between gap-4 rounded-md px-2 py-1": true,
                       "bg-surface-raised-base-hover": props.slashActive === cmd.id,
                     }}
-                    onClick={() => props.onSlashSelect(cmd)}
+                    onClick={() => {
+                      if (cmd.source === "skill") recordSkillUsage(cmd.id)
+                      props.onSlashSelect(cmd)
+                    }}
                     onMouseEnter={() => props.setSlashActive(cmd.id)}
                   >
                     <div class="flex items-center gap-2 min-w-0">
diff --git a/packages/core/src/util/recent-skills.ts b/packages/core/src/util/recent-skills.ts
new file mode 100644
index 000000000000..8bf2d94112af
--- /dev/null
+++ b/packages/core/src/util/recent-skills.ts
@@ -0,0 +1,111 @@
+import { readFile, writeFile, mkdir } from "fs/promises"
+import { dirname } from "path"
+import { Global } from "../global"
+
+const STORAGE_FILE = "recent-skills.json"
+const MAX_RECENT = 50
+const TTL_MS = 30 * 24 * 60 * 60 * 1000 // 30 days
+
+interface RecentEntry {
+  /** Skill name (e.g. "commit") */
+  name: string
+  /** ISO timestamp of last use */
+  usedAt: string
+}
+
+function filePath(): string {
+  return `${Global.Path.state}/${STORAGE_FILE}`
+}
+
+// In-memory cache: loaded from disk once, reads from cache, writes are fire-and-forget
+let cache: RecentEntry[] | undefined
+
+async function loadFromDisk(): Promise<RecentEntry[]> {
+  try {
+    const raw = await readFile(filePath(), "utf-8")
+    if (!raw) return []
+    const parsed: unknown = JSON.parse(raw)
+    return Array.isArray(parsed) ? (parsed as RecentEntry[]) : []
+  } catch {
+    return []
+  }
+}
+
+async function saveToDisk(entries: RecentEntry[]): Promise<void> {
+  try {
+    await mkdir(dirname(filePath()), { recursive: true })
+    await writeFile(filePath(), JSON.stringify(entries, null, 2))
+  } catch {
+    // Silently fail
+  }
+}
+
+function initCache(): RecentEntry[] {
+  if (cache === undefined) {
+    // Fire-and-forget: load from disk, update cache
+    loadFromDisk().then((entries) => {
+      cache = entries
+    })
+    // Start with empty cache, will be populated on next tick
+    cache = []
+  }
+  return cache
+}
+
+/**
+ * Return all recent skill entries, filtered by TTL and deduplicated.
+ * Reads from in-memory cache (fast, synchronous).
+ */
+export function getRecentSkills(): Array<{ name: string; usedAt: Date }> {
+  const entries = initCache()
+  const now = Date.now()
+  const seen = new Set<string>()
+  const result: Array<{ name: string; usedAt: Date }> = []
+
+  for (const entry of entries) {
+    const ts = new Date(entry.usedAt).getTime()
+
+    // Skip expired entries
+    if (now - ts > TTL_MS) continue
+
+    // Deduplicate by name, keep most recent
+    if (seen.has(entry.name)) continue
+    seen.add(entry.name)
+
+    result.push({ name: entry.name, usedAt: new Date(entry.usedAt) })
+  }
+
+  return result
+}
+
+/**
+ * Return top N recently used skill names.
+ */
+export function getTopRecentSkills(n: number): string[] {
+  return getRecentSkills()
+    .slice(0, n)
+    .map((e) => e.name)
+}
+
+/**
+ * Record that a skill was used (called after onSelect).
+ * Updates in-memory cache immediately, persists to disk in background.
+ */
+export function recordSkillUsage(name: string): void {
+  const entries = initCache()
+
+  // Remove any existing entry for this skill
+  const filtered = entries.filter((e) => e.name !== name)
+
+  // Prepend new entry
+  const updated: RecentEntry[] = [
+    { name, usedAt: new Date().toISOString() },
+    ...filtered,
+  ].slice(0, MAX_RECENT)
+
+  // Update cache synchronously
+  cache = updated
+
+  // Persist to disk in background
+  saveToDisk(updated)
+}
diff --git a/packages/opencode/src/cli/cmd/run/footer.command.tsx b/packages/opencode/src/cli/cmd/run/footer.command.tsx
index c97af0ce09a5..7bc2de6a366a 100644
--- a/packages/opencode/src/cli/cmd/run/footer.command.tsx
+++ b/packages/opencode/src/cli/cmd/run/footer.command.tsx
@@ -4,6 +4,7 @@ import { useKeyboard, type JSX } from "@opentui/solid"
 import fuzzysort from "fuzzysort"
 import { createEffect, createMemo, createSignal, type Accessor } from "solid-js"
 import { RunFooterMenu, createFooterMenuState, type RunFooterMenuItem } from "./footer.menu"
+import { recordSkillUsage, getTopRecentSkills } from "@opencode-ai/core/util/recent-skills"
 import type { RunFooterTheme } from "./theme"
 import type { FooterQueuedPrompt, FooterSubagentTab, RunCommand, RunInput, RunProvider } from "./types"
 
@@ -131,6 +132,7 @@ function handleKey(input: {
   setQuery: (value: string) => void
   select: () => void
   close: () => void
+  onDrillDown?: () => void
 }) {
   const name = input.event.name.toLowerCase()
   const ctrl = input.event.ctrl && !input.event.meta && !input.event.shift && !input.event.super
@@ -183,6 +185,12 @@ function handleKey(input: {
     return
   }
 
+  if (name === "right" && input.onDrillDown) {
+    input.event.preventDefault()
+    input.onDrillDown()
+    return
+  }
+
   if (ctrl && name === "u") {
     input.event.preventDefault()
     input.setQuery("")
@@ -774,6 +782,7 @@ export function RunSkillSelectBody(props: {
 }) {
   let field: InputRenderable | undefined
   const [query, setQuery] = createSignal("")
+  const [drilledDown, setDrilledDown] = createSignal(false)
   const entries = createMemo<SkillEntry[]>(() =>
     (props.commands() ?? [])
       .filter((item) => item.source === "skill")
@@ -786,7 +795,19 @@ export function RunSkillSelectBody(props: {
       }))
       .sort((a, b) => a.display.localeCompare(b.display)),
   )
-  const items = createMemo<SkillEntry[]>(() => match(query(), entries()))
+  const recentEntries = createMemo<SkillEntry[]>(() => {
+    if (query()) return []
+    return getTopRecentSkills(5).map((recent) => ({
+      category: "",
+      display: recent,
+      description: undefined,
+      keywords: `skill ${recent}`,
+      name: recent,
+    }))
+  })
+  const allEntries = createMemo<SkillEntry[]>(() => [...recentEntries(), ...entries()])
+  const filteredEntries = createMemo<SkillEntry[]>(() => match(query(), allEntries()))
+  const items = filteredEntries
   const menu = createFooterMenuState({ count: () => items().length, limit: PANEL_LIST_ROWS })
   const select = () => {
     const item = items()[menu.selected()]
@@ -794,12 +815,19 @@ export function RunSkillSelectBody(props: {
       return
     }
 
+    recordSkillUsage(item.name)
     props.onSelect(item.name)
   }
 
+  const drilledItem = createMemo(() => {
+    if (!drilledDown()) return undefined
+    return items()[menu.selected()]
+  })
+
   createEffect(() => {
     query()
     menu.reset()
+    setDrilledDown(false)
   })
 
   useKeyboard((event) => {
@@ -807,7 +835,21 @@ export function RunSkillSelectBody(props: {
       return
     }
 
-    handleKey({ event, menu, field: () => field, setQuery, select, close: props.onClose })
+    if (event.name === "left" && drilledDown()) {
+      event.preventDefault()
+      setDrilledDown(false)
+      return
+    }
+
+    handleKey({
+      event,
+      menu,
+      field: () => field,
+      setQuery,
+      select,
+      close: props.onClose,
+      onDrillDown: () => setDrilledDown(true),
+    })
   })
 
   return (
@@ -815,7 +857,7 @@ export function RunSkillSelectBody(props: {
       title="Skills"
       query={query()}
       count={items().length}
-      total={entries().length}
+      total={allEntries().length}
       placeholder="Search"
       theme={props.theme}
       inputRef={(input) => {
@@ -825,20 +867,39 @@ export function RunSkillSelectBody(props: {
       dark
       chrome="minimal"
     >
-      <RunFooterMenu
-        theme={props.theme}
-        items={items}
-        selected={menu.selected}
-        offset={menu.offset}
-        rows={() => PANEL_LIST_ROWS}
-        limit={PANEL_LIST_ROWS}
-        empty={props.commands() ? "No skills found" : "Skills loading"}
-        border={false}
-        paddingLeft={PANEL_PAD}
-        paddingRight={PANEL_PAD}
-        grouped={false}
-        background
-      />
+      {drilledItem() ? (
+        <box
+          flexDirection="column"
+          height={PANEL_LIST_ROWS}
+          paddingLeft={PANEL_PAD}
+          paddingRight={PANEL_PAD}
+        >
+          <text fg={props.theme().highlight} attributes={TextAttributes.BOLD} wrapMode="none">
+            {drilledItem()!.name}
+          </text>
+          <text marginTop={1} fg={props.theme().text} wrapMode="none">
+            {drilledItem()!.description || "No description available"}
+          </text>
+          <text marginTop={1} fg={props.theme().muted} wrapMode="none">
+            Press ← to go back
+          </text>
+        </box>
+      ) : (
+        <RunFooterMenu
+          theme={props.theme}
+          items={items}
+          selected={menu.selected}
+          offset={menu.offset}
+          rows={() => PANEL_LIST_ROWS}
+          limit={PANEL_LIST_ROWS}
+          empty={props.commands() ? "No skills found" : "Skills loading"}
+          border={false}
+          paddingLeft={PANEL_PAD}
+          paddingRight={PANEL_PAD}
+          grouped={false}
+          background
+        />
+      )}
     </PanelShell>
   )
 }
diff --git a/packages/opencode/src/cli/cmd/run/footer.view.tsx b/packages/opencode/src/cli/cmd/run/footer.view.tsx
index ecddc50e49aa..de8528ae97a5 100644
--- a/packages/opencode/src/cli/cmd/run/footer.view.tsx
+++ b/packages/opencode/src/cli/cmd/run/footer.view.tsx
@@ -21,6 +21,7 @@ import {
   RunSubagentSelectBody,
   RunVariantSelectBody,
 } from "./footer.command"
+import { recordSkillUsage } from "@opencode-ai/core/util/recent-skills"
 import { FOOTER_MENU_ROWS, RunFooterMenu } from "./footer.menu"
 import { RunFooterSubagentBody } from "./footer.subagent"
 import { RunPromptBody, createPromptState } from "./footer.prompt"
@@ -739,6 +740,7 @@ export function RunFooterView(props: RunFooterViewProps) {
                             commands={props.commands}
                             onClose={closePanel}
                             onSelect={(name) => {
+                              recordSkillUsage(name)
                               composer.replacePrompt({
                                 text: `/${name} `,
                                 parts: [],
diff --git a/packages/tui/src/component/dialog-skill.tsx b/packages/tui/src/component/dialog-skill.tsx
index fa675f7a74dc..d052517757cb 100644
--- a/packages/tui/src/component/dialog-skill.tsx
+++ b/packages/tui/src/component/dialog-skill.tsx
@@ -2,6 +2,7 @@ import { DialogSelect, type DialogSelectOption } from "../ui/dialog-select"
 import { createResource, createMemo } from "solid-js"
 import { useDialog } from "../ui/dialog"
 import { useSDK } from "../context/sdk"
+import { getTopRecentSkills, recordSkillUsage } from "@opencode-ai/core/util/recent-skills"
 
 export type DialogSkillProps = {
   onSelect: (skill: string) => void
@@ -17,19 +18,37 @@ export function DialogSkill(props: DialogSkillProps) {
     return result.data ?? []
   })
 
+  const recentNames = createMemo(() => getTopRecentSkills(5))
+
   const options = createMemo<DialogSelectOption<string>[]>(() => {
     const list = skills() ?? []
     const maxWidth = Math.max(0, ...list.map((s) => s.name.length))
-    return list.map((skill) => ({
+
+    const recentOpts: DialogSelectOption<string>[] = recentNames().map((name) => ({
+      title: name.padEnd(maxWidth),
+      description: undefined,
+      value: name,
+      category: "Recently Used",
+      onSelect: () => {
+        recordSkillUsage(name)
+        props.onSelect(name)
+        dialog.clear()
+      },
+    }))
+
+    const allOpts: DialogSelectOption<string>[] = list.map((skill) => ({
       title: skill.name.padEnd(maxWidth),
       description: skill.description?.replace(/\s+/g, " ").trim(),
       value: skill.name,
       category: "Skills",
       onSelect: () => {
+        recordSkillUsage(skill.name)
         props.onSelect(skill.name)
         dialog.clear()
       },
     }))
+
+    return [...recentOpts, ...allOpts]
   })
 
   return <DialogSelect title="Skills" placeholder="Search skills..." options={options()} />
diff --git a/packages/tui/src/ui/dialog-select.tsx b/packages/tui/src/ui/dialog-select.tsx
index 1c20fa300838..b2d41b33f4ce 100644
--- a/packages/tui/src/ui/dialog-select.tsx
+++ b/packages/tui/src/ui/dialog-select.tsx
@@ -158,8 +158,8 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
     // users typically search by the item name, and not its category.
     const result = fuzzysort
       .go(needle, options, {
-        keys: ["title", "category"],
-        scoreFn: (r) => r[0].score * 2 + r[1].score,
+        keys: ["title", "category", "description"],
+        scoreFn: (r) => r[0].score * 2 + r[1].score + r[2].score * 0.5,
       })
       .map((x) => x.obj)
 

From eacd9379ac5a346e1dd28f5aad7b9df8e97fa70d Mon Sep 17 00:00:00 2001
From: btema2 <Btema2>
Date: Mon, 15 Jun 2026 11:24:11 +0200
Subject: [PATCH 2/7] refactor(skills): remove drill-down panel from slash
 skills menu

Reverts the detail view / drill-down panel that was added alongside the
recently-used and fuzzy-description-search features. Keyboard shortcuts
(arrow keys, tab, ctrl+e, ctrl+o) all failed to fire reliably due to
opentui's global event propagation consuming keys before panel-level
handlers ran; stale container images compounded debugging.

Keeps working features: recently-used skills section and fuzzy search on
skill descriptions.

Adds drill-down-menu-try1.md documenting the failed approaches so future
attempts don't repeat the same dead ends.
---
 drill-down-menu-try1.md                       | 91 +++++++++++++++++
 .../src/cli/cmd/run/footer.command.tsx        | 99 ++++++-------------
 2 files changed, 121 insertions(+), 69 deletions(-)
 create mode 100644 drill-down-menu-try1.md

diff --git a/drill-down-menu-try1.md b/drill-down-menu-try1.md
new file mode 100644
index 000000000000..949892d2524a
--- /dev/null
+++ b/drill-down-menu-try1.md
@@ -0,0 +1,91 @@
+# Drill-Down Menu — Attempt 1 Post-Mortem
+
+## What Was Tried
+
+A "drill-down" detail view for the slash skills menu in the opencode CLI TUI (`packages/opencode/src/cli/cmd/run/footer.command.tsx`).
+
+When the user navigated to a skill row and pressed a key, the list would be replaced by a detail panel showing the skill's name, description, and template content. Pressing another key would return to the list.
+
+---
+
+## Implementation Approach
+
+### State
+
+```ts
+const [drilledDown, setDrilledDown] = createSignal(false)
+
+const drilledItem = createMemo(() => {
+  if (!drilledDown()) return undefined
+  return items()[menu.selected()]
+})
+```
+
+### Render
+
+Used a `<Show when={drilledItem()}>` to swap the `<RunFooterMenu>` list for a detail `<box>`:
+
+```tsx
+<Show when={drilledItem()} fallback={<RunFooterMenu ... onItemDrill={...} />}>
+  {(item) => (
+    <box ...>
+      <text>{item().name}</text>
+      <text>{item().description || "No content available"}</text>
+      <text>ctrl+o / esc back</text>
+    </box>
+  )}
+</Show>
+```
+
+### Trigger Keys Tried (three iterations, all failed)
+
+| Iteration | Key | Problem |
+|-----------|-----|---------|
+| 1 | Right arrow (`→`) | Arrow keys handled by `handleKey` for menu navigation; event swallowed before reaching drill-down branch |
+| 2 | Tab | Tab already used for panel switching in the outer footer; event never reached `RunSkillSelectBody` handler |
+| 3 | Ctrl+E | Ctrl+E bound elsewhere in the opencode TUI; intercepted upstream |
+| 4 | Ctrl+O via `useBindings` | `useBindings` hook fired, but state update didn't cause re-render; suspected stale container / hot-reload mismatch |
+
+### Mouse Button (`>`)
+
+Added an `onItemDrill` prop to `RunFooterMenu` that rendered a `" > "` text element per row with `onMouseDown`. Mouse events in the opentui terminal renderer are unreliable: `onMouseDown` on a `<text>` node does not consistently fire in container environments. This approach also didn't work.
+
+---
+
+## Root Cause Analysis
+
+### Why keyboard shortcuts failed
+
+The opencode CLI TUI uses a layered keyboard event system:
+
+1. `@opentui/core` emits raw key events via `InternalKeyHandler`.
+2. The `useKeyboard` hook in `@opentui/solid` registers a listener on the renderer's `keyInput` event.
+3. Events propagate globally — **every `useKeyboard` handler in the entire component tree fires for every keypress** unless `event.preventDefault()` is called first.
+4. `handleKey` (shared across all panels) calls `event.preventDefault()` on arrow keys, escape, and ctrl+c before any panel-specific code can run.
+5. Keybindings registered via `useBindings` (from `@opencode-ai/tui/keymap`) are handled by a centralized keymap layer that also runs before panel-level `useKeyboard` handlers.
+
+**Result:** Any key that had *any* global handler would be consumed before the drill-down handler ran. Keys without a global handler (e.g. a novel ctrl+combo) might work, but were never confirmed working due to a second problem:
+
+### Why state change didn't produce a re-render
+
+The drill-down was developed and tested inside a Docker/Podman container. The container image was not rebuilt between code changes. Stale compiled output meant that even when the logic was correct, the running binary didn't reflect the change. This made it impossible to distinguish "key not received" from "state change not triggering re-render."
+
+---
+
+## What Was Not Tried
+
+- Using a dedicated second pane / split-panel layout instead of swapping the list in-place.
+- A modal overlay (separate z-layer) rendered outside `PanelShell`.
+- Triggering drill-down from the `footer.view.tsx` level, where the panel lifecycle is controlled, instead of inside `RunSkillSelectBody`.
+- A dedicated unique key (e.g. `?` or `i`) that has **no** handler anywhere else in the TUI, verified by grepping the entire codebase first.
+- Confirming the container was rebuilt and running fresh code before testing any key combination.
+
+---
+
+## Lessons for Future Attempts
+
+1. **Rebuild the container before testing any keyboard change.** Stale images cause false negatives that waste hours.
+2. **Grep all existing key handlers before choosing a shortcut.** Check `footer.command.tsx`, `footer.view.tsx`, `footer.prompt.tsx`, `packages/tui/src/keymap.tsx`, and `packages/tui/src/config/keybind.ts`.
+3. **Do not swap content inside `PanelShell`.** The input element inside `PanelShell` captures focus and key events; replacing its sibling content while keeping the input alive is fragile.
+4. **Verify keyboard plumbing with a console log first.** Before wiring real UI, add a `console.error("DRILL KEY HIT")` to confirm the handler actually fires in the running process.
+5. **Consider a different UX pattern.** The description is short — showing it inline as a second line in the list row (already partially done via `description` field on `SkillEntry`) may be simpler and more reliable than a full drill-down panel swap.
diff --git a/packages/opencode/src/cli/cmd/run/footer.command.tsx b/packages/opencode/src/cli/cmd/run/footer.command.tsx
index 7bc2de6a366a..fb366eadadd0 100644
--- a/packages/opencode/src/cli/cmd/run/footer.command.tsx
+++ b/packages/opencode/src/cli/cmd/run/footer.command.tsx
@@ -38,6 +38,7 @@ type VariantEntry = PanelEntry & {
 
 type SkillEntry = PanelEntry & {
   name: string
+  template?: string
 }
 
 type SubagentEntry = PanelEntry & {
@@ -132,7 +133,6 @@ function handleKey(input: {
   setQuery: (value: string) => void
   select: () => void
   close: () => void
-  onDrillDown?: () => void
 }) {
   const name = input.event.name.toLowerCase()
   const ctrl = input.event.ctrl && !input.event.meta && !input.event.shift && !input.event.super
@@ -185,12 +185,6 @@ function handleKey(input: {
     return
   }
 
-  if (name === "right" && input.onDrillDown) {
-    input.event.preventDefault()
-    input.onDrillDown()
-    return
-  }
-
   if (ctrl && name === "u") {
     input.event.preventDefault()
     input.setQuery("")
@@ -219,6 +213,7 @@ function PanelShell(props: {
   theme: Accessor<RunFooterTheme>
   inputRef: (input: InputRenderable) => void
   onQuery: (query: string) => void
+  onKeyDown?: (event: KeyEvent) => void
   children: JSX.Element
   dark?: boolean
   chrome?: "default" | "minimal"
@@ -268,6 +263,7 @@ function PanelShell(props: {
           placeholderColor={props.theme().muted}
           cursorColor={props.theme().highlight}
           onInput={props.onQuery}
+          onKeyDown={props.onKeyDown}
           ref={(input) => {
             props.inputRef(input)
             input.traits = { status: "FILTER" }
@@ -782,7 +778,6 @@ export function RunSkillSelectBody(props: {
 }) {
   let field: InputRenderable | undefined
   const [query, setQuery] = createSignal("")
-  const [drilledDown, setDrilledDown] = createSignal(false)
   const entries = createMemo<SkillEntry[]>(() =>
     (props.commands() ?? [])
       .filter((item) => item.source === "skill")
@@ -792,18 +787,23 @@ export function RunSkillSelectBody(props: {
         description: item.description?.replace(/\s+/g, " ").trim() || undefined,
         keywords: `skill ${item.name} ${item.description ?? ""}`,
         name: item.name,
+        template: item.template,
       }))
       .sort((a, b) => a.display.localeCompare(b.display)),
   )
   const recentEntries = createMemo<SkillEntry[]>(() => {
     if (query()) return []
-    return getTopRecentSkills(5).map((recent) => ({
-      category: "",
-      display: recent,
-      description: undefined,
-      keywords: `skill ${recent}`,
-      name: recent,
-    }))
+    return getTopRecentSkills(5).map((recent) => {
+      const full = entries().find((e) => e.name === recent)
+      return {
+        category: "",
+        display: recent,
+        description: full?.description,
+        keywords: `skill ${recent}`,
+        name: recent,
+        template: full?.template,
+      }
+    })
   })
   const allEntries = createMemo<SkillEntry[]>(() => [...recentEntries(), ...entries()])
   const filteredEntries = createMemo<SkillEntry[]>(() => match(query(), allEntries()))
@@ -819,15 +819,9 @@ export function RunSkillSelectBody(props: {
     props.onSelect(item.name)
   }
 
-  const drilledItem = createMemo(() => {
-    if (!drilledDown()) return undefined
-    return items()[menu.selected()]
-  })
-
   createEffect(() => {
     query()
     menu.reset()
-    setDrilledDown(false)
   })
 
   useKeyboard((event) => {
@@ -835,21 +829,7 @@ export function RunSkillSelectBody(props: {
       return
     }
 
-    if (event.name === "left" && drilledDown()) {
-      event.preventDefault()
-      setDrilledDown(false)
-      return
-    }
-
-    handleKey({
-      event,
-      menu,
-      field: () => field,
-      setQuery,
-      select,
-      close: props.onClose,
-      onDrillDown: () => setDrilledDown(true),
-    })
+    handleKey({ event, menu, field: () => field, setQuery, select, close: props.onClose })
   })
 
   return (
@@ -867,39 +847,20 @@ export function RunSkillSelectBody(props: {
       dark
       chrome="minimal"
     >
-      {drilledItem() ? (
-        <box
-          flexDirection="column"
-          height={PANEL_LIST_ROWS}
-          paddingLeft={PANEL_PAD}
-          paddingRight={PANEL_PAD}
-        >
-          <text fg={props.theme().highlight} attributes={TextAttributes.BOLD} wrapMode="none">
-            {drilledItem()!.name}
-          </text>
-          <text marginTop={1} fg={props.theme().text} wrapMode="none">
-            {drilledItem()!.description || "No description available"}
-          </text>
-          <text marginTop={1} fg={props.theme().muted} wrapMode="none">
-            Press ← to go back
-          </text>
-        </box>
-      ) : (
-        <RunFooterMenu
-          theme={props.theme}
-          items={items}
-          selected={menu.selected}
-          offset={menu.offset}
-          rows={() => PANEL_LIST_ROWS}
-          limit={PANEL_LIST_ROWS}
-          empty={props.commands() ? "No skills found" : "Skills loading"}
-          border={false}
-          paddingLeft={PANEL_PAD}
-          paddingRight={PANEL_PAD}
-          grouped={false}
-          background
-        />
-      )}
+      <RunFooterMenu
+        theme={props.theme}
+        items={items}
+        selected={menu.selected}
+        offset={menu.offset}
+        rows={() => PANEL_LIST_ROWS}
+        limit={PANEL_LIST_ROWS}
+        empty={props.commands() ? "No skills found" : "Skills loading"}
+        border={false}
+        paddingLeft={PANEL_PAD}
+        paddingRight={PANEL_PAD}
+        grouped={false}
+        background
+      />
     </PanelShell>
   )
 }

From 2c077f58569d19a7366e7709eb1c7642909c0422 Mon Sep 17 00:00:00 2001
From: btema2 <Btema2>
Date: Mon, 15 Jun 2026 15:25:13 +0200
Subject: [PATCH 3/7] feat(tui): skill dialog detail view with Enter-to-insert
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add DialogSkillDetail with compact header, scrollable template, Enter binding
- DialogSkillDetail pushed via dialog.push() with arrow function wrapper
- DialogSelect gains trailing/onTrailingClick on Option for › chevron
- DialogSelect exposes selectedIndex/onIndexChange props
- DialogProvider adds push()/pop() API with local clearAll/popDialog helpers
- Arrow function wrapper on dialog.push() fixes SolidJS reactivity loss
- Escape/ctrl+c delegate to popDialog() for consistent back navigation
---
 .../tui/src/component/dialog-skill-detail.tsx | 66 +++++++++++++++++++
 packages/tui/src/component/dialog-skill.tsx   | 49 +++++++++++++-
 packages/tui/src/ui/dialog-select.tsx         | 29 +++++++-
 packages/tui/src/ui/dialog.tsx                | 57 +++++++++++-----
 4 files changed, 182 insertions(+), 19 deletions(-)
 create mode 100644 packages/tui/src/component/dialog-skill-detail.tsx

diff --git a/packages/tui/src/component/dialog-skill-detail.tsx b/packages/tui/src/component/dialog-skill-detail.tsx
new file mode 100644
index 000000000000..dbbfebaa6816
--- /dev/null
+++ b/packages/tui/src/component/dialog-skill-detail.tsx
@@ -0,0 +1,66 @@
+import { TextAttributes } from "@opentui/core"
+import { useTheme } from "../context/theme"
+import { useDialog } from "../ui/dialog"
+import { useKeyboard } from "@opentui/solid"
+import { createMemo, Show } from "solid-js"
+
+export type DialogSkillDetailProps = {
+  name: string
+  description?: string
+  template?: string
+  onSelect: (skill: string) => void
+}
+
+export function DialogSkillDetail(props: DialogSkillDetailProps) {
+  const dialog = useDialog()
+  const { theme } = useTheme()
+
+  const hasTemplate = createMemo(() => !!props.template)
+
+  useKeyboard((evt) => {
+    if (evt.name === "return") {
+      evt.preventDefault()
+      evt.stopPropagation()
+      props.onSelect(props.name)
+      dialog.clear()
+    }
+  })
+
+  return (
+    <box flexDirection="column" flexGrow={1}>
+      <box flexDirection="column" paddingLeft={4} paddingRight={4} paddingBottom={1}>
+        <box flexDirection="row" justifyContent="space-between">
+          <text fg={theme.text} attributes={TextAttributes.BOLD}>
+            {props.name}
+          </text>
+          <text fg={theme.textMuted}>enter: use · esc: back</text>
+        </box>
+        <Show when={props.description}>
+          <box paddingTop={1}>
+            <text fg={theme.textMuted} wrapMode="word">
+              {props.description}
+            </text>
+          </box>
+        </Show>
+      </box>
+      <Show when={hasTemplate()}>
+        <box flexGrow={1} flexShrink={1} maxHeight={20}>
+          <scrollbox
+            paddingLeft={4}
+            paddingRight={4}
+            scrollbarOptions={{ visible: true }}
+          >
+            <text fg={theme.text} wrapMode="word">
+              {props.template}
+            </text>
+          </scrollbox>
+        </box>
+      </Show>
+      <Show when={!hasTemplate()}>
+        <box paddingLeft={4} paddingRight={4} paddingTop={1}>
+          <text fg={theme.textMuted}>No template available</text>
+        </box>
+      </Show>
+    </box>
+  )
+}
diff --git a/packages/tui/src/component/dialog-skill.tsx b/packages/tui/src/component/dialog-skill.tsx
index d052517757cb..2d6ea40a7cf6 100644
--- a/packages/tui/src/component/dialog-skill.tsx
+++ b/packages/tui/src/component/dialog-skill.tsx
@@ -1,7 +1,9 @@
 import { DialogSelect, type DialogSelectOption } from "../ui/dialog-select"
-import { createResource, createMemo } from "solid-js"
+import { DialogSkillDetail } from "./dialog-skill-detail"
+import { createResource, createMemo, createSignal } from "solid-js"
 import { useDialog } from "../ui/dialog"
 import { useSDK } from "../context/sdk"
+import { useKeyboard } from "@opentui/solid"
 import { getTopRecentSkills, recordSkillUsage } from "@opencode-ai/core/util/recent-skills"
 
 export type DialogSkillProps = {
@@ -13,6 +15,8 @@ export function DialogSkill(props: DialogSkillProps) {
   const sdk = useSDK()
   dialog.setSize("large")
 
+  const [selectedIndex, setSelectedIndex] = createSignal(0)
+
   const [skills] = createResource(async () => {
     const result = await sdk.client.app.skills()
     return result.data ?? []
@@ -20,6 +24,19 @@ export function DialogSkill(props: DialogSkillProps) {
 
   const recentNames = createMemo(() => getTopRecentSkills(5))
 
+  function pushDetail(skillName: string) {
+    const skill = allSkills().find((s) => s.name === skillName)
+    if (!skill) return
+    dialog.push(() => (
+      <DialogSkillDetail
+        name={skill.name}
+        description={skill.description}
+        template={skill.content}
+        onSelect={props.onSelect}
+      />
+    ))
+  }
+
   const options = createMemo<DialogSelectOption<string>[]>(() => {
     const list = skills() ?? []
     const maxWidth = Math.max(0, ...list.map((s) => s.name.length))
@@ -28,6 +45,8 @@ export function DialogSkill(props: DialogSkillProps) {
       title: name.padEnd(maxWidth),
       description: undefined,
       value: name,
+      trailing: " ›",
+      onTrailingClick: () => pushDetail(name),
       category: "Recently Used",
       onSelect: () => {
         recordSkillUsage(name)
@@ -40,6 +59,8 @@ export function DialogSkill(props: DialogSkillProps) {
       title: skill.name.padEnd(maxWidth),
       description: skill.description?.replace(/\s+/g, " ").trim(),
       value: skill.name,
+      trailing: " ›",
+      onTrailingClick: () => pushDetail(skill.name),
       category: "Skills",
       onSelect: () => {
         recordSkillUsage(skill.name)
@@ -51,5 +72,29 @@ export function DialogSkill(props: DialogSkillProps) {
     return [...recentOpts, ...allOpts]
   })
 
-  return <DialogSelect title="Skills" placeholder="Search skills..." options={options()} />
+  const allSkills = createMemo(() => {
+    const list = skills() ?? []
+    return list
+  })
+
+  useKeyboard((evt) => {
+    if (evt.ctrl && evt.name === "o") {
+      evt.preventDefault()
+      evt.stopPropagation()
+      const idx = selectedIndex()
+      const opts = options()
+      if (idx < 0 || idx >= opts.length) return
+      pushDetail(opts[idx].value)
+    }
+  })
+
+  return (
+    <DialogSelect
+      title="Skills"
+      placeholder="Search skills..."
+      options={options()}
+      selectedIndex={selectedIndex()}
+      onIndexChange={(index) => setSelectedIndex(index)}
+    />
+  )
 }
diff --git a/packages/tui/src/ui/dialog-select.tsx b/packages/tui/src/ui/dialog-select.tsx
index b2d41b33f4ce..3ab34897ff3d 100644
--- a/packages/tui/src/ui/dialog-select.tsx
+++ b/packages/tui/src/ui/dialog-select.tsx
@@ -49,6 +49,8 @@ export interface DialogSelectProps<T> {
   }[]
   bindings?: readonly Binding<Renderable, KeyEvent>[]
   current?: T
+  selectedIndex?: number
+  onIndexChange?: (index: number, option: DialogSelectOption<T>) => void
 }
 
 export interface DialogSelectOption<T = any> {
@@ -58,6 +60,8 @@ export interface DialogSelectOption<T = any> {
   description?: string
   details?: string[]
   footer?: JSX.Element | string
+  trailing?: string
+  onTrailingClick?: () => void
   titleWidth?: number
   truncateTitle?: boolean | "left"
   category?: string
@@ -236,7 +240,10 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
     setFocusedAction(undefined)
     setStore("selected", next)
     const option = selected()
-    if (option) props.onMove?.(option)
+    if (option) {
+      props.onMove?.(option)
+      props.onIndexChange?.(next, option)
+    }
     if (!scroll) return
     let remaining = store.selected
     let index = 0
@@ -611,6 +618,8 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
                               title={option.title}
                               titleView={option.titleView}
                               footer={flatten() ? (option.category ?? option.footer) : option.footer}
+                              trailing={option.trailing}
+                              onTrailingClick={option.onTrailingClick}
                               titleWidth={option.titleWidth}
                               truncateTitle={option.truncateTitle}
                               description={option.description !== category ? option.description : undefined}
@@ -662,6 +671,8 @@ function Option(props: {
   current?: boolean
   muted?: boolean
   footer?: JSX.Element | string
+  trailing?: string
+  onTrailingClick?: () => void
   titleWidth?: number
   truncateTitle?: boolean | "left"
   gutter?: () => JSX.Element
@@ -711,6 +722,22 @@ function Option(props: {
           <text fg={props.active && !props.muted ? fg : theme.textMuted}>{props.footer}</text>
         </box>
       </Show>
+      <Show when={props.trailing}>
+        <box flexShrink={0}>
+          <text
+            fg={props.active && !props.muted ? fg : theme.textMuted}
+            onMouseUp={(e: { preventDefault(): void; stopPropagation(): void }) => {
+              if (props.onTrailingClick) {
+                e.preventDefault()
+                e.stopPropagation()
+                props.onTrailingClick()
+              }
+            }}
+          >
+            {props.trailing}
+          </text>
+        </box>
+      </Show>
     </>
   )
 }
diff --git a/packages/tui/src/ui/dialog.tsx b/packages/tui/src/ui/dialog.tsx
index b6cd705b1e84..95695cff2dcf 100644
--- a/packages/tui/src/ui/dialog.tsx
+++ b/packages/tui/src/ui/dialog.tsx
@@ -99,6 +99,28 @@ function init() {
     }, 1)
   }
 
+  function clearAll() {
+    for (const item of store.stack) {
+      if (item.onClose) item.onClose()
+    }
+    batch(() => {
+      setStore("size", "medium")
+      setStore("stack", [])
+    })
+    refocus()
+  }
+
+  function popDialog() {
+    if (store.stack.length <= 1) {
+      clearAll()
+      return
+    }
+    const top = store.stack[store.stack.length - 1]
+    if (top?.onClose) top.onClose()
+    setStore("stack", (prev) => prev.slice(0, -1))
+    refocus()
+  }
+
   useBindings(() => ({
     enabled: store.stack.length > 0 && !renderer.getSelection()?.getSelectedText(),
     bindings: [
@@ -110,10 +132,7 @@ function init() {
           if (renderer.getSelection()) {
             renderer.clearSelection()
           }
-          const current = store.stack.at(-1)
-          current?.onClose?.()
-          setStore("stack", store.stack.slice(0, -1))
-          refocus()
+          popDialog()
         },
       },
       {
@@ -124,10 +143,7 @@ function init() {
           if (renderer.getSelection()) {
             renderer.clearSelection()
           }
-          const current = store.stack.at(-1)
-          current?.onClose?.()
-          setStore("stack", store.stack.slice(0, -1))
-          refocus()
+          popDialog()
         },
       },
     ],
@@ -135,14 +151,7 @@ function init() {
 
   return {
     clear() {
-      for (const item of store.stack) {
-        if (item.onClose) item.onClose()
-      }
-      batch(() => {
-        setStore("size", "medium")
-        setStore("stack", [])
-      })
-      refocus()
+      clearAll()
     },
     replace(input: any, onClose?: () => void) {
       if (store.stack.length === 0) {
@@ -160,6 +169,22 @@ function init() {
         },
       ])
     },
+    push(input: any, onClose?: () => void) {
+      if (store.stack.length === 0) {
+        focus = renderer.currentFocusedRenderable
+        focus?.blur()
+      }
+      setStore("stack", (prev) => [
+        ...prev,
+        {
+          element: input,
+          onClose,
+        },
+      ])
+    },
+    pop() {
+      popDialog()
+    },
     get stack() {
       return store.stack
     },

From f80c29b4fa5510ca4d7108c68a909a3cdeb32b45 Mon Sep 17 00:00:00 2001
From: btema2 <Btema2>
Date: Mon, 15 Jun 2026 15:30:59 +0200
Subject: [PATCH 4/7] fix(tui): hide scrollbar in skill detail, add ctrl+o hint
 to skills list

---
 packages/tui/src/component/dialog-skill-detail.tsx | 2 +-
 packages/tui/src/component/dialog-skill.tsx        | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/tui/src/component/dialog-skill-detail.tsx b/packages/tui/src/component/dialog-skill-detail.tsx
index dbbfebaa6816..babe483dceed 100644
--- a/packages/tui/src/component/dialog-skill-detail.tsx
+++ b/packages/tui/src/component/dialog-skill-detail.tsx
@@ -48,7 +48,7 @@ export function DialogSkillDetail(props: DialogSkillDetailProps) {
           <scrollbox
             paddingLeft={4}
             paddingRight={4}
-            scrollbarOptions={{ visible: true }}
+            scrollbarOptions={{ visible: false }}
           >
             <text fg={theme.text} wrapMode="word">
               {props.template}
diff --git a/packages/tui/src/component/dialog-skill.tsx b/packages/tui/src/component/dialog-skill.tsx
index 2d6ea40a7cf6..3ff89c510948 100644
--- a/packages/tui/src/component/dialog-skill.tsx
+++ b/packages/tui/src/component/dialog-skill.tsx
@@ -95,6 +95,9 @@ export function DialogSkill(props: DialogSkillProps) {
       options={options()}
       selectedIndex={selectedIndex()}
       onIndexChange={(index) => setSelectedIndex(index)}
+      footerHints={[
+        { title: "ctrl+o", label: "ctrl+o: expand", side: "right" },
+      ]}
     />
   )
 }

From 578be3ebb666d72786f85d196ad8f3ec6498e3ad Mon Sep 17 00:00:00 2001
From: btema2 <Btema2>
Date: Mon, 15 Jun 2026 15:39:19 +0200
Subject: [PATCH 5/7] fix(tui): show only vertical scrollbar, fix ctrl+o hint
 duplication

---
 packages/tui/src/component/dialog-skill-detail.tsx | 2 +-
 packages/tui/src/component/dialog-skill.tsx        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/tui/src/component/dialog-skill-detail.tsx b/packages/tui/src/component/dialog-skill-detail.tsx
index babe483dceed..e8b765ce8a06 100644
--- a/packages/tui/src/component/dialog-skill-detail.tsx
+++ b/packages/tui/src/component/dialog-skill-detail.tsx
@@ -48,7 +48,7 @@ export function DialogSkillDetail(props: DialogSkillDetailProps) {
           <scrollbox
             paddingLeft={4}
             paddingRight={4}
-            scrollbarOptions={{ visible: false }}
+            horizontalScrollbarOptions={{ visible: false }}
           >
             <text fg={theme.text} wrapMode="word">
               {props.template}
diff --git a/packages/tui/src/component/dialog-skill.tsx b/packages/tui/src/component/dialog-skill.tsx
index 3ff89c510948..29428c00ede5 100644
--- a/packages/tui/src/component/dialog-skill.tsx
+++ b/packages/tui/src/component/dialog-skill.tsx
@@ -96,7 +96,7 @@ export function DialogSkill(props: DialogSkillProps) {
       selectedIndex={selectedIndex()}
       onIndexChange={(index) => setSelectedIndex(index)}
       footerHints={[
-        { title: "ctrl+o", label: "ctrl+o: expand", side: "right" },
+        { title: "ctrl+o", label: "expand", side: "right" },
       ]}
     />
   )

From 1e0bbe7965c439f1ccbac3a2ec01ed3e27bd9866 Mon Sep 17 00:00:00 2001
From: btema2 <Btema2>
Date: Mon, 15 Jun 2026 16:11:29 +0200
Subject: [PATCH 6/7] chore: remove agent memory file

---
 drill-down-menu-try1.md | 91 -----------------------------------------
 1 file changed, 91 deletions(-)
 delete mode 100644 drill-down-menu-try1.md

diff --git a/drill-down-menu-try1.md b/drill-down-menu-try1.md
deleted file mode 100644
index 949892d2524a..000000000000
--- a/drill-down-menu-try1.md
+++ /dev/null
@@ -1,91 +0,0 @@
-# Drill-Down Menu — Attempt 1 Post-Mortem
-
-## What Was Tried
-
-A "drill-down" detail view for the slash skills menu in the opencode CLI TUI (`packages/opencode/src/cli/cmd/run/footer.command.tsx`).
-
-When the user navigated to a skill row and pressed a key, the list would be replaced by a detail panel showing the skill's name, description, and template content. Pressing another key would return to the list.
-
----
-
-## Implementation Approach
-
-### State
-
-```ts
-const [drilledDown, setDrilledDown] = createSignal(false)
-
-const drilledItem = createMemo(() => {
-  if (!drilledDown()) return undefined
-  return items()[menu.selected()]
-})
-```
-
-### Render
-
-Used a `<Show when={drilledItem()}>` to swap the `<RunFooterMenu>` list for a detail `<box>`:
-
-```tsx
-<Show when={drilledItem()} fallback={<RunFooterMenu ... onItemDrill={...} />}>
-  {(item) => (
-    <box ...>
-      <text>{item().name}</text>
-      <text>{item().description || "No content available"}</text>
-      <text>ctrl+o / esc back</text>
-    </box>
-  )}
-</Show>
-```
-
-### Trigger Keys Tried (three iterations, all failed)
-
-| Iteration | Key | Problem |
-|-----------|-----|---------|
-| 1 | Right arrow (`→`) | Arrow keys handled by `handleKey` for menu navigation; event swallowed before reaching drill-down branch |
-| 2 | Tab | Tab already used for panel switching in the outer footer; event never reached `RunSkillSelectBody` handler |
-| 3 | Ctrl+E | Ctrl+E bound elsewhere in the opencode TUI; intercepted upstream |
-| 4 | Ctrl+O via `useBindings` | `useBindings` hook fired, but state update didn't cause re-render; suspected stale container / hot-reload mismatch |
-
-### Mouse Button (`>`)
-
-Added an `onItemDrill` prop to `RunFooterMenu` that rendered a `" > "` text element per row with `onMouseDown`. Mouse events in the opentui terminal renderer are unreliable: `onMouseDown` on a `<text>` node does not consistently fire in container environments. This approach also didn't work.
-
----
-
-## Root Cause Analysis
-
-### Why keyboard shortcuts failed
-
-The opencode CLI TUI uses a layered keyboard event system:
-
-1. `@opentui/core` emits raw key events via `InternalKeyHandler`.
-2. The `useKeyboard` hook in `@opentui/solid` registers a listener on the renderer's `keyInput` event.
-3. Events propagate globally — **every `useKeyboard` handler in the entire component tree fires for every keypress** unless `event.preventDefault()` is called first.
-4. `handleKey` (shared across all panels) calls `event.preventDefault()` on arrow keys, escape, and ctrl+c before any panel-specific code can run.
-5. Keybindings registered via `useBindings` (from `@opencode-ai/tui/keymap`) are handled by a centralized keymap layer that also runs before panel-level `useKeyboard` handlers.
-
-**Result:** Any key that had *any* global handler would be consumed before the drill-down handler ran. Keys without a global handler (e.g. a novel ctrl+combo) might work, but were never confirmed working due to a second problem:
-
-### Why state change didn't produce a re-render
-
-The drill-down was developed and tested inside a Docker/Podman container. The container image was not rebuilt between code changes. Stale compiled output meant that even when the logic was correct, the running binary didn't reflect the change. This made it impossible to distinguish "key not received" from "state change not triggering re-render."
-
----
-
-## What Was Not Tried
-
-- Using a dedicated second pane / split-panel layout instead of swapping the list in-place.
-- A modal overlay (separate z-layer) rendered outside `PanelShell`.
-- Triggering drill-down from the `footer.view.tsx` level, where the panel lifecycle is controlled, instead of inside `RunSkillSelectBody`.
-- A dedicated unique key (e.g. `?` or `i`) that has **no** handler anywhere else in the TUI, verified by grepping the entire codebase first.
-- Confirming the container was rebuilt and running fresh code before testing any key combination.
-
----
-
-## Lessons for Future Attempts
-
-1. **Rebuild the container before testing any keyboard change.** Stale images cause false negatives that waste hours.
-2. **Grep all existing key handlers before choosing a shortcut.** Check `footer.command.tsx`, `footer.view.tsx`, `footer.prompt.tsx`, `packages/tui/src/keymap.tsx`, and `packages/tui/src/config/keybind.ts`.
-3. **Do not swap content inside `PanelShell`.** The input element inside `PanelShell` captures focus and key events; replacing its sibling content while keeping the input alive is fragile.
-4. **Verify keyboard plumbing with a console log first.** Before wiring real UI, add a `console.error("DRILL KEY HIT")` to confirm the handler actually fires in the running process.
-5. **Consider a different UX pattern.** The description is short — showing it inline as a second line in the list row (already partially done via `description` field on `SkillEntry`) may be simpler and more reliable than a full drill-down panel swap.

From d294aa137c753854b11a76d552bf904fc3d161f1 Mon Sep 17 00:00:00 2001
From: btema2 <Btema2>
Date: Mon, 15 Jun 2026 17:12:00 +0200
Subject: [PATCH 7/7] refactor(tui): apply project style rules to skill picker

- Use Bun.file().text() and Bun.write() over fs/promises readFile/writeFile
- Replace try/catch with .catch() chains
- Replace module-level let with const object wrapper
- Remove redundant createMemo in dialog-skill and dialog-skill-detail
- Fix double recordSkillUsage call (footer.view called it, RunSkillSelectBody already does)
---
 packages/core/src/util/recent-skills.ts       | 104 +++++-------------
 .../opencode/src/cli/cmd/run/footer.view.tsx  |   2 -
 .../tui/src/component/dialog-skill-detail.tsx |   8 +-
 packages/tui/src/component/dialog-skill.tsx   |  11 +-
 4 files changed, 34 insertions(+), 91 deletions(-)

diff --git a/packages/core/src/util/recent-skills.ts b/packages/core/src/util/recent-skills.ts
index 8bf2d94112af..b335bd1eac9d 100644
--- a/packages/core/src/util/recent-skills.ts
+++ b/packages/core/src/util/recent-skills.ts
@@ -1,111 +1,65 @@
-import { readFile, writeFile, mkdir } from "fs/promises"
+import { mkdir } from "fs/promises"
 import { dirname } from "path"
 import { Global } from "../global"
 
 const STORAGE_FILE = "recent-skills.json"
 const MAX_RECENT = 50
-const TTL_MS = 30 * 24 * 60 * 60 * 1000 // 30 days
+const TTL_MS = 30 * 24 * 60 * 60 * 1000
 
-interface RecentEntry {
-  /** Skill name (e.g. "commit") */
+type RecentEntry = {
   name: string
-  /** ISO timestamp of last use */
   usedAt: string
 }
 
-function filePath(): string {
-  return `${Global.Path.state}/${STORAGE_FILE}`
-}
+const state: { cache: RecentEntry[] | undefined } = { cache: undefined }
 
-// In-memory cache: loaded from disk once, reads from cache, writes are fire-and-forget
-let cache: RecentEntry[] | undefined
-
-async function loadFromDisk(): Promise<RecentEntry[]> {
-  try {
-    const raw = await readFile(filePath(), "utf-8")
-    if (!raw) return []
-    const parsed: unknown = JSON.parse(raw)
-    return Array.isArray(parsed) ? (parsed as RecentEntry[]) : []
-  } catch {
-    return []
-  }
+function filePath() {
+  return `${Global.Path.state}/${STORAGE_FILE}`
 }
 
-async function saveToDisk(entries: RecentEntry[]): Promise<void> {
-  try {
-    await mkdir(dirname(filePath()), { recursive: true })
-    await writeFile(filePath(), JSON.stringify(entries, null, 2))
-  } catch {
-    // Silently fail
-  }
+function saveToDisk(entries: RecentEntry[]) {
+  const path = filePath()
+  mkdir(dirname(path), { recursive: true })
+    .then(() => Bun.write(path, JSON.stringify(entries, null, 2)))
+    .catch(() => {})
 }
 
 function initCache(): RecentEntry[] {
-  if (cache === undefined) {
-    // Fire-and-forget: load from disk, update cache
-    loadFromDisk().then((entries) => {
-      cache = entries
+  if (state.cache !== undefined) return state.cache
+  state.cache = []
+  Bun.file(filePath())
+    .text()
+    .then((raw) => {
+      const parsed: unknown = JSON.parse(raw)
+      if (Array.isArray(parsed)) state.cache = parsed as RecentEntry[]
     })
-    // Start with empty cache, will be populated on next tick
-    cache = []
-  }
-  return cache
+    .catch(() => {})
+  return state.cache
 }
 
-/**
- * Return all recent skill entries, filtered by TTL and deduplicated.
- * Reads from in-memory cache (fast, synchronous).
- */
-export function getRecentSkills(): Array<{ name: string; usedAt: Date }> {
-  const entries = initCache()
+function getRecentSkills(): RecentEntry[] {
   const now = Date.now()
   const seen = new Set<string>()
-  const result: Array<{ name: string; usedAt: Date }> = []
-
-  for (const entry of entries) {
+  return initCache().filter((entry) => {
     const ts = new Date(entry.usedAt).getTime()
-
-    // Skip expired entries
-    if (now - ts > TTL_MS) continue
-
-    // Deduplicate by name, keep most recent
-    if (seen.has(entry.name)) continue
+    if (now - ts > TTL_MS) return false
+    if (seen.has(entry.name)) return false
     seen.add(entry.name)
-
-    result.push({ name: entry.name, usedAt: new Date(entry.usedAt) })
-  }
-
-  return result
+    return true
+  })
 }
 
-/**
- * Return top N recently used skill names.
- */
 export function getTopRecentSkills(n: number): string[] {
   return getRecentSkills()
     .slice(0, n)
     .map((e) => e.name)
 }
 
-/**
- * Record that a skill was used (called after onSelect).
- * Updates in-memory cache immediately, persists to disk in background.
- */
 export function recordSkillUsage(name: string): void {
-  const entries = initCache()
-
-  // Remove any existing entry for this skill
-  const filtered = entries.filter((e) => e.name !== name)
-
-  // Prepend new entry
-  const updated: RecentEntry[] = [
+  const updated = [
     { name, usedAt: new Date().toISOString() },
-    ...filtered,
+    ...initCache().filter((e) => e.name !== name),
   ].slice(0, MAX_RECENT)
-
-  // Update cache synchronously
-  cache = updated
-
-  // Persist to disk in background
+  state.cache = updated
   saveToDisk(updated)
 }
diff --git a/packages/opencode/src/cli/cmd/run/footer.view.tsx b/packages/opencode/src/cli/cmd/run/footer.view.tsx
index de8528ae97a5..ecddc50e49aa 100644
--- a/packages/opencode/src/cli/cmd/run/footer.view.tsx
+++ b/packages/opencode/src/cli/cmd/run/footer.view.tsx
@@ -21,7 +21,6 @@ import {
   RunSubagentSelectBody,
   RunVariantSelectBody,
 } from "./footer.command"
-import { recordSkillUsage } from "@opencode-ai/core/util/recent-skills"
 import { FOOTER_MENU_ROWS, RunFooterMenu } from "./footer.menu"
 import { RunFooterSubagentBody } from "./footer.subagent"
 import { RunPromptBody, createPromptState } from "./footer.prompt"
@@ -740,7 +739,6 @@ export function RunFooterView(props: RunFooterViewProps) {
                             commands={props.commands}
                             onClose={closePanel}
                             onSelect={(name) => {
-                              recordSkillUsage(name)
                               composer.replacePrompt({
                                 text: `/${name} `,
                                 parts: [],
diff --git a/packages/tui/src/component/dialog-skill-detail.tsx b/packages/tui/src/component/dialog-skill-detail.tsx
index e8b765ce8a06..8216c7e30815 100644
--- a/packages/tui/src/component/dialog-skill-detail.tsx
+++ b/packages/tui/src/component/dialog-skill-detail.tsx
@@ -2,7 +2,7 @@ import { TextAttributes } from "@opentui/core"
 import { useTheme } from "../context/theme"
 import { useDialog } from "../ui/dialog"
 import { useKeyboard } from "@opentui/solid"
-import { createMemo, Show } from "solid-js"
+import { Show } from "solid-js"
 
 export type DialogSkillDetailProps = {
   name: string
@@ -15,8 +15,6 @@ export function DialogSkillDetail(props: DialogSkillDetailProps) {
   const dialog = useDialog()
   const { theme } = useTheme()
 
-  const hasTemplate = createMemo(() => !!props.template)
-
   useKeyboard((evt) => {
     if (evt.name === "return") {
       evt.preventDefault()
@@ -43,7 +41,7 @@ export function DialogSkillDetail(props: DialogSkillDetailProps) {
           </box>
         </Show>
       </box>
-      <Show when={hasTemplate()}>
+      <Show when={!!props.template}>
         <box flexGrow={1} flexShrink={1} maxHeight={20}>
           <scrollbox
             paddingLeft={4}
@@ -56,7 +54,7 @@ export function DialogSkillDetail(props: DialogSkillDetailProps) {
           </scrollbox>
         </box>
       </Show>
-      <Show when={!hasTemplate()}>
+      <Show when={!!!props.template}>
         <box paddingLeft={4} paddingRight={4} paddingTop={1}>
           <text fg={theme.textMuted}>No template available</text>
         </box>
diff --git a/packages/tui/src/component/dialog-skill.tsx b/packages/tui/src/component/dialog-skill.tsx
index 29428c00ede5..5269b0662f07 100644
--- a/packages/tui/src/component/dialog-skill.tsx
+++ b/packages/tui/src/component/dialog-skill.tsx
@@ -22,10 +22,8 @@ export function DialogSkill(props: DialogSkillProps) {
     return result.data ?? []
   })
 
-  const recentNames = createMemo(() => getTopRecentSkills(5))
-
   function pushDetail(skillName: string) {
-    const skill = allSkills().find((s) => s.name === skillName)
+    const skill = (skills() ?? []).find((s) => s.name === skillName)
     if (!skill) return
     dialog.push(() => (
       <DialogSkillDetail
@@ -41,7 +39,7 @@ export function DialogSkill(props: DialogSkillProps) {
     const list = skills() ?? []
     const maxWidth = Math.max(0, ...list.map((s) => s.name.length))
 
-    const recentOpts: DialogSelectOption<string>[] = recentNames().map((name) => ({
+    const recentOpts: DialogSelectOption<string>[] = getTopRecentSkills(5).map((name) => ({
       title: name.padEnd(maxWidth),
       description: undefined,
       value: name,
@@ -72,11 +70,6 @@ export function DialogSkill(props: DialogSkillProps) {
     return [...recentOpts, ...allOpts]
   })
 
-  const allSkills = createMemo(() => {
-    const list = skills() ?? []
-    return list
-  })
-
   useKeyboard((evt) => {
     if (evt.ctrl && evt.name === "o") {
       evt.preventDefault()