ltcai 7.9.0 → 8.1.0

package/frontend/src/components/primitives.tsx

@@ -1,392 +0,0 @@
-import * as React from "react";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { AlertCircle, CheckCircle2, Loader2, LockKeyhole, Sparkles } from "lucide-react";
-import type { 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 { useAppStore } from "@/store/appStore";
-import { cn, asArray, fmtNumber, shortId, titleize } from "@/lib/utils";
-
-export function SourceBadge({ result }: { result?: Pick<ApiResult, "source" | "ok" | "status"> }) {
-  const mode = useAppStore((state) => state.mode);
-  if (!result) return <Badge variant="muted">not loaded</Badge>;
-  if (result.source === "live" && result.ok) return <Badge variant="success">{mode === "basic" ? "ready" : "connected"}</Badge>;
-  return <Badge variant="warning">{mode === "basic" ? "needs setup" : "unavailable"}</Badge>;
-}
-
-export function EmptyState({ title = "Unavailable", detail }: { title?: string; detail?: React.ReactNode }) {
-  return (
-    <div className="flex min-h-36 flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border bg-muted/24 p-6 text-center text-sm text-muted-foreground">
-      <div className="grid h-10 w-10 place-items-center rounded-md border border-border bg-card">
-        <Sparkles className="h-5 w-5 text-primary" />
-      </div>
-      <div className="text-base font-semibold text-foreground">{title}</div>
-      {detail ? <div className="max-w-md leading-6">{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;
-}) {
-  const mode = useAppStore((state) => state.mode);
-  return (
-    <Card className={cn("overflow-hidden", 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={mode === "basic" ? "This area needs setup or is not available yet." : result?.error || "This capability is not reporting right now."} />
-        )}
-      </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-lg border border-border bg-background/55 p-4">
-          <div className="text-xs uppercase text-muted-foreground">{stat.label}</div>
-          <div className="mt-2 text-2xl font-semibold leading-tight">{typeof stat.value === "number" ? fmtNumber(stat.value) : String(stat.value ?? "-")}</div>
-          {stat.hint ? <div className="mt-2 text-xs leading-5 text-muted-foreground">{stat.hint}</div> : null}
-        </div>
-      ))}
-    </div>
-  );
-}
-
-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);
-}
-
-const BASIC_HIDDEN_KEY = /(^id$|_id$|token|secret|passphrase|fingerprint|public_key|private_key|dsn|schema|endpoint|base_url|localhost|127\.0\.0\.1|stack|trace|raw|runtime|engine|module|port|host|api|internal)/i;
-
-function hideInBasic(key: string) {
-  return BASIC_HIDDEN_KEY.test(key);
-}
-
-function humanText(value: unknown) {
-  const text = scalarText(value);
-  if (text === "-") return text;
-  if (text.includes("/") || text.includes("@") || /\.[a-z0-9]{2,5}$/i.test(text)) return text;
-  return titleize(text.replace(/^agent:/i, "").replace(/^tool:/i, ""));
-}
-
-function firstRecordList(value: Record<string, unknown>) {
-  const preferred = [
-    "documents", "sources", "items", "agents", "workflows", "runs", "events",
-    "permissions", "models", "peers", "invitations", "roles", "policies",
-    "hooks", "tools", "templates", "plugins", "recent_events",
-  ];
-  for (const key of preferred) {
-    const rows = asArray<Record<string, unknown>>(value[key]);
-    if (rows.length) return rows;
-  }
-  return [];
-}
-
-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 }) {
-  const mode = useAppStore((state) => state.mode);
-  const rows = Object.entries(data || {})
-    .filter(([key]) => mode !== "basic" || !hideInBasic(key))
-    .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="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;
-}) {
-  const mode = useAppStore((state) => state.mode);
-  if (mode === "basic") return <FriendlySummary value={value} titleKey={titleKey} metaKey={metaKey} limit={limit} />;
-  if (Array.isArray(value)) {
-    if (!value.length) return <EmptyState title="Nothing here yet" detail="New items will appear here when Lattice has something to show." />;
-    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 FriendlySummary({
-  value,
-  titleKey = "title",
-  metaKey = "status",
-  limit = 6,
-}: {
-  value: unknown;
-  titleKey?: string;
-  metaKey?: string;
-  limit?: number;
-}) {
-  if (Array.isArray(value)) {
-    if (!value.length) return <EmptyState title="Nothing here yet" detail="New items will appear here when Lattice has something to show." />;
-    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/55 p-3">
-        {value.slice(0, limit).map((item, index) => <Badge key={`${String(item)}-${index}`} variant="muted">{humanText(item)}</Badge>)}
-        {value.length > limit ? <Badge variant="muted">+{value.length - limit}</Badge> : null}
-      </div>
-    );
-  }
-  if (isRecord(value)) {
-    const list = firstRecordList(value);
-    if (list.length) return <EntityList items={list} titleKey={titleKey} metaKey={metaKey} limit={limit} />;
-    const friendly = Object.fromEntries(
-      Object.entries(value)
-        .filter(([key]) => !hideInBasic(key))
-        .map(([key, item]) => [key, Array.isArray(item) ? `${fmtNumber(item.length)} items` : isRecord(item) ? "available" : item]),
-    );
-    return <KeyValueList data={friendly} limit={limit} />;
-  }
-  return (
-    <div className="rounded-md border border-border bg-background/55 p-3 text-sm">
-      {humanText(value)}
-    </div>
-  );
-}
-
-export function OperationResult({
-  result,
-  successLabel = "Request completed",
-}: {
-  result?: ApiResult<unknown> | null;
-  successLabel?: string;
-}) {
-  const mode = useAppStore((state) => state.mode);
-  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>
-      {mode === "basic" ? <FriendlySummary value={result.data} /> : <StructuredView value={result.data} />}
-    </div>
-  );
-}
-
-export function EntityList({
-  items,
-  titleKey = "title",
-  metaKey = "type",
-  limit = 8,
-}: {
-  items: unknown;
-  titleKey?: string;
-  metaKey?: string;
-  limit?: number;
-}) {
-  const mode = useAppStore((state) => state.mode);
-  const rows = asArray<Record<string, unknown>>(items).slice(0, limit);
-  if (!rows.length) return <EmptyState title="Nothing here yet" detail="New items will appear here when Lattice has something to show." />;
-  return (
-    <div className="grid gap-2">
-      {rows.map((item, index) => (
-        <div key={String(item.id || item.name || index)} className="rounded-lg border border-border bg-background/55 p-3">
-          <div className="flex flex-wrap items-center justify-between gap-2">
-            <div className="font-medium">{mode === "basic" ? humanText(item[titleKey] || item.name || item.label || `Item ${index + 1}`) : String(item[titleKey] || item.name || item.id || `Record ${index + 1}`)}</div>
-            <Badge variant="muted">{mode === "basic" ? humanText(item[metaKey] || item.status || item.state || "ready") : String(item[metaKey] || item.status || item.state || "record")}</Badge>
-          </div>
-          {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}
-          {mode !== "basic" && item.id && item[titleKey] !== item.id ? (
-            <div className="mt-1 text-xs text-muted-foreground">{shortId(item.id, 48)}</div>
-          ) : null}
-        </div>
-      ))}
-    </div>
-  );
-}
-
-export function ModeGate({
-  title = "Advanced controls",
-  detail = "Switch modes when you want diagnostics or administrative controls. Basic mode keeps the product focused on everyday use.",
-  target = "advanced",
-}: {
-  title?: string;
-  detail?: string;
-  target?: "advanced" | "admin";
-}) {
-  const setMode = useAppStore((state) => state.setMode);
-  return (
-    <Card>
-      <CardContent className="flex flex-col items-start gap-3 p-6">
-        <div className="grid h-10 w-10 place-items-center rounded-md border border-border bg-background/70">
-          <LockKeyhole className="h-5 w-5 text-primary" />
-        </div>
-        <div>
-          <div className="text-lg font-semibold">{title}</div>
-          <p className="mt-1 max-w-2xl text-sm leading-6 text-muted-foreground">{detail}</p>
-        </div>
-        <Button onClick={() => setMode(target)}>{target === "admin" ? "Switch to Admin Console" : "Switch to Advanced"}</Button>
-      </CardContent>
-    </Card>
-  );
-}
-
-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="inline-flex max-w-full flex-wrap gap-1 rounded-lg border border-border bg-muted/28 p-1">
-      {tabs.map((tab) => (
-        <button
-          key={tab.id}
-          onClick={() => onChange(tab.id)}
-          className={cn(
-            "h-9 rounded-md px-3.5 text-sm font-semibold transition",
-            value === tab.id ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:bg-card/60 hover:text-foreground",
-          )}
-        >
-          {tab.label}
-        </button>
-      ))}
-    </div>
-  );
-}

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

