@agentprojectcontext/apx 1.25.0 → 1.27.1

package/src/interfaces/web/src/screens/project/ThreadsTab.tsx

@@ -0,0 +1,100 @@
+import { useState } from "react";
+import useSWR from "swr";
+import { Agents, Conversations } from "../../lib/api";
+import { Section } from "../../components/Section";
+import { Badge, Dialog, Empty, Loading } from "../../components/ui";
+import { cn } from "../../lib/cn";
+import { t } from "../../i18n";
+
+export function ThreadsTab({ pid }: { pid: string }) {
+  const agents = useSWR(`/projects/${pid}/agents`, () => Agents.list(pid));
+  const [activeSlug, setActiveSlug] = useState<string | null>(null);
+  const [openId, setOpenId] = useState<string | null>(null);
+
+  return (
+    <Section
+      title={t("project.threads.title")}
+      description={t("project.threads.subtitle")}
+    >
+      {agents.isLoading && <Loading />}
+      {!agents.isLoading && (agents.data?.length ?? 0) === 0 && (
+        <Empty>{t("project.threads.no_agents")}</Empty>
+      )}
+      <div className="grid grid-cols-1 gap-3 md:grid-cols-3">
+        <ul className="space-y-1 md:col-span-1">
+          {(agents.data || []).map((a) => (
+            <li key={a.slug}>
+              <button
+                type="button"
+                onClick={() => setActiveSlug(a.slug)}
+                className={cn(
+                  "flex w-full items-center justify-between rounded-md px-2.5 py-1.5 text-sm",
+                  activeSlug === a.slug ? "bg-accent text-accent-fg" : "text-foreground hover:bg-accent/60"
+                )}
+              >
+                <span>{a.slug}</span>
+                {a.model && <Badge tone="info">{a.model}</Badge>}
+              </button>
+            </li>
+          ))}
+        </ul>
+        <div className="md:col-span-2">
+          {activeSlug ? <ConvList pid={pid} slug={activeSlug} onOpen={setOpenId} /> :
+            <Empty>{t("project.threads.pick")}</Empty>}
+        </div>
+      </div>
+
+      {activeSlug && openId && (
+        <ConvDialog pid={pid} slug={activeSlug} id={openId} onClose={() => setOpenId(null)} />
+      )}
+    </Section>
+  );
+}
+
+function ConvList({ pid, slug, onOpen }: { pid: string; slug: string; onOpen: (id: string) => void }) {
+  const list = useSWR(`/projects/${pid}/agents/${slug}/conversations`, () => Conversations.list(pid, slug));
+  if (list.isLoading) return <Loading />;
+  if (!list.data?.length) return <Empty>{t("project.threads.empty", { slug })}</Empty>;
+  return (
+    <ul className="space-y-1 text-sm">
+      {list.data.map((c) => (
+        <li
+          key={c.id}
+          className="cursor-pointer rounded-md border border-border bg-muted/30 px-3 py-2 hover:bg-accent/40"
+          onClick={() => onOpen(c.id)}
+        >
+          <div className="flex items-center justify-between">
+            <span className="font-medium">{c.title || c.filename}</span>
+            <span className="text-xs text-muted-fg">{new Date(c.started_at).toLocaleString()}</span>
+          </div>
+          <div className="mt-0.5 text-xs text-muted-fg">
+            {c.channel && <>{t("project.threads.via")} {c.channel} · </>}
+            {(c.messages ?? 0)} {t("project.threads.messages")}
+          </div>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function ConvDialog({ pid, slug, id, onClose }: { pid: string; slug: string; id: string; onClose: () => void }) {
+  const data = useSWR(`/projects/${pid}/agents/${slug}/conversations/${id}`, () => Conversations.get(pid, slug, id));
+  return (
+    <Dialog open onClose={onClose} title={t("project.threads.conversation_title", { id })} size="lg">
+      {data.isLoading && <Loading />}
+      {data.data && (
+        <div className="max-h-[60vh] space-y-3 overflow-y-auto pr-2">
+          {data.data.messages.map((m, i) => (
+            <div key={i} className="rounded-md border border-border bg-muted/30 p-3 text-sm">
+              <div className="mb-1 flex items-center justify-between text-xs text-muted-fg">
+                <span className="uppercase tracking-wide">{m.role}{m.name ? ` (${m.name})` : ""}</span>
+                {m.ts && <span>{new Date(m.ts).toLocaleString()}</span>}
+              </div>
+              <div className="whitespace-pre-wrap">{m.content}</div>
+            </div>
+          ))}
+        </div>
+      )}
+    </Dialog>
+  );
+}

package/src/interfaces/web/src/styles.css

@@ -0,0 +1,128 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-fg: hsl(var(--muted-foreground));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-fg: hsl(var(--accent-foreground));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-primary: hsl(var(--primary));
+  --color-primary-fg: hsl(var(--primary-foreground));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-sidebar: hsl(var(--sidebar));
+  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
+  --color-sidebar-primary: hsl(var(--sidebar-primary));
+  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
+  --color-sidebar-accent: hsl(var(--sidebar-accent));
+  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
+  --color-sidebar-border: hsl(var(--sidebar-border));
+  --color-sidebar-ring: hsl(var(--sidebar-ring));
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
+}
+
+/* shadcn-new design tokens. Dark by default — light handled by toggling
+   .dark off the <html> tag. Match Tailwind's `colors` config above. */
+@layer base {
+  :root {
+    --background: 220 16% 95%;
+    --foreground: 222 16% 16%;
+    --card: 0 0% 100%;
+    --card-foreground: 222 16% 16%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222 16% 16%;
+    --muted: 220 14% 96%;
+    --muted-foreground: 220 9% 46%;
+    --accent: 220 14% 96%;
+    --accent-foreground: 222 16% 16%;
+    --secondary: 220 14% 96%;
+    --secondary-foreground: 222 16% 16%;
+    --border: 220 13% 91%;
+    --input: 220 13% 91%;
+    --ring: 222 80% 56%;
+    --primary: 222 47% 11%;
+    --primary-foreground: 210 20% 98%;
+    --destructive: 0 72% 51%;
+    --destructive-foreground: 210 20% 98%;
+    --radius: 0.75rem;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+    --sidebar: 0 0% 100%;
+    --sidebar-foreground: 222 16% 16%;
+    --sidebar-primary: 222 47% 11%;
+    --sidebar-primary-foreground: 210 20% 98%;
+    --sidebar-accent: 220 14% 96%;
+    --sidebar-accent-foreground: 222 16% 16%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 222 80% 56%;
+  }
+  .dark {
+    --background: 222 22% 5%;
+    --foreground: 210 16% 92%;
+    --card: 222 16% 11%;
+    --card-foreground: 210 16% 92%;
+    --popover: 222 16% 11%;
+    --popover-foreground: 210 16% 92%;
+    --muted: 222 14% 14%;
+    --muted-foreground: 217 10% 64%;
+    --accent: 222 14% 17%;
+    --accent-foreground: 210 16% 92%;
+    --secondary: 222 14% 17%;
+    --secondary-foreground: 210 16% 92%;
+    --border: 222 14% 18%;
+    --input: 222 14% 18%;
+    --ring: 217 91% 60%;
+    --primary: 210 16% 92%;
+    --primary-foreground: 222 18% 8%;
+    --destructive: 0 62% 50%;
+    --destructive-foreground: 210 16% 92%;
+    --chart-1: 217 91% 60%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+    --sidebar: 222 16% 11%;
+    --sidebar-foreground: 210 16% 92%;
+    --sidebar-primary: 217 91% 60%;
+    --sidebar-primary-foreground: 210 16% 92%;
+    --sidebar-accent: 222 14% 17%;
+    --sidebar-accent-foreground: 210 16% 92%;
+    --sidebar-border: 222 14% 18%;
+    --sidebar-ring: 217 91% 60%;
+  }
+  body {
+    font-feature-settings: "rlig" 1, "calt" 1;
+    @apply bg-background text-foreground;
+  }
+  * {
+    @apply border-border outline-ring/50;
+  }
+}
+
+/* Subtle scrollbar that doesn't fight the dark theme. */
+::-webkit-scrollbar { width: 10px; height: 10px; }
+::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 5px; }
+::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground)); }

