stash
Sebastian Herrlinger
parent
9319c810c9
commit
2bdb6e6a21
|
|
@ -20,6 +20,13 @@ const cfg = (options: Record<string, unknown> | undefined) => {
|
|||
}
|
||||
}
|
||||
|
||||
const names = (input: ReturnType<typeof cfg>) => {
|
||||
return {
|
||||
modal: `${input.route}.modal`,
|
||||
screen: `${input.route}.screen`,
|
||||
}
|
||||
}
|
||||
|
||||
const ui = {
|
||||
panel: "#1d1d1d",
|
||||
border: "#4a4a4a",
|
||||
|
|
@ -28,132 +35,118 @@ const ui = {
|
|||
accent: "#5f87ff",
|
||||
}
|
||||
|
||||
const parse = (data: Record<string, unknown> | undefined) => {
|
||||
const tab = typeof data?.tab === "number" ? data.tab : 0
|
||||
const count = typeof data?.count === "number" ? data.count : 0
|
||||
const source = typeof data?.source === "string" ? data.source : "unknown"
|
||||
const parse = (params: Record<string, unknown> | undefined) => {
|
||||
const tab = typeof params?.tab === "number" ? params.tab : 0
|
||||
const count = typeof params?.count === "number" ? params.count : 0
|
||||
const source = typeof params?.source === "string" ? params.source : "unknown"
|
||||
return {
|
||||
tab,
|
||||
tab: Math.max(0, Math.min(tab, tabs.length - 1)),
|
||||
count,
|
||||
source,
|
||||
}
|
||||
}
|
||||
|
||||
const active = (api: TuiApi, id: string) => {
|
||||
const route = api.route.data
|
||||
return route.type === "plugin" && route.id === id
|
||||
const current = (api: TuiApi, route: ReturnType<typeof names>) => {
|
||||
const value = api.route.current
|
||||
if (value.name !== route.screen && value.name !== route.modal) return parse(undefined)
|
||||
if (!("params" in value)) return parse(undefined)
|
||||
return parse(value.params)
|
||||
}
|
||||
|
||||
const merge = (api: TuiApi, patch: Record<string, unknown>) => {
|
||||
const route = api.route.data
|
||||
if (route.type !== "plugin") return patch
|
||||
return { ...(route.data ?? {}), ...patch }
|
||||
const nav = (api: TuiApi, name: string, params: Record<string, unknown> | undefined, from: string) => {
|
||||
console.log("[smoke] nav", {
|
||||
from,
|
||||
to: name,
|
||||
params,
|
||||
current: api.route.current,
|
||||
})
|
||||
api.route.navigate(name, params)
|
||||
}
|
||||
|
||||
const open = (api: TuiApi, input: ReturnType<typeof cfg>, source: string) => {
|
||||
console.log("[smoke] open", { route: input.route, source })
|
||||
api.route.plugin(input.route, merge(api, { source }))
|
||||
api.dialog.clear()
|
||||
const key = (api: TuiApi, where: string, evt: any) => {
|
||||
console.log("[smoke] key", {
|
||||
where,
|
||||
current: api.route.current.name,
|
||||
name: evt.name,
|
||||
ctrl: evt.ctrl,
|
||||
meta: evt.meta,
|
||||
shift: evt.shift,
|
||||
leader: evt.leader,
|
||||
defaultPrevented: evt.defaultPrevented,
|
||||
eventType: evt.eventType,
|
||||
})
|
||||
}
|
||||
|
||||
const patch = (api: TuiApi, input: ReturnType<typeof cfg>, value: Record<string, unknown>) => {
|
||||
api.route.plugin(input.route, merge(api, value))
|
||||
}
|
||||
|
||||
const Modal = (props: { api: TuiApi; input: ReturnType<typeof cfg> }) => {
|
||||
const Probe = (props: { api: TuiApi; route: ReturnType<typeof names> }) => {
|
||||
useKeyboard((evt) => {
|
||||
if (evt.defaultPrevented) return
|
||||
if (evt.name !== "return") return
|
||||
|
||||
console.log("[smoke] modal key", { key: evt.name })
|
||||
evt.preventDefault()
|
||||
evt.stopPropagation()
|
||||
open(props.api, props.input, "modal")
|
||||
const name = props.api.route.current.name
|
||||
if (name !== props.route.screen && name !== props.route.modal) return
|
||||
key(props.api, "probe", evt)
|
||||
})
|
||||
|
||||
return (
|
||||
<box paddingBottom={1} paddingLeft={2} paddingRight={2} gap={1} flexDirection="column">
|
||||
<text fg={ui.text}>
|
||||
<b>{props.input.label} modal</b>
|
||||
</text>
|
||||
<text fg={ui.muted}>Plugin commands and keybinds work without host internals</text>
|
||||
<text fg={ui.muted}>
|
||||
{props.api.keybind.print(props.input.modal)} open modal · {props.api.keybind.print(props.input.screen)} open
|
||||
screen
|
||||
</text>
|
||||
<text fg={ui.muted}>enter opens screen · esc closes</text>
|
||||
<box flexDirection="row" gap={1}>
|
||||
<box
|
||||
onMouseUp={() => open(props.api, props.input, "modal")}
|
||||
backgroundColor={ui.accent}
|
||||
paddingLeft={1}
|
||||
paddingRight={1}
|
||||
>
|
||||
<text fg={ui.text}>open screen</text>
|
||||
</box>
|
||||
<box onMouseUp={() => props.api.dialog.clear()} backgroundColor={ui.border} paddingLeft={1} paddingRight={1}>
|
||||
<text fg={ui.text}>cancel</text>
|
||||
</box>
|
||||
</box>
|
||||
</box>
|
||||
)
|
||||
return null
|
||||
}
|
||||
|
||||
const Screen = (props: { api: TuiApi; input: ReturnType<typeof cfg>; data?: Record<string, unknown> }) => {
|
||||
const Screen = (props: {
|
||||
api: TuiApi
|
||||
input: ReturnType<typeof cfg>
|
||||
route: ReturnType<typeof names>
|
||||
params?: Record<string, unknown>
|
||||
}) => {
|
||||
const dim = useTerminalDimensions()
|
||||
const value = parse(props.data)
|
||||
const value = parse(props.params)
|
||||
|
||||
console.log("[smoke] render", {
|
||||
view: "screen",
|
||||
current: props.api.route.current,
|
||||
params: props.params,
|
||||
})
|
||||
|
||||
useKeyboard((evt) => {
|
||||
if (evt.defaultPrevented) return
|
||||
if (!active(props.api, props.input.route)) return
|
||||
key(props.api, "screen", evt)
|
||||
if (props.api.route.current.name !== props.route.screen) return
|
||||
|
||||
const state = parse(props.api.route.data.type === "plugin" ? props.api.route.data.data : undefined)
|
||||
const next = current(props.api, props.route)
|
||||
|
||||
if (evt.name === "escape" || (evt.ctrl && evt.name === "h")) {
|
||||
console.log("[smoke] screen key", { key: evt.name, ctrl: evt.ctrl })
|
||||
evt.preventDefault()
|
||||
evt.stopPropagation()
|
||||
props.api.route.home()
|
||||
nav(props.api, "home", undefined, "screen:escape")
|
||||
return
|
||||
}
|
||||
|
||||
if (evt.name === "left") {
|
||||
console.log("[smoke] screen key", { key: evt.name })
|
||||
if (evt.name === "left" || evt.name === "h") {
|
||||
evt.preventDefault()
|
||||
evt.stopPropagation()
|
||||
patch(props.api, props.input, { tab: (state.tab - 1 + tabs.length) % tabs.length })
|
||||
nav(props.api, props.route.screen, { ...next, tab: (next.tab - 1 + tabs.length) % tabs.length }, "screen:left")
|
||||
return
|
||||
}
|
||||
|
||||
if (evt.name === "right") {
|
||||
console.log("[smoke] screen key", { key: evt.name })
|
||||
if (evt.name === "right" || evt.name === "l") {
|
||||
evt.preventDefault()
|
||||
evt.stopPropagation()
|
||||
patch(props.api, props.input, { tab: (state.tab + 1) % tabs.length })
|
||||
nav(props.api, props.route.screen, { ...next, tab: (next.tab + 1) % tabs.length }, "screen:right")
|
||||
return
|
||||
}
|
||||
|
||||
if (evt.name === "up" || (evt.ctrl && evt.name === "up")) {
|
||||
console.log("[smoke] screen key", { key: evt.name, ctrl: evt.ctrl })
|
||||
if (evt.name === "up" || evt.name === "k") {
|
||||
evt.preventDefault()
|
||||
evt.stopPropagation()
|
||||
patch(props.api, props.input, { count: state.count + 1 })
|
||||
nav(props.api, props.route.screen, { ...next, count: next.count + 1 }, "screen:up")
|
||||
return
|
||||
}
|
||||
|
||||
if (evt.name === "down" || (evt.ctrl && evt.name === "down")) {
|
||||
console.log("[smoke] screen key", { key: evt.name, ctrl: evt.ctrl })
|
||||
if (evt.name === "down" || evt.name === "j") {
|
||||
evt.preventDefault()
|
||||
evt.stopPropagation()
|
||||
patch(props.api, props.input, { count: state.count - 1 })
|
||||
nav(props.api, props.route.screen, { ...next, count: next.count - 1 }, "screen:down")
|
||||
return
|
||||
}
|
||||
|
||||
if (evt.ctrl && evt.name === "m") {
|
||||
console.log("[smoke] screen key", { key: evt.name, ctrl: evt.ctrl })
|
||||
evt.preventDefault()
|
||||
evt.stopPropagation()
|
||||
props.api.dialog.replace(() => <Modal api={props.api} input={props.input} />)
|
||||
nav(props.api, props.route.modal, next, "screen:ctrl+m")
|
||||
}
|
||||
})
|
||||
|
||||
|
|
@ -181,7 +174,7 @@ const Screen = (props: { api: TuiApi; input: ReturnType<typeof cfg>; data?: Reco
|
|||
const on = value.tab === i
|
||||
return (
|
||||
<box
|
||||
onMouseUp={() => patch(props.api, props.input, { tab: i })}
|
||||
onMouseUp={() => nav(props.api, props.route.screen, { ...value, tab: i }, "screen:click-tab")}
|
||||
backgroundColor={on ? ui.accent : ui.border}
|
||||
paddingLeft={1}
|
||||
paddingRight={1}
|
||||
|
|
@ -203,32 +196,16 @@ const Screen = (props: { api: TuiApi; input: ReturnType<typeof cfg>; data?: Reco
|
|||
>
|
||||
{value.tab === 0 ? (
|
||||
<box flexDirection="column" gap={1}>
|
||||
<text fg={ui.text}>Route id: {props.input.route}</text>
|
||||
<text fg={ui.text}>Route: {props.route.screen}</text>
|
||||
<text fg={ui.muted}>source: {value.source}</text>
|
||||
<text fg={ui.muted}>left/right switch tabs</text>
|
||||
<text fg={ui.muted}>left/right or h/l switch tabs</text>
|
||||
</box>
|
||||
) : null}
|
||||
|
||||
{value.tab === 1 ? (
|
||||
<box flexDirection="column" gap={1}>
|
||||
<text fg={ui.text}>Counter: {value.count}</text>
|
||||
<text fg={ui.muted}>ctrl+up and ctrl+down change value</text>
|
||||
<box flexDirection="row" gap={1}>
|
||||
<box
|
||||
onMouseUp={() => patch(props.api, props.input, { count: value.count + 1 })}
|
||||
backgroundColor={ui.border}
|
||||
paddingLeft={1}
|
||||
>
|
||||
<text fg={ui.text}>+1</text>
|
||||
</box>
|
||||
<box
|
||||
onMouseUp={() => patch(props.api, props.input, { count: value.count - 1 })}
|
||||
backgroundColor={ui.border}
|
||||
paddingLeft={1}
|
||||
>
|
||||
<text fg={ui.text}>-1</text>
|
||||
</box>
|
||||
</box>
|
||||
<text fg={ui.muted}>up/down or j/k change value</text>
|
||||
</box>
|
||||
) : null}
|
||||
|
||||
|
|
@ -241,11 +218,16 @@ const Screen = (props: { api: TuiApi; input: ReturnType<typeof cfg>; data?: Reco
|
|||
</box>
|
||||
|
||||
<box flexDirection="row" gap={1} paddingTop={1}>
|
||||
<box onMouseUp={() => props.api.route.home()} backgroundColor={ui.border} paddingLeft={1} paddingRight={1}>
|
||||
<box
|
||||
onMouseUp={() => nav(props.api, "home", undefined, "screen:click-home")}
|
||||
backgroundColor={ui.border}
|
||||
paddingLeft={1}
|
||||
paddingRight={1}
|
||||
>
|
||||
<text fg={ui.text}>go home</text>
|
||||
</box>
|
||||
<box
|
||||
onMouseUp={() => props.api.dialog.replace(() => <Modal api={props.api} input={props.input} />)}
|
||||
onMouseUp={() => nav(props.api, props.route.modal, value, "screen:click-modal")}
|
||||
backgroundColor={ui.accent}
|
||||
paddingLeft={1}
|
||||
paddingRight={1}
|
||||
|
|
@ -258,13 +240,78 @@ const Screen = (props: { api: TuiApi; input: ReturnType<typeof cfg>; data?: Reco
|
|||
)
|
||||
}
|
||||
|
||||
const slot = (api: TuiApi, input: ReturnType<typeof cfg>) => ({
|
||||
const Modal = (props: {
|
||||
api: TuiApi
|
||||
input: ReturnType<typeof cfg>
|
||||
route: ReturnType<typeof names>
|
||||
params?: Record<string, unknown>
|
||||
}) => {
|
||||
const Dialog = props.api.ui.Dialog
|
||||
const value = parse(props.params)
|
||||
|
||||
console.log("[smoke] render", {
|
||||
view: "modal",
|
||||
current: props.api.route.current,
|
||||
params: props.params,
|
||||
})
|
||||
|
||||
useKeyboard((evt) => {
|
||||
key(props.api, "modal", evt)
|
||||
if (props.api.route.current.name !== props.route.modal) return
|
||||
|
||||
if (evt.name === "return" || evt.name === "enter") {
|
||||
evt.preventDefault()
|
||||
evt.stopPropagation()
|
||||
nav(props.api, props.route.screen, { ...value, source: "modal" }, "modal:enter")
|
||||
return
|
||||
}
|
||||
|
||||
if (evt.name === "escape") {
|
||||
evt.preventDefault()
|
||||
evt.stopPropagation()
|
||||
nav(props.api, "home", undefined, "modal:escape")
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<box width="100%" height="100%" backgroundColor={ui.panel}>
|
||||
<Dialog onClose={() => nav(props.api, "home", undefined, "modal:onClose")}>
|
||||
<box paddingBottom={1} paddingLeft={2} paddingRight={2} gap={1} flexDirection="column">
|
||||
<text fg={ui.text}>
|
||||
<b>{props.input.label} modal</b>
|
||||
</text>
|
||||
<text fg={ui.muted}>{props.api.keybind.print(props.input.modal)} modal command</text>
|
||||
<text fg={ui.muted}>{props.api.keybind.print(props.input.screen)} screen command</text>
|
||||
<text fg={ui.muted}>enter opens screen · esc closes</text>
|
||||
<box flexDirection="row" gap={1}>
|
||||
<box
|
||||
onMouseUp={() => nav(props.api, props.route.screen, { ...value, source: "modal" }, "modal:click-open")}
|
||||
backgroundColor={ui.accent}
|
||||
paddingLeft={1}
|
||||
paddingRight={1}
|
||||
>
|
||||
<text fg={ui.text}>open screen</text>
|
||||
</box>
|
||||
<box
|
||||
onMouseUp={() => nav(props.api, "home", undefined, "modal:click-cancel")}
|
||||
backgroundColor={ui.border}
|
||||
paddingLeft={1}
|
||||
paddingRight={1}
|
||||
>
|
||||
<text fg={ui.text}>cancel</text>
|
||||
</box>
|
||||
</box>
|
||||
</box>
|
||||
</Dialog>
|
||||
</box>
|
||||
)
|
||||
}
|
||||
|
||||
const slot = (api: TuiApi, input: ReturnType<typeof cfg>, route: ReturnType<typeof names>) => ({
|
||||
id: "workspace-smoke",
|
||||
slots: {
|
||||
route(_ctx, value) {
|
||||
if (value.route_id !== input.route) return null
|
||||
console.log("[smoke] route render", { route: value.route_id, data: value.data })
|
||||
return <Screen api={api} input={input} data={value.data} />
|
||||
app() {
|
||||
return <Probe api={api} route={route} />
|
||||
},
|
||||
home_logo() {
|
||||
return <text>plugin logo:{input.label}</text>
|
||||
|
|
@ -280,6 +327,7 @@ const slot = (api: TuiApi, input: ReturnType<typeof cfg>) => ({
|
|||
})
|
||||
|
||||
const reg = (api: TuiApi, input: ReturnType<typeof cfg>) => {
|
||||
const route = names(input)
|
||||
api.command.register(() => [
|
||||
{
|
||||
title: `${input.label} modal`,
|
||||
|
|
@ -290,8 +338,8 @@ const reg = (api: TuiApi, input: ReturnType<typeof cfg>) => {
|
|||
name: "smoke",
|
||||
},
|
||||
onSelect: () => {
|
||||
console.log("[smoke] command", { value: "plugin.smoke.modal" })
|
||||
api.dialog.replace(() => <Modal api={api} input={input} />)
|
||||
console.log("[smoke] command", { value: "plugin.smoke.modal", current: api.route.current })
|
||||
nav(api, route.modal, { source: "command" }, "command:modal")
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -303,19 +351,32 @@ const reg = (api: TuiApi, input: ReturnType<typeof cfg>) => {
|
|||
name: "smoke-screen",
|
||||
},
|
||||
onSelect: () => {
|
||||
console.log("[smoke] command", { value: "plugin.smoke.screen" })
|
||||
open(api, input, "command")
|
||||
console.log("[smoke] command", { value: "plugin.smoke.screen", current: api.route.current })
|
||||
nav(api, route.screen, { source: "command", tab: 0, count: 0 }, "command:screen")
|
||||
},
|
||||
},
|
||||
{
|
||||
title: `${input.label} go home`,
|
||||
value: "plugin.smoke.home",
|
||||
category: "Plugin",
|
||||
enabled: active(api, input.route),
|
||||
enabled: api.route.current.name !== "home",
|
||||
onSelect: () => {
|
||||
console.log("[smoke] command", { value: "plugin.smoke.home" })
|
||||
api.route.home()
|
||||
api.dialog.clear()
|
||||
console.log("[smoke] command", { value: "plugin.smoke.home", current: api.route.current })
|
||||
nav(api, "home", undefined, "command:home")
|
||||
},
|
||||
},
|
||||
{
|
||||
title: `${input.label} toast`,
|
||||
value: "plugin.smoke.toast",
|
||||
category: "Plugin",
|
||||
onSelect: () => {
|
||||
console.log("[smoke] command", { value: "plugin.smoke.toast", current: api.route.current })
|
||||
api.ui.toast({
|
||||
variant: "info",
|
||||
title: "Smoke",
|
||||
message: "Plugin toast works",
|
||||
duration: 2000,
|
||||
})
|
||||
},
|
||||
},
|
||||
])
|
||||
|
|
@ -329,14 +390,31 @@ const tui = async (input: TuiPluginInput, options?: Record<string, unknown>) =>
|
|||
if (options?.enabled === false) return
|
||||
|
||||
const value = cfg(options)
|
||||
const route = names(value)
|
||||
|
||||
console.log("[smoke] init", {
|
||||
label: value.label,
|
||||
modal: value.modal,
|
||||
screen: value.screen,
|
||||
route: value.route,
|
||||
route,
|
||||
keybind: {
|
||||
modal: value.modal,
|
||||
screen: value.screen,
|
||||
},
|
||||
})
|
||||
|
||||
input.api.route.register([
|
||||
{
|
||||
name: route.screen,
|
||||
render: ({ params }) => <Screen api={input.api} input={value} route={route} params={params} />,
|
||||
},
|
||||
{
|
||||
name: route.modal,
|
||||
render: ({ params }) => <Modal api={input.api} input={value} route={route} params={params} />,
|
||||
},
|
||||
])
|
||||
|
||||
console.log("[smoke] routes registered", route)
|
||||
|
||||
reg(input.api, value)
|
||||
input.slots.register(slot(input.api, value))
|
||||
input.slots.register(slot(input.api, value, route))
|
||||
}
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,25 @@
|
|||
import { render, useKeyboard, useRenderer, useTerminalDimensions } from "@opentui/solid"
|
||||
import { render, useKeyboard, useRenderer, useTerminalDimensions, type JSX } from "@opentui/solid"
|
||||
import { Clipboard } from "@tui/util/clipboard"
|
||||
import { Selection } from "@tui/util/selection"
|
||||
import { createCliRenderer, MouseButton, TextAttributes, type CliRendererConfig, type ParsedKey } from "@opentui/core"
|
||||
import { RouteProvider, useRoute } from "@tui/context/route"
|
||||
import { Switch, Match, createEffect, untrack, ErrorBoundary, createSignal, onMount, batch, Show, on } from "solid-js"
|
||||
import {
|
||||
Switch,
|
||||
Match,
|
||||
createEffect,
|
||||
createMemo,
|
||||
untrack,
|
||||
ErrorBoundary,
|
||||
createSignal,
|
||||
onMount,
|
||||
batch,
|
||||
Show,
|
||||
on,
|
||||
} from "solid-js"
|
||||
import { win32DisableProcessedInput, win32FlushInputBuffer, win32InstallCtrlCGuard } from "./win32"
|
||||
import { Installation } from "@/installation"
|
||||
import { Flag } from "@/flag/flag"
|
||||
import { DialogProvider, useDialog } from "@tui/ui/dialog"
|
||||
import { Dialog as DialogUI, DialogProvider, useDialog } from "@tui/ui/dialog"
|
||||
import { DialogProvider as DialogProviderList } from "@tui/component/dialog-provider"
|
||||
import { SDKProvider, useSDK } from "@tui/context/sdk"
|
||||
import { SyncProvider, useSync } from "@tui/context/sync"
|
||||
|
|
@ -41,7 +53,7 @@ import { writeHeapSnapshot } from "v8"
|
|||
import { PromptRefProvider, usePromptRef } from "./context/prompt"
|
||||
import { TuiConfigProvider } from "./context/tui-config"
|
||||
import { TuiConfig } from "@/config/tui"
|
||||
import type { TuiApi, TuiRoute } from "@opencode-ai/plugin/tui"
|
||||
import type { TuiApi, TuiRouteDefinition } from "@opencode-ai/plugin/tui"
|
||||
import { TuiPlugin } from "./plugin"
|
||||
|
||||
async function getTerminalBackgroundColor(): Promise<"dark" | "light"> {
|
||||
|
|
@ -220,6 +232,13 @@ function App() {
|
|||
const sync = useSync()
|
||||
const exit = useExit()
|
||||
const promptRef = usePromptRef()
|
||||
const routes = new Map<string, { key: symbol; render: TuiRouteDefinition["render"] }[]>()
|
||||
const [rev, setRev] = createSignal(0)
|
||||
const view = (name: string) => {
|
||||
rev()
|
||||
return routes.get(name)?.at(-1)?.render
|
||||
}
|
||||
|
||||
const api: TuiApi = {
|
||||
command: {
|
||||
register(cb) {
|
||||
|
|
@ -229,29 +248,76 @@ function App() {
|
|||
command.trigger(value)
|
||||
},
|
||||
},
|
||||
dialog: {
|
||||
clear() {
|
||||
dialog.clear()
|
||||
route: {
|
||||
register(input) {
|
||||
const key = Symbol()
|
||||
for (const item of input) {
|
||||
const list = routes.get(item.name) ?? []
|
||||
list.push({ key, render: item.render })
|
||||
routes.set(item.name, list)
|
||||
}
|
||||
setRev((x) => x + 1)
|
||||
return () => {
|
||||
for (const item of input) {
|
||||
const list = routes.get(item.name)
|
||||
if (!list) continue
|
||||
routes.set(
|
||||
item.name,
|
||||
list.filter((x) => x.key !== key),
|
||||
)
|
||||
if (!routes.get(item.name)?.length) routes.delete(item.name)
|
||||
}
|
||||
setRev((x) => x + 1)
|
||||
}
|
||||
},
|
||||
replace(input, onClose) {
|
||||
dialog.replace(input, onClose)
|
||||
navigate(name, params) {
|
||||
if (name === "home") {
|
||||
route.navigate({ type: "home" })
|
||||
return
|
||||
}
|
||||
|
||||
if (name === "session") {
|
||||
const sessionID = params?.sessionID
|
||||
if (typeof sessionID !== "string") return
|
||||
route.navigate({ type: "session", sessionID })
|
||||
return
|
||||
}
|
||||
|
||||
route.navigate({ type: "plugin", id: name, data: params })
|
||||
},
|
||||
get depth() {
|
||||
return dialog.stack.length
|
||||
get current() {
|
||||
if (route.data.type === "home") return { name: "home" }
|
||||
if (route.data.type === "session") {
|
||||
return {
|
||||
name: "session",
|
||||
params: {
|
||||
sessionID: route.data.sessionID,
|
||||
initialPrompt: route.data.initialPrompt,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
name: route.data.id,
|
||||
params: route.data.data,
|
||||
}
|
||||
},
|
||||
},
|
||||
route: {
|
||||
get data() {
|
||||
return route.data
|
||||
ui: {
|
||||
Dialog(props) {
|
||||
return (
|
||||
<DialogUI size={props.size} onClose={props.onClose}>
|
||||
{props.children as JSX.Element}
|
||||
</DialogUI>
|
||||
)
|
||||
},
|
||||
navigate(next: TuiRoute) {
|
||||
route.navigate(next)
|
||||
},
|
||||
home() {
|
||||
route.navigate({ type: "home" })
|
||||
},
|
||||
plugin(id, data) {
|
||||
route.navigate({ type: "plugin", id, data })
|
||||
toast(input) {
|
||||
toast.show({
|
||||
title: input.title,
|
||||
message: input.message,
|
||||
variant: input.variant ?? "info",
|
||||
duration: input.duration,
|
||||
})
|
||||
},
|
||||
},
|
||||
keybind: {
|
||||
|
|
@ -814,10 +880,12 @@ function App() {
|
|||
})
|
||||
})
|
||||
|
||||
const plugin = () => {
|
||||
const plugin = createMemo(() => {
|
||||
if (route.data.type !== "plugin") return
|
||||
return route.data
|
||||
}
|
||||
const render = view(route.data.id)
|
||||
if (!render) return <PluginRouteMissing id={route.data.id} onHome={() => route.navigate({ type: "home" })} />
|
||||
return render({ params: route.data.data })
|
||||
})
|
||||
|
||||
return (
|
||||
<box
|
||||
|
|
@ -842,13 +910,7 @@ function App() {
|
|||
<Session />
|
||||
</Match>
|
||||
</Switch>
|
||||
<Show when={plugin()}>
|
||||
{(item) => (
|
||||
<TuiPlugin.Slot name="route" mode="replace" route_id={item().id} data={item().data}>
|
||||
<PluginRouteMissing id={item().id} onHome={() => route.navigate({ type: "home" })} />
|
||||
</TuiPlugin.Slot>
|
||||
)}
|
||||
</Show>
|
||||
{plugin()}
|
||||
<TuiPlugin.Slot name="app" />
|
||||
</box>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -102,20 +102,16 @@ test("ignores function-only tui exports and loads object exports", async () => {
|
|||
register: () => {},
|
||||
trigger: () => {},
|
||||
},
|
||||
dialog: {
|
||||
clear: () => {},
|
||||
replace: () => {},
|
||||
get depth() {
|
||||
return 0
|
||||
route: {
|
||||
register: () => () => {},
|
||||
navigate: () => {},
|
||||
get current() {
|
||||
return { name: "home" as const }
|
||||
},
|
||||
},
|
||||
route: {
|
||||
get data() {
|
||||
return { type: "home" as const }
|
||||
},
|
||||
navigate: () => {},
|
||||
home: () => {},
|
||||
plugin: () => {},
|
||||
ui: {
|
||||
Dialog: () => null,
|
||||
toast: () => {},
|
||||
},
|
||||
keybind: {
|
||||
parse: () => ({
|
||||
|
|
|
|||
|
|
@ -22,20 +22,27 @@ export type ThemeJson = {
|
|||
}
|
||||
}
|
||||
|
||||
export type TuiRoute =
|
||||
export type TuiRouteCurrent =
|
||||
| {
|
||||
type: "home"
|
||||
name: "home"
|
||||
}
|
||||
| {
|
||||
type: "session"
|
||||
sessionID: string
|
||||
name: "session"
|
||||
params: {
|
||||
sessionID: string
|
||||
initialPrompt?: unknown
|
||||
}
|
||||
}
|
||||
| {
|
||||
type: "plugin"
|
||||
id: string
|
||||
data?: Record<string, unknown>
|
||||
name: string
|
||||
params?: Record<string, unknown>
|
||||
}
|
||||
|
||||
export type TuiRouteDefinition<Node = unknown> = {
|
||||
name: string
|
||||
render: (input: { params?: Record<string, unknown> }) => Node
|
||||
}
|
||||
|
||||
export type TuiCommand = {
|
||||
title: string
|
||||
value: string
|
||||
|
|
@ -61,21 +68,32 @@ export type TuiKeybind = {
|
|||
leader: boolean
|
||||
}
|
||||
|
||||
export type TuiDialogProps<Node = unknown> = {
|
||||
size?: "medium" | "large"
|
||||
onClose: () => void
|
||||
children?: Node
|
||||
}
|
||||
|
||||
export type TuiToast = {
|
||||
variant?: "info" | "success" | "warning" | "error"
|
||||
title?: string
|
||||
message: string
|
||||
duration?: number
|
||||
}
|
||||
|
||||
export type TuiApi<Node = unknown> = {
|
||||
command: {
|
||||
register: (cb: () => TuiCommand[]) => void
|
||||
trigger: (value: string) => void
|
||||
}
|
||||
dialog: {
|
||||
clear: () => void
|
||||
replace: (input: Node | (() => Node), onClose?: () => void) => void
|
||||
readonly depth: number
|
||||
}
|
||||
route: {
|
||||
readonly data: TuiRoute
|
||||
navigate: (route: TuiRoute) => void
|
||||
home: () => void
|
||||
plugin: (id: string, data?: Record<string, unknown>) => void
|
||||
register: (routes: TuiRouteDefinition<Node>[]) => () => void
|
||||
navigate: (name: string, params?: Record<string, unknown>) => void
|
||||
readonly current: TuiRouteCurrent
|
||||
}
|
||||
ui: {
|
||||
Dialog: (props: TuiDialogProps<Node>) => Node
|
||||
toast: (input: TuiToast) => void
|
||||
}
|
||||
keybind: {
|
||||
parse: (evt: ParsedKey) => TuiKeybind
|
||||
|
|
@ -89,10 +107,6 @@ export type TuiApi<Node = unknown> = {
|
|||
|
||||
export type TuiSlotMap = {
|
||||
app: {}
|
||||
route: {
|
||||
route_id: string
|
||||
data?: Record<string, unknown>
|
||||
}
|
||||
home_logo: {}
|
||||
sidebar_top: {
|
||||
session_id: string
|
||||
|
|
|
|||
Loading…
Reference in New Issue