@gmickel/gno 1.28.0 → 1.29.0

package/src/serve/public/components/CollectionEgressCheckPanel.tsx

@@ -0,0 +1,411 @@
+import { Loader2Icon, ScanSearchIcon } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+
+import { apiFetch } from "../hooks/use-api";
+import { Button } from "./ui/button";
+
+type Action =
+  | "clip_write"
+  | "export"
+  | "publish"
+  | "remote_inference"
+  | "retrieve"
+  | "serve";
+type Destination = "lan" | "local_process" | "loopback" | "remote";
+type ContentClass =
+  | "attachment"
+  | "audit_log"
+  | "capsule"
+  | "embedding"
+  | "metadata"
+  | "retrieval_trace"
+  | "snippet"
+  | "source";
+
+interface CheckResult {
+  allowedCollections: string[];
+  mode: "complete" | "denied" | "partial";
+  decision: {
+    allowed: boolean;
+    reason: string;
+  };
+  disclosure: null | {
+    code: "EGRESS_PARTIAL_RESULT";
+    omittedCount: number;
+    omittedCollections: string[];
+  };
+  omittedCollections: Array<{ collection: string; reason: string }>;
+  remediation: null | { message: string };
+}
+
+interface CollectionEgressCheckPanelProps {
+  availableCollections: readonly string[];
+  collection: string;
+  effectivePolicy: "lan" | "local_only" | "remote";
+  source: "config_default" | "explicit";
+}
+
+const selectClass =
+  "h-8 rounded-md border border-border/20 bg-muted/10 px-2 font-mono text-[11px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary";
+
+export function CollectionEgressCheckPanel({
+  availableCollections,
+  collection,
+  effectivePolicy,
+  source,
+}: CollectionEgressCheckPanelProps) {
+  const [action, setAction] = useState<Action>("export");
+  const [destinationZone, setDestinationZone] = useState<Destination>("remote");
+  const [contentClass, setContentClass] =
+    useState<ContentClass>("retrieval_trace");
+  const [authenticated, setAuthenticated] = useState(true);
+  const [authorized, setAuthorized] = useState(true);
+  const [partialResults, setPartialResults] = useState<"deny" | "explicit">(
+    "deny"
+  );
+  const [collectionSearch, setCollectionSearch] = useState("");
+  const [selectedCollections, setSelectedCollections] = useState<string[]>([
+    collection,
+  ]);
+  const [checking, setChecking] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [result, setResult] = useState<CheckResult | null>(null);
+  const collectionOptions = useMemo(
+    () =>
+      [...new Set([collection, ...availableCollections])].sort((left, right) =>
+        left.localeCompare(right)
+      ),
+    [availableCollections, collection]
+  );
+  const visibleCollections = useMemo(() => {
+    const query = collectionSearch.trim().toLowerCase();
+    return query
+      ? collectionOptions.filter((name) => name.toLowerCase().includes(query))
+      : collectionOptions;
+  }, [collectionOptions, collectionSearch]);
+  const partialAvailable = selectedCollections.length > 1;
+
+  useEffect(() => {
+    setSelectedCollections([collection]);
+    setCollectionSearch("");
+    setPartialResults("deny");
+    setResult(null);
+    setError(null);
+  }, [collection]);
+
+  useEffect(() => {
+    if (!partialAvailable && partialResults === "explicit") {
+      setPartialResults("deny");
+    }
+  }, [partialAvailable, partialResults]);
+
+  const toggleCollection = (name: string, checked: boolean): void => {
+    setSelectedCollections((current) => {
+      if (checked) {
+        return current.includes(name) || current.length >= 64
+          ? current
+          : [...current, name];
+      }
+      return current.length === 1
+        ? current
+        : current.filter((candidate) => candidate !== name);
+    });
+    setResult(null);
+  };
+
+  const check = async () => {
+    setChecking(true);
+    setError(null);
+    const response = await apiFetch<CheckResult>("/api/egress/check", {
+      method: "POST",
+      body: JSON.stringify({
+        action,
+        caller: {
+          authenticated,
+          operationAuthorized: authorized,
+        },
+        collections: selectedCollections,
+        contentClass,
+        destinationZone,
+        partialResults:
+          selectedCollections.length > 1 ? partialResults : "deny",
+      }),
+    });
+    setChecking(false);
+    if (response.error || !response.data) {
+      setResult(null);
+      setError(response.error ?? "Policy check failed");
+      return;
+    }
+    setResult(response.data);
+  };
+
+  return (
+    <section
+      aria-labelledby="egress-check-title"
+      className="space-y-3 border-border/15 border-t px-6 py-5"
+    >
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <h3
+            className="flex items-center gap-2 font-medium text-[13px]"
+            id="egress-check-title"
+          >
+            <ScanSearchIcon className="size-3.5 text-secondary/70" />
+            Check a boundary
+          </h3>
+          <p className="mt-1 text-muted-foreground/50 text-xs">
+            Exact, content-free explanation before an action runs.
+          </p>
+        </div>
+        <p className="text-right font-mono text-[10px] text-muted-foreground/50">
+          {effectivePolicy} / {source}
+        </p>
+      </div>
+
+      <div className="grid gap-2 md:grid-cols-3">
+        <label className="space-y-1 text-[10px] text-muted-foreground/60 uppercase">
+          Action
+          <select
+            className={`${selectClass} w-full`}
+            disabled={checking}
+            onChange={(event) => setAction(event.target.value as Action)}
+            value={action}
+          >
+            {[
+              "retrieve",
+              "serve",
+              "publish",
+              "remote_inference",
+              "export",
+              "clip_write",
+            ].map((value) => (
+              <option key={value} value={value}>
+                {value}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label className="space-y-1 text-[10px] text-muted-foreground/60 uppercase">
+          Destination
+          <select
+            className={`${selectClass} w-full`}
+            disabled={checking}
+            onChange={(event) =>
+              setDestinationZone(event.target.value as Destination)
+            }
+            value={destinationZone}
+          >
+            {["local_process", "loopback", "lan", "remote"].map((value) => (
+              <option key={value} value={value}>
+                {value}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label className="space-y-1 text-[10px] text-muted-foreground/60 uppercase">
+          Content class
+          <select
+            className={`${selectClass} w-full`}
+            disabled={checking}
+            onChange={(event) =>
+              setContentClass(event.target.value as ContentClass)
+            }
+            value={contentClass}
+          >
+            {[
+              "source",
+              "snippet",
+              "metadata",
+              "attachment",
+              "embedding",
+              "capsule",
+              "audit_log",
+              "retrieval_trace",
+            ].map((value) => (
+              <option key={value} value={value}>
+                {value}
+              </option>
+            ))}
+          </select>
+        </label>
+      </div>
+
+      <fieldset className="space-y-2 rounded-md border border-border/20 bg-muted/5 p-3">
+        <legend className="px-1 font-mono text-[10px] text-muted-foreground/60 uppercase">
+          Collection scope
+        </legend>
+        <label
+          className="block space-y-1 text-[10px] text-muted-foreground/60 uppercase"
+          htmlFor="egress-collection-search"
+        >
+          Search collections
+          <input
+            className={`${selectClass} block w-full normal-case`}
+            id="egress-collection-search"
+            disabled={checking}
+            onChange={(event) => setCollectionSearch(event.target.value)}
+            placeholder="Filter existing collections"
+            type="search"
+            value={collectionSearch}
+          />
+        </label>
+        <div
+          aria-label="Collections included in the check"
+          className="grid max-h-28 gap-1 overflow-y-auto sm:grid-cols-2"
+          role="group"
+        >
+          {visibleCollections.map((name) => {
+            const checked = selectedCollections.includes(name);
+            return (
+              <label
+                className="flex min-w-0 items-center gap-2 rounded px-1.5 py-1 text-xs hover:bg-muted/20"
+                key={name}
+              >
+                <input
+                  checked={checked}
+                  disabled={
+                    checking || (checked && selectedCollections.length === 1)
+                  }
+                  onChange={(event) =>
+                    toggleCollection(name, event.target.checked)
+                  }
+                  type="checkbox"
+                />
+                <span className="truncate font-mono" title={name}>
+                  {name}
+                </span>
+                {name === collection ? (
+                  <span className="ml-auto text-[9px] text-muted-foreground/45 uppercase">
+                    current
+                  </span>
+                ) : null}
+              </label>
+            );
+          })}
+          {visibleCollections.length === 0 ? (
+            <p className="text-muted-foreground/50 text-xs">
+              No matching collections.
+            </p>
+          ) : null}
+        </div>
+        <p className="text-[10px] text-muted-foreground/50">
+          {selectedCollections.length} selected · maximum 64
+        </p>
+      </fieldset>
+
+      <div className="flex flex-wrap items-center gap-x-5 gap-y-2 text-xs">
+        <label className="flex items-center gap-2">
+          <input
+            checked={authenticated}
+            disabled={checking}
+            onChange={(event) => setAuthenticated(event.target.checked)}
+            type="checkbox"
+          />
+          Authenticated
+        </label>
+        <label className="flex items-center gap-2">
+          <input
+            checked={authorized}
+            disabled={checking}
+            onChange={(event) => setAuthorized(event.target.checked)}
+            type="checkbox"
+          />
+          Operation authorized
+        </label>
+        <label className="flex items-center gap-2">
+          Partial mode
+          <select
+            className={selectClass}
+            disabled={checking || !partialAvailable}
+            onChange={(event) =>
+              setPartialResults(event.target.value as "deny" | "explicit")
+            }
+            value={partialResults}
+          >
+            <option value="deny">deny</option>
+            <option value="explicit">explicit</option>
+          </select>
+        </label>
+        {!partialAvailable ? (
+          <span className="text-[10px] text-muted-foreground/50">
+            Explicit partial results require at least two collections.
+          </span>
+        ) : null}
+        <Button
+          className="ml-auto text-xs"
+          disabled={checking}
+          onClick={() => void check()}
+          size="sm"
+          type="button"
+          variant="outline"
+        >
+          {checking ? <Loader2Icon className="size-3 animate-spin" /> : null}
+          Explain
+        </Button>
+      </div>
+
+      {error ? (
+        <p className="text-destructive text-xs" role="alert">
+          {error}
+        </p>
+      ) : null}
+      {result ? (
+        <output
+          aria-live="polite"
+          className="block rounded-md border border-border/20 bg-muted/10 p-3 text-xs"
+        >
+          <p className="font-mono">
+            {result.mode} · {result.decision.reason}
+          </p>
+          <p className="mt-1 text-muted-foreground/60">
+            Omitted: {result.disclosure?.omittedCount ?? 0}
+          </p>
+          <div className="mt-2 grid gap-2 sm:grid-cols-2">
+            <div>
+              <p className="font-mono text-[10px] text-muted-foreground/50 uppercase">
+                Allowed collections
+              </p>
+              {result.allowedCollections.length > 0 ? (
+                <ul className="mt-1 space-y-0.5 font-mono">
+                  {result.allowedCollections.map((name) => (
+                    <li key={name}>{name}</li>
+                  ))}
+                </ul>
+              ) : (
+                <p className="mt-1 text-muted-foreground/50">None</p>
+              )}
+            </div>
+            <div>
+              <p className="font-mono text-[10px] text-muted-foreground/50 uppercase">
+                Omitted collections
+              </p>
+              {result.omittedCollections.length > 0 ? (
+                <ul className="mt-1 space-y-0.5 font-mono">
+                  {result.omittedCollections.map((item) => (
+                    <li key={item.collection}>
+                      {item.collection} · {item.reason}
+                    </li>
+                  ))}
+                </ul>
+              ) : (
+                <p className="mt-1 text-muted-foreground/50">None</p>
+              )}
+            </div>
+          </div>
+          {result.disclosure ? (
+            <p className="mt-2 font-mono text-[10px] text-muted-foreground/60">
+              {result.disclosure.code}:{" "}
+              {result.disclosure.omittedCollections.join(", ")}
+            </p>
+          ) : null}
+          {result.remediation ? (
+            <p className="mt-1 text-muted-foreground/70">
+              {result.remediation.message}
+            </p>
+          ) : null}
+        </output>
+      ) : null}
+    </section>
+  );
+}

package/src/serve/public/components/CollectionEgressPolicyEditor.tsx

@@ -0,0 +1,78 @@
+import { ShieldCheckIcon } from "lucide-react";
+
+export type CollectionEgressPolicy = "local_only" | "lan" | "remote";
+
+interface CollectionEgressPolicyEditorProps {
+  confirmed: boolean;
+  onConfirmedChange: (confirmed: boolean) => void;
+  onPolicyChange: (policy: CollectionEgressPolicy) => void;
+  policy: CollectionEgressPolicy;
+  relaxed: boolean;
+  revision: number;
+  source: "explicit" | "config_default";
+}
+
+export function CollectionEgressPolicyEditor({
+  confirmed,
+  onConfirmedChange,
+  onPolicyChange,
+  policy,
+  relaxed,
+  revision,
+  source,
+}: CollectionEgressPolicyEditorProps) {
+  return (
+    <section className="grid gap-x-5 gap-y-3 px-6 py-5 lg:grid-cols-[180px_minmax(0,1fr)]">
+      <div className="space-y-1">
+        <div className="flex items-center gap-2">
+          <ShieldCheckIcon className="size-3.5 text-secondary/70" />
+          <h3 className="font-medium text-[13px]">Data boundary</h3>
+        </div>
+        <p className="text-muted-foreground/50 text-xs leading-relaxed">
+          Controls where source and derived content may travel.
+        </p>
+      </div>
+      <div className="space-y-3">
+        <label
+          className="block font-mono text-[10px] text-muted-foreground/60 uppercase tracking-[0.1em]"
+          htmlFor="collection-egress-policy"
+        >
+          Collection policy
+        </label>
+        <select
+          className="h-9 w-full rounded-md border border-border/20 bg-muted/10 px-3 font-mono text-xs focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary"
+          id="collection-egress-policy"
+          onChange={(event) =>
+            onPolicyChange(event.target.value as CollectionEgressPolicy)
+          }
+          value={policy}
+        >
+          <option value="local_only">Local only</option>
+          <option value="lan">Authenticated LAN</option>
+          <option value="remote">Authenticated remote</option>
+        </select>
+        <p className="text-muted-foreground/45 text-xs">
+          Source: <span className="font-mono">{source}</span> · revision{" "}
+          <span className="font-mono">{revision}</span>
+        </p>
+        {relaxed ? (
+          <div className="rounded-md border border-secondary/25 bg-secondary/6 p-3">
+            <label className="flex cursor-pointer items-start gap-2.5 text-xs">
+              <input
+                checked={confirmed}
+                className="mt-0.5 size-4 accent-[var(--secondary)]"
+                onChange={(event) => onConfirmedChange(event.target.checked)}
+                type="checkbox"
+              />
+              <span>
+                I confirm this expands where collection content may travel. The
+                confirmation applies only to revision {revision} and target{" "}
+                {policy}.
+              </span>
+            </label>
+          </div>
+        ) : null}
+      </div>
+    </section>
+  );
+}

package/src/serve/public/components/CollectionModelDialog.tsx

@@ -8,6 +8,12 @@ import {
 import { useEffect, useMemo, useState } from "react";
 
 import { apiFetch } from "../hooks/use-api";
+import { CollectionEgressCheckPanel } from "./CollectionEgressCheckPanel";
+import {
+  CollectionEgressPolicyEditor,
+  type CollectionEgressPolicy,
+} from "./CollectionEgressPolicyEditor";
+import { EgressAuditPanel } from "./EgressAuditPanel";
 import { Button } from "./ui/button";
 import {
   Dialog,
@@ -50,6 +56,15 @@ export interface CollectionModelDetails {
   name: string;
   path: string;
   pattern?: string;
+  egressPolicy?: {
+    schemaVersion: "1.0";
+    collection: string;
+    configuredPolicy: "local_only" | "lan" | "remote" | null;
+    effectivePolicy: "local_only" | "lan" | "remote";
+    source: "explicit" | "config_default";
+    revision: number;
+    version: string;
+  } | null;
 }
 
 interface UpdateCollectionResponse {
@@ -58,6 +73,7 @@ interface UpdateCollectionResponse {
 }
 
 interface CollectionModelDialogProps {
+  availableCollections?: readonly string[];
   collection: CollectionModelDetails | null;
   onOpenChange: (open: boolean) => void;
   onSaved: () => void;
@@ -119,6 +135,7 @@ function collectionLooksCodeHeavy(collection: CollectionModelDetails): boolean {
 }
 
 export function CollectionModelDialog({
+  availableCollections = [],
   collection,
   onOpenChange,
   onSaved,
@@ -132,6 +149,9 @@ export function CollectionModelDialog({
   });
   const [error, setError] = useState<string | null>(null);
   const [saving, setSaving] = useState(false);
+  const [policyDraft, setPolicyDraft] =
+    useState<CollectionEgressPolicy>("local_only");
+  const [relaxationConfirmed, setRelaxationConfirmed] = useState(false);
   const showCodeRecommendation =
     collection !== null &&
     collectionLooksCodeHeavy(collection) &&
@@ -150,6 +170,8 @@ export function CollectionModelDialog({
     });
     setError(null);
     setSaving(false);
+    setPolicyDraft(collection.egressPolicy?.effectivePolicy ?? "local_only");
+    setRelaxationConfirmed(false);
   }, [collection, open]);
 
   const patch = useMemo(() => {
@@ -170,7 +192,13 @@ export function CollectionModelDialog({
     return nextPatch;
   }, [collection, draft]);
 
-  const hasChanges = Object.keys(patch).length > 0;
+  const originalPolicy =
+    collection?.egressPolicy?.effectivePolicy ?? "local_only";
+  const policyChanged = policyDraft !== originalPolicy;
+  const policyOrder = { local_only: 0, lan: 1, remote: 2 } as const;
+  const policyRelaxed =
+    policyChanged && policyOrder[policyDraft] > policyOrder[originalPolicy];
+  const hasChanges = Object.keys(patch).length > 0 || policyChanged;
   const embedChanged = Object.hasOwn(patch, "embed");
 
   const handleSave = async () => {
@@ -181,13 +209,46 @@ export function CollectionModelDialog({
     setSaving(true);
     setError(null);
 
-    const { error: requestError } = await apiFetch<UpdateCollectionResponse>(
-      `/api/collections/${encodeURIComponent(collection.name)}`,
-      {
-        method: "PATCH",
-        body: JSON.stringify({ models: patch }),
+    if (policyChanged) {
+      const state = collection.egressPolicy;
+      const { error: policyError } = await apiFetch(
+        `/api/collections/${encodeURIComponent(collection.name)}/egress-policy`,
+        {
+          method: "PUT",
+          body: JSON.stringify({
+            policy: policyDraft,
+            confirmation:
+              policyRelaxed && state && relaxationConfirmed
+                ? {
+                    collection: state.collection,
+                    currentPolicy: state.effectivePolicy,
+                    currentRevision: state.revision,
+                    targetPolicy: policyDraft,
+                    acknowledged: true,
+                  }
+                : undefined,
+          }),
+        }
+      );
+      if (policyError) {
+        setSaving(false);
+        setError(policyError);
+        return;
       }
-    );
+    }
+
+    const requestError =
+      Object.keys(patch).length > 0
+        ? (
+            await apiFetch<UpdateCollectionResponse>(
+              `/api/collections/${encodeURIComponent(collection.name)}`,
+              {
+                method: "PATCH",
+                body: JSON.stringify({ models: patch }),
+              }
+            )
+          ).error
+        : null;
 
     setSaving(false);
 
@@ -240,6 +301,27 @@ export function CollectionModelDialog({
         {/* Scrollable model roles */}
         <div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden">
           <div className="divide-y divide-border/15">
+            <CollectionEgressPolicyEditor
+              confirmed={relaxationConfirmed}
+              onConfirmedChange={setRelaxationConfirmed}
+              onPolicyChange={(policy) => {
+                setPolicyDraft(policy);
+                setRelaxationConfirmed(false);
+              }}
+              policy={policyDraft}
+              relaxed={policyRelaxed}
+              revision={collection?.egressPolicy?.revision ?? 0}
+              source={collection?.egressPolicy?.source ?? "config_default"}
+            />
+            {collection ? (
+              <CollectionEgressCheckPanel
+                availableCollections={availableCollections}
+                collection={collection.name}
+                effectivePolicy={originalPolicy}
+                source={collection.egressPolicy?.source ?? "config_default"}
+              />
+            ) : null}
+            <EgressAuditPanel />
             {MODEL_ROLES.map((role) => {
               const source = collection?.modelSources?.[role] ?? "preset";
               const effectiveValue = collection?.effectiveModels?.[role] ?? "";
@@ -385,12 +467,14 @@ export function CollectionModelDialog({
           </Button>
           <Button
             className="text-xs"
-            disabled={!hasChanges || saving}
+            disabled={
+              !hasChanges || saving || (policyRelaxed && !relaxationConfirmed)
+            }
             onClick={() => void handleSave()}
             size="sm"
           >
             {saving ? <Loader2Icon className="size-3.5 animate-spin" /> : null}
-            Save model settings
+            Save collection settings
           </Button>
         </DialogFooter>
       </DialogContent>