ltcai 4.3.0 → 4.3.3

package/frontend/src/api/openapi.ts

@@ -6183,6 +6183,11 @@ export interface components {
         LoadModelRequest: {
             /** Adapter Path */
             adapter_path?: string | null;
+            /**
+             * Allow Download
+             * @default false
+             */
+            allow_download: boolean;
             /** Draft Model Id */
             draft_model_id?: string | null;
             /** Engine */
@@ -6416,6 +6421,11 @@ export interface components {
         };
         /** PrepareModelRequest */
         PrepareModelRequest: {
+            /**
+             * Allow Download
+             * @default false
+             */
+            allow_download: boolean;
             /** Engine */
             engine?: string | null;
             /** Model */

package/frontend/src/components/primitives.tsx

@@ -5,7 +5,7 @@ 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";
+import { cn, asArray, fmtNumber, shortId, titleize } from "@/lib/utils";
 
 export function SourceBadge({ result }: { result?: Pick<ApiResult, "source" | "ok" | "status"> }) {
   if (!result) return <Badge variant="muted">not loaded</Badge>;
@@ -81,12 +81,41 @@ export function StatGrid({ stats }: { stats: Array<{ label: string; value: unkno
   );
 }
 
-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>
-  );
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return Boolean(value && typeof value === "object" && !Array.isArray(value));
+}
+
+function scalarText(value: unknown) {
+  if (value === null || value === undefined || value === "") return "-";
+  if (typeof value === "number") return Number.isFinite(value) ? fmtNumber(value) : "-";
+  if (typeof value === "boolean") return value ? "Enabled" : "Disabled";
+  return String(value);
+}
+
+export function ValuePreview({ value }: { value: unknown }) {
+  if (typeof value === "boolean") {
+    return <Badge variant={value ? "success" : "muted"}>{value ? "enabled" : "disabled"}</Badge>;
+  }
+  if (Array.isArray(value)) {
+    if (!value.length) return <span className="text-muted-foreground">None</span>;
+    const primitive = value.every((item) => item === null || ["string", "number", "boolean"].includes(typeof item));
+    if (primitive) {
+      return (
+        <span className="flex flex-wrap gap-1">
+          {value.slice(0, 5).map((item, index) => <Badge key={`${String(item)}-${index}`} variant="muted">{scalarText(item)}</Badge>)}
+          {value.length > 5 ? <Badge variant="muted">+{value.length - 5}</Badge> : null}
+        </span>
+      );
+    }
+    return <span className="text-muted-foreground">{fmtNumber(value.length)} records</span>;
+  }
+  if (isRecord(value)) {
+    const keys = Object.keys(value);
+    if (!keys.length) return <span className="text-muted-foreground">No fields</span>;
+    return <span className="text-muted-foreground">{keys.slice(0, 4).map(titleize).join(", ")}{keys.length > 4 ? ` +${keys.length - 4}` : ""}</span>;
+  }
+  const text = scalarText(value);
+  return <span className="break-words">{text.length > 96 ? shortId(text, 96) : text}</span>;
 }
 
 export function KeyValueList({ data, limit = 8 }: { data: Record<string, unknown>; limit?: number }) {
@@ -97,13 +126,63 @@ export function KeyValueList({ data, limit = 8 }: { data: Record<string, unknown
       {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>
+          <span className="min-w-0 break-words"><ValuePreview value={value} /></span>
         </div>
       ))}
     </div>
   );
 }
 
+export function StructuredView({
+  value,
+  titleKey = "title",
+  metaKey = "status",
+  limit = 8,
+}: {
+  value: unknown;
+  titleKey?: string;
+  metaKey?: string;
+  limit?: number;
+}) {
+  if (Array.isArray(value)) {
+    if (!value.length) return <EmptyState title="No records" detail="The API returned an empty collection." />;
+    if (value.every((item) => isRecord(item))) {
+      return <EntityList items={value} titleKey={titleKey} metaKey={metaKey} limit={limit} />;
+    }
+    return (
+      <div className="flex flex-wrap gap-1 rounded-md border border-border bg-background p-3">
+        {value.slice(0, limit).map((item, index) => <Badge key={`${String(item)}-${index}`} variant="muted">{scalarText(item)}</Badge>)}
+        {value.length > limit ? <Badge variant="muted">+{value.length - limit}</Badge> : null}
+      </div>
+    );
+  }
+  if (isRecord(value)) return <KeyValueList data={value} limit={limit} />;
+  return (
+    <div className="rounded-md border border-border bg-background p-3 text-sm">
+      <ValuePreview value={value} />
+    </div>
+  );
+}
+
+export function OperationResult({
+  result,
+  successLabel = "Request completed",
+}: {
+  result?: ApiResult<unknown> | null;
+  successLabel?: string;
+}) {
+  if (!result) return null;
+  if (!result.ok) {
+    return <EmptyState title="Request unavailable" detail={result.error || <ValuePreview value={result.data} />} />;
+  }
+  return (
+    <div className="space-y-2 rounded-md border border-border bg-background p-3">
+      <Badge variant="success">{successLabel}</Badge>
+      <StructuredView value={result.data} />
+    </div>
+  );
+}
+
 export function EntityList({
   items,
   titleKey = "title",
@@ -125,8 +204,11 @@ export function EntityList({
             <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>
+          {item.summary || item.description || item.path || (item.id && item[titleKey] !== item.id) ? (
+            <p className="mt-1 text-sm text-muted-foreground">{String(item.summary || item.description || item.path || item.id)}</p>
+          ) : null}
+          {item.id && item[titleKey] !== item.id ? (
+            <div className="mt-1 text-xs text-muted-foreground">{shortId(item.id, 48)}</div>
           ) : null}
         </div>
       ))}

package/frontend/src/pages/Act.tsx

@@ -3,7 +3,7 @@ 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 { ActionButton, DataPanel, EntityList, KeyValueList, OperationResult, StructuredView, 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";
@@ -58,6 +58,11 @@ function AgentsPanel() {
     mutationFn: () => latticeApi.registerAgent({ name: agentName, type: "custom", capabilities: [] }),
     onSuccess: () => qc.invalidateQueries({ queryKey: ["agentRegistry"] }),
   });
+  const runtimeData = (runtime.data?.data || {}) as Record<string, unknown>;
+  const runtimeMeta = (runtimeData.runtime || {}) as Record<string, unknown>;
+  const runtimeReady = Boolean(runtimeMeta.ready);
+  const runtimeReason = String(runtimeMeta.unavailable_reason || "Load an LLM-backed model before running agents.");
+  const canRunAgent = Boolean(goal.trim()) && runtimeReady && !run.isPending;
   return (
     <div className="grid gap-4 xl:grid-cols-[0.9fr_1.1fr]">
       <Card>
@@ -67,12 +72,20 @@ function AgentsPanel() {
         </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}
+          {!runtimeReady ? <Badge variant="warning">{runtimeReason}</Badge> : null}
+          <Button
+            className="w-full"
+            variant={runtimeReady ? "default" : "outline"}
+            disabled={!canRunAgent}
+            onClick={() => run.mutate()}
+          >
+            <Play className="h-4 w-4" /> {runtimeReady ? "Run pipeline" : "Agent execution unavailable"}
+          </Button>
+          {run.data ? <OperationResult result={run.data} successLabel="Agent run request completed" /> : null}
         </CardContent>
       </Card>
       <DataPanel title="Runtime status" result={runtime.data}>
-        {(data) => <JsonView value={data} />}
+        {(data) => <StructuredView value={data} />}
       </DataPanel>
       <DataPanel title="Agent registry" result={registry.data}>
         {(data) => (
@@ -86,7 +99,7 @@ function AgentsPanel() {
         )}
       </DataPanel>
       <DataPanel title="Agent capabilities" result={caps.data}>
-        {(data) => <JsonView value={data} />}
+        {(data) => <StructuredView value={data} />}
       </DataPanel>
     </div>
   );
@@ -116,7 +129,9 @@ function RunsPanel() {
                 <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 className="mt-2">
+                      <KeyValueList data={(value || {}) as Record<string, unknown>} limit={5} />
+                    </div>
                   </div>
                   <div className="flex gap-2">
                     <ActionButton label="Approve" action={() => latticeApi.approvePermission(token)} invalidate={["permissions"]} />
@@ -162,8 +177,26 @@ function RunList({ runs, kind }: { runs: Array<Record<string, unknown>>; kind: "
 }
 
 function WorkflowsPanel() {
+  const qc = useQueryClient();
   const defs = useQuery({ queryKey: ["workflowDefinitions"], queryFn: latticeApi.workflowDefinitions });
   const triggers = useQuery({ queryKey: ["workflowTriggers"], queryFn: latticeApi.workflowTriggers });
+  const [name, setName] = React.useState("Manual workflow");
+  const [importText, setImportText] = React.useState("");
+  const create = useMutation({
+    mutationFn: () => latticeApi.createWorkflow({
+      name: name.trim() || "Manual workflow",
+      nodes: manualWorkflowNodes(),
+      metadata: { created_from: "desktop-act-ui" },
+    }),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["workflowDefinitions"] }),
+  });
+  const importWorkflow = useMutation({
+    mutationFn: () => latticeApi.importWorkflow(JSON.parse(importText) as Record<string, unknown>),
+    onSuccess: () => {
+      setImportText("");
+      qc.invalidateQueries({ queryKey: ["workflowDefinitions"] });
+    },
+  });
   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),
@@ -189,7 +222,17 @@ function WorkflowsPanel() {
       </Card>
       <DataPanel title="Definitions" result={defs.data}>
         {() => (
-          <div className="space-y-2">
+          <div className="space-y-3">
+            <div className="grid gap-2 rounded-md border border-border p-3">
+              <div className="flex flex-wrap gap-2">
+                <Input value={name} onChange={(event) => setName(event.target.value)} placeholder="Workflow name" />
+                <Button disabled={create.isPending} onClick={() => create.mutate()}>Create</Button>
+              </div>
+              <Textarea value={importText} onChange={(event) => setImportText(event.target.value)} placeholder="Paste exported workflow JSON" />
+              <Button variant="outline" disabled={!importText.trim() || importWorkflow.isPending} onClick={() => importWorkflow.mutate()}>Import</Button>
+              {create.data ? <OperationResult result={create.data} successLabel="Workflow created" /> : null}
+              {importWorkflow.data ? <OperationResult result={importWorkflow.data} successLabel="Workflow imported" /> : null}
+            </div>
             {workflows.length ? workflows.map((workflow) => {
               const id = String(workflow.id || workflow.workflow_id);
               return (
@@ -197,6 +240,7 @@ function WorkflowsPanel() {
                   <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"]} />
+                    <ActionButton label="Export" action={() => latticeApi.exportWorkflow(id)} />
                   </div>
                 </div>
               );
@@ -205,12 +249,31 @@ function WorkflowsPanel() {
         )}
       </DataPanel>
       <DataPanel title="Trigger configuration" result={triggers.data} className="xl:col-span-2">
-        {(data) => <JsonView value={data} />}
+        {(data) => <StructuredView value={data} />}
       </DataPanel>
     </div>
   );
 }
 
+function manualWorkflowNodes(): Array<Record<string, unknown>> {
+  return [
+    {
+      id: "trigger",
+      type: "trigger",
+      name: "Manual start",
+      config: { trigger: "manual" },
+      next: "output",
+    },
+    {
+      id: "output",
+      type: "output",
+      name: "Output",
+      config: { value: "Workflow completed" },
+      next: null,
+    },
+  ];
+}
+
 function HooksPanel() {
   const hooks = useQuery({ queryKey: ["hooks"], queryFn: latticeApi.hooks });
   const runs = useQuery({ queryKey: ["hookRuns"], queryFn: latticeApi.hookRuns });
@@ -239,7 +302,7 @@ function ToolsPanel() {
   const tools = useQuery({ queryKey: ["toolPermissions"], queryFn: latticeApi.toolPermissions });
   return (
     <DataPanel title="Tool governance" result={tools.data}>
-      {(data) => <JsonView value={data} />}
+      {(data) => <EntityList items={(data as Record<string, unknown>).permissions || data} titleKey="tool" metaKey="risk" />}
     </DataPanel>
   );
 }

package/frontend/src/pages/Ask.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { ImagePlus, MessageSquare, Send, Trash2 } from "lucide-react";
 import { latticeApi } from "@/api/client";
-import { DataPanel, EmptyState, EntityList, JsonView, SourceBadge } from "@/components/primitives";
+import { DataPanel, EmptyState, EntityList, SourceBadge, StructuredView } 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";
@@ -193,7 +193,7 @@ function ContextPreview({ question, trace }: { question: string; trace: unknown
           <CardTitle>Why this context</CardTitle>
           <CardDescription>Trace emitted by `/chat` when the backend includes it.</CardDescription>
         </CardHeader>
-        <CardContent>{trace ? <JsonView value={trace} /> : <EmptyState title="No trace yet" />}</CardContent>
+        <CardContent>{trace ? <StructuredView value={trace} /> : <EmptyState title="No trace yet" />}</CardContent>
       </Card>
     </>
   );