@agentprojectcontext/apx 1.15.6 → 1.16.0

package/src/tui/plugin/slots.tsx

@@ -0,0 +1,60 @@
+import type { TuiPluginApi, TuiSlotContext, TuiSlotMap, TuiSlotProps } from "@opencode-ai/plugin/tui"
+import { createSlot, createSolidSlotRegistry, type JSX, type SolidPlugin } from "@opentui/solid"
+import { isRecord } from "@/util/record"
+
+type RuntimeSlotMap = TuiSlotMap<Record<string, object>>
+
+type Slot = <Name extends string>(props: TuiSlotProps<Name>) => JSX.Element | null
+export type HostSlotPlugin<Slots extends Record<string, object> = {}> = SolidPlugin<TuiSlotMap<Slots>, TuiSlotContext>
+
+export type HostPluginApi = TuiPluginApi
+export type HostSlots = {
+  register: {
+    (plugin: HostSlotPlugin): () => void
+    <Slots extends Record<string, object>>(plugin: HostSlotPlugin<Slots>): () => void
+  }
+}
+
+function empty<Name extends string>(_props: TuiSlotProps<Name>) {
+  return null
+}
+
+let view: Slot = empty
+
+export const Slot: Slot = (props) => view(props)
+
+function isHostSlotPlugin(value: unknown): value is HostSlotPlugin<Record<string, object>> {
+  if (!isRecord(value)) return false
+  if (typeof value.id !== "string") return false
+  if (!isRecord(value.slots)) return false
+  return true
+}
+
+export function setupSlots(api: HostPluginApi): HostSlots {
+  const reg = createSolidSlotRegistry<RuntimeSlotMap, TuiSlotContext>(
+    api.renderer,
+    {
+      theme: api.theme,
+    },
+    {
+      onPluginError(event) {
+        console.error("[tui.slot] plugin error", {
+          plugin: event.pluginId,
+          slot: event.slot,
+          phase: event.phase,
+          source: event.source,
+          message: event.error.message,
+        })
+      },
+    },
+  )
+
+  const slot = createSlot<RuntimeSlotMap, TuiSlotContext>(reg)
+  view = (props) => slot(props)
+  return {
+    register(plugin: HostSlotPlugin) {
+      if (!isHostSlotPlugin(plugin)) return () => {}
+      return reg.register(plugin)
+    },
+  }
+}

package/src/tui/routes/home.tsx