package/src/interfaces/web/src/types/daemon.ts

@@ -0,0 +1,289 @@
+// Daemon shapes. Mirror the responses returned by src/host/daemon/api/*.
+// If you find yourself reaching for `any`, add a type here first.
+
+export type ProjectKind =
+  | "personal"
+  | "company"
+  | "app"
+  | "software"
+  | "default"
+  | "other";
+
+export interface ProjectEntry {
+  id: number | string;
+  path: string;
+  name?: string;
+  kind?: ProjectKind;
+  agents?: number;
+  storagePath?: string;
+}
+
+export interface AgentEntry {
+  slug: string;
+  role: string | null;
+  model: string | null;
+  language: string | null;
+  description: string | null;
+  is_master?: boolean;
+  parent?: string | null;
+  type?: string | null;
+  area?: string | null;
+  skills: string[];
+  tools: string[];
+}
+
+export interface AgentDetail extends AgentEntry {
+  memory: string;
+  system?: string;
+  extra?: Record<string, unknown>;
+}
+
+export interface RoutineEntry {
+  name: string;
+  kind: "heartbeat" | "exec_agent" | "super_agent" | "telegram" | "shell";
+  schedule: string;
+  spec: Record<string, unknown>;
+  enabled: boolean;
+  next_run_at: string | null;
+  last_run_at: string | null;
+  last_status: string | null;
+  last_error: string | null;
+  pre_commands?: string[];
+  post_commands?: string[];
+}
+
+export interface TaskEntry {
+  id: string;
+  state: "open" | "done" | "dropped";
+  title: string;
+  body: string | null;
+  tags: string[];
+  due: string | null;
+  agent: string | null;
+  source: string | null;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface McpEntry {
+  name: string;
+  source: "apc" | "runtime" | "global" | string;
+  transport: string;
+  enabled: boolean;
+}
+
+export interface MessageEntry {
+  ts: string;
+  channel: string;
+  direction: "in" | "out";
+  type: string;
+  author: string | null;
+  actor_id: string | null;
+  actor_kind: string | null;
+  body: string;
+  meta: Record<string, unknown>;
+  agent_slug: string | null;
+  session_id: string | number | null;
+  external_id: string | null;
+}
+
+export interface TelegramChannel {
+  name: string;
+  bot_token?: string;
+  chat_id?: string;
+  project?: string;
+  route_to_agent?: string;
+  respond_with_engine?: boolean;
+  poll_interval_ms?: number;
+  owner_user_id?: number | string;
+}
+
+export interface TelegramChannelsResponse { channels: TelegramChannel[] }
+
+export interface TelegramContact {
+  user_id: number | string;
+  name?: string;
+  username?: string;
+  role?: string;
+  note?: string;
+  first_seen?: string;
+  last_seen?: string;
+}
+
+export interface TelegramRole { tools: "*" | string[] }
+
+export interface TelegramContactsResponse {
+  contacts: TelegramContact[];
+  roles: Record<string, TelegramRole>;
+  channel_owners: { name: string; owner_user_id: number | string | null }[];
+}
+
+export interface EngineSummary { engines: string[] }
+
+export interface HealthSummary { status: string; version: string; uptime_s: number }
+
+export interface ConversationListEntry {
+  id: string;
+  filename: string;
+  agent_slug: string;
+  started_at: string;
+  ended_at?: string;
+  channel?: string;
+  messages?: number;
+  title?: string;
+}
+
+export interface ConversationMessage {
+  role: "user" | "assistant" | "system" | "tool";
+  content: string;
+  ts?: string;
+  name?: string;
+}
+
+export interface ConversationDetail {
+  id: string;
+  agent_slug: string;
+  channel?: string;
+  messages: ConversationMessage[];
+  meta?: Record<string, unknown>;
+}
+
+export interface PairedClient {
+  id: string;
+  label: string;
+  kind: string;
+  created_at: string;
+  last_seen: string | null;
+  token_suffix: string;
+}
+
+export interface PairInit {
+  pairing_id: string;
+  expires_at: string;
+  ttl_ms: number;
+  fingerprint: string;
+  daemon: { host: string; port: number };
+  lan_urls: string[];
+}
+
+export interface PairStatus {
+  status: "pending" | "confirmed" | "expired" | "unknown";
+  device_label?: string;
+  client_id?: string;
+}
+
+export interface ProjectConfig {
+  effective: Record<string, unknown>;
+  project_only: Record<string, unknown>;
+  project_config_path: string;
+  apc_project: Record<string, unknown>;
+  project_json_path: string;
+}
+
+export interface Identity {
+  agent_name?: string;
+  owner_name?: string;
+  personality?: string;
+  owner_context?: string;
+  language?: string;
+  timezone?: string;
+  updated?: string;
+  created?: string;
+  last_wakeup?: string | null;
+}
+
+export interface SuperAgentConfig {
+  enabled: boolean;
+  name: string;
+  model: string;
+  system: string;
+  permission_mode: string;
+  allowed_tools: string[];
+  model_fallback: {
+    enabled?: boolean;
+    models?: string[];
+    order?: string[];
+  };
+}
+
+/** ~/.apx/config.json shape (partial — only what we read/write today). */
+export interface GlobalConfig {
+  port?: number;
+  host?: string;
+  log_level?: string;
+  projects?: Array<{ path: string }>;
+  user?: { language?: string; locale?: string; timezone?: string };
+  super_agent?: Partial<SuperAgentConfig>;
+  engines?: Record<string, {
+    api_key?: string;
+    base_url?: string;
+    name?: string;
+    engine?: string;
+    default_model?: string;
+    default_temperature?: number;
+    default_max_tokens?: number;
+    is_active?: boolean;
+    context_limit_tokens?: number;
+    model_context_limits?: Record<string, number>;
+    pricing?: {
+      input_per_million?: number;
+      output_per_million?: number;
+      cache_read_per_million?: number;
+      cache_write_per_million?: number;
+    };
+  }>;
+  telegram?: {
+    enabled?: boolean;
+    poll_interval_ms?: number;
+    route_to_agent?: string;
+    respond_with_engine?: boolean;
+    channels?: TelegramChannel[];
+  };
+  voice?: Record<string, unknown>;
+}
+
+/** Token accounting accumulated across a super-agent turn. */
+export interface ChatUsage {
+  input_tokens?: number;
+  output_tokens?: number;
+}
+
+/** A single tool invocation as surfaced by the agent loop's trace. */
+export interface ToolTrace {
+  id: string;
+  tool: string;
+  args?: Record<string, unknown>;
+  result?: unknown;
+  pending?: boolean;
+}
+
+/**
+ * NDJSON events emitted by the super-agent loop (see core/agent/run-agent.js).
+ * The fields are a union over every event `type`; consumers branch on `type`.
+ */
+export interface ChatStreamEvent {
+  type?: string;
+  // text streaming (assistant_text carries `text`)
+  delta?: string;
+  text?: string;
+  content?: string;
+  // diagnostics
+  error?: string;
+  iteration?: number;
+  model?: string;
+  provider?: string;
+  reason?: string;
+  retry_with?: string;
+  from_fallback?: boolean;
+  tools?: string[];
+  streak?: number;
+  // tool_start / tool_result / tool_deduped
+  trace?: ToolTrace;
+  // final
+  result?: {
+    text?: string;
+    usage?: ChatUsage;
+    name?: string;
+    trace?: ToolTrace[];
+  };
+}

package/src/interfaces/web/tailwind.config.js

@@ -0,0 +1,53 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: ["class"],
+  content: ["./index.html", "./src/**/*.{ts,tsx}"],
+  theme: {
+    extend: {
+      colors: {
+        // shadcn-new tokens. We use CSS vars so theme switching is one root
+        // class flip; no Tailwind config edits to add a theme.
+        background: "hsl(var(--background) / <alpha-value>)",
+        foreground: "hsl(var(--foreground) / <alpha-value>)",
+        card:       "hsl(var(--card) / <alpha-value>)",
+        "card-foreground": "hsl(var(--card-foreground) / <alpha-value>)",
+        muted:      "hsl(var(--muted) / <alpha-value>)",
+        "muted-fg": "hsl(var(--muted-foreground) / <alpha-value>)",
+        "muted-foreground": "hsl(var(--muted-foreground) / <alpha-value>)",
+        accent:     "hsl(var(--accent) / <alpha-value>)",
+        "accent-fg":"hsl(var(--accent-foreground) / <alpha-value>)",
+        "accent-foreground":"hsl(var(--accent-foreground) / <alpha-value>)",
+        popover: "hsl(var(--popover) / <alpha-value>)",
+        "popover-foreground": "hsl(var(--popover-foreground) / <alpha-value>)",
+        secondary: "hsl(var(--secondary) / <alpha-value>)",
+        "secondary-foreground": "hsl(var(--secondary-foreground) / <alpha-value>)",
+        border:     "hsl(var(--border) / <alpha-value>)",
+        input:      "hsl(var(--input) / <alpha-value>)",
+        ring:       "hsl(var(--ring) / <alpha-value>)",
+        primary:    "hsl(var(--primary) / <alpha-value>)",
+        "primary-fg":"hsl(var(--primary-foreground) / <alpha-value>)",
+        "primary-foreground":"hsl(var(--primary-foreground) / <alpha-value>)",
+        destructive:"hsl(var(--destructive) / <alpha-value>)",
+        "destructive-foreground":"hsl(var(--destructive-foreground) / <alpha-value>)",
+        sidebar: "hsl(var(--sidebar) / <alpha-value>)",
+        "sidebar-foreground": "hsl(var(--sidebar-foreground) / <alpha-value>)",
+        "sidebar-primary": "hsl(var(--sidebar-primary) / <alpha-value>)",
+        "sidebar-primary-foreground": "hsl(var(--sidebar-primary-foreground) / <alpha-value>)",
+        "sidebar-accent": "hsl(var(--sidebar-accent) / <alpha-value>)",
+        "sidebar-accent-foreground": "hsl(var(--sidebar-accent-foreground) / <alpha-value>)",
+        "sidebar-border": "hsl(var(--sidebar-border) / <alpha-value>)",
+        "sidebar-ring": "hsl(var(--sidebar-ring) / <alpha-value>)",
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      fontFamily: {
+        sans: ["ui-sans-serif", "system-ui", "-apple-system", "Segoe UI", "Roboto"],
+        mono: ["ui-monospace", "SF Mono", "Menlo", "monospace"],
+      },
+    },
+  },
+  plugins: [],
+};

package/src/interfaces/web/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src", "vite.config.ts"]
+}

