@agentprojectcontext/apx 1.24.0 → 1.27.1

package/src/interfaces/web/src/components/code/CodeComposer.tsx

@@ -0,0 +1,87 @@
+import { Hammer, ClipboardList } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { t } from "../../i18n";
+import { ChatInput } from "../ui/chat-input";
+import { ModelPicker } from "../chat/ModelPicker";
+import type { CodeMode } from "../../lib/api/code";
+
+interface Props {
+  value: string;
+  onValueChange: (v: string) => void;
+  onSubmit: () => void;
+  onStop: () => void;
+  busy: boolean;
+  disabled: boolean;
+  mode: CodeMode;
+  onModeChange: (m: CodeMode) => void;
+  model: string;
+  onModelChange: (m: string) => void;
+}
+
+// Plan/Build segmented control — small, two-state, design-token styled.
+function ModeToggle({
+  mode,
+  onChange,
+  disabled,
+}: {
+  mode: CodeMode;
+  onChange: (m: CodeMode) => void;
+  disabled?: boolean;
+}) {
+  const item = (m: CodeMode, label: string, hint: string, Icon: typeof Hammer) => (
+    <button
+      type="button"
+      disabled={disabled}
+      title={hint}
+      data-testid={`code-mode-${m}`}
+      aria-pressed={mode === m}
+      onClick={() => onChange(m)}
+      className={cn(
+        "flex items-center gap-1 rounded-md px-2 py-0.5 text-[11px] font-medium transition-colors disabled:opacity-50",
+        mode === m
+          ? "bg-background text-foreground shadow-sm"
+          : "text-muted-foreground hover:text-foreground",
+      )}
+    >
+      <Icon className="size-3" /> {label}
+    </button>
+  );
+  return (
+    <div className="flex items-center gap-0.5 rounded-lg border border-border bg-muted/60 p-0.5">
+      {item("build", t("code_module.mode_build"), t("code_module.mode_build_hint"), Hammer)}
+      {item("plan", t("code_module.mode_plan"), t("code_module.mode_plan_hint"), ClipboardList)}
+    </div>
+  );
+}
+
+export function CodeComposer({
+  value,
+  onValueChange,
+  onSubmit,
+  onStop,
+  busy,
+  disabled,
+  mode,
+  onModeChange,
+  model,
+  onModelChange,
+}: Props) {
+  return (
+    <ChatInput
+      value={value}
+      onValueChange={onValueChange}
+      onSubmit={onSubmit}
+      onStop={onStop}
+      busy={busy}
+      disabled={disabled}
+      placeholder={t("code_module.placeholder")}
+      maxRows={12}
+      footer={
+        <div className="flex items-center gap-2">
+          <ModeToggle mode={mode} onChange={onModeChange} disabled={busy} />
+          <ModelPicker value={model} onChange={onModelChange} disabled={busy} />
+        </div>
+      }
+    />
+  );
+}

package/src/interfaces/web/src/components/code/CodeContextTab.tsx