@@ -0,0 +1,96 @@
+import { Prompt, type PromptRef } from "@tui/component/prompt"
+import { createEffect, createSignal, onMount } from "solid-js"
+import { Logo } from "../component/logo"
+import { useProject } from "../context/project"
+import { useSync } from "../context/sync"
+import { Toast } from "../ui/toast"
+import { useArgs } from "../context/args"
+import { useRouteData } from "@tui/context/route"
+import { usePromptRef } from "../context/prompt"
+import { useLocal } from "../context/local"
+import { TuiPluginRuntime } from "@/cli/cmd/tui/plugin/runtime"
+import { useEditorContext } from "@tui/context/editor"
+
+let once = false
+const placeholder = {
+  normal: ["Fix a TODO in the codebase", "What is the tech stack of this project?", "Fix broken tests"],
+  shell: ["ls -la", "git status", "pwd"],
+}
+
+export function Home() {
+  const sync = useSync()
+  const project = useProject()
+  const route = useRouteData("home")
+  const promptRef = usePromptRef()
+  const [ref, setRef] = createSignal<PromptRef | undefined>()
+  const args = useArgs()
+  const local = useLocal()
+  const editor = useEditorContext()
+  let sent = false
+
+  onMount(() => {
+    editor.clearSelection()
+  })
+
+  const bind = (r: PromptRef | undefined) => {
+    setRef(r)
+    promptRef.set(r)
+    if (once || !r) return
+    if (route.prompt) {
+      r.set(route.prompt)
+      once = true
+      return
+    }
+    if (!args.prompt) return
+    r.set({ input: args.prompt, parts: [] })
+    once = true
+  }
+
+  // Wait for sync and model store to be ready before auto-submitting --prompt
+  createEffect(() => {
+    const r = ref()
+    if (sent) return
+    if (!r) return
+    if (!sync.ready || !local.model.ready) return
+    if (!args.prompt) return
+    if (r.current.input !== args.prompt) return
+    sent = true
+    r.submit()
+  })
+
+  return (
+    <>
+      <box flexGrow={1} alignItems="center" paddingLeft={2} paddingRight={2}>
+        <box flexGrow={1} minHeight={0} />
+        <box height={4} minHeight={0} flexShrink={1} />
+        <box flexShrink={0}>
+          <TuiPluginRuntime.Slot name="home_logo" mode="replace">
+            <Logo />
+          </TuiPluginRuntime.Slot>
+        </box>
+        <box height={1} minHeight={0} flexShrink={1} />
+        <box width="100%" maxWidth={75} zIndex={1000} paddingTop={1} flexShrink={0}>
+          <TuiPluginRuntime.Slot
+            name="home_prompt"
+            mode="replace"
+            workspace_id={project.workspace.current()}
+            ref={bind}
+          >
+            <Prompt
+              ref={bind}
+              workspaceID={project.workspace.current()}
+              right={<TuiPluginRuntime.Slot name="home_prompt_right" workspace_id={project.workspace.current()} />}
+              placeholders={placeholder}
+            />
+          </TuiPluginRuntime.Slot>
+        </box>
+        <TuiPluginRuntime.Slot name="home_bottom" />
+        <box flexGrow={1} minHeight={0} />
+        <Toast />
+      </box>
+      <box width="100%" flexShrink={0}>
+        <TuiPluginRuntime.Slot name="home_footer" mode="single_winner" />
+      </box>
+    </>
+  )
+}

package/src/tui/routes/session/dialog-fork-from-timeline.tsx

@@ -0,0 +1,76 @@
+import { createMemo, onMount } from "solid-js"
+import { useSync } from "@tui/context/sync"
+import { DialogSelect, type DialogSelectOption } from "@tui/ui/dialog-select"
+import type { TextPart } from "@opencode-ai/sdk/v2"
+import { Locale } from "@/util/locale"
+import { useSDK } from "@tui/context/sdk"
+import { useRoute } from "@tui/context/route"
+import { useDialog, type DialogContext } from "../../ui/dialog"
+import type { PromptInfo } from "@tui/component/prompt/history"
+import { strip } from "@tui/component/prompt/part"
+
+export function DialogForkFromTimeline(props: { sessionID: string; onMove: (messageID?: string) => void }) {
+  const sync = useSync()
+  const dialog = useDialog()
+  const sdk = useSDK()
+  const route = useRoute()
+
+  onMount(() => {
+    dialog.setSize("large")
+  })
+
+  const options = createMemo((): DialogSelectOption<string | undefined>[] => {
+    const messages = sync.data.message[props.sessionID] ?? []
+    const fullSession = {
+      title: "Full session",
+      value: undefined,
+      onSelect: async (dialog: DialogContext) => {
+        const forked = await sdk.client.session.fork({ sessionID: props.sessionID })
+        route.navigate({
+          sessionID: forked.data!.id,
+          type: "session",
+        })
+        dialog.clear()
+      },
+    } satisfies DialogSelectOption<string | undefined>
+    const result = [] as DialogSelectOption<string | undefined>[]
+    for (const message of messages) {
+      if (message.role !== "user") continue
+      const part = (sync.data.part[message.id] ?? []).find(
+        (x) => x.type === "text" && !x.synthetic && !x.ignored,
+      ) as TextPart
+      if (!part) continue
+      result.push({
+        title: part.text.replace(/\n/g, " "),
+        value: message.id,
+        footer: Locale.time(message.time.created),
+        onSelect: async (dialog) => {
+          const forked = await sdk.client.session.fork({
+            sessionID: props.sessionID,
+            messageID: message.id,
+          })
+          const parts = sync.data.part[message.id] ?? []
+          const prompt = parts.reduce(
+            (agg, part) => {
+              if (part.type === "text") {
+                if (!part.synthetic) agg.input += part.text
+              }
+              if (part.type === "file") agg.parts.push(strip(part))
+              return agg
+            },
+            { input: "", parts: [] as PromptInfo["parts"] },
+          )
+          route.navigate({
+            sessionID: forked.data!.id,
+            type: "session",
+            prompt,
+          })
+          dialog.clear()
+        },
+      })
+    }
+    return [fullSession, ...result.reverse()]
+  })
+
+  return <DialogSelect onMove={(option) => props.onMove(option.value)} title="Fork session" options={options()} />
+}

