@agentprojectcontext/apx 1.24.0 → 1.27.1

package/src/interfaces/web/src/components/config/ConfigTabsEditor.tsx

@@ -0,0 +1,202 @@
+import { useEffect, useMemo, useState } from "react";
+import { Button, Field, Input, Switch, Textarea } from "../ui";
+import { UiSelect } from "../UiSelect";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
+import { getDotted, parseConfigJson } from "../../lib/config-values";
+import { isSecretMarker, secretHint } from "../../lib/secrets";
+
+export type ConfigField = {
+  path: string;
+  label: string;
+  kind?: "text" | "number" | "boolean" | "select" | "textarea" | "password";
+  hint?: string;
+  placeholder?: string;
+  options?: Array<{ value: string; label: string }>;
+};
+
+export type ConfigSection = {
+  key: string;
+  label: string;
+  description?: string;
+  fields: ConfigField[];
+};
+
+export function ConfigTabsEditor({
+  sections,
+  source,
+  placeholderSource,
+  jsonTitle,
+  jsonDescription,
+  saveLabel = "Guardar",
+  onSaveFields,
+  onSaveJson,
+  busy,
+}: {
+  sections: ConfigSection[];
+  source: Record<string, unknown>;
+  placeholderSource?: Record<string, unknown>;
+  jsonTitle: string;
+  jsonDescription?: string;
+  saveLabel?: string;
+  onSaveFields: (set: Record<string, unknown>, unset: string[]) => Promise<void>;
+  onSaveJson: (next: Record<string, unknown>) => Promise<void>;
+  busy?: boolean;
+}) {
+  const firstKey = sections[0]?.key || "json";
+  const [draft, setDraft] = useState<Record<string, unknown>>({});
+  const [raw, setRaw] = useState("");
+  const [jsonError, setJsonError] = useState("");
+
+  useEffect(() => {
+    const next: Record<string, unknown> = {};
+    for (const field of sections.flatMap((section) => section.fields)) {
+      next[field.path] = getDotted(source, field.path) ?? "";
+    }
+    setDraft(next);
+    setRaw(JSON.stringify(source || {}, null, 2));
+    setJsonError("");
+  }, [source, sections]);
+
+  const fieldPaths = useMemo(
+    () => new Set(sections.flatMap((section) => section.fields.map((field) => field.path))),
+    [sections],
+  );
+
+  const saveFields = async () => {
+    const set: Record<string, unknown> = {};
+    const unset: string[] = [];
+    for (const field of sections.flatMap((section) => section.fields)) {
+      const value = draft[field.path];
+      if (isSecretMarker(value)) continue;
+      if (value === "" || value === undefined || value === null) {
+        unset.push(field.path);
+        continue;
+      }
+      if (field.kind === "number") {
+        const n = Number(value);
+        if (Number.isFinite(n)) set[field.path] = n;
+      } else {
+        set[field.path] = value;
+      }
+    }
+    await onSaveFields(set, unset.filter((key) => fieldPaths.has(key)));
+  };
+
+  const saveJson = async () => {
+    setJsonError("");
+    try {
+      await onSaveJson(parseConfigJson(raw));
+    } catch (e) {
+      setJsonError((e as Error).message);
+    }
+  };
+
+  return (
+    <Tabs defaultValue={firstKey} className="space-y-4">
+      <TabsList className="flex flex-wrap">
+        {sections.map((section) => (
+          <TabsTrigger key={section.key} value={section.key}>{section.label}</TabsTrigger>
+        ))}
+        <TabsTrigger value="json">JSON</TabsTrigger>
+      </TabsList>
+
+      {sections.map((section) => (
+        <TabsContent key={section.key} value={section.key}>
+          <div className="space-y-4">
+            {section.description && <p className="text-sm text-muted-fg">{section.description}</p>}
+            <div className="grid gap-3 md:grid-cols-2">
+              {section.fields.map((field) => (
+                <ConfigFieldControl
+                  key={field.path}
+                  field={field}
+                  value={draft[field.path]}
+                  inherited={getDotted(placeholderSource, field.path)}
+                  onChange={(value) => setDraft((prev) => ({ ...prev, [field.path]: value }))}
+                />
+              ))}
+            </div>
+            <Button variant="primary" loading={busy} onClick={saveFields}>{saveLabel}</Button>
+          </div>
+        </TabsContent>
+      ))}
+
+      <TabsContent value="json">
+        <div className="space-y-3">
+          <div>
+            <h3 className="text-sm font-medium">{jsonTitle}</h3>
+            {jsonDescription && <p className="text-xs text-muted-fg">{jsonDescription}</p>}
+          </div>
+          <Textarea
+            rows={18}
+            className="font-mono text-xs"
+            value={raw}
+            onChange={(event) => setRaw(event.target.value)}
+          />
+          {jsonError && <p className="text-xs text-destructive">{jsonError}</p>}
+          <Button variant="primary" loading={busy} onClick={saveJson}>Guardar JSON</Button>
+        </div>
+      </TabsContent>
+    </Tabs>
+  );
+}
+
+function ConfigFieldControl({
+  field,
+  value,
+  inherited,
+  onChange,
+}: {
+  field: ConfigField;
+  value: unknown;
+  inherited: unknown;
+  onChange: (value: unknown) => void;
+}) {
+  const placeholder = field.placeholder || formatInherited(inherited) || (isSecretMarker(value) ? secretHint(value) : "");
+  const hint = field.hint || (inherited !== undefined ? `Heredado: ${formatInherited(inherited)}` : undefined);
+
+  if (field.kind === "boolean") {
+    return (
+      <div className="flex items-end pb-1">
+        <Switch checked={value === true} onChange={onChange} label={field.label} />
+      </div>
+    );
+  }
+
+  return (
+    <Field label={field.label} hint={hint}>
+      {field.kind === "select" ? (
+        <UiSelect
+          value={String(value || "")}
+          onChange={onChange}
+          placeholder={placeholder || "(sin override)"}
+          options={[
+            { value: "", label: placeholder || "(sin override)" },
+            ...(field.options || []).map((option) => ({ value: String(option.value), label: option.label })),
+          ]}
+        />
+      ) : field.kind === "textarea" ? (
+        <Textarea
+          rows={4}
+          value={String(value || "")}
+          placeholder={placeholder}
+          onChange={(event) => onChange(event.target.value)}
+        />
+      ) : (
+        <Input
+          type={field.kind === "password" ? "password" : field.kind === "number" ? "number" : "text"}
+          value={String(isSecretMarker(value) ? "" : value || "")}
+          placeholder={field.kind === "password" && isSecretMarker(value) ? secretHint(value) : field.kind === "password" && isSecretMarker(inherited) ? secretHint(inherited) : placeholder}
+          onChange={(event) => onChange(event.target.value)}
+        />
+      )}
+    </Field>
+  );
+}
+
+function formatInherited(value: unknown) {
+  if (value === undefined || value === null || value === "") return "";
+  if (isSecretMarker(value)) return secretHint(value);
+  if (Array.isArray(value)) return value.join(", ");
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}