@@ -0,0 +1,83 @@
+import { useMemo } from "react";
+import { t } from "../../i18n";
+import { Empty } from "../ui";
+import { computeMetrics, computeBreakdown } from "../../lib/code-context";
+import type { CodeTurn } from "../../lib/api/code";
+
+interface Props {
+  turns: CodeTurn[];
+}
+
+const SEG_COLOR: Record<string, string> = {
+  user: "bg-emerald-500",
+  assistant: "bg-sky-500",
+  tool: "bg-amber-500",
+};
+
+function Stat({ label, value }: { label: string; value: string | number }) {
+  return (
+    <div className="rounded-md border border-border bg-background/50 px-2.5 py-2">
+      <div className="text-[10px] uppercase tracking-wide text-muted-foreground">{label}</div>
+      <div className="mt-0.5 truncate font-mono text-sm">{value}</div>
+    </div>
+  );
+}
+
+// Context tab: real token totals from the last assistant turn + a char/4
+// estimate of where the conversation's weight sits.
+export function CodeContextTab({ turns }: Props) {
+  const m = useMemo(() => computeMetrics(turns), [turns]);
+  const breakdown = useMemo(() => computeBreakdown(turns), [turns]);
+
+  if (turns.length === 0) {
+    return (
+      <div className="p-3">
+        <Empty>{t("code_module.ctx_none")}</Empty>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3 p-3" data-testid="code-context-tab">
+      <div className="grid grid-cols-2 gap-2">
+        <Stat label={t("code_module.ctx_model")} value={m.model || "auto"} />
+        <Stat label={t("code_module.ctx_messages")} value={`${m.userMsgs}/${m.assistantMsgs}`} />
+        <Stat label={t("code_module.ctx_input")} value={m.input.toLocaleString()} />
+        <Stat label={t("code_module.ctx_output")} value={m.output.toLocaleString()} />
+      </div>
+
+      <div>
+        <div className="mb-1 text-[11px] font-semibold text-muted-foreground">
+          {t("code_module.ctx_breakdown")}
+        </div>
+        {breakdown.length > 0 ? (
+          <>
+            <div className="flex h-2.5 w-full overflow-hidden rounded-full bg-muted">
+              {breakdown.map((s) => (
+                <div
+                  key={s.key}
+                  className={SEG_COLOR[s.key]}
+                  style={{ width: `${s.percent}%` }}
+                  title={`${s.key}: ${s.tokens} (${s.percent}%)`}
+                />
+              ))}
+            </div>
+            <ul className="mt-2 space-y-1">
+              {breakdown.map((s) => (
+                <li key={s.key} className="flex items-center gap-2 text-[11px]">
+                  <span className={`size-2 rounded-full ${SEG_COLOR[s.key]}`} />
+                  <span className="flex-1 text-foreground/80">{t(`code_module.seg_${s.key}` as never)}</span>
+                  <span className="font-mono text-muted-foreground">
+                    {s.tokens} · {s.percent}%
+                  </span>
+                </li>
+              ))}
+            </ul>
+          </>
+        ) : (
+          <p className="text-[11px] text-muted-foreground">{t("code_module.ctx_none")}</p>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/interfaces/web/src/components/code/CodeProjectPicker.tsx

@@ -0,0 +1,39 @@
+import { FolderGit2 } from "lucide-react";
+import { UiSelect } from "../UiSelect";
+import type { ProjectEntry } from "../../types/daemon";
+
+interface Props {
+  projects: ProjectEntry[];
+  value: string;
+  onChange: (pid: string) => void;
+  disabled?: boolean;
+}
+
+// Project picker for the Code module. The selected project scopes the
+// assistant's working context (it rides the project-scoped super-agent
+// stream), mirroring how the `apx code` CLI resolves a project id before the
+// REPL starts. We label projects by name (falling back to the basename of
+// their path) so the dropdown is human-readable.
+export function CodeProjectPicker({ projects, value, onChange, disabled }: Props) {
+  const options = projects.map((p) => {
+    const base = p.path?.split("/").filter(Boolean).pop() || `proyecto ${p.id}`;
+    return {
+      value: String(p.id),
+      label: p.name || base,
+      icon: FolderGit2,
+      description: p.path,
+    };
+  });
+
+  return (
+    <div className="w-60" data-testid="code-project-select">
+      <UiSelect
+        value={value}
+        onChange={onChange}
+        options={options}
+        placeholder="Elegí un proyecto…"
+        disabled={disabled}
+      />
+    </div>
+  );
+}

package/src/interfaces/web/src/components/code/CodeSessionList.tsx

@@ -0,0 +1,97 @@
+import { Plus, MessageSquare, Trash2, Pencil } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { t } from "../../i18n";
+import { Empty } from "../ui";
+import type { CodeSessionRow } from "../../lib/api/code";
+
+interface Props {
+  sessions: CodeSessionRow[];
+  activeId: string | null;
+  busy: boolean;
+  onSelect: (id: string) => void;
+  onCreate: () => void;
+  onRename: (id: string, current: string) => void;
+  onDelete: (id: string) => void;
+}
+
+// Left-rail list of a project's code sessions (OpenCode's session switcher).
+export function CodeSessionList({
+  sessions,
+  activeId,
+  busy,
+  onSelect,
+  onCreate,
+  onRename,
+  onDelete,
+}: Props) {
+  return (
+    <div className="flex h-full flex-col" data-testid="code-session-list">
+      <div className="flex shrink-0 items-center justify-between px-3 py-2">
+        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+          {t("code_module.sessions")}
+        </span>
+        <button
+          type="button"
+          onClick={onCreate}
+          disabled={busy}
+          title={t("code_module.new_session")}
+          data-testid="code-new-session"
+          className="flex items-center gap-1 rounded-md border border-border px-1.5 py-0.5 text-[11px] text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:opacity-50"
+        >
+          <Plus className="size-3" /> {t("code_module.new_session")}
+        </button>
+      </div>
+
+      <div className="min-h-0 flex-1 overflow-y-auto px-2 pb-2">
+        {sessions.length === 0 ? (
+          <div className="p-2">
+            <Empty>{t("code_module.no_sessions")}</Empty>
+          </div>
+        ) : (
+          <ul className="space-y-0.5">
+            {sessions.map((s) => (
+              <li key={s.id} className="group/item relative">
+                <button
+                  type="button"
+                  onClick={() => onSelect(s.id)}
+                  className={cn(
+                    "flex w-full items-start gap-2 rounded-md px-2 py-1.5 text-left text-xs transition-colors",
+                    s.id === activeId
+                      ? "bg-accent text-accent-fg"
+                      : "text-foreground/80 hover:bg-accent/50",
+                  )}
+                >
+                  <MessageSquare className="mt-0.5 size-3.5 shrink-0 opacity-60" />
+                  <span className="min-w-0 flex-1">
+                    <span className="block truncate font-medium">{s.title}</span>
+                    <span className="block truncate text-[10px] text-muted-foreground">
+                      {s.mode} · {s.messageCount} msg{s.model ? ` · ${s.model}` : ""}
+                    </span>
+                  </span>
+                </button>
+                <div className="absolute right-1 top-1 hidden items-center gap-0.5 group-hover/item:flex">
+                  <button
+                    type="button"
+                    onClick={() => onRename(s.id, s.title)}
+                    title={t("code_module.rename")}
+                    className="rounded p-1 text-muted-foreground hover:bg-background hover:text-foreground"
+                  >
+                    <Pencil className="size-3" />
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => onDelete(s.id)}
+                    title={t("code_module.delete")}
+                    className="rounded p-1 text-muted-foreground hover:bg-background hover:text-rose-500"
+                  >
+                    <Trash2 className="size-3" />
+                  </button>
+                </div>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/interfaces/web/src/components/code/CodeSidePanel.tsx

@@ -0,0 +1,44 @@
+import { Gauge, GitCompare } from "lucide-react";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "../ui/tabs";
+import { t } from "../../i18n";
+import { CodeContextTab } from "./CodeContextTab";
+import { CodeChangesTab } from "./CodeChangesTab";
+import type { CodeChanges, CodeTurn } from "../../lib/api/code";
+
+interface Props {
+  turns: CodeTurn[];
+  changes: CodeChanges | undefined;
+  changesLoading: boolean;
+  onRefreshChanges: () => void;
+}
+
+// Right-hand panel: Context (token metrics + breakdown) and Changes (diffs vs
+// the session's git baseline), mirroring OpenCode's session side panel.
+export function CodeSidePanel({ turns, changes, changesLoading, onRefreshChanges }: Props) {
+  const changeCount = changes?.files.length || 0;
+  return (
+    <Tabs defaultValue="context" className="flex h-full flex-col gap-0" data-testid="code-side-panel">
+      <div className="shrink-0 border-b border-border px-3 py-2">
+        <TabsList variant="line" className="w-full">
+          <TabsTrigger value="context" className="flex-1">
+            <Gauge className="size-3.5" /> {t("code_module.tab_context")}
+          </TabsTrigger>
+          <TabsTrigger value="changes" className="flex-1">
+            <GitCompare className="size-3.5" /> {t("code_module.tab_changes")}
+            {changeCount > 0 && (
+              <span className="ml-1 rounded-full bg-muted px-1.5 text-[10px] text-muted-foreground">
+                {changeCount}
+              </span>
+            )}
+          </TabsTrigger>
+        </TabsList>
+      </div>
+      <TabsContent value="context" className="min-h-0 flex-1 overflow-y-auto">
+        <CodeContextTab turns={turns} />
+      </TabsContent>
+      <TabsContent value="changes" className="min-h-0 flex-1 overflow-hidden">
+        <CodeChangesTab changes={changes} loading={changesLoading} onRefresh={onRefreshChanges} />
+      </TabsContent>
+    </Tabs>
+  );
+}

package/src/interfaces/web/src/components/code/CodeToolTrail.tsx

@@ -0,0 +1,29 @@
+import { Wrench } from "lucide-react";
+
+interface Props {
+  tools: string[];
+}
+
+// Compact trail of tools the super-agent invoked during the in-flight turn.
+// A coding turn typically reads/edits files and runs commands via tools, so we
+// surface that activity (unlike the RobyBubble, which hides it) — it gives the
+// owner a sense of what the coding assistant is doing while it streams.
+export function CodeToolTrail({ tools }: Props) {
+  if (!tools.length) return null;
+  return (
+    <div
+      className="flex flex-wrap items-center gap-1.5 px-3 pb-1 text-[11px] text-muted-fg"
+      data-testid="code-tool-trail"
+    >
+      <Wrench size={11} className="shrink-0" />
+      {tools.map((tool, i) => (
+        <span
+          key={`${tool}-${i}`}
+          className="inline-flex items-center rounded-md border border-border bg-card/60 px-1.5 py-0.5 font-mono"
+        >
+          {tool}
+        </span>
+      ))}
+    </div>
+  );
+}

package/src/interfaces/web/src/components/code/DiffView.tsx

@@ -0,0 +1,67 @@
+import { useMemo } from "react";
+import { cn } from "../../lib/cn";
+
+// Minimal unified-diff renderer for the Code module's Changes tab. No external
+// dependency — we parse the `git diff` patch the daemon returns and colour
+// added/removed/hunk lines. File-header noise (diff --git / index / +++ / ---)
+// is dropped since the file path is shown by the parent.
+interface Props {
+  patch: string;
+}
+
+type Line = { kind: "add" | "del" | "hunk" | "ctx"; text: string };
+
+function parse(patch: string): Line[] {
+  const out: Line[] = [];
+  for (const raw of (patch || "").split("\n")) {
+    if (
+      raw.startsWith("diff --git") ||
+      raw.startsWith("index ") ||
+      raw.startsWith("--- ") ||
+      raw.startsWith("+++ ") ||
+      raw.startsWith("new file") ||
+      raw.startsWith("deleted file") ||
+      raw.startsWith("similarity index") ||
+      raw.startsWith("rename ")
+    ) {
+      continue;
+    }
+    if (raw.startsWith("@@")) out.push({ kind: "hunk", text: raw });
+    else if (raw.startsWith("+")) out.push({ kind: "add", text: raw.slice(1) });
+    else if (raw.startsWith("-")) out.push({ kind: "del", text: raw.slice(1) });
+    else out.push({ kind: "ctx", text: raw.replace(/^ /, "") });
+  }
+  // Trim a trailing empty context line that git's split tends to leave.
+  while (out.length && out[out.length - 1].kind === "ctx" && out[out.length - 1].text === "") {
+    out.pop();
+  }
+  return out;
+}
+
+export function DiffView({ patch }: Props) {
+  const lines = useMemo(() => parse(patch), [patch]);
+  if (!lines.length) return null;
+  return (
+    <pre className="overflow-x-auto rounded-md border border-border bg-background/60 font-mono text-[11px] leading-relaxed">
+      <code className="block">
+        {lines.map((l, i) => (
+          <div
+            key={i}
+            className={cn(
+              "px-2 whitespace-pre",
+              l.kind === "add" && "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
+              l.kind === "del" && "bg-rose-500/10 text-rose-600 dark:text-rose-400",
+              l.kind === "hunk" && "bg-muted/60 text-muted-foreground",
+              l.kind === "ctx" && "text-foreground/70",
+            )}
+          >
+            <span className="select-none opacity-50">
+              {l.kind === "add" ? "+" : l.kind === "del" ? "-" : " "}
+            </span>
+            {l.text}
+          </div>
+        ))}
+      </code>
+    </pre>
+  );
+}

package/src/interfaces/web/src/components/common/Qr.tsx

@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react";
+import QRCode from "qrcode";
+
+// Renders `value` as a QR PNG. White-on-dark-agnostic: we draw black modules
+// on a white quiet zone so any phone camera reads it regardless of app theme.
+export function Qr({ value, size = 200 }: { value: string; size?: number }) {
+  const [src, setSrc] = useState<string | null>(null);
+
+  useEffect(() => {
+    let alive = true;
+    QRCode.toDataURL(value, { margin: 2, width: size * 2, errorCorrectionLevel: "M" })
+      .then((url) => { if (alive) setSrc(url); })
+      .catch(() => { if (alive) setSrc(null); });
+    return () => { alive = false; };
+  }, [value, size]);
+
+  return (
+    <div
+      className="grid place-items-center rounded-lg bg-white p-3"
+      style={{ width: size + 24, height: size + 24 }}
+    >
+      {src
+        ? <img src={src} width={size} height={size} alt="QR" />
+        : <div className="size-full animate-pulse rounded bg-muted" />}
+    </div>
+  );
+}

package/src/interfaces/web/src/components/common/TabLayout.tsx

@@ -0,0 +1,46 @@
+// Shared two-column shell for the sectioned-nav screens (per-project + settings).
+// Left: the collapsible TabNav. Right: a thin toolbar that carries the
+// collapse toggle (and optional page actions) followed by the routed content.
+// The page title/subtitle live in the top breadcrumb now, not here.
+import { type ReactNode } from "react";
+import { TabNav, NavToggle, type TabSection } from "./TabNav";
+import { cn } from "../../lib/cn";
+
+interface Props {
+  sections: TabSection[];
+  active: string;
+  onChange: (key: string) => void;
+  collapsed: boolean;
+  onToggleCollapse: () => void;
+  actions?: ReactNode;
+  contentClassName?: string;
+  testId?: string;
+  children: ReactNode;
+}
+
+export function TabLayout({
+  sections,
+  active,
+  onChange,
+  collapsed,
+  onToggleCollapse,
+  actions,
+  contentClassName,
+  testId,
+  children,
+}: Props) {
+  return (
+    <div className="flex h-full">
+      <TabNav sections={sections} active={active} onChange={onChange} collapsed={collapsed} />
+      <div className="flex min-w-0 flex-1 flex-col overflow-y-auto">
+        <div className="flex items-center justify-between px-6 pt-3">
+          <NavToggle collapsed={collapsed} onToggle={onToggleCollapse} />
+          {actions ? <div className="flex gap-2">{actions}</div> : null}
+        </div>
+        <div className={cn(contentClassName)} data-testid={testId}>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/interfaces/web/src/components/common/TabNav.tsx

@@ -0,0 +1,113 @@
+// Left-rail tab nav used inside Settings + per-project screens. Mirrors
+// the panda.project sectioned-nav pattern: optional section title above
+// each group, icon + label rows, active state in the section's tone.
+import { useState, useEffect, Fragment, type ElementType } from "react";
+import { PanelLeft } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { Tip } from "../ui/tip";
+
+export interface TabItem {
+  key: string;
+  label: string;
+  icon: ElementType;
+  badge?: string | number;
+}
+
+export interface TabSection {
+  title?: string;
+  items: TabItem[];
+}
+
+interface TabNavProps {
+  sections: TabSection[];
+  active: string;
+  onChange: (key: string) => void;
+  collapsed?: boolean;
+}
+
+// Collapsed state lives in the screen (so the toggle can render in the page
+// header). Persisted per-screen in localStorage.
+export function useNavCollapse(storageKey: string) {
+  const [collapsed, setCollapsed] = useState(false);
+
+  useEffect(() => {
+    try { setCollapsed(localStorage.getItem(storageKey) === "true"); } catch { /* ignore */ }
+  }, [storageKey]);
+
+  const toggle = () =>
+    setCollapsed((v) => {
+      const next = !v;
+      try { localStorage.setItem(storageKey, String(next)); } catch { /* quota */ }
+      return next;
+    });
+
+  return { collapsed, toggle };
+}
+
+export function NavToggle({ collapsed, onToggle }: { collapsed: boolean; onToggle: () => void }) {
+  return (
+    <Tip content={collapsed ? "Expandir menú" : "Colapsar menú"} side="bottom">
+      <button
+        type="button"
+        onClick={onToggle}
+        aria-label={collapsed ? "Expandir menú" : "Colapsar menú"}
+        className="flex size-7 shrink-0 items-center justify-center rounded-md text-muted-fg transition-colors hover:bg-accent hover:text-foreground"
+      >
+        <PanelLeft className={cn("size-4 transition-transform", collapsed && "rotate-180")} />
+      </button>
+    </Tip>
+  );
+}
+
+export function TabNav({ sections, active, onChange, collapsed = false }: TabNavProps) {
+  return (
+    <nav
+      className={cn(
+        "hidden md:flex shrink-0 flex-col gap-1 py-3 transition-all",
+        collapsed ? "w-12 items-center px-1" : "w-52 px-2",
+      )}
+    >
+      {sections.map((section, si) => (
+        <div key={si} className={cn("w-full", si > 0 && "mt-2")}>
+          {!collapsed && section.title && (
+            <p className="mb-1 px-2 text-[9px] font-semibold uppercase tracking-wider text-muted-fg/70">
+              {section.title}
+            </p>
+          )}
+          <div className="space-y-0.5">
+            {section.items.map(({ key, label, icon: Icon, badge }) => {
+              const isActive = active === key;
+              const btn = (
+                <button
+                  type="button"
+                  onClick={() => onChange(key)}
+                  data-testid={`tabnav-${key || "index"}`}
+                  className={cn(
+                    "flex cursor-pointer items-center rounded-lg transition-colors",
+                    collapsed ? "size-9 justify-center" : "w-full gap-2 px-2.5 py-1.5",
+                    isActive
+                      ? "bg-accent text-accent-fg"
+                      : "text-muted-fg hover:bg-accent/60 hover:text-foreground",
+                  )}
+                >
+                  <Icon className="size-4 shrink-0" />
+                  {!collapsed && (
+                    <>
+                      <span className="flex-1 truncate text-left text-xs">{label}</span>
+                      {badge !== undefined && (
+                        <span className="rounded-full bg-muted px-1.5 text-[9px] text-muted-fg">{badge}</span>
+                      )}
+                    </>
+                  )}
+                </button>
+              );
+              return collapsed
+                ? <Tip key={key} content={label} side="right">{btn}</Tip>
+                : <Fragment key={key}>{btn}</Fragment>;
+            })}
+          </div>
+        </div>
+      ))}
+    </nav>
+  );
+}