package/src/tui/routes/session/dialog-message.tsx

@@ -0,0 +1,108 @@
+import { createMemo } from "solid-js"
+import { useSync } from "@tui/context/sync"
+import { DialogSelect } from "@tui/ui/dialog-select"
+import { useSDK } from "@tui/context/sdk"
+import { useRoute } from "@tui/context/route"
+import * as Clipboard from "@tui/util/clipboard"
+import type { PromptInfo } from "@tui/component/prompt/history"
+import { strip } from "@tui/component/prompt/part"
+
+export function DialogMessage(props: {
+  messageID: string
+  sessionID: string
+  setPrompt?: (prompt: PromptInfo) => void
+}) {
+  const sync = useSync()
+  const sdk = useSDK()
+  const message = createMemo(() => sync.data.message[props.sessionID]?.find((x) => x.id === props.messageID))
+  const route = useRoute()
+
+  return (
+    <DialogSelect
+      title="Message Actions"
+      options={[
+        {
+          title: "Revert",
+          value: "session.revert",
+          description: "undo messages and file changes",
+          onSelect: (dialog) => {
+            const msg = message()
+            if (!msg) return
+
+            void sdk.client.session.revert({
+              sessionID: props.sessionID,
+              messageID: msg.id,
+            })
+
+            if (props.setPrompt) {
+              const parts = sync.data.part[msg.id]
+              const promptInfo = parts.reduce(
+                (agg, part) => {
+                  if (part.type === "text") {
+                    if (!part.synthetic) agg.input += part.text
+                  }
+                  if (part.type === "file") agg.parts.push(strip(part))
+                  return agg
+                },
+                { input: "", parts: [] as PromptInfo["parts"] },
+              )
+              props.setPrompt(promptInfo)
+            }
+
+            dialog.clear()
+          },
+        },
+        {
+          title: "Copy",
+          value: "message.copy",
+          description: "message text to clipboard",
+          onSelect: async (dialog) => {
+            const msg = message()
+            if (!msg) return
+
+            const parts = sync.data.part[msg.id]
+            const text = parts.reduce((agg, part) => {
+              if (part.type === "text" && !part.synthetic) {
+                agg += part.text
+              }
+              return agg
+            }, "")
+
+            await Clipboard.copy(text)
+            dialog.clear()
+          },
+        },
+        {
+          title: "Fork",
+          value: "session.fork",
+          description: "create a new session",
+          onSelect: async (dialog) => {
+            const result = await sdk.client.session.fork({
+              sessionID: props.sessionID,
+              messageID: props.messageID,
+            })
+            const msg = message()
+            const prompt = msg
+              ? sync.data.part[msg.id].reduce(
+                  (agg, part) => {
+                    if (part.type === "text") {
+                      if (!part.synthetic) agg.input += part.text
+                    }
+                    if (part.type === "file") agg.parts.push(part)
+                    return agg
+                  },
+                  { input: "", parts: [] as PromptInfo["parts"] },
+                )
+              : undefined
+            route.navigate({
+              sessionID: result.data!.id,
+              type: "session",
+              prompt,
+            })
+            dialog.clear()
+          },
+        },
+      ]}
+    />
+  )
+}