package/src/interfaces/web/src/components/config/GlobalConfigEditor.tsx

@@ -0,0 +1,42 @@
+import { Section } from "../Section";
+import { ConfigTabsEditor } from "./ConfigTabsEditor";
+import { GLOBAL_CONFIG_SECTIONS } from "./global-config-sections";
+import { useGlobalConfig } from "../../hooks/useGlobalConfig";
+import { flattenObject } from "../../lib/config-values";
+import { isSecretMarker } from "../../lib/secrets";
+import { Loading } from "../ui";
+
+export function GlobalConfigEditor() {
+  const { config, isLoading, patch, mutate } = useGlobalConfig();
+
+  if (isLoading) return <Loading />;
+
+  const saveJson = async (next: Record<string, unknown>) => {
+    const set: Record<string, unknown> = {};
+    for (const [key, value] of Object.entries(flattenObject(next))) {
+      if (isSecretMarker(value)) continue;
+      set[key] = value;
+    }
+    await patch(set);
+    mutate();
+  };
+
+  return (
+    <Section
+      title="Config APX"
+      description="Config general en ~/.apx/config.json. Editable por tabs; JSON queda separado."
+    >
+      <ConfigTabsEditor
+        sections={GLOBAL_CONFIG_SECTIONS}
+        source={config as Record<string, unknown>}
+        jsonTitle="~/.apx/config.json"
+        jsonDescription="Secretos redacted no se sobrescriben."
+        onSaveFields={async (set, unset) => {
+          await patch(set, unset);
+          mutate();
+        }}
+        onSaveJson={saveJson}
+      />
+    </Section>
+  );
+}

package/src/interfaces/web/src/components/config/global-config-sections.ts

