refactor(server): canonicalize service API (#31049)
This commit is contained in:
Dax
GitHub
parent
53ff1b57c9
commit
fe0c4f8c74
388 changed files with 7075 additions and 4064 deletions
43
packages/tui/src/feature-plugins/builtins.ts
Normal file
43
packages/tui/src/feature-plugins/builtins.ts
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
import type { TuiPlugin, TuiPluginModule } from "@opencode-ai/plugin/tui"
|
||||
import HomeFooter from "./home/footer"
|
||||
import HomeTips from "./home/tips"
|
||||
import SessionSwitcher from "./session"
|
||||
import SidebarContext from "./sidebar/context"
|
||||
import SidebarFiles from "./sidebar/files"
|
||||
import SidebarFooter from "./sidebar/footer"
|
||||
import SidebarLsp from "./sidebar/lsp"
|
||||
import SidebarMcp from "./sidebar/mcp"
|
||||
import SidebarTodo from "./sidebar/todo"
|
||||
import DiffViewer from "./system/diff-viewer"
|
||||
import Notifications from "./system/notifications"
|
||||
import PluginManager from "./system/plugins"
|
||||
import SessionV2Debug from "./system/session-v2"
|
||||
import WhichKey from "./system/which-key"
|
||||
|
||||
export type BuiltinTuiPlugin = Omit<TuiPluginModule, "id"> & {
|
||||
id: string
|
||||
tui: TuiPlugin
|
||||
enabled?: boolean
|
||||
}
|
||||
|
||||
export function createBuiltinPlugins(options: {
|
||||
experimentalEventSystem: boolean
|
||||
experimentalSessionSwitcher: boolean
|
||||
}): BuiltinTuiPlugin[] {
|
||||
return [
|
||||
HomeFooter,
|
||||
HomeTips,
|
||||
SidebarContext,
|
||||
SidebarMcp,
|
||||
SidebarLsp,
|
||||
SidebarTodo,
|
||||
SidebarFiles,
|
||||
SidebarFooter,
|
||||
Notifications,
|
||||
PluginManager,
|
||||
WhichKey,
|
||||
DiffViewer,
|
||||
...(options.experimentalEventSystem ? [SessionV2Debug] : []),
|
||||
...(options.experimentalSessionSwitcher ? [SessionSwitcher] : []),
|
||||
]
|
||||
}
|
||||
101
packages/tui/src/feature-plugins/home/footer.tsx
Normal file
101
packages/tui/src/feature-plugins/home/footer.tsx
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
import type { TuiPlugin, TuiPluginApi } from "@opencode-ai/plugin/tui"
|
||||
import type { BuiltinTuiPlugin } from "../builtins"
|
||||
import { createMemo, Match, Show, Switch } from "solid-js"
|
||||
import { abbreviateHome, useTuiEnvironment } from "../../runtime"
|
||||
import { useHomeSessionDestination } from "../../routes/home/session-destination"
|
||||
|
||||
const id = "internal:home-footer"
|
||||
|
||||
function Directory(props: { api: TuiPluginApi }) {
|
||||
const theme = () => props.api.theme.current
|
||||
const destination = useHomeSessionDestination()
|
||||
const environment = useTuiEnvironment()
|
||||
const dir = createMemo(() => {
|
||||
const selected = destination?.destination()
|
||||
if (!selected || selected.type === "new") return
|
||||
const out = abbreviateHome(selected.directory, environment.paths.home)
|
||||
const branch =
|
||||
selected.directory === (props.api.state.path.directory || environment.cwd)
|
||||
? props.api.state.vcs?.branch
|
||||
: undefined
|
||||
if (branch) return out + ":" + branch
|
||||
return out
|
||||
})
|
||||
|
||||
return <Show when={dir()}>{(value) => <text fg={theme().textMuted}>{value()}</text>}</Show>
|
||||
}
|
||||
|
||||
function Mcp(props: { api: TuiPluginApi }) {
|
||||
const theme = () => props.api.theme.current
|
||||
const list = createMemo(() => props.api.state.mcp())
|
||||
const has = createMemo(() => list().length > 0)
|
||||
const err = createMemo(() => list().some((item) => item.status === "failed"))
|
||||
const count = createMemo(() => list().filter((item) => item.status === "connected").length)
|
||||
|
||||
return (
|
||||
<Show when={has()}>
|
||||
<box gap={1} flexDirection="row" flexShrink={0}>
|
||||
<text fg={theme().text}>
|
||||
<Switch>
|
||||
<Match when={err()}>
|
||||
<span style={{ fg: theme().error }}>⊙ </span>
|
||||
</Match>
|
||||
<Match when={true}>
|
||||
<span style={{ fg: count() > 0 ? theme().success : theme().textMuted }}>⊙ </span>
|
||||
</Match>
|
||||
</Switch>
|
||||
{count()} MCP
|
||||
</text>
|
||||
<text fg={theme().textMuted}>/status</text>
|
||||
</box>
|
||||
</Show>
|
||||
)
|
||||
}
|
||||
|
||||
function Version(props: { api: TuiPluginApi }) {
|
||||
const theme = () => props.api.theme.current
|
||||
|
||||
return (
|
||||
<box flexShrink={0}>
|
||||
<text fg={theme().textMuted}>{props.api.app.version}</text>
|
||||
</box>
|
||||
)
|
||||
}
|
||||
|
||||
function View(props: { api: TuiPluginApi }) {
|
||||
return (
|
||||
<box
|
||||
width="100%"
|
||||
paddingTop={1}
|
||||
paddingBottom={1}
|
||||
paddingLeft={2}
|
||||
paddingRight={2}
|
||||
flexDirection="row"
|
||||
flexShrink={0}
|
||||
gap={2}
|
||||
>
|
||||
<Directory api={props.api} />
|
||||
<Mcp api={props.api} />
|
||||
<box flexGrow={1} />
|
||||
<Version api={props.api} />
|
||||
</box>
|
||||
)
|
||||
}
|
||||
|
||||
const tui: TuiPlugin = async (api) => {
|
||||
api.slots.register({
|
||||
order: 100,
|
||||
slots: {
|
||||
home_footer() {
|
||||
return <View api={api} />
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const plugin: BuiltinTuiPlugin = {
|
||||
id,
|
||||
tui,
|
||||
}
|
||||
|
||||
export default plugin
|
||||
289
packages/tui/src/feature-plugins/home/tips-view.tsx
Normal file
289
packages/tui/src/feature-plugins/home/tips-view.tsx
Normal file
|
|
@ -0,0 +1,289 @@
|
|||
import type { TuiPluginApi } from "@opencode-ai/plugin/tui"
|
||||
import { createMemo, For, type Accessor } from "solid-js"
|
||||
import { DEFAULT_THEMES, useTheme } from "../../context/theme"
|
||||
import { useCommandShortcut } from "../../keymap"
|
||||
import { useTuiEnvironment } from "../../runtime"
|
||||
|
||||
const themeCount = Object.keys(DEFAULT_THEMES).length
|
||||
|
||||
type TipPart = { text: string; highlight: boolean }
|
||||
type TipShortcut = Accessor<string>
|
||||
type Shortcuts = {
|
||||
agentCycle: TipShortcut
|
||||
childFirst: TipShortcut
|
||||
childNext: TipShortcut
|
||||
childPrevious: TipShortcut
|
||||
commandList: TipShortcut
|
||||
editorOpen: TipShortcut
|
||||
helpShow: TipShortcut
|
||||
inputClear: TipShortcut
|
||||
inputNewline: TipShortcut
|
||||
inputPaste: TipShortcut
|
||||
inputUndo: TipShortcut
|
||||
leader: TipShortcut
|
||||
messagesCopy: TipShortcut
|
||||
messagesFirst: TipShortcut
|
||||
messagesLast: TipShortcut
|
||||
messagesPageDown: TipShortcut
|
||||
messagesPageUp: TipShortcut
|
||||
messagesToggleConceal: TipShortcut
|
||||
modelCycleRecent: TipShortcut
|
||||
modelList: TipShortcut
|
||||
sessionExport: TipShortcut
|
||||
sessionInterrupt: TipShortcut
|
||||
sessionList: TipShortcut
|
||||
sessionNew: TipShortcut
|
||||
sessionParent: TipShortcut
|
||||
sessionPinToggle: TipShortcut
|
||||
sessionQuickSwitch1: TipShortcut
|
||||
sessionQuickSwitch9: TipShortcut
|
||||
sessionSidebarToggle: TipShortcut
|
||||
sessionTimeline: TipShortcut
|
||||
statusView: TipShortcut
|
||||
terminalSuspend: TipShortcut
|
||||
themeList: TipShortcut
|
||||
}
|
||||
type Tip = string | ((shortcuts: Shortcuts) => string | undefined)
|
||||
|
||||
function parse(tip: string): TipPart[] {
|
||||
const parts: TipPart[] = []
|
||||
const regex = /\{highlight\}(.*?)\{\/highlight\}/g
|
||||
const found = Array.from(tip.matchAll(regex))
|
||||
const state = found.reduce(
|
||||
(acc, match) => {
|
||||
const start = match.index ?? 0
|
||||
if (start > acc.index) {
|
||||
acc.parts.push({ text: tip.slice(acc.index, start), highlight: false })
|
||||
}
|
||||
acc.parts.push({ text: match[1], highlight: true })
|
||||
acc.index = start + match[0].length
|
||||
return acc
|
||||
},
|
||||
{ parts, index: 0 },
|
||||
)
|
||||
|
||||
if (state.index < tip.length) {
|
||||
parts.push({ text: tip.slice(state.index), highlight: false })
|
||||
}
|
||||
|
||||
return parts
|
||||
}
|
||||
|
||||
const NO_MODELS_TIP = "Run {highlight}/connect{/highlight} to add an AI provider and start coding"
|
||||
const NO_MODELS_PARTS = parse(NO_MODELS_TIP)
|
||||
|
||||
function shortcutText(value: string) {
|
||||
return `{highlight}${value}{/highlight}`
|
||||
}
|
||||
|
||||
function commandText(command: string, shortcut: string) {
|
||||
if (!shortcut) return shortcutText(command)
|
||||
return `${shortcutText(command)} or ${shortcutText(shortcut)}`
|
||||
}
|
||||
|
||||
function press(shortcut: string, text: string) {
|
||||
if (!shortcut) return undefined
|
||||
return `Press ${shortcutText(shortcut)} ${text}`
|
||||
}
|
||||
|
||||
function configShortcut(api: TuiPluginApi, command: string): TipShortcut {
|
||||
return () =>
|
||||
api.tuiConfig.keybinds
|
||||
.get(command)
|
||||
.map((binding) => api.keys.formatSequence(Array.from(api.keymap.parseKeySequence(binding.key))))
|
||||
.filter(Boolean)
|
||||
.join(", ")
|
||||
}
|
||||
|
||||
export function Tips(props: { api: TuiPluginApi; connected?: boolean }) {
|
||||
const theme = useTheme().theme
|
||||
const environment = useTuiEnvironment()
|
||||
const tipOffset = Math.random()
|
||||
const shortcuts: Shortcuts = {
|
||||
agentCycle: useCommandShortcut("agent.cycle"),
|
||||
childFirst: configShortcut(props.api, "session.child.first"),
|
||||
childNext: configShortcut(props.api, "session.child.next"),
|
||||
childPrevious: configShortcut(props.api, "session.child.previous"),
|
||||
commandList: useCommandShortcut("command.palette.show"),
|
||||
editorOpen: useCommandShortcut("prompt.editor"),
|
||||
helpShow: useCommandShortcut("help.show"),
|
||||
inputClear: useCommandShortcut("prompt.clear"),
|
||||
inputNewline: useCommandShortcut("input.newline"),
|
||||
inputPaste: useCommandShortcut("prompt.paste"),
|
||||
inputUndo: useCommandShortcut("input.undo"),
|
||||
leader: configShortcut(props.api, "leader"),
|
||||
messagesCopy: configShortcut(props.api, "messages.copy"),
|
||||
messagesFirst: configShortcut(props.api, "session.first"),
|
||||
messagesLast: configShortcut(props.api, "session.last"),
|
||||
messagesPageDown: configShortcut(props.api, "session.page.down"),
|
||||
messagesPageUp: configShortcut(props.api, "session.page.up"),
|
||||
messagesToggleConceal: configShortcut(props.api, "session.toggle.conceal"),
|
||||
modelCycleRecent: useCommandShortcut("model.cycle_recent"),
|
||||
modelList: useCommandShortcut("model.list"),
|
||||
sessionExport: configShortcut(props.api, "session.export"),
|
||||
sessionInterrupt: configShortcut(props.api, "session.interrupt"),
|
||||
sessionList: useCommandShortcut("session.list"),
|
||||
sessionNew: useCommandShortcut("session.new"),
|
||||
sessionParent: configShortcut(props.api, "session.parent"),
|
||||
sessionPinToggle: configShortcut(props.api, "session.pin.toggle"),
|
||||
sessionQuickSwitch1: useCommandShortcut("session.quick_switch.1"),
|
||||
sessionQuickSwitch9: useCommandShortcut("session.quick_switch.9"),
|
||||
sessionSidebarToggle: configShortcut(props.api, "session.sidebar.toggle"),
|
||||
sessionTimeline: configShortcut(props.api, "session.timeline"),
|
||||
statusView: useCommandShortcut("opencode.status"),
|
||||
terminalSuspend: useCommandShortcut("terminal.suspend"),
|
||||
themeList: useCommandShortcut("theme.switch"),
|
||||
}
|
||||
const tip = createMemo(() => {
|
||||
if (props.connected === false) return NO_MODELS_TIP
|
||||
const tips = [...TIPS, environment.capabilities.terminalSuspend ? TERMINAL_SUSPEND_TIP : INPUT_UNDO_TIP].flatMap((item) => {
|
||||
const value = typeof item === "string" ? item : item(shortcuts)
|
||||
return value ? [value] : []
|
||||
})
|
||||
return tips[Math.floor(tipOffset * tips.length)] ?? NO_MODELS_TIP
|
||||
}, NO_MODELS_TIP)
|
||||
// Solid can expose a memo's initial value while a pure computation is pending.
|
||||
const parts = createMemo(() => {
|
||||
const value = tip()
|
||||
if (typeof value === "string") return parse(value)
|
||||
return NO_MODELS_PARTS
|
||||
}, NO_MODELS_PARTS)
|
||||
|
||||
return (
|
||||
<box flexDirection="row" maxWidth="100%">
|
||||
<text flexShrink={0} style={{ fg: theme.warning }}>
|
||||
● Tip{" "}
|
||||
</text>
|
||||
<text flexShrink={1} wrapMode="word">
|
||||
<For each={parts()}>
|
||||
{(part) => <span style={{ fg: part.highlight ? theme.text : theme.textMuted }}>{part.text}</span>}
|
||||
</For>
|
||||
</text>
|
||||
</box>
|
||||
)
|
||||
}
|
||||
|
||||
const TIPS: Tip[] = [
|
||||
"Type {highlight}@{/highlight} followed by a filename to fuzzy search and attach files",
|
||||
"Start a message with {highlight}!{/highlight} to run shell commands directly (e.g., {highlight}!ls -la{/highlight})",
|
||||
(shortcuts) => press(shortcuts.agentCycle(), "to cycle between Build and Plan agents"),
|
||||
"Use {highlight}/undo{/highlight} to revert the last message and file changes",
|
||||
"Use {highlight}/redo{/highlight} to restore previously undone messages and file changes",
|
||||
"Run {highlight}/share{/highlight} to create a public link to your conversation at opencode.ai",
|
||||
"Drag and drop images or PDFs into the terminal to add them as context",
|
||||
(shortcuts) => press(shortcuts.inputPaste(), "to paste images from your clipboard into the prompt"),
|
||||
(shortcuts) => `Use ${commandText("/editor", shortcuts.editorOpen())} to compose messages in your external editor`,
|
||||
"Run {highlight}/init{/highlight} to auto-generate project rules based on your codebase",
|
||||
(shortcuts) => `Use ${commandText("/models", shortcuts.modelList())} to see and switch between available AI models`,
|
||||
(shortcuts) => `Use ${commandText("/themes", shortcuts.themeList())} to switch between ${themeCount} built-in themes`,
|
||||
(shortcuts) => `Use ${commandText("/new", shortcuts.sessionNew())} to start a fresh conversation session`,
|
||||
(shortcuts) => `Use ${commandText("/sessions", shortcuts.sessionList())} to list, pin, and continue sessions`,
|
||||
(shortcuts) => press(shortcuts.sessionPinToggle(), "in the session list to pin a session so it stays at the top"),
|
||||
(shortcuts) =>
|
||||
shortcuts.sessionQuickSwitch1() && shortcuts.sessionQuickSwitch9()
|
||||
? `Pinned sessions are assigned quick slots; use ${shortcutText(shortcuts.sessionQuickSwitch1())} through ${shortcutText(shortcuts.sessionQuickSwitch9())} to switch`
|
||||
: undefined,
|
||||
"Run {highlight}/compact{/highlight} to summarize long sessions near context limits",
|
||||
(shortcuts) => `Use ${commandText("/export", shortcuts.sessionExport())} to save the conversation as Markdown`,
|
||||
(shortcuts) => press(shortcuts.messagesCopy(), "to copy the assistant's last message to clipboard"),
|
||||
(shortcuts) => press(shortcuts.commandList(), "to see all available actions and commands"),
|
||||
"Run {highlight}/connect{/highlight} to add API keys for 75+ supported LLM providers",
|
||||
(shortcuts) => `The leader key is ${shortcutText(shortcuts.leader())}; combine with other keys for quick actions`,
|
||||
(shortcuts) => press(shortcuts.modelCycleRecent(), "to quickly switch between recently used models"),
|
||||
(shortcuts) => press(shortcuts.sessionSidebarToggle(), "in a session to show or hide the sidebar panel"),
|
||||
(shortcuts) =>
|
||||
shortcuts.messagesPageUp() && shortcuts.messagesPageDown()
|
||||
? `Use ${shortcutText(shortcuts.messagesPageUp())}/${shortcutText(shortcuts.messagesPageDown())} to navigate through conversation history`
|
||||
: undefined,
|
||||
(shortcuts) => press(shortcuts.messagesFirst(), "to jump to the beginning of the conversation"),
|
||||
(shortcuts) => press(shortcuts.messagesLast(), "to jump to the most recent message"),
|
||||
(shortcuts) => press(shortcuts.inputNewline(), "to add newlines in your prompt"),
|
||||
(shortcuts) => press(shortcuts.inputClear(), "when typing to clear the input field"),
|
||||
(shortcuts) => press(shortcuts.sessionInterrupt(), "to stop the AI mid-response"),
|
||||
"Switch to {highlight}Plan{/highlight} agent to get suggestions without making actual changes",
|
||||
"Use {highlight}@agent-name{/highlight} in prompts to invoke specialized subagents",
|
||||
(shortcuts) => {
|
||||
const items = [
|
||||
shortcuts.sessionParent(),
|
||||
shortcuts.childFirst(),
|
||||
shortcuts.childPrevious(),
|
||||
shortcuts.childNext(),
|
||||
].filter(Boolean)
|
||||
if (!items.length) return undefined
|
||||
return `Use ${items.map(shortcutText).join(" / ")} to move between parent and child sessions`
|
||||
},
|
||||
"Create {highlight}opencode.json{/highlight} for server settings and {highlight}tui.json{/highlight} for TUI settings",
|
||||
"Place TUI settings in {highlight}~/.config/opencode/tui.json{/highlight} for global config",
|
||||
"Add {highlight}$schema{/highlight} to your config for autocomplete in your editor",
|
||||
"Configure {highlight}model{/highlight} in config to set your default model",
|
||||
"Override any keybind in {highlight}tui.json{/highlight} via the {highlight}keybinds{/highlight} section",
|
||||
"Set any keybind to {highlight}none{/highlight} to disable it completely",
|
||||
"Configure local or remote MCP servers in the {highlight}mcp{/highlight} config section",
|
||||
"Add {highlight}.md{/highlight} files to {highlight}.opencode/commands/{/highlight} to define reusable custom prompts",
|
||||
"Use {highlight}$ARGUMENTS{/highlight}, {highlight}$1{/highlight}, {highlight}$2{/highlight} in custom commands for dynamic input",
|
||||
"Use backticks in commands to inject shell output (e.g., {highlight}`git status`{/highlight})",
|
||||
"Add {highlight}.md{/highlight} files to {highlight}.opencode/agents/{/highlight} for specialized AI personas",
|
||||
"Configure per-agent permissions for {highlight}edit{/highlight}, {highlight}bash{/highlight}, and {highlight}webfetch{/highlight} tools",
|
||||
'Use patterns like {highlight}"git *": "allow"{/highlight} for granular bash permissions',
|
||||
'Set {highlight}"rm -rf *": "deny"{/highlight} to block destructive commands',
|
||||
'Configure {highlight}"git push": "ask"{/highlight} to require approval before pushing',
|
||||
'Set {highlight}"formatter": true{/highlight} in config to enable built-in formatters like prettier, gofmt, and ruff',
|
||||
'Set {highlight}"formatter": false{/highlight} in config to disable formatters enabled by another config layer',
|
||||
"Define custom formatter commands with file extensions in config",
|
||||
'Set {highlight}"lsp": true{/highlight} in config to enable built-in LSP servers for code analysis',
|
||||
"Create {highlight}.ts{/highlight} files in {highlight}.opencode/tools/{/highlight} to define new LLM tools",
|
||||
"Tool definitions can invoke scripts written in Python, Go, etc",
|
||||
"Add {highlight}.ts{/highlight} files to {highlight}.opencode/plugins/{/highlight} for event hooks",
|
||||
"Use plugins to send OS notifications when sessions complete",
|
||||
"Create a plugin to prevent OpenCode from reading sensitive files",
|
||||
"Use {highlight}opencode run{/highlight} for non-interactive scripting",
|
||||
"Use {highlight}opencode --continue{/highlight} to resume the last session",
|
||||
"Use {highlight}opencode run -f file.ts{/highlight} to attach files via CLI",
|
||||
"Use {highlight}--format json{/highlight} for machine-readable output in scripts",
|
||||
"Run {highlight}opencode serve{/highlight} for headless API access to OpenCode",
|
||||
"Use {highlight}opencode run --attach{/highlight} to connect to a running server",
|
||||
"Run {highlight}opencode upgrade{/highlight} to update to the latest version",
|
||||
"Run {highlight}opencode auth list{/highlight} to see all configured providers",
|
||||
"Run {highlight}opencode agent create{/highlight} for guided agent creation",
|
||||
"Use {highlight}/opencode{/highlight} in GitHub issues/PRs to trigger AI actions",
|
||||
"Run {highlight}opencode github install{/highlight} to set up the GitHub workflow",
|
||||
"Comment {highlight}/opencode fix this{/highlight} on issues to auto-create PRs",
|
||||
"Comment {highlight}/oc{/highlight} on PR code lines for targeted code reviews",
|
||||
'Use {highlight}"theme": "system"{/highlight} to match your terminal\'s colors',
|
||||
"Create JSON theme files in {highlight}.opencode/themes/{/highlight} directory",
|
||||
"Themes support dark/light variants for both modes",
|
||||
"Use numeric xterm color codes 0-255 in custom theme JSON",
|
||||
"Use {highlight}{env:VAR_NAME}{/highlight} syntax to reference environment variables in config",
|
||||
"Use {highlight}{file:path}{/highlight} to include file contents in config values",
|
||||
"Use {highlight}instructions{/highlight} in config to load additional rules files",
|
||||
"Set agent {highlight}temperature{/highlight} from 0.0 (focused) to 1.0 (creative)",
|
||||
"Configure {highlight}steps{/highlight} to limit agentic iterations per request",
|
||||
'Set {highlight}"tools": {"bash": false}{/highlight} to disable specific tools',
|
||||
'Set {highlight}"mcp_*": false{/highlight} to disable all tools from an MCP server',
|
||||
"Override global tool settings per agent configuration",
|
||||
'Set {highlight}"share": "auto"{/highlight} to automatically share all sessions',
|
||||
'Set {highlight}"share": "disabled"{/highlight} to prevent any session sharing',
|
||||
"Run {highlight}/unshare{/highlight} to remove a session from public access",
|
||||
"Permission {highlight}doom_loop{/highlight} prevents infinite tool call loops",
|
||||
"Permission {highlight}external_directory{/highlight} protects files outside project",
|
||||
"Run {highlight}opencode debug config{/highlight} to troubleshoot configuration",
|
||||
"Use {highlight}--print-logs{/highlight} flag to see detailed logs in stderr",
|
||||
(shortcuts) => `Use ${commandText("/timeline", shortcuts.sessionTimeline())} to jump to specific messages`,
|
||||
(shortcuts) => press(shortcuts.messagesToggleConceal(), "to toggle code block visibility in messages"),
|
||||
(shortcuts) => `Use ${commandText("/status", shortcuts.statusView())} to see system status info`,
|
||||
"Enable {highlight}scroll_acceleration{/highlight} in {highlight}tui.json{/highlight} for smooth macOS-style scrolling",
|
||||
(shortcuts) =>
|
||||
shortcuts.commandList()
|
||||
? `Toggle username display in chat via the command palette (${shortcutText(shortcuts.commandList())})`
|
||||
: "Toggle username display in chat via the command palette",
|
||||
"Run {highlight}docker run -it --rm ghcr.io/anomalyco/opencode{/highlight} for containerized use",
|
||||
"Use {highlight}/connect{/highlight} with OpenCode Zen for curated, tested models",
|
||||
"Commit your project's {highlight}AGENTS.md{/highlight} file to Git for team sharing",
|
||||
"Use {highlight}/review{/highlight} to review uncommitted changes, branches, or PRs",
|
||||
(shortcuts) => `Use ${commandText("/help", shortcuts.helpShow())} to show the help dialog`,
|
||||
"Use {highlight}/rename{/highlight} to rename the current session",
|
||||
]
|
||||
|
||||
const INPUT_UNDO_TIP: Tip = (shortcuts) => press(shortcuts.inputUndo(), "to undo changes in your prompt")
|
||||
const TERMINAL_SUSPEND_TIP: Tip = (shortcuts) =>
|
||||
press(shortcuts.terminalSuspend(), "to suspend the terminal and return to your shell")
|
||||
59
packages/tui/src/feature-plugins/home/tips.tsx
Normal file
59
packages/tui/src/feature-plugins/home/tips.tsx
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
import type { TuiPlugin, TuiPluginApi } from "@opencode-ai/plugin/tui"
|
||||
import type { BuiltinTuiPlugin } from "../builtins"
|
||||
import { createMemo, Show } from "solid-js"
|
||||
import { Tips } from "./tips-view"
|
||||
import { useBindings } from "../../keymap"
|
||||
|
||||
const id = "internal:home-tips"
|
||||
|
||||
function View(props: { api: TuiPluginApi; hidden: boolean; show: boolean; connected: boolean }) {
|
||||
useBindings(() => ({
|
||||
commands: [
|
||||
{
|
||||
name: "tips.toggle",
|
||||
title: props.hidden ? "Show tips" : "Hide tips",
|
||||
category: "System",
|
||||
namespace: "palette",
|
||||
run() {
|
||||
props.api.kv.set("tips_hidden", !props.api.kv.get("tips_hidden", false))
|
||||
props.api.ui.dialog.clear()
|
||||
},
|
||||
},
|
||||
],
|
||||
bindings: props.api.tuiConfig.keybinds.get("tips.toggle"),
|
||||
}))
|
||||
|
||||
return (
|
||||
<box width="100%" maxWidth={75} alignItems="center" paddingTop={3} flexShrink={1}>
|
||||
<Show when={props.show}>
|
||||
<Tips api={props.api} connected={props.connected} />
|
||||
</Show>
|
||||
</box>
|
||||
)
|
||||
}
|
||||
|
||||
const tui: TuiPlugin = async (api) => {
|
||||
api.slots.register({
|
||||
order: 100,
|
||||
slots: {
|
||||
home_bottom() {
|
||||
const hidden = createMemo(() => api.kv.get("tips_hidden", false))
|
||||
const first = createMemo(() => api.state.session.count() === 0)
|
||||
const connected = createMemo(() =>
|
||||
api.state.provider.some(
|
||||
(item) => item.id !== "opencode" || Object.values(item.models).some((model) => model.cost?.input !== 0),
|
||||
),
|
||||
)
|
||||
const show = createMemo(() => (!first() || !connected()) && !hidden())
|
||||
return <View api={api} hidden={hidden()} show={show()} connected={connected()} />
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const plugin: BuiltinTuiPlugin = {
|
||||
id,
|
||||
tui,
|
||||
}
|
||||
|
||||
export default plugin
|
||||
356
packages/tui/src/feature-plugins/session/dialog.tsx
Normal file
356
packages/tui/src/feature-plugins/session/dialog.tsx
Normal file
|
|
@ -0,0 +1,356 @@
|
|||
import { useDialog } from "../../ui/dialog"
|
||||
import { DialogSelect, type DialogSelectOption, type DialogSelectRef } from "../../ui/dialog-select"
|
||||
import { useRoute } from "../../context/route"
|
||||
import { useSync } from "../../context/sync"
|
||||
import { useProject } from "../../context/project"
|
||||
import { useTheme } from "../../context/theme"
|
||||
import { useSDK } from "../../context/sdk"
|
||||
import { useLocal } from "../../context/local"
|
||||
import { useToast } from "../../ui/toast"
|
||||
import { useCommandShortcut } from "../../keymap"
|
||||
import { createEffect, createMemo, createResource, createSignal, on, Show, untrack } from "solid-js"
|
||||
import { useTerminalDimensions } from "@opentui/solid"
|
||||
import { Spinner } from "../../component/spinner"
|
||||
import { DialogSessionRename } from "../../component/dialog-session-rename"
|
||||
import { DialogSessionDeleteFailed } from "../../component/dialog-session-delete-failed"
|
||||
import {
|
||||
openWorkspaceSelect,
|
||||
type WorkspaceSelection,
|
||||
warpWorkspaceSession,
|
||||
} from "../../component/dialog-workspace-create"
|
||||
import { createDebouncedSignal } from "../../util/signal"
|
||||
import { errorMessage } from "../../util/error"
|
||||
import { SessionPreviewPane, createLeadingTrailingSignal } from "./preview-pane"
|
||||
import { relativeTime } from "./util"
|
||||
|
||||
export function SessionSwitcherDialog() {
|
||||
const dialog = useDialog()
|
||||
const route = useRoute()
|
||||
const sync = useSync()
|
||||
const project = useProject()
|
||||
const { theme } = useTheme()
|
||||
const sdk = useSDK()
|
||||
const local = useLocal()
|
||||
const toast = useToast()
|
||||
const dimensions = useTerminalDimensions()
|
||||
const [toDelete, setToDelete] = createSignal<string>()
|
||||
const [search, setSearch] = createDebouncedSignal("", 150)
|
||||
const deleteHint = useCommandShortcut("session.delete")
|
||||
const quickSwitch1 = useCommandShortcut("session.quick_switch.1")
|
||||
const quickSwitch9 = useCommandShortcut("session.quick_switch.9")
|
||||
let select: DialogSelectRef<string> | undefined
|
||||
|
||||
const [searchResults, { refetch }] = createResource(
|
||||
() => ({ query: search(), filter: sync.session.query() }),
|
||||
async (input) => {
|
||||
if (!input.query) return undefined
|
||||
const result = await sdk.client.session.list({ search: input.query, limit: 30, ...input.filter })
|
||||
return result.data ?? []
|
||||
},
|
||||
)
|
||||
|
||||
const currentSessionID = createMemo(() => (route.data.type === "session" ? route.data.sessionID : undefined))
|
||||
const sessions = createMemo(() => searchResults() ?? sync.data.session)
|
||||
const [focusedSession, setFocusedSession, scheduleFocused] = createLeadingTrailingSignal<string | undefined>(
|
||||
undefined,
|
||||
150,
|
||||
)
|
||||
const focusedSessionInfo = createMemo(() => {
|
||||
const id = focusedSession()
|
||||
if (!id) return undefined
|
||||
return sessions().find((session) => session.id === id) ?? sync.data.session.find((session) => session.id === id)
|
||||
})
|
||||
|
||||
function recoverFailed(session: NonNullable<ReturnType<typeof sessions>[number]>) {
|
||||
const workspace = project.workspace.get(session.workspaceID!)
|
||||
const list = () => dialog.replace(() => <SessionSwitcherDialog />)
|
||||
const warp = async (selection: WorkspaceSelection) => {
|
||||
const workspaceID = await (async () => {
|
||||
if (selection.type === "none") return null
|
||||
if (selection.type === "existing") return selection.workspaceID
|
||||
const result = await sdk.client.experimental.workspace
|
||||
.create({ type: selection.workspaceType, branch: null })
|
||||
.catch(() => undefined)
|
||||
const created = result?.data
|
||||
if (!created) {
|
||||
toast.show({
|
||||
message: `Failed to create workspace: ${errorMessage(result?.error ?? "no response")}`,
|
||||
variant: "error",
|
||||
})
|
||||
return
|
||||
}
|
||||
await project.workspace.sync()
|
||||
return created.id
|
||||
})()
|
||||
if (workspaceID === undefined) return
|
||||
await warpWorkspaceSession({
|
||||
dialog,
|
||||
sdk,
|
||||
sync,
|
||||
project,
|
||||
toast,
|
||||
sourceWorkspaceID: session.workspaceID,
|
||||
workspaceID,
|
||||
sessionID: session.id,
|
||||
copyChanges: false,
|
||||
done: list,
|
||||
})
|
||||
}
|
||||
dialog.replace(() => (
|
||||
<DialogSessionDeleteFailed
|
||||
session={session.title}
|
||||
workspace={workspace?.name ?? session.workspaceID!}
|
||||
onDone={list}
|
||||
onDelete={async () => {
|
||||
const current = currentSessionID()
|
||||
const info = current ? sync.data.session.find((item) => item.id === current) : undefined
|
||||
const result = await sdk.client.experimental.workspace.remove({ id: session.workspaceID! })
|
||||
if (result.error) {
|
||||
toast.show({
|
||||
variant: "error",
|
||||
title: "Failed to delete workspace",
|
||||
message: errorMessage(result.error),
|
||||
})
|
||||
return false
|
||||
}
|
||||
await project.workspace.sync()
|
||||
await sync.session.refresh()
|
||||
if (search()) await refetch()
|
||||
if (info?.workspaceID === session.workspaceID) {
|
||||
route.navigate({ type: "home" })
|
||||
}
|
||||
return true
|
||||
}}
|
||||
onRestore={() => {
|
||||
void openWorkspaceSelect({
|
||||
dialog,
|
||||
sdk,
|
||||
sync,
|
||||
project,
|
||||
toast,
|
||||
onSelect: (selection) => {
|
||||
void warp(selection)
|
||||
},
|
||||
})
|
||||
return false
|
||||
}}
|
||||
/>
|
||||
))
|
||||
}
|
||||
|
||||
function orderByRecency(sessionsList: NonNullable<ReturnType<typeof sessions>>) {
|
||||
return sessionsList
|
||||
.filter((x) => x.parentID === undefined)
|
||||
.toSorted((a, b) => b.time.updated - a.time.updated)
|
||||
.map((x) => x.id)
|
||||
}
|
||||
|
||||
const [browseOrder] = createSignal<string[]>(orderByRecency(sync.data.session))
|
||||
|
||||
const quickSwitchHint = createMemo(() => {
|
||||
const first = quickSwitch1()
|
||||
const last = quickSwitch9()
|
||||
if (!first || !last) return undefined
|
||||
return quickSwitchRange(first, last)
|
||||
})
|
||||
const options = createMemo<DialogSelectOption<string>[]>(() => {
|
||||
const today = new Date().toDateString()
|
||||
const sessionMap = new Map(
|
||||
sessions()
|
||||
.filter((x) => x.parentID === undefined)
|
||||
.map((x) => [x.id, x]),
|
||||
)
|
||||
|
||||
const searchResult = searchResults()
|
||||
const displayOrder = searchResult ? orderByRecency(searchResult) : browseOrder()
|
||||
|
||||
const pinned = local.session.pinned().filter((id) => sessionMap.has(id))
|
||||
const pinnedSet = new Set(pinned)
|
||||
const slotByID = new Map<string, number>(local.session.slots().map((id, i) => [id, i + 1]))
|
||||
|
||||
function buildOption(id: string, category: string): DialogSelectOption<string> | undefined {
|
||||
const x = sessionMap.get(id)
|
||||
if (!x) return undefined
|
||||
const workspace = x.workspaceID ? project.workspace.get(x.workspaceID) : undefined
|
||||
|
||||
const footer = relativeTime(x.time.updated)
|
||||
const isWorktree = workspace?.type === "worktree"
|
||||
|
||||
const isDeleting = toDelete() === x.id
|
||||
const status = sync.data.session_status?.[x.id]
|
||||
const isWorking = status?.type === "busy" || status?.type === "retry"
|
||||
const slot = slotByID.get(x.id)
|
||||
const gutter =
|
||||
slot !== undefined || isWorking
|
||||
? () => (
|
||||
<box flexDirection="row" gap={1}>
|
||||
<Show when={slot !== undefined}>
|
||||
<text fg={theme.accent}>{slot}</text>
|
||||
</Show>
|
||||
<Show when={isWorking}>
|
||||
<Spinner />
|
||||
</Show>
|
||||
</box>
|
||||
)
|
||||
: undefined
|
||||
const titleText = isDeleting ? `Press ${deleteHint()} again to confirm` : isWorktree ? `⎇ ${x.title}` : x.title
|
||||
return {
|
||||
title: titleText,
|
||||
bg: isDeleting ? theme.error : undefined,
|
||||
value: x.id,
|
||||
category,
|
||||
categoryView:
|
||||
category === "Pinned" ? (
|
||||
<text>
|
||||
<span style={{ fg: theme.accent }}>
|
||||
<b>Pinned</b>
|
||||
</span>
|
||||
<Show when={quickSwitchHint()}>
|
||||
{(hint) => <span style={{ fg: theme.textMuted }}> · switch {hint()}</span>}
|
||||
</Show>
|
||||
</text>
|
||||
) : undefined,
|
||||
footer,
|
||||
gutter,
|
||||
}
|
||||
}
|
||||
|
||||
const remaining = displayOrder
|
||||
.filter((id) => !pinnedSet.has(id))
|
||||
.map((id) => {
|
||||
const x = sessionMap.get(id)
|
||||
if (!x) return undefined
|
||||
const label = new Date(x.time.updated).toDateString()
|
||||
return buildOption(id, label === today ? "Today" : label)
|
||||
})
|
||||
.filter((x): x is DialogSelectOption<string> => x !== undefined)
|
||||
|
||||
return [
|
||||
...pinned.map((id) => buildOption(id, "Pinned")).filter((x): x is DialogSelectOption<string> => x !== undefined),
|
||||
...remaining,
|
||||
]
|
||||
})
|
||||
|
||||
createEffect(
|
||||
on([options, currentSessionID], ([items, current]) => {
|
||||
const selected = untrack(() => select?.selected)
|
||||
const selectedID = selected && items.some((item) => item.value === selected.value) ? selected.value : undefined
|
||||
const currentID = current && items.some((item) => item.value === current) ? current : undefined
|
||||
setFocusedSession(selectedID ?? currentID ?? items[0]?.value)
|
||||
}),
|
||||
)
|
||||
|
||||
const showPreview = createMemo(() => dimensions().width >= 100)
|
||||
const height = createMemo(() => Math.max(8, Math.floor(dimensions().height / 2) - 4))
|
||||
|
||||
createEffect(() => {
|
||||
dialog.setSize(showPreview() ? "xlarge" : "large")
|
||||
})
|
||||
|
||||
const list = (
|
||||
<DialogSelect
|
||||
ref={(value) => (select = value)}
|
||||
title="Sessions"
|
||||
options={options()}
|
||||
skipFilter={true}
|
||||
current={currentSessionID()}
|
||||
onFilter={setSearch}
|
||||
onMove={(option) => {
|
||||
setToDelete(undefined)
|
||||
scheduleFocused(option.value)
|
||||
}}
|
||||
onSelect={(option) => {
|
||||
route.navigate({
|
||||
type: "session",
|
||||
sessionID: option.value,
|
||||
})
|
||||
dialog.clear()
|
||||
}}
|
||||
actions={[
|
||||
{
|
||||
command: "session.pin.toggle",
|
||||
title: "pin/unpin",
|
||||
onTrigger: (option: { value: string }) => {
|
||||
local.session.togglePin(option.value)
|
||||
queueMicrotask(() => select?.moveTo(option.value))
|
||||
},
|
||||
},
|
||||
{
|
||||
command: "session.delete",
|
||||
title: "delete",
|
||||
onTrigger: async (option) => {
|
||||
if (toDelete() === option.value) {
|
||||
const session = sessions().find((item) => item.id === option.value)
|
||||
const status = session?.workspaceID ? project.workspace.status(session.workspaceID) : undefined
|
||||
|
||||
try {
|
||||
const result = await sdk.client.session.delete({
|
||||
sessionID: option.value,
|
||||
})
|
||||
if (result.error) {
|
||||
if (session?.workspaceID) {
|
||||
recoverFailed(session)
|
||||
} else {
|
||||
toast.show({
|
||||
variant: "error",
|
||||
title: "Failed to delete session",
|
||||
message: errorMessage(result.error),
|
||||
})
|
||||
}
|
||||
setToDelete(undefined)
|
||||
return
|
||||
}
|
||||
} catch (err) {
|
||||
if (session?.workspaceID) {
|
||||
recoverFailed(session)
|
||||
} else {
|
||||
toast.show({
|
||||
variant: "error",
|
||||
title: "Failed to delete session",
|
||||
message: errorMessage(err),
|
||||
})
|
||||
}
|
||||
setToDelete(undefined)
|
||||
return
|
||||
}
|
||||
if (status && status !== "connected") {
|
||||
await sync.session.refresh()
|
||||
}
|
||||
if (search()) await refetch()
|
||||
setToDelete(undefined)
|
||||
return
|
||||
}
|
||||
setToDelete(option.value)
|
||||
},
|
||||
},
|
||||
{
|
||||
command: "session.rename",
|
||||
title: "rename",
|
||||
onTrigger: async (option) => {
|
||||
dialog.replace(() => <DialogSessionRename session={option.value} />)
|
||||
},
|
||||
},
|
||||
]}
|
||||
/>
|
||||
)
|
||||
|
||||
return (
|
||||
<box flexDirection="row" width="100%" height={height()}>
|
||||
<box flexBasis={showPreview() ? 68 : undefined} flexGrow={showPreview() ? 0 : 1} flexShrink={0}>
|
||||
{list}
|
||||
</box>
|
||||
<Show when={showPreview()}>
|
||||
<box width={1} height={height() - 1} flexShrink={0} border={["left"]} borderColor={theme.borderSubtle} />
|
||||
<box flexGrow={1} flexShrink={1} flexDirection="column">
|
||||
<SessionPreviewPane sessionID={focusedSession} session={focusedSessionInfo} />
|
||||
</box>
|
||||
</Show>
|
||||
</box>
|
||||
)
|
||||
}
|
||||
|
||||
function quickSwitchRange(first: string, last: string) {
|
||||
const prefix = first.slice(0, -1)
|
||||
if (first.endsWith("1") && last === `${prefix}9`) return `${prefix}1-9`
|
||||
return `${first} through ${last}`
|
||||
}
|
||||
32
packages/tui/src/feature-plugins/session/index.tsx
Normal file
32
packages/tui/src/feature-plugins/session/index.tsx
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import type { TuiPlugin } from "@opencode-ai/plugin/tui"
|
||||
import type { BuiltinTuiPlugin } from "../builtins"
|
||||
import { SessionSwitcherDialog } from "./dialog"
|
||||
|
||||
const id = "internal:session-switcher"
|
||||
|
||||
const tui: TuiPlugin = async (api) => {
|
||||
api.keymap.registerLayer({
|
||||
priority: 1000,
|
||||
commands: [
|
||||
{
|
||||
name: "session.list",
|
||||
title: "Switch session",
|
||||
category: "Session",
|
||||
namespace: "palette",
|
||||
suggested: () => api.state.session.count() > 0,
|
||||
slashName: "sessions",
|
||||
slashAliases: ["resume", "continue"],
|
||||
run() {
|
||||
api.ui.dialog.replace(() => <SessionSwitcherDialog />)
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
}
|
||||
|
||||
const plugin: BuiltinTuiPlugin = {
|
||||
id,
|
||||
tui,
|
||||
}
|
||||
|
||||
export default plugin
|
||||
288
packages/tui/src/feature-plugins/session/preview-pane.tsx
Normal file
288
packages/tui/src/feature-plugins/session/preview-pane.tsx
Normal file
|
|
@ -0,0 +1,288 @@
|
|||
import { createResource, Show, createMemo, createSignal, onMount, type Accessor, type JSX } from "solid-js"
|
||||
import { TextAttributes } from "@opentui/core"
|
||||
import { useTerminalDimensions } from "@opentui/solid"
|
||||
import { debounce, leadingAndTrailing } from "@solid-primitives/scheduled"
|
||||
import type { Message, Part, Session as SdkSession } from "@opencode-ai/sdk/v2"
|
||||
import { useTheme } from "../../context/theme"
|
||||
import { useSDK } from "../../context/sdk"
|
||||
import { useSync } from "../../context/sync"
|
||||
import { Locale } from "../../util/locale"
|
||||
import { Spinner } from "../../component/spinner"
|
||||
import { extractMessageMarkdown, extractMessageText, relativeTime } from "./util"
|
||||
|
||||
type WithParts = { info: Message; parts: Part[] }
|
||||
|
||||
type Sdk = ReturnType<typeof useSDK>
|
||||
type Sync = ReturnType<typeof useSync>
|
||||
|
||||
const messageCache = new Map<string, Promise<WithParts[]>>()
|
||||
|
||||
function cacheKey(sessionID: string, version: number) {
|
||||
return `${sessionID}:${version}`
|
||||
}
|
||||
|
||||
function hydrateFromSync(sync: Sync, sessionID: string): WithParts[] | undefined {
|
||||
const infos = sync.data.message[sessionID]
|
||||
if (!infos || infos.length === 0) return undefined
|
||||
return infos.map((info) => ({ info, parts: sync.data.part[info.id] ?? [] }))
|
||||
}
|
||||
|
||||
function loadMessages(sdk: Sdk, sessionID: string, version: number): Promise<WithParts[]> {
|
||||
const key = cacheKey(sessionID, version)
|
||||
const cached = messageCache.get(key)
|
||||
if (cached) return cached
|
||||
|
||||
const promise = sdk.client.session
|
||||
.messages({ sessionID, limit: 50 })
|
||||
.then((res) => {
|
||||
if (res.error) throw res.error
|
||||
return (res.data as WithParts[] | undefined) ?? []
|
||||
})
|
||||
.catch((error) => {
|
||||
messageCache.delete(key)
|
||||
throw error
|
||||
})
|
||||
messageCache.set(key, promise)
|
||||
return promise
|
||||
}
|
||||
|
||||
export function prefetchPreviews(sdk: Sdk, sync: Sync, sessionIDs: readonly string[]) {
|
||||
for (const id of sessionIDs) {
|
||||
const version = sync.data.session.find((session) => session.id === id)?.time.updated ?? 0
|
||||
if (!hydrateFromSync(sync, id)) loadMessages(sdk, id, version).catch(() => {})
|
||||
}
|
||||
}
|
||||
|
||||
export function createLeadingTrailingSignal<T>(initial: T, ms: number): [Accessor<T>, (v: T) => void, (v: T) => void] {
|
||||
const [get, set] = createSignal(initial)
|
||||
const setNow = (v: T) => set(() => v)
|
||||
const schedule = leadingAndTrailing(debounce, setNow, ms)
|
||||
return [get, setNow, schedule]
|
||||
}
|
||||
|
||||
export function SessionPreviewPane(props: {
|
||||
sessionID: Accessor<string | undefined>
|
||||
session?: Accessor<SdkSession | undefined>
|
||||
}) {
|
||||
const { theme } = useTheme()
|
||||
const sdk = useSDK()
|
||||
const sync = useSync()
|
||||
const dimensions = useTerminalDimensions()
|
||||
|
||||
const maxHeight = createMemo(() => Math.max(8, Math.floor(dimensions().height / 2) - 4))
|
||||
const session = createMemo(() => {
|
||||
const provided = props.session?.()
|
||||
if (provided) return provided
|
||||
const id = props.sessionID()
|
||||
if (!id) return undefined
|
||||
return sync.data.session.find((s) => s.id === id)
|
||||
})
|
||||
|
||||
const status = createMemo(() => {
|
||||
const id = props.sessionID()
|
||||
if (!id) return undefined
|
||||
return sync.data.session_status?.[id]?.type
|
||||
})
|
||||
|
||||
onMount(() => {
|
||||
const top = sync.data.session
|
||||
.filter((s) => s.parentID === undefined)
|
||||
.slice()
|
||||
.sort((a, b) => b.time.updated - a.time.updated)
|
||||
.slice(0, 5)
|
||||
.map((s) => s.id)
|
||||
prefetchPreviews(sdk, sync, top)
|
||||
})
|
||||
|
||||
const syncedMessages = createMemo(() => {
|
||||
const id = props.sessionID()
|
||||
if (!id) return undefined
|
||||
return hydrateFromSync(sync, id)
|
||||
})
|
||||
|
||||
const [fetchedMessages] = createResource(
|
||||
() => {
|
||||
const id = props.sessionID()
|
||||
if (!id || syncedMessages()) return undefined
|
||||
return { sessionID: id, version: session()?.time.updated ?? 0 }
|
||||
},
|
||||
async (input) => loadMessages(sdk, input.sessionID, input.version),
|
||||
)
|
||||
|
||||
const messages = createMemo(() => syncedMessages() ?? fetchedMessages() ?? [])
|
||||
|
||||
const exchange = createMemo(() => {
|
||||
const items = messages()
|
||||
if (!items || items.length === 0) return undefined
|
||||
const sorted = items.toSorted((a, b) => messageCreated(a) - messageCreated(b))
|
||||
const user = sorted.findLast((item) => messageRole(item) === "user")
|
||||
const assistant = user
|
||||
? sorted.findLast((item) => messageRole(item) === "assistant" && messageParentID(item) === user.info.id)
|
||||
: sorted.findLast((item) => messageRole(item) === "assistant")
|
||||
return { user, assistant }
|
||||
})
|
||||
|
||||
const loading = createMemo(() => fetchedMessages.loading && !exchange())
|
||||
|
||||
const statusLabel = createMemo(() => {
|
||||
const s = status()
|
||||
if (s === "busy") return "working"
|
||||
if (s === "retry") return "retrying"
|
||||
return "idle"
|
||||
})
|
||||
|
||||
return (
|
||||
<box
|
||||
flexDirection="column"
|
||||
paddingLeft={2}
|
||||
paddingRight={2}
|
||||
paddingTop={1}
|
||||
paddingBottom={1}
|
||||
gap={1}
|
||||
height={maxHeight()}
|
||||
overflow="hidden"
|
||||
>
|
||||
<Show
|
||||
when={session()}
|
||||
fallback={
|
||||
<text fg={theme.textMuted} wrapMode="word">
|
||||
No session selected
|
||||
</text>
|
||||
}
|
||||
>
|
||||
{(s) => (
|
||||
<>
|
||||
<Header session={s()} statusLabel={statusLabel()} />
|
||||
<Show when={loading()}>
|
||||
<Spinner>loading preview...</Spinner>
|
||||
</Show>
|
||||
<Show
|
||||
when={exchange()}
|
||||
fallback={
|
||||
<Show when={!loading()}>
|
||||
<text fg={theme.textMuted} wrapMode="word">
|
||||
{fetchedMessages.error ? "Preview unavailable" : "No messages yet"}
|
||||
</text>
|
||||
</Show>
|
||||
}
|
||||
>
|
||||
{(ex) => <Exchange exchange={ex()} />}
|
||||
</Show>
|
||||
</>
|
||||
)}
|
||||
</Show>
|
||||
</box>
|
||||
)
|
||||
}
|
||||
|
||||
function messageRole(item: WithParts) {
|
||||
return (item.info as { role?: string }).role
|
||||
}
|
||||
|
||||
function messageCreated(item: WithParts) {
|
||||
return (item.info.time as { created?: number }).created ?? 0
|
||||
}
|
||||
|
||||
function messageParentID(item: WithParts) {
|
||||
return (item.info as { parentID?: string }).parentID
|
||||
}
|
||||
|
||||
const ROW_WIDTH = 40
|
||||
|
||||
function Header(props: { session: SdkSession; statusLabel: string }) {
|
||||
const { theme } = useTheme()
|
||||
const title = createMemo(() => Locale.truncate(props.session.title, ROW_WIDTH))
|
||||
const statusRest = createMemo(() => {
|
||||
const joined = ` · ${relativeTime(props.session.time.updated)}`
|
||||
return Locale.truncate(joined, Math.max(0, ROW_WIDTH - props.statusLabel.length))
|
||||
})
|
||||
|
||||
return (
|
||||
<box flexDirection="column" gap={0} flexShrink={0}>
|
||||
<Row height={1}>
|
||||
<text fg={theme.text} attributes={TextAttributes.BOLD} wrapMode="none" overflow="hidden">
|
||||
{title()}
|
||||
</text>
|
||||
</Row>
|
||||
<Row height={1}>
|
||||
<text fg={theme.textMuted} wrapMode="none" overflow="hidden">
|
||||
<span>{props.statusLabel}</span>
|
||||
<span>{statusRest()}</span>
|
||||
</text>
|
||||
</Row>
|
||||
</box>
|
||||
)
|
||||
}
|
||||
|
||||
function Row(props: { height: number; children: JSX.Element }) {
|
||||
return (
|
||||
<box height={props.height} flexShrink={0} overflow="hidden">
|
||||
{props.children}
|
||||
</box>
|
||||
)
|
||||
}
|
||||
|
||||
const PROMPT_MAX_CHARS = 240
|
||||
const REPLY_MAX_LINES = 12
|
||||
const REPLY_MAX_CHARS = 800
|
||||
|
||||
function Exchange(props: { exchange: { user?: WithParts; assistant?: WithParts } }) {
|
||||
const { theme, syntax } = useTheme()
|
||||
const userText = createMemo(() =>
|
||||
props.exchange.user ? extractMessageText(props.exchange.user.parts, PROMPT_MAX_CHARS) : undefined,
|
||||
)
|
||||
const assistantMarkdown = createMemo(() =>
|
||||
props.exchange.assistant
|
||||
? extractMessageMarkdown(props.exchange.assistant.parts, REPLY_MAX_LINES, REPLY_MAX_CHARS)
|
||||
: undefined,
|
||||
)
|
||||
|
||||
return (
|
||||
<box flexDirection="column" gap={1}>
|
||||
<Show when={userText()}>
|
||||
<text fg={theme.textMuted} wrapMode="word">
|
||||
<span style={{ fg: theme.textMuted }}>› </span>
|
||||
{userText()!}
|
||||
</text>
|
||||
</Show>
|
||||
<Show when={assistantMarkdown()}>
|
||||
<markdown
|
||||
content={assistantMarkdown()!}
|
||||
syntaxStyle={syntax()}
|
||||
streaming={false}
|
||||
internalBlockMode="top-level"
|
||||
tableOptions={{ style: "columns" }}
|
||||
conceal={false}
|
||||
fg={theme.markdownText}
|
||||
bg={theme.backgroundPanel}
|
||||
/>
|
||||
</Show>
|
||||
<Show when={!userText() && !assistantMarkdown()}>
|
||||
<NonTextHint exchange={props.exchange} />
|
||||
</Show>
|
||||
</box>
|
||||
)
|
||||
}
|
||||
|
||||
function NonTextHint(props: { exchange: { user?: WithParts; assistant?: WithParts } }) {
|
||||
const { theme } = useTheme()
|
||||
const summary = createMemo(() => {
|
||||
const counts: Record<string, number> = {}
|
||||
for (const item of [props.exchange.user, props.exchange.assistant]) {
|
||||
if (!item) continue
|
||||
for (const part of item.parts) {
|
||||
counts[part.type] = (counts[part.type] ?? 0) + 1
|
||||
}
|
||||
}
|
||||
return Object.entries(counts)
|
||||
.map(([k, n]) => `${n} ${k}`)
|
||||
.join(", ")
|
||||
})
|
||||
return (
|
||||
<text fg={theme.textMuted} wrapMode="word">
|
||||
<Show when={summary()} fallback="No text content in the latest messages">
|
||||
Latest exchange has no text content ({summary()})
|
||||
</Show>
|
||||
</text>
|
||||
)
|
||||
}
|
||||
54
packages/tui/src/feature-plugins/session/util.tsx
Normal file
54
packages/tui/src/feature-plugins/session/util.tsx
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
import type { Part } from "@opencode-ai/sdk/v2"
|
||||
import { Locale } from "../../util/locale"
|
||||
|
||||
export function relativeTime(timestamp: number): string {
|
||||
const diff = Date.now() - timestamp
|
||||
if (diff < 0) return "just now"
|
||||
const seconds = Math.floor(diff / 1000)
|
||||
if (seconds < 60) return "just now"
|
||||
const minutes = Math.floor(seconds / 60)
|
||||
if (minutes < 60) return `${minutes}m ago`
|
||||
const hours = Math.floor(minutes / 60)
|
||||
if (hours < 24) return `${hours}h ago`
|
||||
const days = Math.floor(hours / 24)
|
||||
if (days < 7) return `${days}d ago`
|
||||
const d = new Date(timestamp)
|
||||
return d.toLocaleDateString(undefined, { month: "short", day: "numeric" })
|
||||
}
|
||||
|
||||
export function extractMessageText(parts: readonly Part[], maxLength: number): string {
|
||||
const joined = collectTextParts(parts).join(" ").replace(/\s+/g, " ").trim()
|
||||
return Locale.truncate(joined, maxLength)
|
||||
}
|
||||
|
||||
export function extractMessageMarkdown(parts: readonly Part[], maxLines: number, maxChars: number): string {
|
||||
const joined = collectTextParts(parts).join("\n\n").trim()
|
||||
if (!joined) return joined
|
||||
|
||||
let truncated = joined
|
||||
const lines = truncated.split("\n")
|
||||
if (lines.length > maxLines) {
|
||||
truncated = lines.slice(0, maxLines).join("\n")
|
||||
}
|
||||
if (truncated.length > maxChars) {
|
||||
truncated = truncated.slice(0, maxChars).trimEnd()
|
||||
}
|
||||
if (truncated.length === joined.length) return joined
|
||||
// Close any unterminated fenced code block so the renderer doesn't keep
|
||||
// the rest of the panel in "code mode".
|
||||
const fences = (truncated.match(/^```/gm) ?? []).length
|
||||
if (fences % 2 === 1) truncated += "\n```"
|
||||
return truncated + "\n\n…"
|
||||
}
|
||||
|
||||
function collectTextParts(parts: readonly Part[]): string[] {
|
||||
const chunks: string[] = []
|
||||
for (const part of parts) {
|
||||
if (part.type !== "text") continue
|
||||
const p = part as Part & { type: "text"; text: string; synthetic?: boolean; ignored?: boolean }
|
||||
if (p.synthetic || p.ignored) continue
|
||||
if (!p.text) continue
|
||||
chunks.push(p.text)
|
||||
}
|
||||
return chunks
|
||||
}
|
||||
65
packages/tui/src/feature-plugins/sidebar/context.tsx
Normal file
65
packages/tui/src/feature-plugins/sidebar/context.tsx
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
import type { AssistantMessage } from "@opencode-ai/sdk/v2"
|
||||
import type { TuiPlugin, TuiPluginApi } from "@opencode-ai/plugin/tui"
|
||||
import type { BuiltinTuiPlugin } from "../builtins"
|
||||
import { createMemo } from "solid-js"
|
||||
|
||||
const id = "internal:sidebar-context"
|
||||
|
||||
const money = new Intl.NumberFormat("en-US", {
|
||||
style: "currency",
|
||||
currency: "USD",
|
||||
})
|
||||
|
||||
function View(props: { api: TuiPluginApi; session_id: string }) {
|
||||
const theme = () => props.api.theme.current
|
||||
const msg = createMemo(() => props.api.state.session.messages(props.session_id))
|
||||
const session = createMemo(() => props.api.state.session.get(props.session_id))
|
||||
const cost = createMemo(() => session()?.cost ?? 0)
|
||||
|
||||
const state = createMemo(() => {
|
||||
const last = msg().findLast((item): item is AssistantMessage => item.role === "assistant" && item.tokens.output > 0)
|
||||
if (!last) {
|
||||
return {
|
||||
tokens: 0,
|
||||
percent: null,
|
||||
}
|
||||
}
|
||||
|
||||
const tokens =
|
||||
last.tokens.input + last.tokens.output + last.tokens.reasoning + last.tokens.cache.read + last.tokens.cache.write
|
||||
const model = props.api.state.provider.find((item) => item.id === last.providerID)?.models[last.modelID]
|
||||
return {
|
||||
tokens,
|
||||
percent: model?.limit.context ? Math.round((tokens / model.limit.context) * 100) : null,
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<box>
|
||||
<text fg={theme().text}>
|
||||
<b>Context</b>
|
||||
</text>
|
||||
<text fg={theme().textMuted}>{state().tokens.toLocaleString()} tokens</text>
|
||||
<text fg={theme().textMuted}>{state().percent ?? 0}% used</text>
|
||||
<text fg={theme().textMuted}>{money.format(cost())} spent</text>
|
||||
</box>
|
||||
)
|
||||
}
|
||||
|
||||
const tui: TuiPlugin = async (api) => {
|
||||
api.slots.register({
|
||||
order: 100,
|
||||
slots: {
|
||||
sidebar_content(_ctx, props) {
|
||||
return <View api={api} session_id={props.session_id} />
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const plugin: BuiltinTuiPlugin = {
|
||||
id,
|
||||
tui,
|
||||
}
|
||||
|
||||
export default plugin
|
||||
70
packages/tui/src/feature-plugins/sidebar/files.tsx
Normal file
70
packages/tui/src/feature-plugins/sidebar/files.tsx
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
import type { TuiPlugin, TuiPluginApi } from "@opencode-ai/plugin/tui"
|
||||
import type { BuiltinTuiPlugin } from "../builtins"
|
||||
import { createMemo, For, Show, createSignal } from "solid-js"
|
||||
import { Locale } from "../../util/locale"
|
||||
|
||||
const id = "internal:sidebar-files"
|
||||
|
||||
function changeCountWidth(item: { additions: number; deletions: number }) {
|
||||
return [item.additions ? `+${item.additions}` : "", item.deletions ? `-${item.deletions}` : ""]
|
||||
.filter(Boolean)
|
||||
.join(" ").length
|
||||
}
|
||||
|
||||
function View(props: { api: TuiPluginApi; session_id: string }) {
|
||||
const [open, setOpen] = createSignal(true)
|
||||
const theme = () => props.api.theme.current
|
||||
const list = createMemo(() => props.api.state.session.diff(props.session_id))
|
||||
|
||||
return (
|
||||
<Show when={list().length > 0}>
|
||||
<box>
|
||||
<box flexDirection="row" gap={1} onMouseDown={() => list().length > 2 && setOpen((x) => !x)}>
|
||||
<Show when={list().length > 2}>
|
||||
<text fg={theme().text}>{open() ? "▼" : "▶"}</text>
|
||||
</Show>
|
||||
<text fg={theme().text}>
|
||||
<b>Modified Files</b>
|
||||
</text>
|
||||
</box>
|
||||
<Show when={list().length <= 2 || open()}>
|
||||
<For each={list()}>
|
||||
{(item) => (
|
||||
<box flexDirection="row" gap={1} justifyContent="space-between">
|
||||
<text fg={theme().textMuted} wrapMode="none">
|
||||
{Locale.truncateLeft(item.file, Math.max(2, 36 - changeCountWidth(item)))}
|
||||
</text>
|
||||
<box flexDirection="row" gap={1} flexShrink={0}>
|
||||
<Show when={item.additions}>
|
||||
<text fg={theme().diffAdded}>+{item.additions}</text>
|
||||
</Show>
|
||||
<Show when={item.deletions}>
|
||||
<text fg={theme().diffRemoved}>-{item.deletions}</text>
|
||||
</Show>
|
||||
</box>
|
||||
</box>
|
||||
)}
|
||||
</For>
|
||||
</Show>
|
||||
</box>
|
||||
</Show>
|
||||
)
|
||||
}
|
||||
|
||||
const tui: TuiPlugin = async (api) => {
|
||||
api.slots.register({
|
||||
order: 500,
|
||||
slots: {
|
||||
sidebar_content(_ctx, props) {
|
||||
return <View api={api} session_id={props.session_id} />
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const plugin: BuiltinTuiPlugin = {
|
||||
id,
|
||||
tui,
|
||||
}
|
||||
|
||||
export default plugin
|
||||
97
packages/tui/src/feature-plugins/sidebar/footer.tsx
Normal file
97
packages/tui/src/feature-plugins/sidebar/footer.tsx
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
import type { TuiPlugin, TuiPluginApi } from "@opencode-ai/plugin/tui"
|
||||
import type { BuiltinTuiPlugin } from "../builtins"
|
||||
import { createMemo, Show } from "solid-js"
|
||||
import { abbreviateHome, useTuiEnvironment } from "../../runtime"
|
||||
|
||||
const id = "internal:sidebar-footer"
|
||||
|
||||
function View(props: { api: TuiPluginApi; sessionID: string }) {
|
||||
const environment = useTuiEnvironment()
|
||||
const theme = () => props.api.theme.current
|
||||
const has = createMemo(() =>
|
||||
props.api.state.provider.some(
|
||||
(item) => item.id !== "opencode" || Object.values(item.models).some((model) => model.cost?.input !== 0),
|
||||
),
|
||||
)
|
||||
const done = createMemo(() => props.api.kv.get("dismissed_getting_started", false))
|
||||
const show = createMemo(() => !has() && !done())
|
||||
const path = createMemo(() => {
|
||||
const session = props.api.state.session.get(props.sessionID)
|
||||
const dir = session?.directory || props.api.state.path.directory || environment.cwd
|
||||
const out = abbreviateHome(dir, environment.paths.home)
|
||||
const branch = session?.directory === props.api.state.path.directory ? props.api.state.vcs?.branch : undefined
|
||||
const text = branch ? out + ":" + branch : out
|
||||
const list = text.split("/")
|
||||
return {
|
||||
parent: list.slice(0, -1).join("/"),
|
||||
name: list.at(-1) ?? "",
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<box gap={1}>
|
||||
<Show when={show()}>
|
||||
<box
|
||||
backgroundColor={theme().backgroundElement}
|
||||
paddingTop={1}
|
||||
paddingBottom={1}
|
||||
paddingLeft={2}
|
||||
paddingRight={2}
|
||||
flexDirection="row"
|
||||
gap={1}
|
||||
>
|
||||
<text flexShrink={0} fg={theme().text}>
|
||||
⬖
|
||||
</text>
|
||||
<box flexGrow={1} gap={1}>
|
||||
<box flexDirection="row" justifyContent="space-between">
|
||||
<text fg={theme().text}>
|
||||
<b>Getting started</b>
|
||||
</text>
|
||||
<text fg={theme().textMuted} onMouseDown={() => props.api.kv.set("dismissed_getting_started", true)}>
|
||||
✕
|
||||
</text>
|
||||
</box>
|
||||
<text fg={theme().textMuted}>OpenCode includes free models so you can start immediately.</text>
|
||||
<text fg={theme().textMuted}>
|
||||
Connect from 75+ providers to use other models, including Claude, GPT, Gemini etc
|
||||
</text>
|
||||
<box flexDirection="row" gap={1} justifyContent="space-between">
|
||||
<text fg={theme().text}>Connect provider</text>
|
||||
<text fg={theme().textMuted}>/connect</text>
|
||||
</box>
|
||||
</box>
|
||||
</box>
|
||||
</Show>
|
||||
<text>
|
||||
<span style={{ fg: theme().textMuted }}>{path().parent}/</span>
|
||||
<span style={{ fg: theme().text }}>{path().name}</span>
|
||||
</text>
|
||||
<text fg={theme().textMuted}>
|
||||
<span style={{ fg: theme().success }}>•</span> <b>Open</b>
|
||||
<span style={{ fg: theme().text }}>
|
||||
<b>Code</b>
|
||||
</span>{" "}
|
||||
<span>{props.api.app.version}</span>
|
||||
</text>
|
||||
</box>
|
||||
)
|
||||
}
|
||||
|
||||
const tui: TuiPlugin = async (api) => {
|
||||
api.slots.register({
|
||||
order: 100,
|
||||
slots: {
|
||||
sidebar_footer(_ctx, props) {
|
||||
return <View api={api} sessionID={props.session_id} />
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const plugin: BuiltinTuiPlugin = {
|
||||
id,
|
||||
tui,
|
||||
}
|
||||
|
||||
export default plugin
|
||||
65
packages/tui/src/feature-plugins/sidebar/lsp.tsx
Normal file
65
packages/tui/src/feature-plugins/sidebar/lsp.tsx
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
import type { TuiPlugin, TuiPluginApi } from "@opencode-ai/plugin/tui"
|
||||
import type { BuiltinTuiPlugin } from "../builtins"
|
||||
import { createMemo, For, Show, createSignal } from "solid-js"
|
||||
|
||||
const id = "internal:sidebar-lsp"
|
||||
|
||||
function View(props: { api: TuiPluginApi }) {
|
||||
const [open, setOpen] = createSignal(true)
|
||||
const theme = () => props.api.theme.current
|
||||
const list = createMemo(() => props.api.state.lsp())
|
||||
const off = createMemo(() => !props.api.state.config.lsp)
|
||||
|
||||
return (
|
||||
<box>
|
||||
<box flexDirection="row" gap={1} onMouseDown={() => list().length > 2 && setOpen((x) => !x)}>
|
||||
<Show when={list().length > 2}>
|
||||
<text fg={theme().text}>{open() ? "▼" : "▶"}</text>
|
||||
</Show>
|
||||
<text fg={theme().text}>
|
||||
<b>LSP</b>
|
||||
</text>
|
||||
</box>
|
||||
<Show when={list().length <= 2 || open()}>
|
||||
<Show when={list().length === 0}>
|
||||
<text fg={theme().textMuted}>{off() ? "LSPs are disabled" : "LSPs will activate as files are read"}</text>
|
||||
</Show>
|
||||
<For each={list()}>
|
||||
{(item) => (
|
||||
<box flexDirection="row" gap={1}>
|
||||
<text
|
||||
flexShrink={0}
|
||||
style={{
|
||||
fg: item.status === "connected" ? theme().success : theme().error,
|
||||
}}
|
||||
>
|
||||
•
|
||||
</text>
|
||||
<text fg={theme().textMuted}>
|
||||
{item.id} {item.root}
|
||||
</text>
|
||||
</box>
|
||||
)}
|
||||
</For>
|
||||
</Show>
|
||||
</box>
|
||||
)
|
||||
}
|
||||
|
||||
const tui: TuiPlugin = async (api) => {
|
||||
api.slots.register({
|
||||
order: 300,
|
||||
slots: {
|
||||
sidebar_content() {
|
||||
return <View api={api} />
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const plugin: BuiltinTuiPlugin = {
|
||||
id,
|
||||
tui,
|
||||
}
|
||||
|
||||
export default plugin
|
||||
97
packages/tui/src/feature-plugins/sidebar/mcp.tsx
Normal file
97
packages/tui/src/feature-plugins/sidebar/mcp.tsx
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
import type { TuiPlugin, TuiPluginApi } from "@opencode-ai/plugin/tui"
|
||||
import type { BuiltinTuiPlugin } from "../builtins"
|
||||
import { createMemo, For, Match, Show, Switch, createSignal } from "solid-js"
|
||||
|
||||
const id = "internal:sidebar-mcp"
|
||||
|
||||
function View(props: { api: TuiPluginApi }) {
|
||||
const [open, setOpen] = createSignal(true)
|
||||
const theme = () => props.api.theme.current
|
||||
const list = createMemo(() => props.api.state.mcp())
|
||||
const on = createMemo(() => list().filter((item) => item.status === "connected").length)
|
||||
const bad = createMemo(
|
||||
() =>
|
||||
list().filter(
|
||||
(item) =>
|
||||
item.status === "failed" || item.status === "needs_auth" || item.status === "needs_client_registration",
|
||||
).length,
|
||||
)
|
||||
|
||||
const dot = (status: string) => {
|
||||
if (status === "connected") return theme().success
|
||||
if (status === "failed") return theme().error
|
||||
if (status === "disabled") return theme().textMuted
|
||||
if (status === "needs_auth") return theme().warning
|
||||
if (status === "needs_client_registration") return theme().error
|
||||
return theme().textMuted
|
||||
}
|
||||
|
||||
return (
|
||||
<Show when={list().length > 0}>
|
||||
<box>
|
||||
<box flexDirection="row" gap={1} onMouseDown={() => list().length > 2 && setOpen((x) => !x)}>
|
||||
<Show when={list().length > 2}>
|
||||
<text fg={theme().text}>{open() ? "▼" : "▶"}</text>
|
||||
</Show>
|
||||
<text fg={theme().text}>
|
||||
<b>MCP</b>
|
||||
<Show when={!open()}>
|
||||
<span style={{ fg: theme().textMuted }}>
|
||||
{" "}
|
||||
({on()} active{bad() > 0 ? `, ${bad()} error${bad() > 1 ? "s" : ""}` : ""})
|
||||
</span>
|
||||
</Show>
|
||||
</text>
|
||||
</box>
|
||||
<Show when={list().length <= 2 || open()}>
|
||||
<For each={list()}>
|
||||
{(item) => (
|
||||
<box flexDirection="row" gap={1}>
|
||||
<text
|
||||
flexShrink={0}
|
||||
style={{
|
||||
fg: dot(item.status),
|
||||
}}
|
||||
>
|
||||
•
|
||||
</text>
|
||||
<text fg={theme().text} wrapMode="word">
|
||||
{item.name}{" "}
|
||||
<span style={{ fg: theme().textMuted }}>
|
||||
<Switch fallback={item.status}>
|
||||
<Match when={item.status === "connected"}>Connected</Match>
|
||||
<Match when={item.status === "failed"}>
|
||||
<i>{item.error}</i>
|
||||
</Match>
|
||||
<Match when={item.status === "disabled"}>Disabled</Match>
|
||||
<Match when={item.status === "needs_auth"}>Needs auth</Match>
|
||||
<Match when={item.status === "needs_client_registration"}>Needs client ID</Match>
|
||||
</Switch>
|
||||
</span>
|
||||
</text>
|
||||
</box>
|
||||
)}
|
||||
</For>
|
||||
</Show>
|
||||
</box>
|
||||
</Show>
|
||||
)
|
||||
}
|
||||
|
||||
const tui: TuiPlugin = async (api) => {
|
||||
api.slots.register({
|
||||
order: 200,
|
||||
slots: {
|
||||
sidebar_content() {
|
||||
return <View api={api} />
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const plugin: BuiltinTuiPlugin = {
|
||||
id,
|
||||
tui,
|
||||
}
|
||||
|
||||
export default plugin
|
||||
49
packages/tui/src/feature-plugins/sidebar/todo.tsx
Normal file
49
packages/tui/src/feature-plugins/sidebar/todo.tsx
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
import type { TuiPlugin, TuiPluginApi } from "@opencode-ai/plugin/tui"
|
||||
import type { BuiltinTuiPlugin } from "../builtins"
|
||||
import { createMemo, For, Show, createSignal } from "solid-js"
|
||||
import { TodoItem } from "../../component/todo-item"
|
||||
|
||||
const id = "internal:sidebar-todo"
|
||||
|
||||
function View(props: { api: TuiPluginApi; session_id: string }) {
|
||||
const [open, setOpen] = createSignal(true)
|
||||
const theme = () => props.api.theme.current
|
||||
const list = createMemo(() => props.api.state.session.todo(props.session_id))
|
||||
const show = createMemo(() => list().length > 0 && list().some((item) => item.status !== "completed"))
|
||||
|
||||
return (
|
||||
<Show when={show()}>
|
||||
<box>
|
||||
<box flexDirection="row" gap={1} onMouseDown={() => list().length > 2 && setOpen((x) => !x)}>
|
||||
<Show when={list().length > 2}>
|
||||
<text fg={theme().text}>{open() ? "▼" : "▶"}</text>
|
||||
</Show>
|
||||
<text fg={theme().text}>
|
||||
<b>Todo</b>
|
||||
</text>
|
||||
</box>
|
||||
<Show when={list().length <= 2 || open()}>
|
||||
<For each={list()}>{(item) => <TodoItem status={item.status} content={item.content} />}</For>
|
||||
</Show>
|
||||
</box>
|
||||
</Show>
|
||||
)
|
||||
}
|
||||
|
||||
const tui: TuiPlugin = async (api) => {
|
||||
api.slots.register({
|
||||
order: 400,
|
||||
slots: {
|
||||
sidebar_content(_ctx, props) {
|
||||
return <View api={api} session_id={props.session_id} />
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const plugin: BuiltinTuiPlugin = {
|
||||
id,
|
||||
tui,
|
||||
}
|
||||
|
||||
export default plugin
|
||||
|
|
@ -0,0 +1,232 @@
|
|||
// Paths branch softly through the screen,
|
||||
// A quiet tree of changed designs;
|
||||
// Each leaf remembers what has been,
|
||||
// And waits where careful light aligns.
|
||||
|
||||
export type FileTreeItem = {
|
||||
readonly file: string
|
||||
readonly status?: "added" | "deleted" | "modified"
|
||||
}
|
||||
|
||||
export type FileTreeNode = {
|
||||
readonly id: number
|
||||
readonly name: string
|
||||
readonly parent: number | undefined
|
||||
readonly children: number[]
|
||||
readonly depth: number
|
||||
readonly kind: "directory" | "file"
|
||||
readonly fileIndex?: number
|
||||
}
|
||||
|
||||
export type FileTree = {
|
||||
readonly roots: number[]
|
||||
readonly nodes: FileTreeNode[]
|
||||
}
|
||||
|
||||
export type FileTreeRow = {
|
||||
readonly id: number
|
||||
readonly depth: number
|
||||
readonly kind: "directory" | "file"
|
||||
readonly name: string
|
||||
readonly fileIndex?: number
|
||||
}
|
||||
|
||||
export function buildFileTree(files: readonly FileTreeItem[]): FileTree {
|
||||
const roots: number[] = []
|
||||
const nodes: FileTreeNode[] = []
|
||||
const directoryByPath = new Map<string, number>()
|
||||
|
||||
files.forEach((file, fileIndex) => {
|
||||
const segments = file.file.split("/").filter(Boolean)
|
||||
if (segments.length === 0) return
|
||||
|
||||
const parent = segments.slice(0, -1).reduce(
|
||||
(state, segment) => {
|
||||
const directoryPath = state.path ? `${state.path}/${segment}` : segment
|
||||
const existing = directoryByPath.get(directoryPath)
|
||||
if (existing !== undefined) return { id: existing, path: directoryPath, depth: state.depth + 1 }
|
||||
|
||||
const id = addFileTreeNode(nodes, roots, {
|
||||
name: segment,
|
||||
parent: state.id,
|
||||
depth: state.depth,
|
||||
kind: "directory",
|
||||
})
|
||||
directoryByPath.set(directoryPath, id)
|
||||
return { id, path: directoryPath, depth: state.depth + 1 }
|
||||
},
|
||||
{ id: undefined as number | undefined, path: "", depth: 0 },
|
||||
)
|
||||
|
||||
addFileTreeNode(nodes, roots, {
|
||||
name: segments[segments.length - 1]!,
|
||||
parent: parent.id,
|
||||
depth: parent.depth,
|
||||
kind: "file",
|
||||
fileIndex,
|
||||
})
|
||||
})
|
||||
|
||||
const tree = { roots, nodes }
|
||||
tree.roots.sort((left, right) => compareFileTreeNodes(tree, left, right))
|
||||
tree.nodes.forEach((node) => node.children.sort((left, right) => compareFileTreeNodes(tree, left, right)))
|
||||
return tree
|
||||
}
|
||||
|
||||
export function flattenFileTree(tree: FileTree, expanded?: ReadonlySet<number>): FileTreeRow[] {
|
||||
const rows: FileTreeRow[] = []
|
||||
const visit = (id: number, depth: number) => {
|
||||
const node = tree.nodes[id]!
|
||||
if (node.kind === "file") {
|
||||
rows.push({
|
||||
id: node.id,
|
||||
depth,
|
||||
kind: node.kind,
|
||||
name: node.name,
|
||||
fileIndex: node.fileIndex,
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
const chain = collapsedFileTreeDirectoryChain(tree, node.id)
|
||||
const last = chain[chain.length - 1]!
|
||||
rows.push({
|
||||
id: node.id,
|
||||
depth,
|
||||
kind: node.kind,
|
||||
name: chain.map((item) => item.name).join("/"),
|
||||
fileIndex: node.fileIndex,
|
||||
})
|
||||
if (!expanded || expanded.has(node.id)) last.children.forEach((child) => visit(child, depth + 1))
|
||||
}
|
||||
tree.roots.forEach((root) => visit(root, 0))
|
||||
return rows
|
||||
}
|
||||
|
||||
function collapsedFileTreeDirectoryChain(tree: FileTree, id: number): FileTreeNode[] {
|
||||
const node = tree.nodes[id]!
|
||||
const child = node.children.length === 1 ? tree.nodes[node.children[0]!] : undefined
|
||||
if (child?.kind !== "directory") return [node]
|
||||
return [node, ...collapsedFileTreeDirectoryChain(tree, child.id)]
|
||||
}
|
||||
|
||||
export function compareFileTreeNodes(tree: FileTree, left: number, right: number) {
|
||||
const leftNode = tree.nodes[left]!
|
||||
const rightNode = tree.nodes[right]!
|
||||
if (leftNode.kind !== rightNode.kind) return leftNode.kind === "directory" ? -1 : 1
|
||||
if (leftNode.name < rightNode.name) return -1
|
||||
if (leftNode.name > rightNode.name) return 1
|
||||
return left - right
|
||||
}
|
||||
|
||||
export function moveFileTreeSelection(rows: readonly FileTreeRow[], selected: number | undefined, offset: number) {
|
||||
if (rows.length === 0) return undefined
|
||||
const index = selected === undefined ? -1 : rows.findIndex((row) => row.id === selected)
|
||||
if (index === -1) return rows[0]!.id
|
||||
return rows[Math.max(0, Math.min(rows.length - 1, index + offset))]!.id
|
||||
}
|
||||
|
||||
export function moveFileTreeSelectionToFirstChild(rows: readonly FileTreeRow[], selected: number | undefined) {
|
||||
const index = selected === undefined ? -1 : rows.findIndex((row) => row.id === selected)
|
||||
const row = index === -1 ? undefined : rows[index]
|
||||
if (row?.kind !== "directory") return selected
|
||||
const child = rows[index + 1]
|
||||
return child && child.depth > row.depth ? child.id : selected
|
||||
}
|
||||
|
||||
export function moveFileTreeSelectionToParent(rows: readonly FileTreeRow[], selected: number | undefined) {
|
||||
const index = selected === undefined ? -1 : rows.findIndex((row) => row.id === selected)
|
||||
const row = index === -1 ? undefined : rows[index]
|
||||
if (!row || row.depth === 0) return selected
|
||||
return rows.findLast((item, itemIndex) => itemIndex < index && item.depth < row.depth)?.id ?? selected
|
||||
}
|
||||
|
||||
export function moveFileTreeSelectionToFile(
|
||||
rows: readonly FileTreeRow[],
|
||||
selected: number | undefined,
|
||||
offset: number,
|
||||
) {
|
||||
const fileRows = rows.filter((row) => row.fileIndex !== undefined)
|
||||
if (fileRows.length === 0) return undefined
|
||||
const selectedIndex = selected === undefined ? -1 : rows.findIndex((row) => row.id === selected)
|
||||
if (selectedIndex === -1) return offset < 0 ? fileRows[fileRows.length - 1]!.id : fileRows[0]!.id
|
||||
const next =
|
||||
offset < 0
|
||||
? fileRows.findLast((row) => rows.findIndex((item) => item.id === row.id) < selectedIndex)
|
||||
: fileRows.find((row) => rows.findIndex((item) => item.id === row.id) > selectedIndex)
|
||||
return next?.id ?? (offset < 0 ? fileRows[0]!.id : fileRows[fileRows.length - 1]!.id)
|
||||
}
|
||||
|
||||
export function fileTreeFileSelection(tree: FileTree, fileIndex: number) {
|
||||
const node = tree.nodes.find((item) => item.kind === "file" && item.fileIndex === fileIndex)
|
||||
if (!node) return undefined
|
||||
return {
|
||||
highlightedNode: node.id,
|
||||
expandedNodes: fileTreeParentDirectories(tree, node.id),
|
||||
}
|
||||
}
|
||||
|
||||
export function singlePatchFileIndex(
|
||||
selected: number | undefined,
|
||||
active: number | undefined,
|
||||
current: number | undefined,
|
||||
first: number | undefined,
|
||||
) {
|
||||
return selected ?? active ?? current ?? first
|
||||
}
|
||||
|
||||
export function orderedPatchFileIndexes(rows: readonly FileTreeRow[]) {
|
||||
return rows.flatMap((row) => (row.fileIndex === undefined ? [] : [row.fileIndex]))
|
||||
}
|
||||
|
||||
export function showDiffViewerFileTree(showFileTree: boolean, fileCount: number) {
|
||||
return showFileTree && fileCount > 0
|
||||
}
|
||||
|
||||
export function movePatchFileIndex(fileIndexes: readonly number[], current: number | undefined, offset: number) {
|
||||
if (fileIndexes.length === 0) return undefined
|
||||
const index = current === undefined ? -1 : fileIndexes.indexOf(current)
|
||||
if (index === -1) return fileIndexes[0]
|
||||
return fileIndexes[Math.max(0, Math.min(fileIndexes.length - 1, index + offset))]
|
||||
}
|
||||
|
||||
export function allExpandedFileTreeDirectories(tree: FileTree) {
|
||||
return new Set(tree.nodes.filter((node) => node.kind === "directory").map((node) => node.id))
|
||||
}
|
||||
|
||||
export function toggleFileTreeDirectory(tree: FileTree, expanded: ReadonlySet<number>, selected: number | undefined) {
|
||||
if (selected === undefined || tree.nodes[selected]?.kind !== "directory") return expanded
|
||||
const next = new Set(expanded)
|
||||
if (next.has(selected)) next.delete(selected)
|
||||
else next.add(selected)
|
||||
return next
|
||||
}
|
||||
|
||||
export function setFileTreeDirectoryExpanded(
|
||||
tree: FileTree,
|
||||
expanded: ReadonlySet<number>,
|
||||
selected: number | undefined,
|
||||
value: boolean,
|
||||
) {
|
||||
if (selected === undefined || tree.nodes[selected]?.kind !== "directory") return expanded
|
||||
const next = new Set(expanded)
|
||||
if (value) next.add(selected)
|
||||
else next.delete(selected)
|
||||
return next
|
||||
}
|
||||
|
||||
function addFileTreeNode(nodes: FileTreeNode[], roots: number[], input: Omit<FileTreeNode, "id" | "children">) {
|
||||
const id = nodes.length
|
||||
nodes.push({ ...input, id, children: [] })
|
||||
if (input.parent === undefined) roots.push(id)
|
||||
else nodes[input.parent]!.children.push(id)
|
||||
return id
|
||||
}
|
||||
|
||||
function fileTreeParentDirectories(tree: FileTree, id: number) {
|
||||
const result = new Set<number>()
|
||||
for (let parent = tree.nodes[id]?.parent; parent !== undefined; parent = tree.nodes[parent]?.parent) {
|
||||
result.add(parent)
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
|
@ -0,0 +1,162 @@
|
|||
/** @jsxImportSource @opentui/solid */
|
||||
import type { ColorInput, RGBA, ScrollBoxRenderable } from "@opentui/core"
|
||||
import { Locale } from "../../util/locale"
|
||||
import { tint } from "../../context/theme"
|
||||
import { createEffect, createMemo, For, Match, Switch } from "solid-js"
|
||||
import { buildFileTree, flattenFileTree, type FileTreeItem, type FileTreeRow } from "./diff-viewer-file-tree-utils"
|
||||
import { Panel } from "./diff-viewer-ui"
|
||||
|
||||
const FILE_TREE_STATUS_WIDTH = 2
|
||||
|
||||
export type DiffViewerFileTreeTheme = {
|
||||
readonly background: RGBA
|
||||
readonly backgroundPanel: ColorInput
|
||||
readonly backgroundElement: ColorInput
|
||||
readonly primary: ColorInput
|
||||
readonly secondary: ColorInput
|
||||
readonly selectedListItemText: ColorInput
|
||||
readonly text: RGBA
|
||||
readonly textMuted: RGBA
|
||||
readonly error: ColorInput
|
||||
}
|
||||
|
||||
export type DiffViewerFileTreeProps = {
|
||||
readonly width: number
|
||||
readonly files: readonly FileTreeItem[]
|
||||
readonly loading: boolean
|
||||
readonly error: unknown
|
||||
readonly theme: DiffViewerFileTreeTheme
|
||||
readonly focused?: boolean
|
||||
readonly highlightedNode?: number
|
||||
readonly selectedFileIndex?: number
|
||||
readonly reviewedFileNames?: ReadonlySet<string>
|
||||
readonly expandedNodes?: ReadonlySet<number>
|
||||
readonly onRowClick?: (row: FileTreeRow) => void
|
||||
}
|
||||
|
||||
export function DiffViewerFileTree(props: DiffViewerFileTreeProps) {
|
||||
const tree = createMemo(() => buildFileTree(props.files))
|
||||
const rows = createMemo(() => flattenFileTree(tree(), props.expandedNodes))
|
||||
let scroll: ScrollBoxRenderable | undefined
|
||||
|
||||
createEffect(() => {
|
||||
const node = props.highlightedNode
|
||||
if (node === undefined) return
|
||||
const selectedIndex = rows().findIndex((row) => row.id === node)
|
||||
if (selectedIndex === -1) return
|
||||
const scrollSelectedIntoView = () => scrollFileTreeRowIntoView(scroll, selectedIndex)
|
||||
scrollSelectedIntoView()
|
||||
requestAnimationFrame(scrollSelectedIntoView)
|
||||
})
|
||||
|
||||
const fadedColor = () => tint(props.theme.text, props.theme.background, 0.75)
|
||||
|
||||
return (
|
||||
<Panel border="both" width={props.width}>
|
||||
<scrollbox
|
||||
ref={(element: ScrollBoxRenderable) => (scroll = element)}
|
||||
verticalScrollbarOptions={{ visible: false }}
|
||||
horizontalScrollbarOptions={{ visible: false }}
|
||||
>
|
||||
<Switch>
|
||||
<Match when={props.loading || props.error}>
|
||||
<text />
|
||||
</Match>
|
||||
<Match when={props.files.length === 0}>
|
||||
<text fg={props.theme.text}>No files</text>
|
||||
</Match>
|
||||
<Match when={props.files.length > 0}>
|
||||
<For each={rows()}>
|
||||
{(row, index) => {
|
||||
const highlighted = () => props.focused && props.highlightedNode === row.id
|
||||
const selected = () => row.fileIndex !== undefined && props.selectedFileIndex === row.fileIndex
|
||||
const reviewed = () => {
|
||||
const file = row.fileIndex === undefined ? undefined : props.files[row.fileIndex]?.file
|
||||
return file !== undefined && (props.reviewedFileNames?.has(file) ?? false)
|
||||
}
|
||||
const prefix = () => fileTreeRowPrefix(rows(), index(), row, props.expandedNodes)
|
||||
const status = () => fileTreeRowStatus(row, props.files, reviewed())
|
||||
const name = () =>
|
||||
Locale.truncate(row.name, Math.max(1, props.width - FILE_TREE_STATUS_WIDTH - prefix().length))
|
||||
return (
|
||||
<box
|
||||
flexDirection="row"
|
||||
width="100%"
|
||||
backgroundColor={highlighted() ? props.theme.primary : undefined}
|
||||
onMouseUp={() => props.onRowClick?.(row)}
|
||||
>
|
||||
<text fg={highlighted() ? props.theme.background : fadedColor()} wrapMode="none" flexShrink={0}>
|
||||
{prefix()}
|
||||
</text>
|
||||
<box flexGrow={1} minWidth={0}>
|
||||
<text
|
||||
fg={
|
||||
highlighted()
|
||||
? props.theme.background
|
||||
: selected()
|
||||
? props.theme.primary
|
||||
: reviewed() || row.kind === "directory"
|
||||
? props.theme.textMuted
|
||||
: props.theme.text
|
||||
}
|
||||
wrapMode="none"
|
||||
>
|
||||
{name()}
|
||||
</text>
|
||||
</box>
|
||||
<text
|
||||
fg={highlighted() ? props.theme.background : props.theme.textMuted}
|
||||
wrapMode="none"
|
||||
flexShrink={0}
|
||||
>
|
||||
{status()}
|
||||
</text>
|
||||
</box>
|
||||
)
|
||||
}}
|
||||
</For>
|
||||
</Match>
|
||||
</Switch>
|
||||
</scrollbox>
|
||||
</Panel>
|
||||
)
|
||||
}
|
||||
|
||||
function scrollFileTreeRowIntoView(scroll: ScrollBoxRenderable | undefined, index: number) {
|
||||
if (!scroll) return
|
||||
if (index < scroll.scrollTop) {
|
||||
scroll.scrollTo(index)
|
||||
return
|
||||
}
|
||||
if (index >= scroll.scrollTop + scroll.viewport.height) {
|
||||
scroll.scrollTo(index - scroll.viewport.height + 1)
|
||||
}
|
||||
}
|
||||
|
||||
function fileTreeRowPrefix(
|
||||
rows: readonly FileTreeRow[],
|
||||
index: number,
|
||||
row: FileTreeRow,
|
||||
expandedNodes: ReadonlySet<number> | undefined,
|
||||
) {
|
||||
const indentation = Array.from({ length: row.depth }, (_, depth) => {
|
||||
if (depth === 0 && !hasLaterSibling(rows, 0, 0)) return " "
|
||||
return hasLaterSibling(rows, index, depth) ? "│ " : " "
|
||||
}).join("")
|
||||
const topRoot = index === 0 && row.depth === 0
|
||||
const branch = topRoot ? " " : hasLaterSibling(rows, index, row.depth) ? "├─ " : "└─ "
|
||||
const marker = row.kind === "directory" ? (expandedNodes && !expandedNodes.has(row.id) ? "▸ " : "▾ ") : ""
|
||||
|
||||
return `${indentation}${branch}${marker}`
|
||||
}
|
||||
|
||||
function hasLaterSibling(rows: readonly FileTreeRow[], index: number, depth: number) {
|
||||
return rows.slice(index + 1).find((row) => row.depth <= depth)?.depth === depth
|
||||
}
|
||||
|
||||
function fileTreeRowStatus(row: FileTreeRow, files: readonly FileTreeItem[], reviewed: boolean) {
|
||||
if (row.fileIndex === undefined) return ""
|
||||
const status = files[row.fileIndex]?.status
|
||||
const marker = status === "modified" ? "M" : status === "added" ? "A" : status === "deleted" ? "D" : "?"
|
||||
return `${reviewed ? "✓" : " "}${marker}`.padStart(FILE_TREE_STATUS_WIDTH)
|
||||
}
|
||||
103
packages/tui/src/feature-plugins/system/diff-viewer-ui.tsx
Normal file
103
packages/tui/src/feature-plugins/system/diff-viewer-ui.tsx
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
import type { BorderSides, ColorInput } from "@opentui/core"
|
||||
import type { JSX } from "@opentui/solid"
|
||||
import { useTheme } from "../../context/theme"
|
||||
import { createContext, Show, splitProps, useContext } from "solid-js"
|
||||
|
||||
export type Axis = "x" | "y"
|
||||
export type SeparatorEdge = "edge" | "edge-in" | "edge-out"
|
||||
export type PanelBorder = "start" | "end" | "both" | "none"
|
||||
|
||||
const PanelGroupContext = createContext<{ axis: Axis }>()
|
||||
|
||||
function crossAxis(axis: Axis) {
|
||||
return axis === "x" ? "y" : "x"
|
||||
}
|
||||
|
||||
function usePanelGroup() {
|
||||
return useContext(PanelGroupContext)
|
||||
}
|
||||
|
||||
export function PanelGroup(props: JSX.IntrinsicElements["box"] & { axis: Axis }) {
|
||||
const [local, boxProps] = splitProps(props, ["axis", "children"])
|
||||
return (
|
||||
<PanelGroupContext.Provider value={{ axis: local.axis }}>
|
||||
<box minWidth={0} minHeight={0} padding={0} flexDirection={local.axis === "x" ? "row" : "column"} {...boxProps}>
|
||||
{local.children}
|
||||
</box>
|
||||
</PanelGroupContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export function Panel(props: Omit<JSX.IntrinsicElements["box"], "border"> & { border?: PanelBorder }) {
|
||||
const group = usePanelGroup()
|
||||
const { theme } = useTheme()
|
||||
const [local, boxProps] = splitProps(props, ["border"])
|
||||
const border = local.border ?? "start"
|
||||
const borderProps =
|
||||
border === "none"
|
||||
? {}
|
||||
: {
|
||||
border: panelBorderSides(group?.axis ?? "y", border),
|
||||
borderColor: theme.border,
|
||||
}
|
||||
|
||||
return (
|
||||
<box
|
||||
minWidth={0}
|
||||
minHeight={0}
|
||||
flexDirection={crossAxis(group?.axis || "y") === "x" ? "row" : "column"}
|
||||
{...borderProps}
|
||||
{...boxProps}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function panelBorderSides(axis: Axis, border: Exclude<PanelBorder, "none">): BorderSides[] {
|
||||
if (axis === "x") return border === "both" ? ["top", "bottom"] : [border === "start" ? "top" : "bottom"]
|
||||
return border === "both" ? ["left", "right"] : [border === "start" ? "left" : "right"]
|
||||
}
|
||||
|
||||
export function Separator(props: { axis?: Axis; color?: ColorInput; start?: SeparatorEdge; end?: SeparatorEdge }) {
|
||||
const group = usePanelGroup()
|
||||
const { theme } = useTheme()
|
||||
const color = () => props.color ?? theme.border
|
||||
const axis = () => props.axis ?? crossAxis(group?.axis ?? "y")
|
||||
if (axis() === "y") {
|
||||
return (
|
||||
<Show
|
||||
when={props.start || props.end}
|
||||
fallback={<box width={1} flexShrink={0} border={["left"]} borderColor={color()} />}
|
||||
>
|
||||
<box width={1} flexShrink={0} flexDirection="column">
|
||||
<Show when={props.start}>{(edge) => <text fg={color()}>{verticalEdge(edge(), "start")}</text>}</Show>
|
||||
<box flexGrow={1} border={["left"]} borderColor={color()} />
|
||||
<Show when={props.end}>{(edge) => <text fg={color()}>{verticalEdge(edge(), "end")}</text>}</Show>
|
||||
</box>
|
||||
</Show>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<Show
|
||||
when={props.start || props.end}
|
||||
fallback={<box height={1} flexShrink={0} border={["top"]} borderColor={color()} />}
|
||||
>
|
||||
<box height={1} flexShrink={0} flexDirection="row">
|
||||
<Show when={props.start}>{(edge) => <text fg={color()}>{horizontalEdge(edge(), "start")}</text>}</Show>
|
||||
<box flexGrow={1} border={["top"]} borderColor={color()} />
|
||||
<Show when={props.end}>{(edge) => <text fg={color()}>{horizontalEdge(edge(), "end")}</text>}</Show>
|
||||
</box>
|
||||
</Show>
|
||||
)
|
||||
}
|
||||
|
||||
function horizontalEdge(edge: SeparatorEdge, side: "start" | "end") {
|
||||
if (edge === "edge") return side === "start" ? "├" : "┤"
|
||||
if (edge === "edge-in") return "┴"
|
||||
return "┬"
|
||||
}
|
||||
|
||||
function verticalEdge(edge: SeparatorEdge, side: "start" | "end") {
|
||||
if (edge === "edge") return side === "start" ? "┬" : "┴"
|
||||
if (edge === "edge-in") return "┤"
|
||||
return "├"
|
||||
}
|
||||
1061
packages/tui/src/feature-plugins/system/diff-viewer.tsx
Normal file
1061
packages/tui/src/feature-plugins/system/diff-viewer.tsx
Normal file
File diff suppressed because it is too large
Load diff
94
packages/tui/src/feature-plugins/system/notifications.ts
Normal file
94
packages/tui/src/feature-plugins/system/notifications.ts
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
import type { Event } from "@opencode-ai/sdk/v2"
|
||||
import type { TuiAttentionSoundName, TuiPlugin, TuiPluginApi } from "@opencode-ai/plugin/tui"
|
||||
import type { BuiltinTuiPlugin } from "../builtins"
|
||||
|
||||
const id = "internal:notifications"
|
||||
|
||||
type SessionError = Extract<Event, { type: "session.error" }>["properties"]["error"]
|
||||
|
||||
function notify(api: TuiPluginApi, sessionID: string | undefined, message: string, sound: TuiAttentionSoundName) {
|
||||
const session = sessionID ? api.state.session.get(sessionID) : undefined
|
||||
const isSubagent = session?.parentID !== undefined
|
||||
void api.attention.notify({
|
||||
title: session?.title,
|
||||
message,
|
||||
notification: isSubagent ? false : { when: "blurred" },
|
||||
sound: { name: sound, when: "always" },
|
||||
})
|
||||
}
|
||||
|
||||
function sessionErrorMessage(error: SessionError) {
|
||||
if (error?.name === "MessageAbortedError") return "Session aborted"
|
||||
const data = error?.data
|
||||
if (data && typeof data === "object" && "message" in data && data.message === "SSE read timed out") {
|
||||
return "Model stopped responding"
|
||||
}
|
||||
return "Session error"
|
||||
}
|
||||
|
||||
const tui: TuiPlugin = async (api) => {
|
||||
const active = new Set<string>()
|
||||
const errored = new Set<string>()
|
||||
const questions = new Set<string>()
|
||||
const permissions = new Set<string>()
|
||||
|
||||
api.event.on("question.asked", (event) => {
|
||||
if (questions.has(event.properties.id)) return
|
||||
questions.add(event.properties.id)
|
||||
notify(api, event.properties.sessionID, "Question needs input", "question")
|
||||
})
|
||||
|
||||
api.event.on("question.replied", (event) => {
|
||||
questions.delete(event.properties.requestID)
|
||||
})
|
||||
|
||||
api.event.on("question.rejected", (event) => {
|
||||
questions.delete(event.properties.requestID)
|
||||
})
|
||||
|
||||
api.event.on("permission.asked", (event) => {
|
||||
if (permissions.has(event.properties.id)) return
|
||||
permissions.add(event.properties.id)
|
||||
notify(api, event.properties.sessionID, "Permission needs input", "permission")
|
||||
})
|
||||
|
||||
api.event.on("permission.replied", (event) => {
|
||||
permissions.delete(event.properties.requestID)
|
||||
})
|
||||
|
||||
api.event.on("session.status", (event) => {
|
||||
const sessionID = event.properties.sessionID
|
||||
if (event.properties.status.type === "busy" || event.properties.status.type === "retry") {
|
||||
active.add(sessionID)
|
||||
errored.delete(sessionID)
|
||||
return
|
||||
}
|
||||
|
||||
if (event.properties.status.type !== "idle") return
|
||||
if (!active.has(sessionID)) return
|
||||
active.delete(sessionID)
|
||||
|
||||
if (errored.has(sessionID)) {
|
||||
errored.delete(sessionID)
|
||||
return
|
||||
}
|
||||
|
||||
const session = api.state.session.get(sessionID)
|
||||
notify(api, sessionID, "Session done", session?.parentID ? "subagent_done" : "done")
|
||||
})
|
||||
|
||||
api.event.on("session.error", (event) => {
|
||||
const sessionID = event.properties.sessionID
|
||||
if (!sessionID) return
|
||||
if (!active.has(sessionID)) return
|
||||
errored.add(sessionID)
|
||||
notify(api, sessionID, sessionErrorMessage(event.properties.error), "error")
|
||||
})
|
||||
}
|
||||
|
||||
const plugin: BuiltinTuiPlugin = {
|
||||
id,
|
||||
tui,
|
||||
}
|
||||
|
||||
export default plugin
|
||||
269
packages/tui/src/feature-plugins/system/plugins.tsx
Normal file
269
packages/tui/src/feature-plugins/system/plugins.tsx
Normal file
|
|
@ -0,0 +1,269 @@
|
|||
import type { TuiPlugin, TuiPluginApi, TuiPluginStatus } from "@opencode-ai/plugin/tui"
|
||||
import type { BuiltinTuiPlugin } from "../builtins"
|
||||
import { useTerminalDimensions } from "@opentui/solid"
|
||||
import { fileURLToPath } from "url"
|
||||
import { DialogSelect, type DialogSelectOption } from "../../ui/dialog-select"
|
||||
import { Show, createEffect, createMemo, createSignal } from "solid-js"
|
||||
import { useBindings } from "../../keymap"
|
||||
|
||||
const id = "internal:plugin-manager"
|
||||
|
||||
function state(api: TuiPluginApi, item: TuiPluginStatus) {
|
||||
if (!item.enabled) {
|
||||
return <span style={{ fg: api.theme.current.textMuted }}>disabled</span>
|
||||
}
|
||||
|
||||
return (
|
||||
<span style={{ fg: item.active ? api.theme.current.success : api.theme.current.error }}>
|
||||
{item.active ? "active" : "inactive"}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
function source(spec: string) {
|
||||
if (!spec.startsWith("file://")) return
|
||||
return fileURLToPath(spec)
|
||||
}
|
||||
|
||||
function meta(item: TuiPluginStatus, width: number) {
|
||||
if (item.source === "internal") {
|
||||
if (width >= 120) return "Built-in plugin"
|
||||
return "Built-in"
|
||||
}
|
||||
const next = source(item.spec)
|
||||
if (next) return next
|
||||
return item.spec
|
||||
}
|
||||
|
||||
function Install(props: { api: TuiPluginApi }) {
|
||||
const [global, setGlobal] = createSignal(false)
|
||||
const [busy, setBusy] = createSignal(false)
|
||||
|
||||
useBindings(() => ({
|
||||
enabled: !busy(),
|
||||
bindings: [{ key: "tab", desc: "Toggle install scope", group: "Plugins", cmd: () => setGlobal((value) => !value) }],
|
||||
}))
|
||||
|
||||
return (
|
||||
<props.api.ui.DialogPrompt
|
||||
title="Install plugin"
|
||||
placeholder="npm package name"
|
||||
busy={busy()}
|
||||
busyText="Installing plugin..."
|
||||
description={() => (
|
||||
<box flexDirection="row" gap={1}>
|
||||
<text fg={props.api.theme.current.textMuted}>scope:</text>
|
||||
<text fg={busy() ? props.api.theme.current.textMuted : props.api.theme.current.text}>
|
||||
{global() ? "global" : "local"}
|
||||
</text>
|
||||
<Show when={!busy()}>
|
||||
<text fg={props.api.theme.current.textMuted}>(tab toggle)</text>
|
||||
</Show>
|
||||
</box>
|
||||
)}
|
||||
onConfirm={(raw) => {
|
||||
if (busy()) return
|
||||
const mod = raw.trim()
|
||||
if (!mod) {
|
||||
props.api.ui.toast({
|
||||
variant: "error",
|
||||
message: "Plugin package name is required",
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
setBusy(true)
|
||||
void props.api.plugins
|
||||
.install(mod, { global: global() })
|
||||
.then((out) => {
|
||||
if (!out.ok) {
|
||||
props.api.ui.toast({
|
||||
variant: "error",
|
||||
message: out.message,
|
||||
})
|
||||
if (out.missing) {
|
||||
props.api.ui.toast({
|
||||
variant: "info",
|
||||
message: "Check npm registry/auth settings and try again.",
|
||||
})
|
||||
}
|
||||
show(props.api)
|
||||
return
|
||||
}
|
||||
|
||||
props.api.ui.toast({
|
||||
variant: "success",
|
||||
message: `Installed ${mod} (${global() ? "global" : "local"}: ${out.dir})`,
|
||||
})
|
||||
if (!out.tui) {
|
||||
props.api.ui.toast({
|
||||
variant: "info",
|
||||
message: "Package has no TUI target to load in this app.",
|
||||
})
|
||||
show(props.api)
|
||||
return
|
||||
}
|
||||
|
||||
return props.api.plugins.add(mod).then((ok) => {
|
||||
if (!ok) {
|
||||
props.api.ui.toast({
|
||||
variant: "warning",
|
||||
message: "Installed plugin, but runtime load failed. See console/logs; restart TUI to retry.",
|
||||
})
|
||||
show(props.api)
|
||||
return
|
||||
}
|
||||
|
||||
props.api.ui.toast({
|
||||
variant: "success",
|
||||
message: `Loaded ${mod} in current session.`,
|
||||
})
|
||||
show(props.api)
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
setBusy(false)
|
||||
})
|
||||
}}
|
||||
onCancel={() => {
|
||||
show(props.api)
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function row(api: TuiPluginApi, item: TuiPluginStatus, width: number): DialogSelectOption<string> {
|
||||
return {
|
||||
title: item.id,
|
||||
value: item.id,
|
||||
category: item.source === "internal" ? "Internal" : "External",
|
||||
description: meta(item, width),
|
||||
footer: state(api, item),
|
||||
disabled: item.id === id,
|
||||
}
|
||||
}
|
||||
|
||||
function showInstall(api: TuiPluginApi) {
|
||||
api.ui.dialog.replace(() => <Install api={api} />)
|
||||
}
|
||||
|
||||
function View(props: { api: TuiPluginApi }) {
|
||||
const size = useTerminalDimensions()
|
||||
const [list, setList] = createSignal(props.api.plugins.list())
|
||||
const [cur, setCur] = createSignal<string | undefined>()
|
||||
const [lock, setLock] = createSignal(false)
|
||||
|
||||
createEffect(() => {
|
||||
const width = size().width
|
||||
if (width >= 128) {
|
||||
props.api.ui.dialog.setSize("xlarge")
|
||||
return
|
||||
}
|
||||
if (width >= 96) {
|
||||
props.api.ui.dialog.setSize("large")
|
||||
return
|
||||
}
|
||||
props.api.ui.dialog.setSize("medium")
|
||||
})
|
||||
|
||||
const rows = createMemo(() =>
|
||||
[...list()]
|
||||
.sort((a, b) => {
|
||||
const x = a.source === "internal" ? 1 : 0
|
||||
const y = b.source === "internal" ? 1 : 0
|
||||
if (x !== y) return x - y
|
||||
return a.id.localeCompare(b.id)
|
||||
})
|
||||
.map((item) => row(props.api, item, size().width)),
|
||||
)
|
||||
|
||||
const flip = (x: string) => {
|
||||
if (lock()) return
|
||||
const item = list().find((entry) => entry.id === x)
|
||||
if (!item) return
|
||||
setLock(true)
|
||||
const task = item.active ? props.api.plugins.deactivate(x) : props.api.plugins.activate(x)
|
||||
void task
|
||||
.then((ok) => {
|
||||
if (!ok) {
|
||||
props.api.ui.toast({
|
||||
variant: "error",
|
||||
message: `Failed to update plugin ${item.id}`,
|
||||
})
|
||||
}
|
||||
setList(props.api.plugins.list())
|
||||
})
|
||||
.finally(() => {
|
||||
setLock(false)
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<DialogSelect
|
||||
title="Plugins"
|
||||
options={rows()}
|
||||
current={cur()}
|
||||
onMove={(item) => setCur(item.value)}
|
||||
actions={[
|
||||
{
|
||||
title: "toggle",
|
||||
command: "plugins.toggle",
|
||||
hidden: lock(),
|
||||
onTrigger: (item) => {
|
||||
setCur(item.value)
|
||||
flip(item.value)
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "install",
|
||||
command: "dialog.plugins.install",
|
||||
hidden: lock(),
|
||||
onTrigger: () => {
|
||||
showInstall(props.api)
|
||||
},
|
||||
},
|
||||
]}
|
||||
onSelect={(item) => {
|
||||
setCur(item.value)
|
||||
flip(item.value)
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function show(api: TuiPluginApi) {
|
||||
api.ui.dialog.replace(() => <View api={api} />)
|
||||
}
|
||||
|
||||
const tui: TuiPlugin = async (api) => {
|
||||
api.keymap.registerLayer({
|
||||
commands: [
|
||||
{
|
||||
name: "plugins.list",
|
||||
title: "Plugins",
|
||||
category: "System",
|
||||
namespace: "palette",
|
||||
run() {
|
||||
show(api)
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "plugins.install",
|
||||
title: "Install plugin",
|
||||
category: "System",
|
||||
namespace: "palette",
|
||||
run() {
|
||||
showInstall(api)
|
||||
},
|
||||
},
|
||||
],
|
||||
bindings: api.tuiConfig.keybinds.gather("plugins.palette", ["plugins.list", "plugins.install"]),
|
||||
})
|
||||
}
|
||||
|
||||
const plugin: BuiltinTuiPlugin = {
|
||||
id,
|
||||
tui,
|
||||
}
|
||||
|
||||
export default plugin
|
||||
1197
packages/tui/src/feature-plugins/system/session-v2.tsx
Normal file
1197
packages/tui/src/feature-plugins/system/session-v2.tsx
Normal file
File diff suppressed because it is too large
Load diff
608
packages/tui/src/feature-plugins/system/which-key.tsx
Normal file
608
packages/tui/src/feature-plugins/system/which-key.tsx
Normal file
|
|
@ -0,0 +1,608 @@
|
|||
/** @jsxImportSource @opentui/solid */
|
||||
import { RGBA, TextAttributes, type KeyEvent, type Renderable } from "@opentui/core"
|
||||
import { useTerminalDimensions } from "@opentui/solid"
|
||||
import { createEffect, createMemo, createSignal, For, Show } from "solid-js"
|
||||
import { useBindings, useKeymapSelector } from "../../keymap"
|
||||
import type { ActiveKey } from "@opentui/keymap"
|
||||
import type { TuiPlugin, TuiPluginApi } from "@opencode-ai/plugin/tui"
|
||||
import type { BuiltinTuiPlugin } from "../builtins"
|
||||
|
||||
const command = {
|
||||
toggle: "which-key.toggle",
|
||||
toggleLayout: "which-key.layout.toggle",
|
||||
togglePending: "which-key.pending.toggle",
|
||||
groupPrevious: "which-key.group.previous",
|
||||
groupNext: "which-key.group.next",
|
||||
scrollUp: "which-key.scroll.up",
|
||||
scrollDown: "which-key.scroll.down",
|
||||
pageUp: "which-key.page.up",
|
||||
pageDown: "which-key.page.down",
|
||||
home: "which-key.home",
|
||||
end: "which-key.end",
|
||||
} as const
|
||||
|
||||
const LAYER_PRIORITY = 900
|
||||
const KV_LAYOUT = "which_key_layout"
|
||||
const KV_PENDING_PREVIEW = "which_key_pending_preview"
|
||||
const toggleCommands = [command.toggle, command.toggleLayout, command.togglePending] as const
|
||||
const scrollCommands = [
|
||||
command.scrollUp,
|
||||
command.scrollDown,
|
||||
command.pageUp,
|
||||
command.pageDown,
|
||||
command.home,
|
||||
command.end,
|
||||
] as const
|
||||
const panelCommands = [command.groupPrevious, command.groupNext, ...scrollCommands] as const
|
||||
const COLUMN_GAP = 4
|
||||
const TAB_GAP = 3
|
||||
const MIN_TAB_GAP = 1
|
||||
const TAB_CONTENT_GAP = 1
|
||||
const MIN_COLUMN_WIDTH = 28
|
||||
const MAX_COLUMN_WIDTH = 44
|
||||
const PANEL_HEIGHT_RATIO = 0.3
|
||||
const MIN_PANEL_HEIGHT = 8
|
||||
const MAX_PANEL_HEIGHT = 16
|
||||
const PANEL_TOP_PADDING = 1
|
||||
const FOOTER_HEIGHT = 1
|
||||
const FOOTER_MARGIN = 1
|
||||
const UNKNOWN = "Unknown"
|
||||
|
||||
type Layout = "dock" | "overlay"
|
||||
|
||||
type Color = RGBA | string
|
||||
|
||||
type Skin = {
|
||||
panel: Color
|
||||
text: Color
|
||||
muted: Color
|
||||
subtle: Color
|
||||
key: Color
|
||||
accent: Color
|
||||
tab: Color
|
||||
tabText: Color
|
||||
}
|
||||
|
||||
type Entry = {
|
||||
type: "entry"
|
||||
key: string
|
||||
label: string
|
||||
group: string
|
||||
continues: boolean
|
||||
}
|
||||
|
||||
type Group = {
|
||||
label: string
|
||||
entries: Entry[]
|
||||
}
|
||||
|
||||
type HeaderItem = { type: "tab"; group: Group } | { type: "scroll" }
|
||||
|
||||
type GroupHeader = {
|
||||
type: "group"
|
||||
label: string
|
||||
}
|
||||
|
||||
type Item = Entry | GroupHeader
|
||||
|
||||
function text(value: unknown) {
|
||||
if (typeof value !== "string") return undefined
|
||||
const trimmed = value.trim()
|
||||
return trimmed || undefined
|
||||
}
|
||||
|
||||
function ink(api: TuiPluginApi, name: string, fallback: string): Color {
|
||||
const value = Reflect.get(api.theme.current, name)
|
||||
if (typeof value === "string") return value
|
||||
if (value instanceof RGBA) return value
|
||||
return fallback
|
||||
}
|
||||
|
||||
function skin(api: TuiPluginApi): Skin {
|
||||
return {
|
||||
panel: ink(api, "backgroundMenu", "#1c1c1c"),
|
||||
text: ink(api, "text", "#f0f0f0"),
|
||||
muted: ink(api, "textMuted", "#a5a5a5"),
|
||||
subtle: ink(api, "borderSubtle", "#6f6f6f"),
|
||||
key: ink(api, "warning", "#ffd75f"),
|
||||
accent: ink(api, "primary", "#5f87ff"),
|
||||
tab: ink(api, "primary", "#5f87ff"),
|
||||
tabText: ink(api, "selectedListItemText", "#ffffff"),
|
||||
}
|
||||
}
|
||||
|
||||
function activeKeyLabel(active: ActiveKey<Renderable, KeyEvent>) {
|
||||
if (active.continues) return text(active.tokenName) ?? text(active.display) ?? UNKNOWN
|
||||
return (
|
||||
text(active.commandAttrs?.title) ?? text(active.bindingAttrs?.desc) ?? text(active.commandAttrs?.desc) ?? UNKNOWN
|
||||
)
|
||||
}
|
||||
|
||||
function activeKeyGroup(active: ActiveKey<Renderable, KeyEvent>) {
|
||||
if (active.continues) return "System"
|
||||
return text(active.commandAttrs?.category) ?? text(active.bindingAttrs?.group) ?? UNKNOWN
|
||||
}
|
||||
|
||||
function activeKeyEntry(api: TuiPluginApi, active: ActiveKey<Renderable, KeyEvent>): Entry {
|
||||
const key = api.keys.formatSequence([
|
||||
{
|
||||
stroke: active.stroke,
|
||||
display: active.display,
|
||||
tokenName: active.tokenName,
|
||||
},
|
||||
])
|
||||
const label = activeKeyLabel(active)
|
||||
return {
|
||||
type: "entry",
|
||||
key,
|
||||
label: active.continues ? `+${label}` : label,
|
||||
group: activeKeyGroup(active),
|
||||
continues: active.continues,
|
||||
}
|
||||
}
|
||||
|
||||
function grouped(entries: Entry[]): Group[] {
|
||||
const map = new Map<string, Entry[]>()
|
||||
for (const entry of entries) map.set(entry.group, [...(map.get(entry.group) ?? []), entry])
|
||||
return [...map]
|
||||
.map(([label, entries]) => ({
|
||||
label,
|
||||
entries: entries.toSorted(
|
||||
(a, b) =>
|
||||
Number(b.continues) - Number(a.continues) || a.label.localeCompare(b.label) || a.key.localeCompare(b.key),
|
||||
),
|
||||
}))
|
||||
.toSorted((a, b) => a.label.localeCompare(b.label))
|
||||
}
|
||||
|
||||
function commandShortcut(api: TuiPluginApi, name: string) {
|
||||
return useKeymapSelector((keymap) =>
|
||||
api.keys.formatSequence(
|
||||
keymap.getCommandBindings({ visibility: "registered", commands: [name] }).get(name)?.[0]?.sequence,
|
||||
),
|
||||
)
|
||||
}
|
||||
|
||||
function layout(value: unknown): Layout {
|
||||
if (value === "overlay") return "overlay"
|
||||
return "dock"
|
||||
}
|
||||
|
||||
function HomeHint(props: { api: TuiPluginApi }) {
|
||||
const trigger = commandShortcut(props.api, command.toggle)
|
||||
const look = createMemo(() => skin(props.api))
|
||||
|
||||
return (
|
||||
<box width="100%" maxWidth={75} alignItems="center" paddingTop={1} flexShrink={0}>
|
||||
<text fg={look().muted} wrapMode="none">
|
||||
Show keyboard shortcuts with <span style={{ fg: look().subtle }}>{trigger() || command.toggle}</span>
|
||||
</text>
|
||||
</box>
|
||||
)
|
||||
}
|
||||
|
||||
function WhichKeyPanel(props: {
|
||||
api: TuiPluginApi
|
||||
layout: Layout
|
||||
mode: () => Layout
|
||||
pendingPreview: () => boolean
|
||||
pinned: () => boolean
|
||||
}) {
|
||||
const dimensions = useTerminalDimensions()
|
||||
const [offset, setOffset] = createSignal(0)
|
||||
const [activeGroup, setActiveGroup] = createSignal<string | undefined>()
|
||||
const pending = useKeymapSelector((keymap) => keymap.getPendingSequence())
|
||||
const active = useKeymapSelector((keymap) => keymap.getActiveKeys({ includeMetadata: true }))
|
||||
const pendingActive = createMemo(() => pending().length > 0 && active().length > 0)
|
||||
const pendingAutoVisible = createMemo(() => props.mode() === "overlay" && props.pendingPreview() && pendingActive())
|
||||
const visible = createMemo(() => props.pinned() || pendingAutoVisible())
|
||||
const pendingMode = createMemo(() => visible() && pendingActive())
|
||||
const left = 0
|
||||
const width = createMemo(() => Math.max(1, dimensions().width))
|
||||
const panelHeight = createMemo(() =>
|
||||
Math.max(MIN_PANEL_HEIGHT, Math.min(MAX_PANEL_HEIGHT, Math.floor(dimensions().height * PANEL_HEIGHT_RATIO))),
|
||||
)
|
||||
const contentWidth = createMemo(() => Math.max(1, width() - 2))
|
||||
const columns = createMemo(() =>
|
||||
Math.max(1, Math.min(3, Math.floor((contentWidth() + COLUMN_GAP) / (MAX_COLUMN_WIDTH + COLUMN_GAP)) || 1)),
|
||||
)
|
||||
const entries = createMemo(() => active().map((item) => activeKeyEntry(props.api, item)))
|
||||
const groups = createMemo(() => grouped(entries()))
|
||||
const tabsVisible = createMemo(() => !pendingMode() && groups().length > 0)
|
||||
const headerVisible = createMemo(() => tabsVisible() || pendingMode())
|
||||
const footerVisible = createMemo(() => !pendingMode())
|
||||
const rows = createMemo(() =>
|
||||
Math.max(
|
||||
1,
|
||||
panelHeight() -
|
||||
PANEL_TOP_PADDING -
|
||||
(headerVisible() ? 1 : 0) -
|
||||
(tabsVisible() ? TAB_CONTENT_GAP : 0) -
|
||||
(footerVisible() ? FOOTER_MARGIN + FOOTER_HEIGHT : 0),
|
||||
),
|
||||
)
|
||||
const pageSize = createMemo(() => rows() * columns())
|
||||
const currentGroup = createMemo(() => {
|
||||
const group = activeGroup()
|
||||
return groups().find((item) => item.label === group) ?? groups()[0]
|
||||
})
|
||||
const activeEntries = createMemo(() => currentGroup()?.entries ?? [])
|
||||
const items = createMemo<Item[]>(() => {
|
||||
if (!pendingMode()) return activeEntries()
|
||||
return groups().flatMap((group) => [{ type: "group", label: group.label } satisfies GroupHeader, ...group.entries])
|
||||
})
|
||||
const maxOffset = createMemo(() => Math.max(0, items().length - pageSize()))
|
||||
const shown = createMemo(() => {
|
||||
const columnsItems: Item[][] = []
|
||||
let index = offset()
|
||||
for (let column = 0; column < columns() && index < items().length; column++) {
|
||||
const list: Item[] = []
|
||||
while (list.length < rows() && index < items().length) {
|
||||
list.push(items()[index]!)
|
||||
index += 1
|
||||
}
|
||||
columnsItems.push(list)
|
||||
}
|
||||
return columnsItems
|
||||
})
|
||||
const rowIndexes = createMemo(() => Array.from({ length: rows() }, (_, index) => index))
|
||||
const trigger = commandShortcut(props.api, command.toggle)
|
||||
const modeTrigger = commandShortcut(props.api, command.toggleLayout)
|
||||
const upActive = createMemo(() => offset() > 0)
|
||||
const downActive = createMemo(() => offset() < maxOffset())
|
||||
const scrollable = createMemo(() => maxOffset() > 0)
|
||||
const headerItems = createMemo<HeaderItem[]>(() => [
|
||||
...(tabsVisible() ? groups().map((group) => ({ type: "tab" as const, group })) : []),
|
||||
...(scrollable() ? [{ type: "scroll" as const }] : []),
|
||||
])
|
||||
const tabGap = createMemo(() => {
|
||||
const itemCount = headerItems().length
|
||||
if (itemCount <= 1) return 0
|
||||
const itemWidth = headerItems().reduce(
|
||||
(sum, item) => sum + (item.type === "tab" ? item.group.label.length + 2 : 3),
|
||||
0,
|
||||
)
|
||||
return Math.max(MIN_TAB_GAP, Math.min(TAB_GAP, Math.floor((contentWidth() - itemWidth) / (itemCount - 1))))
|
||||
})
|
||||
const nextMode = createMemo(() => (props.mode() === "dock" ? "overlay" : "dock"))
|
||||
const look = createMemo(() => skin(props.api))
|
||||
const columnWidth = createMemo(() =>
|
||||
Math.max(1, Math.min(MAX_COLUMN_WIDTH, Math.floor((contentWidth() - (columns() - 1) * COLUMN_GAP) / columns()))),
|
||||
)
|
||||
const clamp = (value: number) => Math.max(0, Math.min(maxOffset(), value))
|
||||
const scroll = (delta: number) => setOffset((value) => clamp(value + delta))
|
||||
const moveGroup = (delta: number) => {
|
||||
if (pendingMode()) return
|
||||
const list = groups()
|
||||
if (!list.length) return
|
||||
const index = Math.max(
|
||||
0,
|
||||
list.findIndex((item) => item.label === currentGroup()?.label),
|
||||
)
|
||||
setActiveGroup(list[(index + delta + list.length) % list.length]!.label)
|
||||
setOffset(0)
|
||||
}
|
||||
|
||||
useBindings(() => ({
|
||||
priority: 1000,
|
||||
enabled: visible(),
|
||||
commands: [
|
||||
{
|
||||
name: command.groupPrevious,
|
||||
title: "Previous key binding group",
|
||||
desc: "Show the previous which-key group",
|
||||
category: "System",
|
||||
run() {
|
||||
moveGroup(-1)
|
||||
},
|
||||
},
|
||||
{
|
||||
name: command.groupNext,
|
||||
title: "Next key binding group",
|
||||
desc: "Show the next which-key group",
|
||||
category: "System",
|
||||
run() {
|
||||
moveGroup(1)
|
||||
},
|
||||
},
|
||||
{
|
||||
name: command.scrollUp,
|
||||
title: "Scroll key bindings up",
|
||||
desc: "Scroll the which-key panel up",
|
||||
category: "System",
|
||||
run() {
|
||||
scroll(-columns())
|
||||
},
|
||||
},
|
||||
{
|
||||
name: command.scrollDown,
|
||||
title: "Scroll key bindings down",
|
||||
desc: "Scroll the which-key panel down",
|
||||
category: "System",
|
||||
run() {
|
||||
scroll(columns())
|
||||
},
|
||||
},
|
||||
{
|
||||
name: command.pageUp,
|
||||
title: "Page key bindings up",
|
||||
desc: "Page the which-key panel up",
|
||||
category: "System",
|
||||
run() {
|
||||
scroll(-pageSize())
|
||||
},
|
||||
},
|
||||
{
|
||||
name: command.pageDown,
|
||||
title: "Page key bindings down",
|
||||
desc: "Page the which-key panel down",
|
||||
category: "System",
|
||||
run() {
|
||||
scroll(pageSize())
|
||||
},
|
||||
},
|
||||
{
|
||||
name: command.home,
|
||||
title: "First key binding",
|
||||
desc: "Jump to the first which-key binding",
|
||||
category: "System",
|
||||
run() {
|
||||
setOffset(0)
|
||||
},
|
||||
},
|
||||
{
|
||||
name: command.end,
|
||||
title: "Last key binding",
|
||||
desc: "Jump to the last which-key binding",
|
||||
category: "System",
|
||||
run() {
|
||||
setOffset(maxOffset())
|
||||
},
|
||||
},
|
||||
],
|
||||
bindings: pendingMode()
|
||||
? props.api.tuiConfig.keybinds.gather("which-key.scroll", scrollCommands)
|
||||
: props.api.tuiConfig.keybinds.gather("which-key.panel", panelCommands),
|
||||
}))
|
||||
|
||||
createEffect(() => {
|
||||
if (pendingMode()) return
|
||||
const group = currentGroup()
|
||||
if (group?.label === activeGroup()) return
|
||||
setActiveGroup(group?.label)
|
||||
})
|
||||
|
||||
createEffect(() => {
|
||||
if (pendingMode()) return
|
||||
activeGroup()
|
||||
setOffset(0)
|
||||
})
|
||||
|
||||
createEffect(() => {
|
||||
if (!visible()) setOffset(0)
|
||||
})
|
||||
|
||||
createEffect(() => {
|
||||
pending()
|
||||
setOffset(0)
|
||||
})
|
||||
|
||||
createEffect(() => {
|
||||
setOffset((value) => clamp(value))
|
||||
})
|
||||
|
||||
return (
|
||||
<Show when={visible()}>
|
||||
<box
|
||||
position={props.layout === "overlay" ? "absolute" : "relative"}
|
||||
zIndex={3500}
|
||||
left={left}
|
||||
bottom={props.layout === "overlay" ? 0 : undefined}
|
||||
width={dimensions().width}
|
||||
height={panelHeight()}
|
||||
backgroundColor={look().panel}
|
||||
paddingLeft={1}
|
||||
paddingRight={1}
|
||||
paddingTop={1}
|
||||
flexShrink={0}
|
||||
flexDirection="column"
|
||||
>
|
||||
<Show when={headerVisible()}>
|
||||
<box width="100%" flexDirection="row" justifyContent="center" gap={tabGap()} flexShrink={0}>
|
||||
<For each={headerItems()}>
|
||||
{(item) => (
|
||||
<Show
|
||||
when={item.type === "tab" ? item.group : undefined}
|
||||
fallback={
|
||||
<box flexShrink={0}>
|
||||
<text wrapMode="none">
|
||||
<span style={{ fg: upActive() ? look().text : look().muted }}>↑</span>
|
||||
<span style={{ fg: look().muted }}> </span>
|
||||
<span style={{ fg: downActive() ? look().text : look().muted }}>↓</span>
|
||||
</text>
|
||||
</box>
|
||||
}
|
||||
>
|
||||
{(group) => {
|
||||
const selected = createMemo(() => currentGroup()?.label === group().label)
|
||||
return (
|
||||
<box
|
||||
paddingLeft={1}
|
||||
paddingRight={1}
|
||||
flexShrink={0}
|
||||
backgroundColor={selected() ? look().tab : undefined}
|
||||
onMouseDown={() => {
|
||||
setActiveGroup(group().label)
|
||||
setOffset(0)
|
||||
}}
|
||||
>
|
||||
<text
|
||||
fg={selected() ? look().tabText : look().muted}
|
||||
attributes={selected() ? TextAttributes.BOLD : undefined}
|
||||
wrapMode="none"
|
||||
>
|
||||
{group().label}
|
||||
</text>
|
||||
</box>
|
||||
)
|
||||
}}
|
||||
</Show>
|
||||
)}
|
||||
</For>
|
||||
</box>
|
||||
</Show>
|
||||
<Show when={tabsVisible()}>
|
||||
<box height={TAB_CONTENT_GAP} flexShrink={0} />
|
||||
</Show>
|
||||
<box height={rows()} flexShrink={0} flexDirection="column">
|
||||
<Show when={shown().length > 0} fallback={<text fg={look().muted}>No reachable bindings</text>}>
|
||||
<For each={rowIndexes()}>
|
||||
{(row) => (
|
||||
<box width="100%" flexDirection="row" justifyContent="center" gap={COLUMN_GAP}>
|
||||
<For each={shown()}>
|
||||
{(column) => {
|
||||
const item = createMemo(() => column[row])
|
||||
const entry = createMemo(() => {
|
||||
const value = item()
|
||||
if (value?.type !== "entry") return undefined
|
||||
return value
|
||||
})
|
||||
return (
|
||||
<box width={columnWidth()} flexDirection="row" gap={1} justifyContent="space-between">
|
||||
<Show when={item()}>
|
||||
{(value) => (
|
||||
<Show
|
||||
when={entry()}
|
||||
fallback={
|
||||
<text fg={look().accent} attributes={TextAttributes.BOLD} wrapMode="none" truncate>
|
||||
{value().label}
|
||||
</text>
|
||||
}
|
||||
>
|
||||
{(binding) => (
|
||||
<>
|
||||
<box flexGrow={1} minWidth={0}>
|
||||
<text
|
||||
fg={binding().continues ? look().accent : look().muted}
|
||||
wrapMode="none"
|
||||
truncate
|
||||
>
|
||||
{binding().label}
|
||||
</text>
|
||||
</box>
|
||||
<box flexShrink={0}>
|
||||
<text fg={look().text} attributes={TextAttributes.BOLD} wrapMode="none" truncate>
|
||||
{binding().key}
|
||||
</text>
|
||||
</box>
|
||||
</>
|
||||
)}
|
||||
</Show>
|
||||
)}
|
||||
</Show>
|
||||
</box>
|
||||
)
|
||||
}}
|
||||
</For>
|
||||
</box>
|
||||
)}
|
||||
</For>
|
||||
</Show>
|
||||
</box>
|
||||
<Show when={footerVisible()}>
|
||||
<box height={FOOTER_MARGIN} flexShrink={0} />
|
||||
<box width="100%" flexDirection="row" justifyContent="space-between" flexShrink={0}>
|
||||
<box>
|
||||
<text fg={look().text} wrapMode="none">
|
||||
toggle <span style={{ fg: look().subtle }}>{trigger() || command.toggle}</span>
|
||||
</text>
|
||||
</box>
|
||||
<box>
|
||||
<text fg={look().text} wrapMode="none">
|
||||
{nextMode()} <span style={{ fg: look().subtle }}>{modeTrigger() || command.toggleLayout}</span>
|
||||
</text>
|
||||
</box>
|
||||
</box>
|
||||
</Show>
|
||||
</box>
|
||||
</Show>
|
||||
)
|
||||
}
|
||||
|
||||
const tui: TuiPlugin = async (api) => {
|
||||
const [pinned, setPinned] = createSignal(false)
|
||||
const [mode, setMode] = createSignal(layout(api.kv.get(KV_LAYOUT, "dock")))
|
||||
const [pendingPreview, setPendingPreview] = createSignal(api.kv.get(KV_PENDING_PREVIEW, false))
|
||||
|
||||
api.keymap.registerLayer({
|
||||
priority: LAYER_PRIORITY,
|
||||
commands: [
|
||||
{
|
||||
name: command.toggle,
|
||||
title: "Show key bindings",
|
||||
desc: "Toggle which-key overlay",
|
||||
category: "System",
|
||||
run() {
|
||||
setPinned((value) => !value)
|
||||
},
|
||||
},
|
||||
{
|
||||
name: command.toggleLayout,
|
||||
title: "Toggle key bindings layout",
|
||||
desc: "Switch which-key between dock and overlay mode",
|
||||
category: "System",
|
||||
run() {
|
||||
setMode((value) => {
|
||||
const next = value === "dock" ? "overlay" : "dock"
|
||||
api.kv.set(KV_LAYOUT, next)
|
||||
return next
|
||||
})
|
||||
},
|
||||
},
|
||||
{
|
||||
name: command.togglePending,
|
||||
title: "Toggle pending key preview",
|
||||
desc: "Automatically show which-key for pending key sequences in overlay mode",
|
||||
category: "System",
|
||||
run() {
|
||||
setPendingPreview((value) => {
|
||||
api.kv.set(KV_PENDING_PREVIEW, !value)
|
||||
return !value
|
||||
})
|
||||
},
|
||||
},
|
||||
],
|
||||
bindings: api.tuiConfig.keybinds.gather("which-key.toggle", toggleCommands),
|
||||
})
|
||||
|
||||
api.slots.register({
|
||||
order: 200,
|
||||
slots: {
|
||||
home_bottom() {
|
||||
return <HomeHint api={api} />
|
||||
},
|
||||
app() {
|
||||
return (
|
||||
<Show when={mode() === "overlay"}>
|
||||
<WhichKeyPanel api={api} layout="overlay" mode={mode} pendingPreview={pendingPreview} pinned={pinned} />
|
||||
</Show>
|
||||
)
|
||||
},
|
||||
app_bottom() {
|
||||
return (
|
||||
<Show when={mode() === "dock"}>
|
||||
<WhichKeyPanel api={api} layout="dock" mode={mode} pendingPreview={pendingPreview} pinned={pinned} />
|
||||
</Show>
|
||||
)
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const plugin: BuiltinTuiPlugin = {
|
||||
id: "which-key",
|
||||
enabled: false,
|
||||
tui,
|
||||
}
|
||||
|
||||
export default plugin
|
||||
Loading…
Add table
Add a link
Reference in a new issue