package/src/tui/routes/session/dialog-subagent.tsx

@@ -0,0 +1,26 @@
+import { DialogSelect } from "@tui/ui/dialog-select"
+import { useRoute } from "@tui/context/route"
+
+export function DialogSubagent(props: { sessionID: string }) {
+  const route = useRoute()
+
+  return (
+    <DialogSelect
+      title="Subagent Actions"
+      options={[
+        {
+          title: "Open",
+          value: "subagent.view",
+          description: "the subagent's session",
+          onSelect: (dialog) => {
+            route.navigate({
+              type: "session",
+              sessionID: props.sessionID,
+            })
+            dialog.clear()
+          },
+        },
+      ]}
+    />
+  )
+}

package/src/tui/routes/session/dialog-timeline.tsx

@@ -0,0 +1,47 @@
+import { createMemo, onMount } from "solid-js"
+import { useSync } from "@tui/context/sync"
+import { DialogSelect, type DialogSelectOption } from "@tui/ui/dialog-select"
+import type { TextPart } from "@opencode-ai/sdk/v2"
+import { Locale } from "@/util/locale"
+import { DialogMessage } from "./dialog-message"
+import { useDialog } from "../../ui/dialog"
+import type { PromptInfo } from "../../component/prompt/history"
+
+export function DialogTimeline(props: {
+  sessionID: string
+  onMove: (messageID: string) => void
+  setPrompt?: (prompt: PromptInfo) => void
+}) {
+  const sync = useSync()
+  const dialog = useDialog()
+
+  onMount(() => {
+    dialog.setSize("large")
+  })
+
+  const options = createMemo((): DialogSelectOption<string>[] => {
+    const messages = sync.data.message[props.sessionID] ?? []
+    const result = [] as DialogSelectOption<string>[]
+    for (const message of messages) {
+      if (message.role !== "user") continue
+      const part = (sync.data.part[message.id] ?? []).find(
+        (x) => x.type === "text" && !x.synthetic && !x.ignored,
+      ) as TextPart
+      if (!part) continue
+      result.push({
+        title: part.text.replace(/\n/g, " "),
+        value: message.id,
+        footer: Locale.time(message.time.created),
+        onSelect: (dialog) => {
+          dialog.replace(() => (
+            <DialogMessage messageID={message.id} sessionID={props.sessionID} setPrompt={props.setPrompt} />
+          ))
+        },
+      })
+    }
+    result.reverse()
+    return result
+  })
+
+  return <DialogSelect onMove={(option) => props.onMove(option.value)} title="Timeline" options={options()} />
+}

package/src/tui/routes/session/footer.tsx

