@agentprojectcontext/apx 1.32.0 → 1.33.0

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

@@ -10,18 +10,18 @@
  *
  * The APX-tailored sidebar shows session / agent / model / context usage.
  */
-import { For, Show, createMemo, createSignal, createEffect, onCleanup } from "solid-js"
-import { TextareaRenderable, MouseButton } from "@opentui/core"
+import { For, Show, createMemo, createEffect, onCleanup } from "solid-js"
+import { MouseButton } 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 { useSDK } from "@tui/context/sdk-apx"
 import { useLocal } from "@tui/context/local"
-import { useToast, Toast } from "@tui/ui/toast"
+import { Toast } from "@tui/ui/toast"
 import { useDialog } from "@tui/ui/dialog"
-import { useExit } from "@tui/context/exit"
 import { usePromptRef } from "@tui/context/prompt"
+import { Prompt, type PromptRef } from "@tui/component/prompt"
 import type { ApxMessage, ApxPart } from "@tui/context/sync-apx"
 import { SidebarApx } from "./sidebar-apx"
 import { MessageActions } from "./message-actions"
@@ -39,36 +39,80 @@ function parseError(raw: string): { message: string; trace?: string; hint?: stri
   return { message, trace, hint }
 }
 
-/** One-line summary of a tool call, e.g. `read src/app.tsx` or `glob "**​/*.ts"`. */
-function toolSummary(part: Extract<ApxPart, { kind: "tool" }>): string {
-  const a = part.args
-  let detail = ""
-  if (a && typeof a === "object") {
-    detail =
-      a.filePath ?? a.path ?? a.file ?? a.pattern ?? a.query ?? a.command ?? a.url ?? a.description ?? ""
-    if (!detail) {
-      const first = Object.values(a).find((v) => typeof v === "string") as string | undefined
-      detail = first ?? ""
-    }
-  } else if (typeof a === "string") {
-    detail = a
+// Coding modes (mirrors web Code). Only Build is wired today; Plan/Zen are
+// shown as the active label is "Build" until a mode toggle lands.
+const MODES = ["Build", "Plan", "Zen"] as const
+
+const TOOL_LABELS: Record<string, string> = {
+  read_file: "Read",
+  write_file: "Write",
+  edit_file: "Edit",
+  search_files: "Search",
+  list_files: "List",
+  run_shell: "Shell",
+  load_skill: "Skill",
+}
+
+const MAX_DIFF_LINES = 24
+
+/** Git-style diff block: removed lines in red (-), added lines in green (+). */
+function DiffBlock(props: { search?: string; replace?: string; content?: string }) {
+  const { theme } = useTheme()
+  const removed = () => (props.search ? props.search.replace(/\n$/, "").split("\n") : [])
+  const added = () => ((props.replace ?? props.content) ? (props.replace ?? props.content ?? "").replace(/\n$/, "").split("\n") : [])
+  const shown = () => {
+    const r = removed().map((t) => ({ sign: "-", t, color: theme.error }))
+    const a = added().map((t) => ({ sign: "+", t, color: theme.success }))
+    const all = [...r, ...a]
+    return all.length > MAX_DIFF_LINES
+      ? [...all.slice(0, MAX_DIFF_LINES), { sign: " ", t: `… ${all.length - MAX_DIFF_LINES} more lines`, color: theme.textMuted }]
+      : all
   }
-  if (detail.length > 60) detail = detail.slice(0, 57) + "…"
-  return detail ? `${part.name} ${detail}` : part.name
+  return (
+    <box flexDirection="column" marginLeft={2} marginTop={0} backgroundColor={theme.backgroundPanel} paddingLeft={1} paddingRight={1}>
+      <For each={shown()}>
+        {(line) => (
+          <text color={line.color}>
+            {line.sign} {line.t}
+          </text>
+        )}
+      </For>
+    </box>
+  )
 }
 
 function ToolPart(props: { part: Extract<ApxPart, { kind: "tool" }> }) {
   const { theme } = useTheme()
   const color = () => (props.part.running ? theme.warning ?? theme.primary : props.part.ok === false ? theme.error : theme.success)
   const marker = () => (props.part.running ? "▸" : props.part.ok === false ? "✗" : "→")
+  const label = () => TOOL_LABELS[props.part.name] ?? props.part.name
+  const a = () => (props.part.args && typeof props.part.args === "object" ? (props.part.args as any) : {})
+  const target = () => a().path ?? a().filePath ?? a().file ?? a().pattern ?? a().query ?? a().command ?? ""
+  const isEdit = () => props.part.name === "edit_file" && (a().search || a().replace)
+  const isWrite = () => props.part.name === "write_file" && a().content
   return (
-    <text color={color()}>
-      {marker()} {toolSummary(props.part)}
-    </text>
+    <box flexDirection="column">
+      <text color={color()}>
+        {marker()} {label()}
+        {target() ? " " + (String(target()).length > 60 ? String(target()).slice(0, 57) + "…" : target()) : ""}
+      </text>
+      <Show when={isEdit()}>
+        <DiffBlock search={a().search} replace={a().replace} />
+      </Show>
+      <Show when={isWrite()}>
+        <DiffBlock content={a().content} />
+      </Show>
+    </box>
   )
 }
 
-function AssistantBubble(props: { msg: ApxMessage; onActivate: () => void }) {
+function AssistantBubble(props: {
+  msg: ApxMessage
+  onActivate: () => void
+  agentName: string
+  modelLabel: string
+  mode: string
+}) {
   const { theme, syntax } = useTheme()
   const parts = createMemo<ApxPart[]>(() => {
     const p = props.msg.parts
@@ -77,9 +121,19 @@ function AssistantBubble(props: { msg: ApxMessage; onActivate: () => void }) {
     return props.msg.text ? [{ kind: "text", text: props.msg.text }] : []
   })
   const empty = () => parts().length === 0
+  // OpenCode-style meta line shown after the answer: mode · model · response time.
+  const elapsed = () => {
+    if (!props.msg.completedAt) return ""
+    return `${((props.msg.completedAt - props.msg.createdAt) / 1000).toFixed(1)}s`
+  }
+  const meta = () => {
+    const parts = [props.mode, props.msg.model || props.modelLabel, elapsed()].filter(Boolean)
+    return parts.join("  ·  ")
+  }
   return (
     <box
       flexDirection="column"
+      marginTop={1}
       marginBottom={1}
       paddingLeft={2}
       paddingRight={2}
@@ -88,8 +142,8 @@ function AssistantBubble(props: { msg: ApxMessage; onActivate: () => void }) {
         if (e?.button === undefined || e.button === MouseButton.LEFT) props.onActivate()
       }}
     >
-      <text color={theme.success} bold>
-        {props.msg.streaming ? `${props.msg.role === "assistant" ? "Assistant" : "Assistant"} ▸` : "Assistant"}
+      <text color={theme.success} bold marginBottom={1}>
+        {props.msg.streaming ? `${props.agentName} ▸` : props.agentName}
       </text>
       <Show when={!empty()} fallback={<text color={theme.textMuted}>…</text>}>
         <box flexDirection="column">
@@ -120,6 +174,12 @@ function AssistantBubble(props: { msg: ApxMessage; onActivate: () => void }) {
           </For>
         </box>
       </Show>
+      <Show when={!props.msg.streaming && !props.msg.error}>
+        <box flexDirection="row" marginTop={1}>
+          <text color={theme.primary}>■ </text>
+          <text color={theme.textMuted}>{meta()}</text>
+        </box>
+      </Show>
     </box>
   )
 }
@@ -127,19 +187,31 @@ function AssistantBubble(props: { msg: ApxMessage; onActivate: () => void }) {
 function UserBubble(props: { msg: ApxMessage; onActivate: () => void }) {
   const { theme } = useTheme()
   const queued = () => props.msg.queued === true
+  const accent = () => (queued() ? theme.textMuted : theme.primary)
   return (
     <box
       flexDirection="row"
+      marginTop={1}
       marginBottom={1}
+      paddingLeft={2}
       paddingRight={2}
       onMouseDown={(e: any) => {
         // Left click (or plain click w/o button info) opens Message Actions.
         if (e?.button === undefined || e.button === MouseButton.LEFT) props.onActivate()
       }}
     >
-      {/* left accent bar */}
-      <box width={1} backgroundColor={queued() ? theme.textMuted : theme.primary} flexShrink={0} />
-      <box flexDirection="column" flexGrow={1} paddingLeft={1} backgroundColor={theme.backgroundElement}>
+      {/* single colored accent bar on the left + filled background (OpenCode style) */}
+      <box width={1} backgroundColor={accent()} flexShrink={0} />
+      <box
+        flexDirection="column"
+        flexGrow={1}
+        minWidth={0}
+        paddingLeft={2}
+        paddingRight={2}
+        paddingTop={1}
+        paddingBottom={1}
+        backgroundColor={theme.backgroundElement}
+      >
         <text color={queued() ? theme.textMuted : theme.text} wrap>
           {props.msg.text}
         </text>
@@ -197,12 +269,12 @@ export function Session() {
   const sync = useApxSync()
   const sdk = useSDK()
   const local = useLocal()
-  const toast = useToast()
   const dialog = useDialog()
-  const exit = useExit()
   const promptRef = usePromptRef()
-  const [sending, setSending] = createSignal(false)
-  let inputEl: TextareaRenderable | undefined
+
+  // Show the sidebar only on wide terminals; on narrow ones the chat keeps
+  // full width (the directory/branch live in the sidebar, shown when wide).
+  const wide = createMemo(() => dims().width >= 100)
 
   // Bridge the user's /models selection into the SDK so the next turn uses it.
   createEffect(() => {
@@ -215,8 +287,27 @@ export function Session() {
     return sync.session.current() ?? ""
   })
 
+  // Keep the sync store's "current session" pinned to the session we're viewing
+  // so the sidebar/usage track the right bucket.
+  createEffect(() => {
+    const id = sessionID()
+    if (id) sync.session.setCurrent(id)
+  })
+
   const messages = createMemo(() => sync.session.messages(sessionID()))
 
+  // Active mode + model, shown after each answer (mode · model · response time).
+  const mode = createMemo(() => MODES[0]) // Build (Plan/Zen toggle: future work)
+  const modelLabel = createMemo(() => {
+    const parsed = local.model?.parsed?.()
+    if (parsed?.modelID) return parsed.providerID ? `${parsed.providerID}:${parsed.modelID}` : parsed.modelID
+    return sdk.model || "—"
+  })
+  const agentName = createMemo(() => {
+    const a = sdk.agent || "Assistant"
+    return a.charAt(0).toUpperCase() + a.slice(1)
+  })
+
   onCleanup(() => {
     promptRef.set(undefined)
   })
@@ -225,78 +316,6 @@ export function Session() {
     dialog.replace(() => <MessageActions sessionID={sessionID()} message={msg} />)
   }
 
-  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) return
-
-    if (text === "exit" || text === "quit" || text === ":q") {
-      void exit()
-      return
-    }
-
-    inputEl.clear()
-
-    // Shell command
-    if (text.startsWith("!") && text.length > 1) {
-      try {
-        await sync.runShell(text.slice(1).trim())
-      } catch (e) {
-        toast.error(e instanceof Error ? e : new Error(String(e)))
-      }
-      return
-    }
-
-    // A turn is already in flight → queue it (OpenCode behaviour).
-    if (sending()) {
-      const id = sync.queueMessage(text)
-      if (!id) toast.show({ message: "No hay sesión activa todavía", variant: "warning" })
-      else toast.show({ message: "Mensaje en cola", variant: "info" })
-      return
-    }
-
-    setSending(true)
-    try {
-      await sync.sendMessage(text)
-      // Flush any messages queued while this turn was streaming.
-      let next = messages().find((m) => m.queued)
-      while (next) {
-        await sync.sendQueued(sessionID(), next.id)
-        next = messages().find((m) => m.queued)
-      }
-    } 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}>
       <box flexDirection="row" flexGrow={1} minHeight={0}>
@@ -319,7 +338,15 @@ export function Session() {
                     if (msg.role === "user") return <UserBubble msg={msg} onActivate={() => openActions(msg)} />
                     if (msg.role === "shell") return <ShellBubble msg={msg} />
                     if (msg.error) return <ErrorBubble msg={msg} />
-                    return <AssistantBubble msg={msg} onActivate={() => openActions(msg)} />
+                    return (
+                      <AssistantBubble
+                        msg={msg}
+                        onActivate={() => openActions(msg)}
+                        agentName={agentName()}
+                        modelLabel={modelLabel()}
+                        mode={mode()}
+                      />
+                    )
                   }}
                 </For>
               </Show>
@@ -327,40 +354,28 @@ export function Session() {
             </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() ? "Streaming… (enter to queue)" : "Ask anything... (prefix ! to run shell, e.g. !ls)"}
-                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} justifyContent="space-between" flexDirection="row">
-              <Show
-                when={sending()}
-                fallback={<text color={theme.textMuted}>enter send · ! shell · click msg for actions · exit quit</text>}
-              >
-                <text color={theme.warning ?? theme.primary} italic>
-                  ▸ Streaming… (enter queues your next message)
-                </text>
-              </Show>
-            </box>
+          {/* Input — the OpenCode prompt component (colored box, Build/Plan mode
+              selector, model label, Enter-to-send). With sessionID set it streams
+              to the *current* session via session.prompt instead of creating a
+              new one. This is also what fixes Enter submission and focus, since
+              the prompt owns the keymap submit wiring. */}
+          <box flexShrink={0} paddingLeft={1} paddingRight={1} paddingTop={1} paddingBottom={1}>
+            <Prompt
+              sessionID={sessionID()}
+              visible={true}
+              ref={(r?: PromptRef) => promptRef.set(r)}
+              placeholders={{
+                normal: ["Ask anything…", "Fix a TODO in the codebase", "Explain this code"],
+                shell: ["ls -la", "git status", "pwd"],
+              }}
+            />
           </box>
         </box>
 
-        {/* Sidebar */}
-        <SidebarApx sessionID={sessionID()} />
+        {/* Sidebar — only on wide terminals; carries the directory + branch */}
+        <Show when={wide()}>
+          <SidebarApx sessionID={sessionID()} />
+        </Show>
       </box>
       <Toast />
     </box>

package/src/interfaces/tui/routes/session/sidebar-apx.tsx

@@ -54,6 +54,17 @@ export function SidebarApx(props: { sessionID: string }) {
   const totalTokens = createMemo(() => usage().input + usage().output)
   const pctUsed = createMemo(() => Math.min(99, Math.round((usage().input / DEFAULT_WINDOW) * 100)))
 
+  // Directory shown as a muted parent path + a bold basename (OpenCode style).
+  const dirBase = createMemo(() => {
+    const segs = (sdk.directory || "").split("/").filter(Boolean)
+    return segs.length ? segs[segs.length - 1] : sdk.directory || "—"
+  })
+  const dirParent = createMemo(() => {
+    const dir = sdk.directory || ""
+    const base = dirBase()
+    return dir.endsWith("/" + base) ? dir.slice(0, dir.length - base.length) : ""
+  })
+
   return (
     <box
       flexDirection="column"
@@ -65,46 +76,57 @@ export function SidebarApx(props: { sessionID: string }) {
       paddingRight={1}
       paddingTop={1}
     >
-      <Section title="Sesión">
+      <Section title="Session">
         <text color={theme.text} wrap>
-          {title() || (props.sessionID ? "Nueva sesión" : "—")}
+          {title() || (props.sessionID ? "New session" : "—")}
         </text>
       </Section>
 
-      <Section title="Agente">
+      <Section title="Agent">
         <text color={theme.text}>{titlecase(sdk.agent || "APX")}</text>
       </Section>
 
-      <Section title="Modelo">
+      <Section title="Model">
         <text color={theme.text}>{modelLabel()}</text>
-        <text color={theme.textMuted}>ctrl+p → Switch model</text>
+        <text color={theme.textMuted}>ctrl+p → switch model</text>
       </Section>
 
-      <Section title="Contexto">
+      <Section title="Context">
         <Show
           when={totalTokens() > 0}
-          fallback={<text color={theme.textMuted}>{msgCount()} mensajes</text>}
+          fallback={<text color={theme.textMuted}>{msgCount()} messages</text>}
         >
           <text color={theme.text}>
-            {fmt(totalTokens())} tokens · {pctUsed()}% usado
+            {fmt(totalTokens())} tokens · {pctUsed()}% used
           </text>
           <text color={theme.textMuted}>
             {fmt(usage().input)} in · {fmt(usage().output)} out
           </text>
           <Show when={usage().cost > 0}>
-            <text color={theme.textMuted}>${usage().cost.toFixed(4)} gastado</text>
+            <text color={theme.textMuted}>${usage().cost.toFixed(4)} spent</text>
           </Show>
-          <text color={theme.textMuted}>{msgCount()} mensajes</text>
+          <text color={theme.textMuted}>{msgCount()} messages</text>
         </Show>
       </Section>
 
-      <Section title="Directorio">
-        <text color={theme.text} wrap>
-          {sdk.directory}
-        </text>
+      {/* spacer pushes the directory + version to the bottom, OpenCode-style */}
+      <box flexGrow={1} />
+
+      <Section title="Directory">
+        <Show when={dirParent()}>
+          <text color={theme.textMuted} wrap>
+            {dirParent()}
+          </text>
+        </Show>
+        {/* folder name + branch in white; the path above stays muted/grey */}
+        <box flexDirection="row" flexWrap="wrap">
+          <text color={theme.text}>{dirBase()}</text>
+          <Show when={sdk.branch}>
+            <text color={theme.text}>:{sdk.branch}</text>
+          </Show>
+        </box>
       </Section>
 
-      <box flexGrow={1} />
       <box flexDirection="row">
         <text color={theme.success}>•</text>
         <text color={theme.textMuted}> APX {pkg.version}</text>

package/src/interfaces/tui/run.ts

@@ -18,6 +18,7 @@ function hasFlag(flag: string): boolean {
 const pid = getFlag("--pid") ?? ""
 const agent = getFlag("--agent")
 const model = getFlag("--model")
+const cwd = getFlag("--cwd")
 const promptText = getFlag("--prompt")
 const sessionID = getFlag("--session")
 const continueSession = hasFlag("--continue") || hasFlag("-c")
@@ -70,6 +71,7 @@ await tui({
   pid,
   agent,
   model,
+  directory: cwd,
   args: {
     prompt: promptText,
     continue: continueSession,