@agentprojectcontext/apx 1.25.0 → 1.27.1

package/src/interfaces/web/public/favicon/dark/site.webmanifest

@@ -0,0 +1,18 @@
+{
+  "name": "APX",
+  "short_name": "APX",
+  "icons": [
+    {
+      "src": "android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#0a0a0a",
+  "background_color": "#0a0a0a"
+}

package/src/interfaces/web/public/favicon/white/site.webmanifest

@@ -0,0 +1,18 @@
+{
+  "name": "APX",
+  "short_name": "APX",
+  "icons": [
+    {
+      "src": "android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff"
+}

package/src/interfaces/web/src/App.tsx

@@ -0,0 +1,199 @@
+import { useState } from "react";
+import { Route, Routes, useLocation, useNavigate, useSearchParams } from "react-router-dom";
+import { Moon, Sun } from "lucide-react";
+import { ProjectSidebar, projectKindLabel } from "./components/layout/ProjectSidebar";
+import { ApxAdminScreen } from "./screens/ApxAdminScreen";
+import { ProjectScreen } from "./screens/ProjectScreen";
+import { SettingsScreen } from "./screens/SettingsScreen";
+import { VoiceScreen } from "./screens/modules/VoiceScreen";
+import { DesktopScreen } from "./screens/modules/DesktopScreen";
+import { DeckScreen } from "./screens/modules/DeckScreen";
+import { CodeScreen } from "./screens/modules/CodeScreen";
+import { AddProjectDialog } from "./components/AddProjectDialog";
+import { PairingScreen } from "./screens/PairingScreen";
+import { RobyBubble } from "./components/RobyBubble";
+import { ToastProvider } from "./components/Toast";
+import { TooltipProvider } from "./components/ui/tooltip";
+import { useTheme } from "./hooks/useTheme";
+import { useProjects } from "./hooks/useProjects";
+import { useTokenBootstrap } from "./hooks/useTokenBootstrap";
+import { t } from "./i18n";
+
+export function App() {
+  const auth = useTokenBootstrap();
+
+  if (auth.status === "loading") {
+    return <Splash text={t("daemon.connecting")} />;
+  }
+  if (auth.status === "error") {
+    return (
+      <Splash
+        text={t("daemon.unreachable")}
+        sub={`${t("daemon.unreachable_hint")}\n\n${auth.reason}`}
+      />
+    );
+  }
+  if (auth.status === "unpaired") {
+    return <PairingScreen onPaired={auth.reload} />;
+  }
+
+  return (
+    <ToastProvider>
+      <TooltipProvider delay={300}>
+        <Shell />
+      </TooltipProvider>
+    </ToastProvider>
+  );
+}
+
+function Shell() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [params, setParams] = useSearchParams();
+  const { theme, toggle } = useTheme();
+  const addOpen = params.get("action") === "add-project";
+  const [robyOpen, setRobyOpen] = useState(false);
+
+  const closeAdd = () => {
+    const next = new URLSearchParams(params);
+    next.delete("action");
+    setParams(next, { replace: true });
+  };
+
+  return (
+    <div className="flex h-screen w-screen overflow-hidden bg-background text-foreground" data-testid="app-shell">
+      <ProjectSidebar onSelect={(href) => navigate(href)} onOpenRoby={() => setRobyOpen(true)} />
+      <main className="m-2 ml-0 flex min-w-0 flex-1 flex-col overflow-hidden rounded-xl border border-border bg-card shadow-sm">
+        <TopBar onToggleTheme={toggle} isDark={theme === "dark"} pathname={location.pathname} />
+        <div className="flex-1 overflow-y-auto">
+          <Routes>
+            <Route path="/"           element={<ApxAdminScreen />} />
+            <Route path="/settings/*" element={<SettingsScreen />} />
+            <Route path="/m/voice/*"   element={<VoiceScreen />} />
+            <Route path="/m/desktop/*" element={<DesktopScreen />} />
+            <Route path="/m/deck/*"   element={<DeckScreen />} />
+            <Route path="/m/code/*"   element={<CodeScreen />} />
+            <Route path="/p/:pid/*"   element={<ProjectScreen />} />
+            <Route path="*"           element={<NotFound />} />
+          </Routes>
+        </div>
+      </main>
+      <AddProjectDialog open={addOpen} onClose={closeAdd} />
+      {/* Roby (the super-agent) chat sheet. Launcher lives in the rail (below
+          Settings); open state is owned here so the rail can trigger it. */}
+      <RobyBubble open={robyOpen} onOpenChange={setRobyOpen} />
+    </div>
+  );
+}
+
+function TopBar({
+  onToggleTheme,
+  isDark,
+  pathname,
+}: {
+  onToggleTheme: () => void;
+  isDark: boolean;
+  pathname: string;
+}) {
+  const { projects } = useProjects();
+  const parts = pathname.split("/").filter(Boolean);
+  const project = parts[0] === "p" ? projects.find((p) => String(p.id) === parts[1]) : undefined;
+  const section = parts[0] === "settings"
+    ? settingsLabel(parts[1])
+    : parts[0] === "p"
+      ? projectLabel(parts[2])
+      : "";
+  const isDefault = parts[0] === "p" && parts[1] === "0";
+  const projName = project?.name || project?.path?.split("/").pop() || t("nav.project");
+  const crumb = pathname === "/"
+    ? t("topbar.breadcrumb_root")
+    : parts[0] === "settings"
+      ? [t("topbar.breadcrumb_root"), t("nav.settings"), section].filter(Boolean).join(" › ")
+      : parts[0] === "p"
+        ? (isDefault
+            ? [t("topbar.breadcrumb_root"), t("topbar.breadcrumb_base"), section].filter(Boolean).join(" › ")
+            : [t("topbar.breadcrumb_root"), t("topbar.breadcrumb_projects"), projName, section].filter(Boolean).join(" › "))
+        : t("topbar.breadcrumb_root");
+  const subtitle = pathname === "/"
+    ? ""
+    : parts[0] === "settings"
+      ? t("settings.subtitle")
+      : parts[0] === "p"
+        ? (isDefault
+            ? t("base.subtitle")
+            : project ? `${projectKindLabel(project.kind)} · ${project.path}` : "")
+        : "";
+  return (
+    <header className="flex h-11 shrink-0 items-center justify-between gap-4 px-4">
+      <span className="min-w-0 truncate text-xs tracking-wide text-muted-fg">
+        {crumb}
+        {subtitle && <span className="text-muted-fg/60"> · {subtitle}</span>}
+      </span>
+      <button
+        type="button"
+        onClick={onToggleTheme}
+        title={isDark ? t("topbar.light") : t("topbar.dark")}
+        className="rounded-md p-1.5 text-muted-fg hover:bg-accent hover:text-accent-fg"
+      >
+        {isDark ? <Sun size={16} /> : <Moon size={16} />}
+      </button>
+    </header>
+  );
+}
+
+function settingsLabel(key?: string) {
+  switch (key) {
+    case "super-agent": return t("settings.tabs.super_agent");
+    case "engines": return t("settings.tabs.engines");
+    case "telegram": return t("settings.tabs.telegram");
+    case "devices": return t("settings.tabs.devices");
+    case "appearance": return t("settings.appearance");
+    case "config":
+    case "advanced": return t("settings.tabs.advanced");
+    case "identity":
+    default: return key ? key : "";
+  }
+}
+
+function projectLabel(key?: string) {
+  switch (key) {
+    case "chat": return t("project.nav.chat");
+    case "threads": return t("project.nav.threads");
+    case "telegram": return t("project.nav.telegram");
+    case "agents": return t("project.nav.agents");
+    case "routines": return t("project.nav.routines");
+    case "tasks": return t("project.nav.tasks");
+    case "mcps": return t("project.nav.mcps");
+    case "config": return t("project.nav.config");
+    case "workspaces": return t("base.workspaces_title");
+    case "models": return t("settings.tabs.engines");
+    case "agent-defaults": return t("base.defaults_title");
+    case "sessions": return t("base.sessions_title");
+    case "logs": return t("project.nav.logs");
+    case "memories": return t("project.nav.memories");
+    default: return "";
+  }
+}
+
+function Splash({ text, sub }: { text: string; sub?: string }) {
+  return (
+    <div className="grid h-screen w-screen place-items-center bg-background text-foreground">
+      <div className="text-center">
+        <div className="font-mono text-xs text-muted-fg whitespace-pre leading-none mb-4">
+          {"  ▄███████▄\n █ ██   ██ █\n █  ◔   ◔  █\n █   ╰~╯   █\n  ▀███████▀"}
+        </div>
+        <div className="text-foreground">{text}</div>
+        {sub && <pre className="mt-2 max-w-xl whitespace-pre-wrap text-sm text-muted-fg">{sub}</pre>}
+      </div>
+    </div>
+  );
+}
+
+function NotFound() {
+  return (
+    <div className="p-8">
+      <h1 className="text-2xl">{t("not_found.title")}</h1>
+      <p className="text-muted-fg">{t("not_found.message")}</p>
+    </div>
+  );
+}

package/src/interfaces/web/src/components/AddProjectDialog.tsx

@@ -0,0 +1,121 @@
+import { useEffect, useState } from "react";
+import { useSWRConfig } from "swr";
+import { FolderOpen, Home, Search } from "lucide-react";
+import { Filesystem, Projects } from "../lib/api";
+import { Button, Dialog, Empty, Field, Input, Loading } from "./ui";
+import { useToast } from "./Toast";
+import { t } from "../i18n";
+
+export function AddProjectDialog({ open, onClose }: { open: boolean; onClose: () => void }) {
+  const { mutate } = useSWRConfig();
+  const toast = useToast();
+  const [path, setPath] = useState("");
+  const [browsePath, setBrowsePath] = useState("");
+  const [entries, setEntries] = useState<string[]>([]);
+  const [parent, setParent] = useState<string | null>(null);
+  const [browseError, setBrowseError] = useState("");
+  const [loadingDirs, setLoadingDirs] = useState(false);
+  const [busy, setBusy] = useState(false);
+
+  const loadDirs = async (nextPath: string, silent = false) => {
+    setLoadingDirs(true);
+    setBrowseError("");
+    try {
+      const out = await Filesystem.dirs(nextPath || "~");
+      setBrowsePath(out.path);
+      setPath(out.path);
+      setParent(out.parent);
+      setEntries(out.entries);
+    } catch (e) {
+      const message = (e as Error).message;
+      setBrowseError(message);
+      if (!silent) toast.error(message);
+    } finally {
+      setLoadingDirs(false);
+    }
+  };
+
+  useEffect(() => {
+    if (open && !browsePath) loadDirs(path || "~", true);
+  }, [open]);
+
+  const submit = async () => {
+    const trimmed = path.trim();
+    if (!trimmed) { toast.error(t("add_project.path_required")); return; }
+    setBusy(true);
+    try {
+      const out = await Projects.register(trimmed);
+      toast.success(t("add_project.registered", { id: out.id }));
+      await mutate("/projects");
+      setPath("");
+      onClose();
+    } catch (e) {
+      toast.error((e as Error).message);
+    } finally { setBusy(false); }
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      title={t("add_project.title")}
+      description={t("add_project.subtitle")}
+      footer={
+        <>
+          <Button variant="ghost" onClick={onClose} disabled={busy}>{t("common.cancel")}</Button>
+          <Button variant="primary" onClick={submit} loading={busy}>{t("add_project.register")}</Button>
+        </>
+      }
+    >
+      <div className="space-y-3">
+        <Field label={t("add_project.path_label")} hint={t("add_project.path_hint")}>
+          <div className="flex gap-2">
+            <Input
+              autoFocus
+              placeholder={t("add_project.path_placeholder")}
+              value={path}
+              onChange={(e) => setPath(e.target.value)}
+              onKeyDown={(e) => { if (e.key === "Enter") submit(); }}
+            />
+            <Button onClick={() => loadDirs(path || "~")} disabled={loadingDirs}>
+              <Search size={14} /> {t("add_project.search_btn")}
+            </Button>
+          </div>
+        </Field>
+
+        <div className="rounded-md border border-border bg-muted/20">
+          <div className="flex items-center justify-between border-b border-border px-3 py-2">
+            <span className="truncate font-mono text-xs text-muted-fg">{browsePath || path || "~"}</span>
+            <div className="flex gap-1">
+              <Button size="sm" variant="ghost" onClick={() => loadDirs("~")} disabled={loadingDirs}>
+                <Home size={13} />
+              </Button>
+              <Button size="sm" variant="ghost" onClick={() => parent && loadDirs(parent)} disabled={!parent || loadingDirs}>
+                ..
+              </Button>
+            </div>
+          </div>
+          <div className="max-h-64 overflow-y-auto p-2">
+            {loadingDirs && <Loading />}
+            {!loadingDirs && browseError && (
+              <Empty>{t("add_project.browser_unavailable")}</Empty>
+            )}
+            {!loadingDirs && !browseError && entries.length === 0 && <Empty>{t("add_project.no_folders")}</Empty>}
+            {!loadingDirs && !browseError && entries.map((entry) => (
+              <button
+                key={entry}
+                type="button"
+                onClick={() => loadDirs(entry)}
+                className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm hover:bg-accent"
+              >
+                <FolderOpen size={14} className="text-muted-fg" />
+                <span className="truncate">{entry.split("/").pop()}</span>
+                <span className="ml-auto truncate font-mono text-[10px] text-muted-fg">{entry}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+    </Dialog>
+  );
+}

package/src/interfaces/web/src/components/ModelCombobox.tsx

@@ -0,0 +1,96 @@
+import { useEffect, useRef, useState } from "react";
+import { AlertTriangle, ChevronDown } from "lucide-react";
+import { cn } from "../lib/cn";
+
+// Editable combobox: type freely, matching options appear below; click one to
+// pick it, or keep your own text. Behaves like a text input that is also a
+// select (the panda.project model picker pattern).
+export function ModelCombobox({
+  value,
+  onChange,
+  options,
+  placeholder = "elegí o escribí un modelo…",
+  invalid,
+  invalidHint,
+  className,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  options: string[];
+  placeholder?: string;
+  invalid?: boolean;
+  invalidHint?: string;
+  className?: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState(value);
+  const wrapRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => { setQuery(value); }, [value]);
+
+  // Close on outside click.
+  useEffect(() => {
+    if (!open) return;
+    const onDoc = (e: MouseEvent) => {
+      if (wrapRef.current && !wrapRef.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onDoc);
+    return () => document.removeEventListener("mousedown", onDoc);
+  }, [open]);
+
+  const q = query.trim().toLowerCase();
+  const filtered = q ? options.filter((o) => o.toLowerCase().includes(q)) : options;
+
+  const pick = (o: string) => { onChange(o); setQuery(o); setOpen(false); };
+
+  return (
+    <div ref={wrapRef} className={cn("relative", className)}>
+      <div
+        className={cn(
+          "flex items-center gap-1 rounded-lg border bg-background px-2.5 transition-colors focus-within:border-ring focus-within:ring-1 focus-within:ring-ring",
+          invalid ? "border-amber-500/60" : "border-border",
+        )}
+      >
+        {invalid && (
+          <span title={invalidHint || "Modelo/proveedor no disponible"}>
+            <AlertTriangle className="size-3.5 shrink-0 text-amber-400" />
+          </span>
+        )}
+        <input
+          value={query}
+          placeholder={placeholder}
+          onChange={(e) => { setQuery(e.target.value); onChange(e.target.value); setOpen(true); }}
+          onFocus={() => setOpen(true)}
+          className="w-full bg-transparent py-1.5 text-sm outline-none placeholder:text-muted-fg/60"
+        />
+        <button
+          type="button"
+          tabIndex={-1}
+          onClick={() => setOpen((v) => !v)}
+          className="shrink-0 text-muted-fg hover:text-foreground"
+        >
+          <ChevronDown className="size-4" />
+        </button>
+      </div>
+
+      {open && filtered.length > 0 && (
+        <ul className="absolute z-50 mt-1 max-h-56 w-full overflow-y-auto rounded-lg border border-border bg-popover p-1 shadow-md ring-1 ring-foreground/10">
+          {filtered.map((o) => (
+            <li key={o}>
+              <button
+                type="button"
+                onMouseDown={(e) => { e.preventDefault(); pick(o); }}
+                className={cn(
+                  "flex w-full items-center rounded-md px-2 py-1 text-left text-sm hover:bg-accent hover:text-accent-fg",
+                  o === value && "bg-accent/50",
+                )}
+              >
+                <span className="truncate font-mono text-xs">{o}</span>
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}