@@ -0,0 +1,91 @@
+import { createMemo, Match, onCleanup, onMount, Show, Switch } from "solid-js"
+import { useTheme } from "../../context/theme"
+import { useSync } from "../../context/sync"
+import { useDirectory } from "../../context/directory"
+import { useConnected } from "../../component/use-connected"
+import { createStore } from "solid-js/store"
+import { useRoute } from "../../context/route"
+
+export function Footer() {
+  const { theme } = useTheme()
+  const sync = useSync()
+  const route = useRoute()
+  const mcp = createMemo(() => Object.values(sync.data.mcp).filter((x) => x.status === "connected").length)
+  const mcpError = createMemo(() => Object.values(sync.data.mcp).some((x) => x.status === "failed"))
+  const lsp = createMemo(() => Object.keys(sync.data.lsp))
+  const permissions = createMemo(() => {
+    if (route.data.type !== "session") return []
+    return sync.data.permission[route.data.sessionID] ?? []
+  })
+  const directory = useDirectory()
+  const connected = useConnected()
+
+  const [store, setStore] = createStore({
+    welcome: false,
+  })
+
+  onMount(() => {
+    // Track all timeouts to ensure proper cleanup
+    const timeouts: ReturnType<typeof setTimeout>[] = []
+
+    function tick() {
+      if (connected()) return
+      if (!store.welcome) {
+        setStore("welcome", true)
+        timeouts.push(setTimeout(() => tick(), 5000))
+        return
+      }
+
+      if (store.welcome) {
+        setStore("welcome", false)
+        timeouts.push(setTimeout(() => tick(), 10_000))
+        return
+      }
+    }
+    timeouts.push(setTimeout(() => tick(), 10_000))
+
+    onCleanup(() => {
+      timeouts.forEach(clearTimeout)
+    })
+  })
+
+  return (
+    <box flexDirection="row" justifyContent="space-between" gap={1} flexShrink={0}>
+      <text fg={theme.textMuted}>{directory()}</text>
+      <box gap={2} flexDirection="row" flexShrink={0}>
+        <Switch>
+          <Match when={store.welcome}>
+            <text fg={theme.text}>
+              Get started <span style={{ fg: theme.textMuted }}>/connect</span>
+            </text>
+          </Match>
+          <Match when={connected()}>
+            <Show when={permissions().length > 0}>
+              <text fg={theme.warning}>
+                <span style={{ fg: theme.warning }}>△</span> {permissions().length} Permission
+                {permissions().length > 1 ? "s" : ""}
+              </text>
+            </Show>
+            <text fg={theme.text}>
+              <span style={{ fg: lsp().length > 0 ? theme.success : theme.textMuted }}>•</span> {lsp().length} LSP
+            </text>
+            <Show when={mcp()}>
+              <text fg={theme.text}>
+                <Switch>
+                  <Match when={mcpError()}>
+                    <span style={{ fg: theme.error }}>⊙ </span>
+                  </Match>
+                  <Match when={true}>
+                    <span style={{ fg: theme.success }}>⊙ </span>
+                  </Match>
+                </Switch>
+                {mcp()} MCP
+              </text>
+            </Show>
+            <text fg={theme.textMuted}>/status</text>
+          </Match>
+        </Switch>
+      </box>
+    </box>
+  )
+}

package/src/tui/routes/session/index.tsx

