@camstack/addon-admin-ui 0.1.2 → 0.1.3

package/src/pages/system/Agents.tsx

@@ -1,362 +0,0 @@
-import { useState, useMemo } from "react";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import {
-  Bot,
-  Cpu,
-  ListTodo,
-  WifiOff,
-  TreePine,
-  ScrollText,
-  X,
-  FlaskConical,
-  Square,
-} from "lucide-react";
-import { useBackendClient } from "../../hooks/useBackendClient";
-import { ProcessTree } from "../../components/agents/ProcessTree";
-import { AgentLogs } from "../../components/agents/AgentLogs";
-import type {
-  ProcessTreeEntry,
-  SubProcess,
-} from "../../components/agents/ProcessTree";
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-function normaliseProcessTreeEntry(
-  raw: Record<string, unknown>,
-): ProcessTreeEntry {
-  const info = (raw.info ?? raw) as Record<string, unknown>;
-  const status = (raw.status ?? {}) as Record<string, unknown>;
-  return {
-    id: String(info.id ?? raw.id ?? ""),
-    name: String(info.name ?? raw.name ?? ""),
-    pid: Number(raw.pid ?? 0),
-    state: String(raw.state ?? "running"),
-    cpuPercent: Number(status.cpuPercent ?? raw.cpuPercent ?? 0),
-    memoryPercent: Number(status.memoryPercent ?? raw.memoryPercent ?? 0),
-    memoryMB: Number(info.memoryMB ?? raw.memoryMB ?? 0),
-    isHub: Boolean(raw.isHub ?? false),
-    platform: String(info.platform ?? raw.platform ?? ""),
-    arch: String(info.arch ?? raw.arch ?? ""),
-    host: String(info.host ?? raw.host ?? ""),
-    capabilities:
-      (info.capabilities as string[]) ?? (raw.capabilities as string[]) ?? [],
-    installedAddons:
-      (info.installedAddons as string[]) ??
-      (raw.installedAddons as string[]) ??
-      [],
-    pythonRuntimes:
-      (info.pythonRuntimes as string[]) ??
-      (raw.pythonRuntimes as string[]) ??
-      [],
-    connectedSince: Number(raw.connectedSince ?? Date.now()),
-    subProcesses: normaliseSubProcesses(raw.subProcesses),
-  };
-}
-
-function normaliseSubProcesses(raw: unknown): SubProcess[] {
-  if (!Array.isArray(raw)) return [];
-  return raw.map((p: Record<string, unknown>) => ({
-    pid: Number(p.pid ?? 0),
-    name: String(p.name ?? ""),
-    command: String(p.command ?? ""),
-    state: (p.state as SubProcess["state"]) ?? "running",
-    cpuPercent: Number(p.cpuPercent ?? 0),
-    memoryRss: Number(p.memoryRss ?? 0),
-    uptimeSeconds: Number(p.uptimeSeconds ?? 0),
-  }));
-}
-
-// ---------------------------------------------------------------------------
-// Stat Card
-// ---------------------------------------------------------------------------
-
-function StatCard({
-  icon: Icon,
-  label,
-  value,
-  color,
-}: {
-  icon: React.ElementType;
-  label: string;
-  value: number | string;
-  color: string;
-}) {
-  return (
-    <div className="rounded-xl border border-border bg-surface px-4 py-3 flex items-center gap-3">
-      <div
-        className={`flex-shrink-0 h-9 w-9 rounded-lg flex items-center justify-center ${color}`}
-      >
-        <Icon className="h-4 w-4" />
-      </div>
-      <div>
-        <div className="text-xl font-bold text-foreground leading-none">
-          {value}
-        </div>
-        <div className="text-[10px] text-foreground-subtle mt-0.5">{label}</div>
-      </div>
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Tab selector
-// ---------------------------------------------------------------------------
-
-type Tab = "tree" | "logs";
-
-function TabButton({
-  tab,
-  active,
-  icon: Icon,
-  label,
-  onClick,
-}: {
-  tab: Tab;
-  active: boolean;
-  icon: React.ElementType;
-  label: string;
-  onClick: () => void;
-}) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className={`inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors ${
-        active
-          ? "bg-primary/10 text-primary border border-primary/30"
-          : "bg-surface text-foreground-subtle border border-border hover:text-foreground hover:bg-primary/5"
-      }`}
-    >
-      <Icon className="h-3.5 w-3.5" />
-      {label}
-    </button>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Page
-// ---------------------------------------------------------------------------
-
-export function AgentsPage() {
-  const client = useBackendClient();
-  const queryClient = useQueryClient();
-  const [activeTab, setActiveTab] = useState<Tab>("tree");
-  const [selectedAgentName, setSelectedAgentName] = useState<string | null>(
-    null,
-  );
-
-  // Test worker state
-  const { data: testWorkerStatus } = useQuery({
-    queryKey: ["agents", "testWorker", "status"],
-    queryFn: () => client.trpc.agents.isTestWorkerRunning.query(),
-    refetchInterval: 5000,
-  });
-  const testWorkerRunning = testWorkerStatus?.running ?? false;
-
-  const startTestWorker = useMutation({
-    mutationFn: () => client.trpc.agents.startTestWorker.mutate(),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["agents"] });
-      queryClient.invalidateQueries({ queryKey: ["agent"] });
-    },
-  });
-
-  const stopTestWorker = useMutation({
-    mutationFn: () => client.trpc.agents.stopTestWorker.mutate(),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["agents"] });
-      queryClient.invalidateQueries({ queryKey: ["agent"] });
-    },
-  });
-
-  // Fetch process tree via the agent.processTree endpoint
-  const { data: rawProcessTree = [], isLoading: loadingTree } = useQuery({
-    queryKey: ["agent", "processTree"],
-    queryFn: () => client.trpc.agent.processTree.query(),
-    refetchInterval: 5000,
-  });
-
-  // Also fetch the classic agents list for stats
-  const { data: rawAgents = [] } = useQuery({
-    queryKey: ["agents", "list"],
-    queryFn: () => client.listAgents(),
-    refetchInterval: 5000,
-  });
-
-  const treeEntries: ProcessTreeEntry[] = useMemo(
-    () =>
-      (rawProcessTree as unknown as Record<string, unknown>[]).map(
-        normaliseProcessTreeEntry,
-      ),
-    [rawProcessTree],
-  );
-
-  // Compute stats
-  const agentCount = treeEntries.length;
-  const totalSubProcesses = treeEntries.reduce(
-    (sum, e) => sum + e.subProcesses.length,
-    0,
-  );
-  const totalAddons = treeEntries.reduce(
-    (sum, e) => sum + e.installedAddons.length,
-    0,
-  );
-
-  // Build filter options for logs
-  const agentNames = useMemo(
-    () => treeEntries.filter((e) => !e.isHub).map((e) => e.name),
-    [treeEntries],
-  );
-  const addonNames = useMemo(() => {
-    const set = new Set<string>();
-    for (const entry of treeEntries) {
-      for (const addon of entry.installedAddons) {
-        set.add(addon);
-      }
-    }
-    return [...set].sort();
-  }, [treeEntries]);
-
-  return (
-    <div className="p-6 space-y-6">
-      {/* Header */}
-      <div className="flex items-start justify-between gap-4">
-        <div>
-          <h1 className="text-lg font-semibold text-foreground">
-            Agents &amp; Process Tree
-          </h1>
-          <p className="text-xs text-foreground-subtle mt-0.5">
-            Distributed processing agents, sub-processes, and system logs.
-          </p>
-        </div>
-        <div className="shrink-0">
-          {testWorkerRunning ? (
-            <button
-              type="button"
-              onClick={() => stopTestWorker.mutate()}
-              disabled={stopTestWorker.isPending}
-              className="inline-flex items-center gap-1.5 rounded-lg border border-danger/30 bg-danger/10 text-danger px-3 py-1.5 text-xs font-medium hover:bg-danger/20 transition-colors disabled:opacity-50"
-            >
-              <Square className="h-3.5 w-3.5" />
-              {stopTestWorker.isPending ? "Stopping..." : "Stop Test Agent"}
-            </button>
-          ) : (
-            <button
-              type="button"
-              onClick={() => startTestWorker.mutate()}
-              disabled={startTestWorker.isPending}
-              className="inline-flex items-center gap-1.5 rounded-lg border border-border bg-surface text-foreground-subtle px-3 py-1.5 text-xs font-medium hover:text-foreground hover:bg-primary/5 transition-colors disabled:opacity-50"
-            >
-              <FlaskConical className="h-3.5 w-3.5" />
-              {startTestWorker.isPending ? "Starting..." : "Start Test Agent"}
-            </button>
-          )}
-        </div>
-      </div>
-
-      {/* Overview bar */}
-      <div className="grid grid-cols-1 sm:grid-cols-4 gap-3">
-        <StatCard
-          icon={Bot}
-          label="Agents online"
-          value={agentCount}
-          color="bg-green-500/10 text-green-400"
-        />
-        <StatCard
-          icon={Cpu}
-          label="Sub-processes"
-          value={totalSubProcesses}
-          color="bg-blue-500/10 text-blue-400"
-        />
-        <StatCard
-          icon={ListTodo}
-          label="Installed addons"
-          value={totalAddons}
-          color="bg-purple-500/10 text-purple-400"
-        />
-        <StatCard
-          icon={Bot}
-          label="Capabilities"
-          value={
-            [...new Set(treeEntries.flatMap((e) => e.capabilities))].length
-          }
-          color="bg-cyan-500/10 text-cyan-400"
-        />
-      </div>
-
-      {/* Tabs */}
-      <div className="flex items-center gap-2">
-        <TabButton
-          tab="tree"
-          active={activeTab === "tree"}
-          icon={TreePine}
-          label="Process Tree"
-          onClick={() => setActiveTab("tree")}
-        />
-        <TabButton
-          tab="logs"
-          active={activeTab === "logs"}
-          icon={ScrollText}
-          label="Logs"
-          onClick={() => setActiveTab("logs")}
-        />
-      </div>
-
-      {/* Tab content */}
-      {activeTab === "tree" && (
-        <>
-          {agentCount === 0 && !loadingTree && (
-            <div className="flex flex-col items-center justify-center rounded-xl border border-border bg-surface py-12 text-foreground-subtle">
-              <WifiOff className="h-8 w-8 mb-2 opacity-40" />
-              <div className="text-sm">No agents connected</div>
-              <div className="text-xs mt-1 opacity-70">
-                Run{" "}
-                <code className="font-mono bg-border px-1 rounded">
-                  camstack --agent --hub wss://&lt;host&gt;:4443
-                </code>{" "}
-                to connect one.
-              </div>
-            </div>
-          )}
-          <ProcessTree
-            entries={treeEntries}
-            isLoading={loadingTree}
-            selectedAgentName={selectedAgentName}
-            onSelectAgent={(name) => {
-              setSelectedAgentName(name);
-              setActiveTab("logs");
-            }}
-          />
-        </>
-      )}
-
-      {activeTab === "logs" && (
-        <>
-          {selectedAgentName && (
-            <div className="flex items-center gap-2 text-xs">
-              <span className="text-foreground-subtle">Filtered to agent:</span>
-              <span className="font-semibold text-foreground">
-                {selectedAgentName}
-              </span>
-              <button
-                type="button"
-                onClick={() => setSelectedAgentName(null)}
-                className="inline-flex items-center gap-1 rounded-lg border border-border bg-surface px-2 py-1 text-xs text-foreground-subtle hover:text-foreground hover:bg-primary/5 transition-colors"
-              >
-                <X className="h-3 w-3" />
-                Clear selection
-              </button>
-            </div>
-          )}
-          <AgentLogs
-            agentNames={agentNames}
-            addonNames={addonNames}
-            preselectedAgent={selectedAgentName ?? undefined}
-          />
-        </>
-      )}
-    </div>
-  );
-}