@@ -1,27 +0,0 @@
-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/70 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 max-w-full items-center rounded-md border px-2 py-0.5 text-xs font-semibold leading-none",
-        variants[variant],
-        className,
-      )}
-      {...props}
-    />
-  );
-}

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

@@ -1,37 +0,0 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "@/lib/utils";
-
-const buttonVariants = cva(
-  "inline-flex h-10 max-w-full items-center justify-center gap-2 rounded-md px-3.5 text-sm font-semibold leading-none 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 shadow-[0_10px_30px_hsl(var(--primary)/0.16)] hover:bg-primary/92",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/82",
-        ghost: "text-foreground hover:bg-muted",
-        outline: "border border-border bg-card/70 hover:bg-muted/88",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-      },
-      size: {
-        sm: "h-8 px-2.5 text-xs",
-        md: "h-10 px-3.5",
-        icon: "h-10 w-10 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

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

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

@@ -1,16 +0,0 @@
-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-10 w-full rounded-md border border-input bg-background/70 px-3 text-sm outline-none transition placeholder:text-muted-foreground focus:border-ring focus:ring-2 focus:ring-ring/35 disabled:cursor-not-allowed disabled:opacity-50",
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
-Input.displayName = "Input";

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

@@ -1,16 +0,0 @@
-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-28 w-full resize-y rounded-md border border-input bg-background/70 px-3 py-3 text-sm leading-6 outline-none transition placeholder:text-muted-foreground focus:border-ring focus:ring-2 focus:ring-ring/35 disabled:cursor-not-allowed disabled:opacity-50",
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
-Textarea.displayName = "Textarea";