@@ -0,0 +1,60 @@
+import type { ConfigSection } from "./ConfigTabsEditor";
+import { PERMISSION_MODES } from "../../constants";
+
+export const GLOBAL_CONFIG_SECTIONS: ConfigSection[] = [
+  {
+    key: "daemon",
+    label: "Daemon",
+    description: "~/.apx/config.json. Config general APX.",
+    fields: [
+      { path: "port", label: "Port", kind: "number", placeholder: "7430" },
+      { path: "host", label: "Host", placeholder: "127.0.0.1" },
+      { path: "log_level", label: "Log level", placeholder: "info" },
+      { path: "user.language", label: "Idioma", placeholder: "es" },
+      { path: "user.locale", label: "Locale", placeholder: "es-AR" },
+      { path: "user.timezone", label: "Timezone", placeholder: "America/Argentina/Salta" },
+    ],
+  },
+  {
+    key: "super-agent",
+    label: "Super-agente",
+    fields: [
+      { path: "super_agent.enabled", label: "Super-agente habilitado", kind: "boolean" },
+      { path: "super_agent.model", label: "Modelo", placeholder: "gemini:gemini-2.5-flash" },
+      {
+        path: "super_agent.permission_mode",
+        label: "Permission mode",
+        kind: "select",
+        options: PERMISSION_MODES.map((mode) => ({ value: mode, label: mode })),
+      },
+      { path: "super_agent.system", label: "Prompt extra", kind: "textarea" },
+    ],
+  },
+  {
+    key: "telegram",
+    label: "Telegram",
+    fields: [
+      { path: "telegram.enabled", label: "Polling habilitado", kind: "boolean" },
+      { path: "telegram.poll_interval_ms", label: "Poll interval ms", kind: "number", placeholder: "1500" },
+      { path: "telegram.respond_with_engine", label: "Responder con engine", kind: "boolean" },
+      { path: "telegram.route_to_agent", label: "Route to agent", placeholder: "master" },
+      { path: "telegram.channels.0.chat_id", label: "Default chat ID" },
+      { path: "telegram.channels.0.bot_token", label: "Default bot token", kind: "password" },
+    ],
+  },
+  {
+    key: "engines",
+    label: "Engines",
+    fields: [
+      { path: "engines.anthropic.api_key", label: "Anthropic API key", kind: "password" },
+      { path: "engines.openai.api_key", label: "OpenAI API key", kind: "password" },
+      { path: "engines.openai.base_url", label: "OpenAI base URL", placeholder: "https://api.openai.com/v1" },
+      { path: "engines.groq.api_key", label: "Groq API key", kind: "password" },
+      { path: "engines.groq.base_url", label: "Groq base URL", placeholder: "https://api.groq.com/openai/v1" },
+      { path: "engines.openrouter.api_key", label: "OpenRouter API key", kind: "password" },
+      { path: "engines.openrouter.base_url", label: "OpenRouter base URL", placeholder: "https://openrouter.ai/api/v1" },
+      { path: "engines.gemini.api_key", label: "Gemini API key", kind: "password" },
+      { path: "engines.ollama.base_url", label: "Ollama URL", placeholder: "http://localhost:11434" },
+    ],
+  },
+];

package/src/interfaces/web/src/components/config/project-config-sections.ts

@@ -0,0 +1,58 @@
+import type { ConfigSection } from "./ConfigTabsEditor";
+import { PERMISSION_MODES } from "../../constants";
+
+export const PROJECT_OVERRIDE_SECTIONS: ConfigSection[] = [
+  {
+    key: "routing",
+    label: "Overrides",
+    description: ".apc/config.json. Sólo valores propios del proyecto; vacío hereda global/effective.",
+    fields: [
+      { path: "route_to_agent", label: "Route to agent", placeholder: "master" },
+      { path: "super_agent.model", label: "Super-agent model" },
+      {
+        path: "super_agent.permission_mode",
+        label: "Permission mode",
+        kind: "select",
+        options: PERMISSION_MODES.map((mode) => ({ value: mode, label: mode })),
+      },
+      { path: "super_agent.system", label: "Prompt extra", kind: "textarea" },
+    ],
+  },
+  {
+    key: "telegram",
+    label: "Telegram",
+    fields: [
+      { path: "telegram.route_to_agent", label: "Route to agent" },
+      { path: "telegram.chat_id", label: "Chat ID" },
+      { path: "telegram.bot_token", label: "Bot token", kind: "password" },
+      { path: "telegram.respond_with_engine", label: "Responder con engine", kind: "boolean" },
+    ],
+  },
+  {
+    key: "engines",
+    label: "Engines",
+    fields: [
+      { path: "engines.ollama.base_url", label: "Ollama URL" },
+      { path: "engines.anthropic.api_key", label: "Anthropic API key", kind: "password" },
+      { path: "engines.openai.api_key", label: "OpenAI API key", kind: "password" },
+      { path: "engines.groq.api_key", label: "Groq API key", kind: "password" },
+      { path: "engines.openrouter.api_key", label: "OpenRouter API key", kind: "password" },
+      { path: "engines.gemini.api_key", label: "Gemini API key", kind: "password" },
+    ],
+  },
+];
+
+export const APC_PROJECT_SECTIONS: ConfigSection[] = [
+  {
+    key: "identity",
+    label: "Proyecto",
+    description: ".apc/project.json. Metadata APC portable; no secrets, no runtime.",
+    fields: [
+      { path: "name", label: "Name" },
+      { path: "version", label: "Version" },
+      { path: "apf", label: "APC spec" },
+      { path: "apx", label: "APX install state" },
+      { path: "apx_id", label: "APX storage id" },
+    ],
+  },
+];