package/src/pages/system/Logs.tsx

@@ -1,131 +0,0 @@
-import { useState, useEffect, useRef, useMemo } from 'react'
-import { useQuery } from '@tanstack/react-query'
-import { Pause, Play } from 'lucide-react'
-import { useBackendClient } from '../../hooks/useBackendClient'
-
-type LogLevel = 'all' | 'debug' | 'info' | 'warn' | 'error'
-
-const LEVEL_STYLES: Record<string, { badge: string; text: string }> = {
-  debug: { badge: 'bg-foreground-subtle/10 text-foreground-subtle', text: 'text-foreground-subtle' },
-  info:  { badge: 'bg-info/10 text-info', text: 'text-info' },
-  warn:  { badge: 'bg-warning/10 text-warning', text: 'text-warning' },
-  error: { badge: 'bg-danger/10 text-danger', text: 'text-danger' },
-}
-
-export function LogsPage() {
-  const client = useBackendClient()
-  const [levelFilter, setLevelFilter] = useState<LogLevel>('all')
-  const [paused, setPaused] = useState(false)
-  const topRef = useRef<HTMLDivElement>(null)
-
-  const { data: logsData, isLoading, isError } = useQuery({
-    queryKey: ['logs', levelFilter],
-    queryFn: () =>
-      client.getLogs(
-        levelFilter !== 'all'
-          ? { level: levelFilter as 'debug' | 'info' | 'warn' | 'error', limit: 500 }
-          : { limit: 500 },
-      ),
-    refetchInterval: paused ? false : 3000,
-  })
-
-  const rawLogs = (logsData ?? []) as unknown as Array<Record<string, unknown>>
-
-  // Reverse so newest logs appear at the top
-  const logs = useMemo(() => [...rawLogs].reverse(), [rawLogs])
-
-  useEffect(() => {
-    if (!paused) {
-      topRef.current?.scrollIntoView({ behavior: 'smooth' })
-    }
-  }, [logs, paused])
-
-  function formatTs(ts: unknown): string {
-    if (!ts) return '—'
-    const d = new Date(typeof ts === 'number' ? ts : String(ts))
-    return d.toLocaleTimeString('en-GB', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit', fractionalSecondDigits: 3 })
-  }
-
-  return (
-    <div className="p-6 space-y-4">
-      <div className="flex items-center justify-between">
-        <h1 className="text-lg font-semibold text-foreground">Logs</h1>
-        <div className="flex items-center gap-2">
-          <select
-            value={levelFilter}
-            onChange={(e) => setLevelFilter(e.target.value as LogLevel)}
-            className="rounded-lg border border-border bg-surface text-xs text-foreground px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-primary"
-          >
-            <option value="all">All levels</option>
-            <option value="debug">Debug</option>
-            <option value="info">Info</option>
-            <option value="warn">Warn</option>
-            <option value="error">Error</option>
-          </select>
-          <button
-            onClick={() => setPaused((p) => !p)}
-            className={`inline-flex items-center gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs font-medium transition-colors ${
-              paused
-                ? 'border-primary/30 bg-primary/10 text-primary hover:bg-primary/20'
-                : 'border-border bg-surface text-foreground-subtle hover:text-foreground'
-            }`}
-          >
-            {paused ? <Play className="h-3.5 w-3.5" /> : <Pause className="h-3.5 w-3.5" />}
-            {paused ? 'Resume' : 'Pause'}
-          </button>
-        </div>
-      </div>
-
-      {isLoading && (
-        <div className="text-xs text-foreground-subtle animate-pulse">Loading...</div>
-      )}
-
-      {isError && (
-        <div className="text-xs text-danger">Failed to load</div>
-      )}
-
-      {!isLoading && !isError && logs.length === 0 && (
-        <div className="text-xs text-foreground-subtle">No data</div>
-      )}
-
-      {logs.length > 0 && (
-        <div className="rounded-lg border border-border bg-surface overflow-hidden">
-          <div className="max-h-[calc(100vh-220px)] overflow-y-auto">
-            <div ref={topRef} />
-            <table className="w-full text-xs">
-              <thead className="sticky top-0">
-                <tr>
-                  <th className="text-left px-3 py-2 text-foreground-subtle font-medium bg-surface border-b border-border w-36">Time</th>
-                  <th className="text-left px-3 py-2 text-foreground-subtle font-medium bg-surface border-b border-border w-16">Level</th>
-                  <th className="text-left px-3 py-2 text-foreground-subtle font-medium bg-surface border-b border-border">Message</th>
-                </tr>
-              </thead>
-              <tbody>
-                {logs.map((entry, i) => {
-                  const level = String(entry.level ?? 'info').toLowerCase()
-                  const style = LEVEL_STYLES[level] ?? LEVEL_STYLES['info']!
-                  const message = String(entry.message ?? entry.msg ?? entry.text ?? '')
-                  return (
-                    <tr key={i} className="hover:bg-primary/5">
-                      <td className="px-3 py-1.5 text-foreground-subtle border-b border-border font-mono whitespace-nowrap">
-                        {formatTs(entry.timestamp ?? entry.ts ?? entry.time)}
-                      </td>
-                      <td className="px-3 py-1.5 border-b border-border">
-                        <span className={`inline-flex rounded-full px-2 py-0.5 text-[10px] font-medium uppercase ${style.badge}`}>
-                          {level}
-                        </span>
-                      </td>
-                      <td className={`px-3 py-1.5 border-b border-border font-mono ${style.text} break-all`}>
-                        {message}
-                      </td>
-                    </tr>
-                  )
-                })}
-              </tbody>
-            </table>
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}

package/src/pages/system/Models.tsx

@@ -1,102 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-import { Info, Package } from 'lucide-react'
-import { useBackendClient } from '../../hooks/useBackendClient'
-
-// ---------------------------------------------------------------------------
-// Types
-// ---------------------------------------------------------------------------
-
-interface AddonInfo {
-  id: string
-  name?: string
-  description?: string
-  enabled?: boolean
-  [key: string]: unknown
-}
-
-// ---------------------------------------------------------------------------
-// Main page
-// ---------------------------------------------------------------------------
-
-export function ModelsPage() {
-  const client = useBackendClient()
-
-  const { data: addons = [], isLoading } = useQuery<AddonInfo[]>({
-    queryKey: ['models', 'bridge-addons'],
-    queryFn: async () => {
-      const result = await client.bridgeListAddons()
-      return (result as AddonInfo[]) ?? []
-    },
-  })
-
-  const visionAddons = addons.filter(
-    (a) => a.id?.includes('vision') || a.id?.includes('detection') || a.id?.includes('model'),
-  )
-
-  return (
-    <div className="p-6 space-y-6 max-w-5xl mx-auto">
-      {/* Header */}
-      <div className="flex items-start justify-between">
-        <div>
-          <h1 className="text-lg font-bold text-foreground">Models</h1>
-          <p className="text-xs text-foreground-subtle mt-0.5">
-            ML model management for detection and recognition.
-          </p>
-        </div>
-      </div>
-
-      {/* Info banner */}
-      <div className="rounded-lg border border-info/30 bg-info/5 px-4 py-3 flex items-start gap-3">
-        <Info className="h-4 w-4 text-info shrink-0 mt-0.5" />
-        <div className="text-xs text-foreground leading-relaxed">
-          <p className="font-medium mb-1">Model management has moved to addon settings</p>
-          <p className="text-foreground-subtle">
-            ML models are now managed through individual vision addons. Go to{' '}
-            <span className="font-medium text-foreground">System &rarr; Addons</span> and configure the
-            vision/detection addon to download and manage models.
-          </p>
-        </div>
-      </div>
-
-      {/* Related addons list */}
-      <div className="rounded-lg border border-border overflow-hidden">
-        <div className="px-4 py-2.5 border-b border-border bg-surface/40 flex items-center">
-          <h2 className="text-xs font-semibold text-foreground uppercase tracking-wide">Related Addons</h2>
-        </div>
-
-        {isLoading ? (
-          <div className="px-4 py-8 text-center text-xs text-foreground-subtle">Loading addons...</div>
-        ) : visionAddons.length === 0 ? (
-          <div className="px-4 py-8 text-center text-xs text-foreground-subtle">
-            {addons.length === 0
-              ? 'No addons registered. Install a vision addon to enable model management.'
-              : 'No vision/detection addons found. Install one to manage ML models.'}
-          </div>
-        ) : (
-          <div className="divide-y divide-border/50">
-            {visionAddons.map((addon) => (
-              <div key={addon.id} className="px-4 py-3 flex items-center gap-3 hover:bg-surface/30 transition-colors">
-                <Package className="h-4 w-4 text-foreground-subtle shrink-0" />
-                <div className="flex-1 min-w-0">
-                  <div className="text-xs font-medium text-foreground">{addon.name ?? addon.id}</div>
-                  {addon.description && (
-                    <div className="text-[10px] text-foreground-subtle mt-0.5">{String(addon.description)}</div>
-                  )}
-                </div>
-                <span
-                  className={`text-[10px] rounded px-1.5 py-0.5 font-medium ${
-                    addon.enabled
-                      ? 'bg-success/10 text-success border border-success/30'
-                      : 'bg-border/40 text-foreground-subtle'
-                  }`}
-                >
-                  {addon.enabled ? 'Enabled' : 'Disabled'}
-                </span>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}