@@ -0,0 +1,188 @@
+/**
+ * APX session chat view.
+ *
+ * A self-contained chat interface that streams messages through the APX daemon
+ * using the APX sync context. The complex opencode session view is replaced with
+ * a simple but functional chat layout.
+ */
+import { For, Show, createMemo, createSignal, onCleanup, onMount } from "solid-js"
+import { TextareaRenderable } from "@opentui/core"
+import { useTerminalDimensions } from "@opentui/solid"
+import { useTheme } from "@tui/context/theme"
+import { useRoute } from "@tui/context/route"
+import { useApxSync } from "@tui/context/sync-apx"
+import { useToast, Toast } from "@tui/ui/toast"
+import { useExit } from "@tui/context/exit"
+import { usePromptRef } from "@tui/context/prompt"
+import type { ApxMessage } from "@tui/context/sync-apx"
+
+function UserBubble(props: { msg: ApxMessage }) {
+  const { theme } = useTheme()
+  return (
+    <box flexDirection="column" marginBottom={1} paddingLeft={2} paddingRight={2}>
+      <text color={theme.primary} bold>
+        You
+      </text>
+      <text color={theme.text} wrap>
+        {props.msg.text}
+      </text>
+    </box>
+  )
+}
+
+function AssistantBubble(props: { msg: ApxMessage }) {
+  const { theme } = useTheme()
+  const hasText = () => props.msg.text.length > 0
+  return (
+    <box flexDirection="column" marginBottom={1} paddingLeft={2} paddingRight={2}>
+      <text color={theme.success} bold>
+        {props.msg.streaming ? "Assistant ▸" : "Assistant"}
+      </text>
+      <Show when={hasText()} fallback={<text color={theme.textMuted}>…</text>}>
+        <text color={props.msg.error ? theme.error : theme.text} wrap>
+          {props.msg.text}
+        </text>
+      </Show>
+    </box>
+  )
+}
+
+export function Session() {
+  const dims = useTerminalDimensions()
+  const { theme } = useTheme()
+  const route = useRoute()
+  const sync = useApxSync()
+  const toast = useToast()
+  const exit = useExit()
+  const promptRef = usePromptRef()
+  const [sending, setSending] = createSignal(false)
+  let inputEl: TextareaRenderable | undefined
+
+  const sessionID = createMemo(() => {
+    if (route.data.type === "session") return route.data.sessionID
+    return sync.session.current() ?? ""
+  })
+
+  const messages = createMemo(() => sync.session.messages(sessionID()))
+
+  onCleanup(() => {
+    promptRef.set(undefined)
+  })
+
+  function makeRef(r: TextareaRenderable) {
+    return {
+      get focused() {
+        return r.focused
+      },
+      get current() {
+        return { input: r.plainText, parts: [] as any[] }
+      },
+      set(prompt: { input: string; parts: any[] }) {
+        r.setText(prompt.input)
+      },
+      reset() {
+        r.clear()
+      },
+      blur() {
+        r.blur()
+      },
+      focus() {
+        r.focus()
+      },
+      submit() {
+        void handleSubmit()
+      },
+    }
+  }
+
+  async function handleSubmit() {
+    if (!inputEl) return
+    const text = inputEl.plainText.trim()
+    if (!text || sending()) return
+
+    // Check for exit commands
+    if (text === "exit" || text === "quit" || text === ":q") {
+      void exit()
+      return
+    }
+
+    inputEl.clear()
+    setSending(true)
+    try {
+      await sync.sendMessage(text)
+    } catch (e) {
+      toast.error(e instanceof Error ? e : new Error(String(e)))
+    } finally {
+      setSending(false)
+    }
+  }
+
+  return (
+    <box flexDirection="column" flexGrow={1} width={dims().width} height={dims().height}>
+      {/* Message list */}
+      <scrollbox
+        flexGrow={1}
+        stickyScroll
+        stickyStart="bottom"
+        verticalScrollbarOptions={{ visible: true }}
+      >
+        <box flexDirection="column" width={dims().width}>
+          <Show
+            when={messages().length > 0}
+            fallback={
+              <box paddingLeft={2} paddingTop={2}>
+                <text color={theme.textMuted} italic>
+                  Type a message and press Enter to start chatting.
+                </text>
+              </box>
+            }
+          >
+            <For each={messages()}>
+              {(msg) => (
+                <Show when={msg.role === "user"} fallback={<AssistantBubble msg={msg} />}>
+                  <UserBubble msg={msg} />
+                </Show>
+              )}
+            </For>
+          </Show>
+          <box height={1} />
+        </box>
+      </scrollbox>
+
+      {/* Input area */}
+      <box
+        flexShrink={0}
+        flexDirection="column"
+        borderTop={1}
+        borderColor={theme.border}
+        backgroundColor={theme.backgroundElement}
+      >
+        <box paddingLeft={2} paddingRight={2} paddingTop={1}>
+          <textarea
+            ref={(r: TextareaRenderable) => {
+              inputEl = r
+              promptRef.set(makeRef(r))
+            }}
+            placeholder={sending() ? "Waiting for response…" : "Ask anything... (Enter to send)"}
+            placeholderColor={theme.textMuted}
+            textColor={theme.text}
+            focusedTextColor={theme.text}
+            minHeight={1}
+            maxHeight={6}
+            onSubmit={() => {
+              setTimeout(() => setTimeout(() => handleSubmit(), 0), 0)
+            }}
+          />
+        </box>
+        <box height={1} paddingLeft={2} paddingRight={2}>
+          <Show when={sending()}>
+            <text color={theme.textMuted} italic>
+              Streaming…
+            </text>
+          </Show>
+        </box>
+      </box>
+      <Toast />
+    </box>
+  )
+}