@agentprojectcontext/apx 1.20.0 → 1.22.0

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

@@ -3,9 +3,9 @@
  *
  * 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.
+ * a simple but functional chat layout, plus an APX-tailored sidebar.
  */
-import { For, Show, createMemo, createSignal, onCleanup, onMount } from "solid-js"
+import { For, Show, createMemo, createSignal, onCleanup } from "solid-js"
 import { TextareaRenderable } from "@opentui/core"
 import { useTerminalDimensions } from "@opentui/solid"
 import { useTheme } from "@tui/context/theme"
@@ -15,6 +15,20 @@ 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"
+import { SidebarApx } from "./sidebar-apx"
+
+/** Split a daemon error like "fetch failed (trace: abc-123)" into message + trace. */
+function parseError(raw: string): { message: string; trace?: string; hint?: string } {
+  const m = raw.match(/^([\s\S]*?)\s*\(trace:\s*([^)]+)\)\s*$/)
+  const message = (m ? m[1] : raw).trim()
+  const trace = m ? m[2].trim() : undefined
+  let hint: string | undefined
+  if (/fetch failed/i.test(message))
+    hint = "No se pudo contactar el modelo. Verificá que el proveedor esté disponible (p. ej. Ollama corriendo)."
+  else if (/not enabled/i.test(message)) hint = "El super-agent está deshabilitado en ~/.apx/config.json."
+  else if (/\b401\b|unauthorized|api[_ ]?key/i.test(message)) hint = "Revisá la API key del proveedor en ~/.apx/config.json."
+  return { message, trace, hint }
+}
 
 function UserBubble(props: { msg: ApxMessage }) {
   const { theme } = useTheme()
@@ -30,18 +44,51 @@ function UserBubble(props: { msg: ApxMessage }) {
   )
 }
 