package/src/interfaces/web/src/components/deck/DaemonCard.tsx

@@ -0,0 +1,58 @@
+import { Badge } from "../ui";
+import type { DeckManifest } from "../../lib/api/deck";
+
+function uptimeHuman(s: number): string {
+  if (s < 60) return `${s}s`;
+  if (s < 3600) return `${Math.floor(s / 60)}m`;
+  return `${Math.floor(s / 3600)}h ${Math.floor((s % 3600) / 60)}m`;
+}
+
+interface DaemonCardProps {
+  manifest: DeckManifest;
+}
+
+export function DaemonCard({ manifest }: DaemonCardProps) {
+  const d = manifest.daemon;
+  const s = manifest.safety;
+
+  return (
+    <div
+      data-testid="deck-daemon-card"
+      className="rounded-xl border border-border bg-muted/10 px-4 py-3 text-xs"
+    >
+      <div className="mb-2 flex flex-wrap items-center justify-between gap-2">
+        <span className="font-semibold text-foreground">
+          {d.name} <span className="font-normal text-muted-fg">v{d.version}</span>
+        </span>
+        <div className="flex items-center gap-1.5">
+          <span className="size-2 rounded-full bg-emerald-500" />
+          <span className="text-muted-fg">activo · {uptimeHuman(d.uptime_s)}</span>
+        </div>
+      </div>
+
+      <div className="flex flex-wrap gap-2">
+        <span className="text-muted-fg">
+          {d.host}:{d.port}
+        </span>
+        <span className="text-muted-fg">·</span>
+        <span className="text-muted-fg">
+          iniciado{" "}
+          {new Date(d.started_at).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
+        </span>
+      </div>
+
+      {/* Safety summary */}
+      <div className="mt-2.5 flex flex-wrap gap-1.5">
+        {s.direct_shell === false && (
+          <Badge tone="success">sin shell directo</Badge>
+        )}
+        {s.arbitrary_commands === false && (
+          <Badge tone="success">comandos arbitrarios bloqueados</Badge>
+        )}
+        {s.dangerous_actions_require_confirmation && (
+          <Badge tone="info">acciones peligrosas requieren confirmación</Badge>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/interfaces/web/src/components/deck/DesktopGroup.tsx

@@ -0,0 +1,33 @@
+import { WidgetRow } from "./WidgetRow";
+import type { DeckDesktop, DeckWidget } from "../../lib/api/deck";
+
+interface DesktopGroupProps {
+  desktop: DeckDesktop;
+  widgets: DeckWidget[];
+  onToggle: (widgetId: string, enabled: boolean) => Promise<void>;
+}
+
+export function DesktopGroup({ desktop, widgets, onToggle }: DesktopGroupProps) {
+  if (widgets.length === 0) return null;
+
+  return (
+    <div data-testid={`deck-desktop-${desktop.id}`} className="space-y-1.5">
+      <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-fg">
+        {desktop.title}
+      </h3>
+      <ul className="space-y-1.5">
+        {widgets.map((w) => (
+          <WidgetRow
+            key={w.id}
+            widget={w}
+            onToggle={
+              w.source === "external"
+                ? (enabled) => onToggle(w.id, enabled)
+                : undefined
+            }
+          />
+        ))}
+      </ul>
+    </div>
+  );
+}

package/src/interfaces/web/src/components/deck/WidgetRow.tsx

@@ -0,0 +1,100 @@
+import { useState } from "react";
+import { Badge, Switch } from "../ui";
+import { cn } from "../../lib/cn";
+import type { DeckWidget } from "../../lib/api/deck";
+
+// Status badge tone mapping.
+function statusTone(s: DeckWidget["status"]): "success" | "muted" | "warning" | "info" {
+  if (s === "available") return "success";
+  if (s === "configured") return "info";
+  if (s === "disabled") return "muted";
+  return "muted"; // not_configured
+}
+
+function statusLabel(s: DeckWidget["status"]): string {
+  if (s === "available") return "activo";
+  if (s === "configured") return "configurado";
+  if (s === "disabled") return "deshabilitado";
+  return "sin configurar";
+}
+
+// Kind badge tone.
+function kindTone(k: string): "info" | "warning" | "muted" {
+  if (k === "voice") return "warning";
+  if (k === "plugin") return "info";
+  return "muted";
+}
+
+interface WidgetRowProps {
+  widget: DeckWidget;
+  /** Called with the new desired enabled value. Only provided for external widgets. */
+  onToggle?: (enabled: boolean) => Promise<void>;
+}
+
+export function WidgetRow({ widget, onToggle }: WidgetRowProps) {
+  const isExternal = widget.source === "external";
+  const [busy, setBusy] = useState(false);
+
+  // Derive current switch state:
+  //   user_enabled null → off (not yet opted in)
+  //   user_enabled true → on
+  //   user_enabled false → off
+  const switchChecked = widget.user_enabled === true;
+
+  const handleToggle = async (v: boolean) => {
+    if (!onToggle || busy) return;
+    setBusy(true);
+    try {
+      await onToggle(v);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <li
+      data-testid={`deck-widget-${widget.id}`}
+      className={cn(
+        "flex items-center gap-3 rounded-lg border px-3 py-2.5 text-sm transition-colors",
+        isExternal
+          ? "border-border bg-muted/20 hover:border-muted-fg/30"
+          : "border-border/50 bg-muted/10"
+      )}
+    >
+      {/* Source dot */}
+      <span
+        title={widget.source === "apx" ? "Widget nativo APX" : "Widget externo"}
+        className={cn(
+          "size-2 shrink-0 rounded-full",
+          widget.source === "apx" ? "bg-emerald-500" : "bg-sky-400"
+        )}
+      />
+
+      {/* Title + desktop */}
+      <div className="min-w-0 flex-1">
+        <span className="font-medium">{widget.title}</span>
+        <span className="ml-2 text-xs text-muted-fg">{widget.desktop}</span>
+      </div>
+
+      {/* Kind badge */}
+      <Badge tone={kindTone(widget.kind)}>{widget.kind}</Badge>
+
+      {/* Status badge */}
+      <Badge tone={statusTone(widget.status)}>{statusLabel(widget.status)}</Badge>
+
+      {/* Toggle — only external widgets */}
+      {isExternal ? (
+        <span data-testid={`deck-widget-toggle-${widget.id}`}>
+          <Switch
+            checked={switchChecked}
+            onChange={handleToggle}
+            disabled={busy || !onToggle}
+          />
+        </span>
+      ) : (
+        /* Spacer to keep alignment consistent */
+        <span className="w-9 shrink-0" aria-hidden />
+      )}
+    </li>
+  );
+}

package/src/interfaces/web/src/components/layout/Logo.tsx

@@ -0,0 +1,59 @@
+import { LOGO, type LogoVariant } from "../../constants";
+import { useTheme } from "../../hooks/useTheme";
+
+const FULL_ASPECT = 1367 / 458;
+const VERTICAL_ASPECT = 735 / 1016;
+
+export function Logo({
+  size = 32,
+  title = "APX",
+  variant = "icon",
+}: {
+  size?: number;
+  title?: string;
+  variant?: LogoVariant;
+}) {
+  const { theme } = useTheme();
+  const src = LOGO[variant][theme];
+
+  if (variant === "full") {
+    const height = size;
+    const width = Math.round(size * FULL_ASPECT);
+    return (
+      <img
+        src={src}
+        alt={title}
+        width={width}
+        height={height}
+        className="block object-contain"
+        draggable={false}
+      />
+    );
+  }
+
+  if (variant === "vertical") {
+    const width = size;
+    const height = Math.round(size / VERTICAL_ASPECT);
+    return (
+      <img
+        src={src}
+        alt={title}
+        width={width}
+        height={height}
+        className="block object-contain"
+        draggable={false}
+      />
+    );
+  }
+
+  return (
+    <img
+      src={src}
+      alt={title}
+      width={size}
+      height={size}
+      className="block object-contain"
+      draggable={false}
+    />
+  );
+}