ltcai 4.0.1 → 4.1.0

package/frontend/src/components/primitives.tsx

@@ -0,0 +1,204 @@
+import * as React from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { AlertCircle, CheckCircle2, Loader2 } from "lucide-react";
+import { ApiResult } from "@/api/client";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { cn, asArray, fmtNumber, titleize } from "@/lib/utils";
+
+export function SourceBadge({ result }: { result?: Pick<ApiResult, "source" | "ok" | "status"> }) {
+  if (!result) return <Badge variant="muted">not loaded</Badge>;
+  if (result.source === "live" && result.ok) return <Badge variant="success">live API</Badge>;
+  return <Badge variant="warning">unavailable</Badge>;
+}
+
+export function EmptyState({ title = "Unavailable", detail }: { title?: string; detail?: React.ReactNode }) {
+  return (
+    <div className="flex min-h-28 flex-col items-center justify-center gap-2 rounded-md border border-dashed border-border bg-muted/30 p-5 text-center text-sm text-muted-foreground">
+      <AlertCircle className="h-5 w-5" />
+      <div className="font-medium text-foreground">{title}</div>
+      {detail ? <div>{detail}</div> : null}
+    </div>
+  );
+}
+
+export function DataPanel<T>({
+  title,
+  description,
+  result,
+  children,
+  className,
+}: {
+  title: string;
+  description?: string;
+  result?: ApiResult<T>;
+  children: (data: T) => React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <Card className={className}>
+      <CardHeader className="flex-row items-start justify-between gap-3">
+        <div>
+          <CardTitle>{title}</CardTitle>
+          {description ? <CardDescription>{description}</CardDescription> : null}
+        </div>
+        <SourceBadge result={result} />
+      </CardHeader>
+      <CardContent>
+        {result?.ok ? children(result.data) : <EmptyState detail={result?.error || "The backend did not return this capability."} />}
+      </CardContent>
+    </Card>
+  );
+}
+
+export function LoadingPanel({ title }: { title: string }) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <Loader2 className="h-4 w-4 animate-spin" /> Loading
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export function StatGrid({ stats }: { stats: Array<{ label: string; value: unknown; hint?: string }> }) {
+  return (
+    <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
+      {stats.map((stat) => (
+        <div key={stat.label} className="rounded-md border border-border bg-background p-3">
+          <div className="text-xs uppercase tracking-wide text-muted-foreground">{stat.label}</div>
+          <div className="mt-1 text-2xl font-semibold">{typeof stat.value === "number" ? fmtNumber(stat.value) : String(stat.value ?? "-")}</div>
+          {stat.hint ? <div className="mt-1 text-xs text-muted-foreground">{stat.hint}</div> : null}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function JsonView({ value }: { value: unknown }) {
+  return (
+    <pre className="max-h-80 overflow-auto rounded-md border border-border bg-muted/40 p-3 text-xs leading-relaxed text-muted-foreground">
+      {JSON.stringify(value, null, 2)}
+    </pre>
+  );
+}
+
+export function KeyValueList({ data, limit = 8 }: { data: Record<string, unknown>; limit?: number }) {
+  const rows = Object.entries(data || {}).slice(0, limit);
+  if (!rows.length) return <EmptyState title="No values" />;
+  return (
+    <div className="divide-y divide-border rounded-md border border-border">
+      {rows.map(([key, value]) => (
+        <div key={key} className="grid grid-cols-[minmax(9rem,0.5fr)_1fr] gap-3 p-3 text-sm">
+          <span className="font-medium text-muted-foreground">{titleize(key)}</span>
+          <span className="break-words">{typeof value === "object" ? JSON.stringify(value) : String(value ?? "-")}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function EntityList({
+  items,
+  titleKey = "title",
+  metaKey = "type",
+  limit = 8,
+}: {
+  items: unknown;
+  titleKey?: string;
+  metaKey?: string;
+  limit?: number;
+}) {
+  const rows = asArray<Record<string, unknown>>(items).slice(0, limit);
+  if (!rows.length) return <EmptyState title="No records" detail="The API returned an empty collection." />;
+  return (
+    <div className="grid gap-2">
+      {rows.map((item, index) => (
+        <div key={String(item.id || item.name || index)} className="rounded-md border border-border bg-background p-3">
+          <div className="flex flex-wrap items-center justify-between gap-2">
+            <div className="font-medium">{String(item[titleKey] || item.name || item.id || `Record ${index + 1}`)}</div>
+            <Badge variant="muted">{String(item[metaKey] || item.status || item.state || "record")}</Badge>
+          </div>
+          {item.summary || item.description || item.path ? (
+            <p className="mt-1 text-sm text-muted-foreground">{String(item.summary || item.description || item.path)}</p>
+          ) : null}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function ActionButton({
+  label,
+  successLabel = "Done",
+  action,
+  invalidate,
+  variant = "outline",
+  disabled,
+}: {
+  label: string;
+  successLabel?: string;
+  action: () => Promise<ApiResult<unknown>>;
+  invalidate?: string[];
+  variant?: React.ComponentProps<typeof Button>["variant"];
+  disabled?: boolean;
+}) {
+  const qc = useQueryClient();
+  const [result, setResult] = React.useState<string | null>(null);
+  const mut = useMutation({
+    mutationFn: action,
+    onSuccess: async (res) => {
+      setResult(res.ok ? successLabel : res.error || "Unavailable");
+      if (invalidate) {
+        await Promise.all(invalidate.map((key) => qc.invalidateQueries({ queryKey: [key] })));
+      }
+    },
+  });
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <Button variant={variant} disabled={disabled || mut.isPending} onClick={() => mut.mutate()}>
+        {mut.isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
+        {label}
+      </Button>
+      {result ? (
+        <span className={cn("inline-flex items-center gap-1 text-xs", result === successLabel ? "text-emerald-300" : "text-amber-300")}>
+          {result === successLabel ? <CheckCircle2 className="h-3.5 w-3.5" /> : <AlertCircle className="h-3.5 w-3.5" />}
+          {result}
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
+export function Tabs({
+  tabs,
+  value,
+  onChange,
+}: {
+  tabs: Array<{ id: string; label: string }>;
+  value: string;
+  onChange: (id: string) => void;
+}) {
+  return (
+    <div className="flex flex-wrap gap-1 rounded-md border border-border bg-muted/30 p-1">
+      {tabs.map((tab) => (
+        <button
+          key={tab.id}
+          onClick={() => onChange(tab.id)}
+          className={cn(
+            "h-8 rounded px-3 text-sm font-medium transition",
+            value === tab.id ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground",
+          )}
+        >
+          {tab.label}
+        </button>
+      ))}
+    </div>
+  );
+}

package/frontend/src/components/ui/badge.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {
+  variant?: "default" | "success" | "warning" | "muted" | "danger";
+};
+
+const variants = {
+  default: "border-primary/25 bg-primary/12 text-primary",
+  success: "border-emerald-500/25 bg-emerald-500/12 text-emerald-300",
+  warning: "border-amber-500/25 bg-amber-500/12 text-amber-300",
+  muted: "border-border bg-muted text-muted-foreground",
+  danger: "border-destructive/30 bg-destructive/12 text-destructive",
+};
+
+export function Badge({ className, variant = "default", ...props }: BadgeProps) {
+  return (
+    <span
+      className={cn(
+        "inline-flex min-h-6 items-center rounded-md border px-2 py-0.5 text-xs font-medium",
+        variants[variant],
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/frontend/src/components/ui/button.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex h-9 items-center justify-center gap-2 rounded-md px-3 text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-45",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-muted text-foreground",
+        outline: "border border-border bg-background hover:bg-muted",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+      },
+      size: {
+        sm: "h-8 px-2.5 text-xs",
+        md: "h-9 px-3",
+        icon: "h-9 w-9 px-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+    },
+  },
+);
+
+export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
+  VariantProps<typeof buttonVariants>;
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => (
+    <button ref={ref} className={cn(buttonVariants({ variant, size, className }))} {...props} />
+  ),
+);
+Button.displayName = "Button";

package/frontend/src/components/ui/card.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <section className={cn("rounded-lg border border-border bg-card text-card-foreground shadow-sm", className)} {...props} />;
+}
+
+export function CardHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex flex-col gap-1.5 p-4", className)} {...props} />;
+}
+
+export function CardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
+  return <h2 className={cn("text-sm font-semibold tracking-normal", className)} {...props} />;
+}
+
+export function CardDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn("text-sm text-muted-foreground", className)} {...props} />;
+}
+
+export function CardContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("p-4 pt-0", className)} {...props} />;
+}

package/frontend/src/components/ui/input.tsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
+  ({ className, ...props }, ref) => (
+    <input
+      ref={ref}
+      className={cn(
+        "h-9 w-full rounded-md border border-input bg-background px-3 text-sm outline-none transition placeholder:text-muted-foreground focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Input.displayName = "Input";

package/frontend/src/components/ui/textarea.tsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, React.TextareaHTMLAttributes<HTMLTextAreaElement>>(
+  ({ className, ...props }, ref) => (
+    <textarea
+      ref={ref}
+      className={cn(
+        "min-h-24 w-full resize-y rounded-md border border-input bg-background px-3 py-2 text-sm outline-none transition placeholder:text-muted-foreground focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Textarea.displayName = "Textarea";

package/frontend/src/lib/utils.ts

@@ -0,0 +1,33 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function fmtNumber(value: unknown, fallback = "0") {
+  const n = Number(value);
+  if (!Number.isFinite(n)) return fallback;
+  return new Intl.NumberFormat().format(n);
+}
+
+export function pct(value: unknown) {
+  const n = Number(value);
+  if (!Number.isFinite(n)) return "0%";
+  return `${Math.round(n * 100)}%`;
+}
+
+export function shortId(value: unknown, length = 10) {
+  const text = String(value || "");
+  return text.length > length ? `${text.slice(0, length)}...` : text;
+}
+
+export function asArray<T = Record<string, unknown>>(value: unknown): T[] {
+  return Array.isArray(value) ? (value as T[]) : [];
+}
+
+export function titleize(value: unknown) {
+  return String(value || "")
+    .replace(/[_-]+/g, " ")
+    .replace(/\b\w/g, (m) => m.toUpperCase());
+}

package/frontend/src/main.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import App from "./App";
+import "./styles.css";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 15_000,
+      refetchOnWindowFocus: false,
+      retry: 1,
+    },
+  },
+});
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
+  </React.StrictMode>,
+);

package/frontend/src/pages/Act.tsx

@@ -0,0 +1,245 @@
+import * as React from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import ReactFlow, { Background, Controls, Edge, Node } from "reactflow";
+import { Bot, GitBranch, PauseCircle, Play, Workflow } from "lucide-react";
+import { latticeApi } from "@/api/client";
+import { ActionButton, DataPanel, EntityList, JsonView, Tabs } from "@/components/primitives";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { asArray, shortId } from "@/lib/utils";
+
+type ActTab = "agents" | "runs" | "workflows" | "hooks" | "tools";
+
+const tabs: Array<{ id: ActTab; label: string }> = [
+  { id: "agents", label: "Agents" },
+  { id: "runs", label: "Runs" },
+  { id: "workflows", label: "Workflows" },
+  { id: "hooks", label: "Hooks" },
+  { id: "tools", label: "Tools" },
+];
+
+export function ActPage({ initialTab }: { initialTab?: string }) {
+  const [tab, setTab] = React.useState<ActTab>((initialTab as ActTab) || "agents");
+  React.useEffect(() => {
+    if (tabs.some((item) => item.id === initialTab)) setTab(initialTab as ActTab);
+  }, [initialTab]);
+  return (
+    <div className="space-y-4">
+      <header>
+        <div className="flex items-center gap-2 text-sm text-primary"><Workflow className="h-4 w-4" /> Durable execution</div>
+        <h1 className="mt-2 text-3xl font-semibold">Act</h1>
+        <p className="mt-2 max-w-3xl text-sm text-muted-foreground">Agents, workflows, approvals, hooks, and governed tools. Pauses and unavailable states are surfaced honestly.</p>
+      </header>
+      <Tabs tabs={tabs} value={tab} onChange={(id) => setTab(id as ActTab)} />
+      {tab === "agents" ? <AgentsPanel /> : null}
+      {tab === "runs" ? <RunsPanel /> : null}
+      {tab === "workflows" ? <WorkflowsPanel /> : null}
+      {tab === "hooks" ? <HooksPanel /> : null}
+      {tab === "tools" ? <ToolsPanel /> : null}
+    </div>
+  );
+}
+
+function AgentsPanel() {
+  const qc = useQueryClient();
+  const [goal, setGoal] = React.useState("");
+  const runtime = useQuery({ queryKey: ["agentRuntime"], queryFn: latticeApi.agentRuntime });
+  const registry = useQuery({ queryKey: ["agentRegistry"], queryFn: latticeApi.agentRegistry });
+  const caps = useQuery({ queryKey: ["agentCapabilities"], queryFn: latticeApi.agentCapabilities });
+  const run = useMutation({
+    mutationFn: () => latticeApi.runAgent(goal, ["planner", "executor", "reviewer"]),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["agentRuntime"] }),
+  });
+  const [agentName, setAgentName] = React.useState("");
+  const register = useMutation({
+    mutationFn: () => latticeApi.registerAgent({ name: agentName, type: "custom", capabilities: [] }),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["agentRegistry"] }),
+  });
+  return (
+    <div className="grid gap-4 xl:grid-cols-[0.9fr_1.1fr]">
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2"><Bot className="h-4 w-4" /> Run agent pipeline</CardTitle>
+          <CardDescription>POST `/agents/api/run` creates a durable run; mode is determined by backend model availability.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <Textarea value={goal} onChange={(e) => setGoal(e.target.value)} placeholder="Describe the objective..." />
+          <Button disabled={!goal.trim() || run.isPending} onClick={() => run.mutate()}><Play className="h-4 w-4" /> Run planner/executor/reviewer</Button>
+          {run.data ? <JsonView value={run.data.data || run.data.error} /> : null}
+        </CardContent>
+      </Card>
+      <DataPanel title="Runtime status" result={runtime.data}>
+        {(data) => <JsonView value={data} />}
+      </DataPanel>
+      <DataPanel title="Agent registry" result={registry.data}>
+        {(data) => (
+          <div className="space-y-3">
+            <EntityList items={(data as Record<string, unknown>).agents} titleKey="name" metaKey="type" />
+            <div className="flex gap-2">
+              <Input value={agentName} onChange={(e) => setAgentName(e.target.value)} placeholder="New custom agent name" />
+              <Button disabled={!agentName.trim() || register.isPending} onClick={() => register.mutate()}>Register</Button>
+            </div>
+          </div>
+        )}
+      </DataPanel>
+      <DataPanel title="Agent capabilities" result={caps.data}>
+        {(data) => <JsonView value={data} />}
+      </DataPanel>
+    </div>
+  );
+}
+
+function RunsPanel() {
+  const runtime = useQuery({ queryKey: ["agentRuntime"], queryFn: latticeApi.agentRuntime });
+  const workflows = useQuery({ queryKey: ["workflowRuns"], queryFn: latticeApi.workflowRuns });
+  const pending = useQuery({ queryKey: ["permissions"], queryFn: latticeApi.permissionsPending });
+  const agentRuns = asArray<Record<string, unknown>>((runtime.data?.data as Record<string, unknown>)?.runs);
+  const workflowRuns = asArray<Record<string, unknown>>((workflows.data?.data as Record<string, unknown>)?.runs);
+  return (
+    <div className="grid gap-4 xl:grid-cols-2">
+      <DataPanel title="Agent runs" result={runtime.data}>
+        {() => <RunList runs={agentRuns} kind="agent" />}
+      </DataPanel>
+      <DataPanel title="Workflow runs" result={workflows.data}>
+        {() => <RunList runs={workflowRuns} kind="workflow" />}
+      </DataPanel>
+      <DataPanel title="Approval inbox" result={pending.data} className="xl:col-span-2">
+        {(data) => {
+          const pendingMap = ((data as Record<string, unknown>).pending || {}) as Record<string, unknown>;
+          const rows = Object.entries(pendingMap);
+          return rows.length ? (
+            <div className="grid gap-2">
+              {rows.map(([token, value]) => (
+                <div key={token} className="flex flex-wrap items-center justify-between gap-3 rounded-md border border-border p-3">
+                  <div>
+                    <div className="font-medium">{shortId(token, 16)}</div>
+                    <div className="text-sm text-muted-foreground">{JSON.stringify(value)}</div>
+                  </div>
+                  <div className="flex gap-2">
+                    <ActionButton label="Approve" action={() => latticeApi.approvePermission(token)} invalidate={["permissions"]} />
+                    <ActionButton label="Deny" action={() => latticeApi.denyPermission(token)} invalidate={["permissions"]} variant="destructive" />
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : <EntityList items={[]} />;
+        }}
+      </DataPanel>
+    </div>
+  );
+}
+
+function RunList({ runs, kind }: { runs: Array<Record<string, unknown>>; kind: "agent" | "workflow" }) {
+  if (!runs.length) return <EntityList items={[]} />;
+  return (
+    <div className="grid gap-2">
+      {runs.slice(0, 10).map((run) => {
+        const id = String(run.run_id || run.id);
+        const status = String(run.status || "unknown");
+        return (
+          <div key={id} className="rounded-md border border-border bg-background p-3">
+            <div className="flex flex-wrap items-center justify-between gap-2">
+              <div className="font-medium">{shortId(id, 18)}</div>
+              <Badge variant={status === "succeeded" ? "success" : status === "awaiting_approval" ? "warning" : "muted"}>{status}</Badge>
+            </div>
+            <div className="mt-2 flex flex-wrap gap-2">
+              <ActionButton label="Stop" action={() => kind === "agent" ? latticeApi.stopAgentRun(id) : latticeApi.stopWorkflowRun(id)} />
+              {status === "awaiting_approval" && kind === "workflow" ? (
+                <>
+                  <ActionButton label="Resume approved" action={() => latticeApi.resumeWorkflowRun(id, true)} />
+                  <ActionButton label="Resume denied" action={() => latticeApi.resumeWorkflowRun(id, false)} variant="destructive" />
+                </>
+              ) : null}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function WorkflowsPanel() {
+  const defs = useQuery({ queryKey: ["workflowDefinitions"], queryFn: latticeApi.workflowDefinitions });
+  const triggers = useQuery({ queryKey: ["workflowTriggers"], queryFn: latticeApi.workflowTriggers });
+  const workflows = asArray<Record<string, unknown>>((defs.data?.data as Record<string, unknown>)?.workflows);
+  const nodes: Node[] = workflows.slice(0, 12).map((workflow, index) => ({
+    id: String(workflow.id || workflow.workflow_id || index),
+    position: { x: (index % 4) * 190, y: Math.floor(index / 4) * 120 },
+    data: { label: String(workflow.name || workflow.id || `Workflow ${index + 1}`) },
+  }));
+  const edges: Edge[] = nodes.slice(1).map((node, index) => ({ id: `e-${index}`, source: nodes[index].id, target: node.id }));
+  return (
+    <div className="grid gap-4 xl:grid-cols-[1.2fr_0.8fr]">
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2"><GitBranch className="h-4 w-4" /> Workflow graph</CardTitle>
+          <CardDescription>React Flow view of workflow definitions. Running a workflow calls its backend run endpoint.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="h-[440px] rounded-lg border border-border">
+            <ReactFlow nodes={nodes} edges={edges} fitView>
+              <Background />
+              <Controls />
+            </ReactFlow>
+          </div>
+        </CardContent>
+      </Card>
+      <DataPanel title="Definitions" result={defs.data}>
+        {() => (
+          <div className="space-y-2">
+            {workflows.length ? workflows.map((workflow) => {
+              const id = String(workflow.id || workflow.workflow_id);
+              return (
+                <div key={id} className="rounded-md border border-border p-3">
+                  <div className="font-medium">{String(workflow.name || id)}</div>
+                  <div className="mt-2 flex gap-2">
+                    <ActionButton label="Run" action={() => latticeApi.runWorkflow(id)} invalidate={["workflowRuns"]} />
+                  </div>
+                </div>
+              );
+            }) : <EntityList items={[]} />}
+          </div>
+        )}
+      </DataPanel>
+      <DataPanel title="Trigger configuration" result={triggers.data} className="xl:col-span-2">
+        {(data) => <JsonView value={data} />}
+      </DataPanel>
+    </div>
+  );
+}
+
+function HooksPanel() {
+  const hooks = useQuery({ queryKey: ["hooks"], queryFn: latticeApi.hooks });
+  const runs = useQuery({ queryKey: ["hookRuns"], queryFn: latticeApi.hookRuns });
+  return (
+    <div className="grid gap-4 xl:grid-cols-2">
+      <DataPanel title="Hooks" result={hooks.data}>
+        {(data) => <EntityList items={(data as Record<string, unknown>).hooks} titleKey="name" metaKey="kind" />}
+      </DataPanel>
+      <DataPanel title="Hook run log" result={runs.data}>
+        {(data) => <EntityList items={(data as Record<string, unknown>).runs} titleKey="hook_id" metaKey="status" />}
+      </DataPanel>
+      <Card className="xl:col-span-2">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2"><PauseCircle className="h-4 w-4" /> Manual hook fire</CardTitle>
+          <CardDescription>Uses `/api/hooks/run`; no hook is treated as successful unless the backend records it.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ActionButton label="Run all manual hooks" action={() => latticeApi.hookRun({ event: "manual" })} invalidate={["hookRuns"]} />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function ToolsPanel() {
+  const tools = useQuery({ queryKey: ["toolPermissions"], queryFn: latticeApi.toolPermissions });
+  return (
+    <DataPanel title="Tool governance" result={tools.data}>
+      {(data) => <JsonView value={data} />}
+    </DataPanel>
+  );
+}