-function AssistantBubble(props: { msg: ApxMessage }) {
+function ErrorBubble(props: { msg: ApxMessage }) {
   const { theme } = useTheme()
-  const hasText = () => props.msg.text.length > 0
+  const parsed = createMemo(() => parseError(props.msg.text))
+  return (
+    <box flexDirection="column" marginBottom={1} paddingLeft={2} paddingRight={2}>
+      <text color={theme.error} bold>
+        ⚠ Error
+      </text>
+      <text color={theme.error} wrap>
+        {parsed().message}
+      </text>
+      <Show when={parsed().hint}>
+        {(hint) => (
+          <text color={theme.textMuted} wrap>
+            {hint()}
+          </text>
+        )}
+      </Show>
+      <Show when={parsed().trace}>
+        {(trace) => <text color={theme.textMuted}>trace: {trace()}</text>}
+      </Show>
+    </box>
+  )
+}
+
+function AssistantBubble(props: { msg: ApxMessage }) {
+  const { theme, syntax } = useTheme()
+  const hasText = () => props.msg.text.trim().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>
+        <box flexShrink={0}>
+          <code
+            filetype="markdown"
+            drawUnstyledText={false}
+            streaming={props.msg.streaming ?? false}
+            syntaxStyle={syntax()}
+            content={props.msg.text.trim()}
+            conceal={true}
+            fg={theme.text}
+          />
+        </box>
       </Show>
     </box>
   )
@@ -66,10 +113,7 @@ function ShellBubble(props: { msg: ApxMessage }) {
       <text color={theme.warning ?? theme.primary} bold>
         {header()}
       </text>
-      <text
-        color={props.msg.exitCode && props.msg.exitCode !== 0 ? theme.error : theme.text}
-        wrap
-      >
+      <text color={props.msg.exitCode && props.msg.exitCode !== 0 ? theme.error : theme.text} wrap>
         {body()}
       </text>
     </box>
@@ -152,68 +196,77 @@ export function Session() {
 
   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}>
+      <box flexDirection="row" flexGrow={1} minHeight={0}>
+        {/* Chat column */}
+        <box flexDirection="column" flexGrow={1} minWidth={0}>
+          {/* Message list */}
+          <scrollbox
+            flexGrow={1}
+            stickyScroll
+            stickyStart="bottom"
+            verticalScrollbarOptions={{ visible: true }}
+          >
+            <box flexDirection="column">
+              <Show
+                when={messages().length > 0}
+                fallback={
+                  <box paddingLeft={2} paddingTop={2}>
+                    <text color={theme.textMuted} italic>
+                      Type a message to chat, or prefix with ! to run a shell command (e.g. !ls).
+                    </text>
+                  </box>
+                }
+              >
+                <For each={messages()}>
+                  {(msg) => {
+                    if (msg.role === "user") return <UserBubble msg={msg} />
+                    if (msg.role === "shell") return <ShellBubble msg={msg} />
+                    if (msg.error) return <ErrorBubble msg={msg} />
+                    return <AssistantBubble msg={msg} />
+                  }}
+                </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... (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 · exit quit</text>}>
                 <text color={theme.textMuted} italic>
-                  Type a message to chat, or prefix with ! to run a shell command (e.g. !ls).
+                  Streaming…
                 </text>
-              </box>
-            }
-          >
-            <For each={messages()}>
-              {(msg) => {
-                if (msg.role === "user") return <UserBubble msg={msg} />
-                if (msg.role === "shell") return <ShellBubble msg={msg} />
-                return <AssistantBubble msg={msg} />
-              }}
-            </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... (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}>
-          <Show when={sending()}>
-            <text color={theme.textMuted} italic>
-              Streaming…
-            </text>
-          </Show>
+              </Show>
+            </box>
+          </box>
         </box>
+
+        {/* Sidebar */}
+        <SidebarApx sessionID={sessionID()} />
       </box>
       <Toast />
     </box>

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

@@ -0,0 +1,90 @@
+/**
+ * APX session sidebar.
+ *
+ * A self-contained panel tailored to APX data (session, agent, model, token
+ * usage, working directory). Replaces opencode's plugin-driven sidebar.tsx,
+ * which depends on feature plugins APX does not ship.
+ */
+import { createMemo, Show } from "solid-js"
+import { useTheme } from "@tui/context/theme"
+import { useApxSync } from "@tui/context/sync-apx"
+import { useSDK } from "@tui/context/sdk-apx"
+import pkg from "../../../../package.json"
+
+function titlecase(value: string) {
+  if (!value) return value
+  return value.charAt(0).toUpperCase() + value.slice(1)
+}
+
+function Section(props: { title: string; children: any }) {
+  const { theme } = useTheme()
+  return (
+    <box flexDirection="column" flexShrink={0} marginBottom={1}>
+      <text fg={theme.text}>
+        <b>{props.title}</b>
+      </text>
+      {props.children}
+    </box>
+  )
+}
+
+export function SidebarApx(props: { sessionID: string }) {
+  const { theme } = useTheme()
+  const sync = useApxSync()
+  const sdk = useSDK()
+
+  const session = createMemo(() => sync.session.get(props.sessionID))
+  const messages = createMemo(() => sync.session.messages(props.sessionID))
+  const usage = createMemo(() => sync.data.usage)
+  const totalTokens = createMemo(() => usage().input + usage().output)
+
+  return (
+    <box
+      backgroundColor={theme.backgroundPanel}
+      width={40}
+      height="100%"
+      flexShrink={0}
+      flexDirection="column"
+      paddingTop={1}
+      paddingBottom={1}
+      paddingLeft={2}
+      paddingRight={2}
+    >
+      <box flexGrow={1} flexDirection="column">
+        <Section title="Sesión">
+          <text fg={theme.textMuted}>{session()?.title || "chat local"}</text>
+        </Section>
+
+        <Section title="Agente">
+          <text fg={theme.textMuted}>{titlecase(sdk.agent)}</text>
+        </Section>
+
+        <Section title="Modelo">
+          <text fg={theme.textMuted} wrap>
+            {sdk.model}
+          </text>
+        </Section>
+
+        <Section title="Contexto">
+          <text fg={theme.textMuted}>{totalTokens().toLocaleString()} tokens</text>
+          <text fg={theme.textMuted}>
+            {usage().input.toLocaleString()} in · {usage().output.toLocaleString()} out
+          </text>
+          <text fg={theme.textMuted}>{messages().length} mensajes</text>
+        </Section>
+
+        <Section title="Directorio">
+          <text fg={theme.textMuted} wrap>
+            {process.cwd()}
+          </text>
+        </Section>
+      </box>
+
+      <box flexShrink={0} paddingTop={1}>
+        <text fg={theme.textMuted}>
+          <span style={{ fg: theme.success }}>•</span> <b>APX</b> <span>{pkg.version}</span>
+        </text>
+      </box>
+    </box>
+  )
+}

package/src/tui/tsconfig.json

@@ -23,6 +23,7 @@
       "@/snapshot": ["./_shims/snapshot.ts"],
       "@/config/console-state": ["./_shims/config-console-state.ts"],
       "@/cli/error": ["./_shims/cli-error.ts"],
+      "@/cli/cmd/prompt-display": ["./_shims/prompt-display.ts"],
       "@/cli/logo": ["./_shims/cli-logo.ts"],
       "@/cli/ui.ts": ["./_shims/cli-ui.ts"],
       "@/cli/ui": ["./_shims/cli-ui.ts"],