package/src/interfaces/web/vite.config.ts

@@ -0,0 +1,50 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+import path from "node:path";
+
+// Vite config for the APX admin panel.
+//
+// - Single SPA, no SSR (this is a local admin tool).
+// - During `vite dev`, every daemon API prefix is proxied to the running
+//   daemon so we develop the UI with hot reload against REAL data. Frontend
+//   routes (/, /settings, /p/:id) are NOT listed, so vite serves index.html
+//   for them (SPA routing).
+// - `vite build` emits to ./dist; the daemon serves that folder when present.
+
+const DAEMON_TARGET = process.env.APX_DAEMON_URL || "http://127.0.0.1:7430";
+
+// Keep in sync with API_PREFIXES in src/host/daemon/api/shared.js — that's the
+// source of truth for what is a daemon route. A missing prefix means `vite dev`
+// silently serves the SPA shell for that call instead of the real response
+// (e.g. an empty /pair/list).
+const API_PREFIXES = [
+  "/health", "/admin", "/projects", "/telegram", "/engines", "/runtimes",
+  "/messages", "/sessions", "/tools", "/mcp", "/voice", "/tts", "/desktop", "/overlay",
+  "/transcribe", "/run", "/files", "/memory", "/env", "/pair", "/deck",
+  "/super-agent", "/identity", "/agents", "/tasks", "/code",
+];
+
+const proxy = Object.fromEntries(
+  API_PREFIXES.map((p) => [p, { target: DAEMON_TARGET, changeOrigin: false, ws: true }])
+);
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  base: "/",
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  server: {
+    port: 7431,
+    strictPort: false,
+    proxy,
+  },
+  build: {
+    outDir: "dist",
+    sourcemap: true,
+    target: "es2022",
+  },
+});