@nexus-ai-fs/tui 0.9.18

package/src/panels/access/constraint-creator.tsx

@@ -0,0 +1,128 @@
+/**
+ * Constraint creator form: create a new ReBAC governance constraint.
+ *
+ * Tab cycles between fields.
+ * Enter submits via the access store's createConstraint().
+ * Escape cancels and returns to normal mode.
+ */
+
+import React, { useState, useCallback } from "react";
+import { useAccessStore } from "../../stores/access-store.js";
+import { useKeyboard } from "../../shared/hooks/use-keyboard.js";
+import { useApi } from "../../shared/hooks/use-api.js";
+
+type ActiveField = "fromAgentId" | "toAgentId" | "constraintType";
+
+const FIELD_ORDER: readonly ActiveField[] = [
+  "fromAgentId",
+  "toAgentId",
+  "constraintType",
+];
+
+interface ConstraintCreatorProps {
+  readonly zoneId: string;
+  readonly onClose: () => void;
+}
+
+export function ConstraintCreator({ zoneId, onClose }: ConstraintCreatorProps): React.ReactNode {
+  const client = useApi();
+  const createConstraint = useAccessStore((s) => s.createConstraint);
+  const constraintsLoading = useAccessStore((s) => s.constraintsLoading);
+  const error = useAccessStore((s) => s.error);
+
+  const [fromAgentId, setFromAgentId] = useState("");
+  const [toAgentId, setToAgentId] = useState("");
+  const [constraintType, setConstraintType] = useState("");
+  const [activeField, setActiveField] = useState<ActiveField>("fromAgentId");
+
+  const setters: Readonly<Record<ActiveField, (fn: (b: string) => string) => void>> = {
+    fromAgentId: (fn) => setFromAgentId((b) => fn(b)),
+    toAgentId: (fn) => setToAgentId((b) => fn(b)),
+    constraintType: (fn) => setConstraintType((b) => fn(b)),
+  };
+
+  const handleSubmit = useCallback(() => {
+    if (!client || !fromAgentId.trim() || !toAgentId.trim() || !constraintType.trim()) return;
+    createConstraint(
+      {
+        from_agent_id: fromAgentId.trim(),
+        to_agent_id: toAgentId.trim(),
+        constraint_type: constraintType.trim(),
+        zone_id: zoneId,
+      },
+      client,
+    );
+  }, [client, fromAgentId, toAgentId, constraintType, zoneId, createConstraint]);
+
+  const handleUnhandledKey = useCallback(
+    (keyName: string) => {
+      const setter = setters[activeField];
+      if (keyName.length === 1) {
+        setter((b) => b + keyName);
+      } else if (keyName === "space") {
+        setter((b) => b + " ");
+      }
+    },
+    [activeField],
+  );
+
+  useKeyboard(
+    {
+      return: handleSubmit,
+      escape: onClose,
+      backspace: () => {
+        setters[activeField]((b) => b.slice(0, -1));
+      },
+      tab: () => {
+        const currentIdx = FIELD_ORDER.indexOf(activeField);
+        const nextIdx = (currentIdx + 1) % FIELD_ORDER.length;
+        const next = FIELD_ORDER[nextIdx];
+        if (next) {
+          setActiveField(next);
+        }
+      },
+    },
+    handleUnhandledKey,
+  );
+
+  const cursor = "\u2588";
+
+  const fields: readonly { readonly key: ActiveField; readonly label: string; readonly value: string; readonly hint?: string }[] = [
+    { key: "fromAgentId", label: "From Agent ID   ", value: fromAgentId },
+    { key: "toAgentId", label: "To Agent ID     ", value: toAgentId },
+    { key: "constraintType", label: "Constraint Type ", value: constraintType, hint: "e.g. deny, rate_limit" },
+  ];
+
+  return (
+    <box height="100%" width="100%" flexDirection="column">
+      {/* Form fields */}
+      {fields.map((f) => (
+        <box key={f.key} height={1} width="100%">
+          <text>
+            {activeField === f.key
+              ? `> ${f.label}: ${f.value}${cursor}${f.hint ? `  (${f.hint})` : ""}`
+              : `  ${f.label}: ${f.value}${f.hint && !f.value ? `  (${f.hint})` : ""}`}
+          </text>
+        </box>
+      ))}
+
+      {constraintsLoading && (
+        <box height={1} width="100%">
+          <text>Creating constraint...</text>
+        </box>
+      )}
+
+      {error && !constraintsLoading && (
+        <box height={1} width="100%">
+          <text>{`Error: ${error}`}</text>
+        </box>
+      )}
+
+      <box height={1} width="100%">
+        <text>
+          {"Tab:next field  Enter:create  Escape:cancel  Backspace:delete"}
+        </text>
+      </box>
+    </box>
+  );
+}

package/src/panels/access/constraint-list.tsx

@@ -0,0 +1,72 @@
+/**
+ * Constraint list: displays ReBAC governance constraints with
+ * from/to agents, type, and creation time.
+ */
+
+import React from "react";
+import type { GovernanceConstraint } from "../../stores/access-store.js";
+import { LoadingIndicator } from "../../shared/components/loading-indicator.js";
+import { textStyle } from "../../shared/text-style.js";
+
+interface ConstraintListProps {
+  readonly constraints: readonly GovernanceConstraint[];
+  readonly selectedIndex: number;
+  readonly loading: boolean;
+}
+
+function shortId(id: string): string {
+  if (id.length <= 14) return id;
+  return `${id.slice(0, 11)}..`;
+}
+
+function formatTime(ts: string): string {
+  try {
+    return new Date(ts).toLocaleString();
+  } catch {
+    return ts;
+  }
+}
+
+export function ConstraintList({
+  constraints,
+  selectedIndex,
+  loading,
+}: ConstraintListProps): React.ReactNode {
+  if (loading) {
+    return <LoadingIndicator message="Loading constraints..." />;
+  }
+
+  if (constraints.length === 0) {
+    return (
+      <box height="100%" width="100%" justifyContent="center" alignItems="center">
+        <text style={textStyle({ dim: true })}>No governance constraints found</text>
+      </box>
+    );
+  }
+
+  return (
+    <scrollbox height="100%" width="100%">
+      {/* Header */}
+      <box height={1} width="100%">
+        <text>{"  FROM AGENT     TO AGENT       TYPE            CREATED AT"}</text>
+      </box>
+      <box height={1} width="100%">
+        <text>{"  -------------  -------------  --------------  -----------------------"}</text>
+      </box>
+
+      {/* Rows */}
+      {constraints.map((c, i) => {
+        const isSelected = i === selectedIndex;
+        const prefix = isSelected ? "> " : "  ";
+
+        return (
+          <box key={c.id} height={1} width="100%">
+            <text>
+              {`${prefix}${shortId(c.from_agent_id).padEnd(13)}  ${shortId(c.to_agent_id).padEnd(13)}  ${c.constraint_type.padEnd(14)}  ${formatTime(c.created_at)}`}
+            </text>
+          </box>
+        );
+      })}
+    </scrollbox>
+  );
+}

package/src/panels/access/credential-list.tsx

@@ -0,0 +1,68 @@
+/**
+ * Credential list with active status badge, DIDs, and delegation depth.
+ */
+
+import React from "react";
+import type { Credential } from "../../stores/access-store.js";
+import { EmptyState } from "../../shared/components/empty-state.js";
+
+interface CredentialListProps {
+  readonly credentials: readonly Credential[];
+  readonly loading: boolean;
+}
+
+function shortId(id: string): string {
+  if (id.length <= 16) return id;
+  return `${id.slice(0, 12)}..`;
+}
+
+function formatTimestamp(ts: string | null): string {
+  if (!ts) return "never";
+  try {
+    return new Date(ts).toLocaleString();
+  } catch {
+    return ts;
+  }
+}
+
+export function CredentialList({
+  credentials,
+  loading,
+}: CredentialListProps): React.ReactNode {
+  if (loading) {
+    return (
+      <box height="100%" width="100%" justifyContent="center" alignItems="center">
+        <text>Loading credentials...</text>
+      </box>
+    );
+  }
+
+  if (credentials.length === 0) {
+    return <EmptyState message="No credentials found." hint="Press i to issue a credential." />;
+  }
+
+  return (
+    <scrollbox height="100%" width="100%">
+      {/* Header */}
+      <box height={1} width="100%">
+        <text>{"  ST  CREDENTIAL ID     ISSUER DID       SUBJECT DID      DEPTH  EXPIRES            REVOKED"}</text>
+      </box>
+      <box height={1} width="100%">
+        <text>{"  --  ---------------  ---------------  ---------------  -----  -----------------  -----------------"}</text>
+      </box>
+
+      {/* Rows */}
+      {credentials.map((cred) => {
+        const badge = cred.is_active ? "●" : "○";
+
+        return (
+          <box key={cred.credential_id} height={1} width="100%">
+            <text>
+              {`  ${badge}   ${shortId(cred.credential_id).padEnd(15)}  ${shortId(cred.issuer_did).padEnd(15)}  ${shortId(cred.subject_did).padEnd(15)}  ${String(cred.delegation_depth).padEnd(5)}  ${formatTimestamp(cred.expires_at).padEnd(17)}  ${formatTimestamp(cred.revoked_at)}`}
+            </text>
+          </box>
+        );
+      })}
+    </scrollbox>
+  );
+}

package/src/panels/access/delegation-chain-view.tsx

@@ -0,0 +1,110 @@
+/**
+ * Delegation chain view: read-only overlay showing the delegation
+ * hierarchy from root to leaf, fetched via the chain endpoint.
+ *
+ * Escape closes.
+ */
+
+import React, { useEffect } from "react";
+import { useAccessStore } from "../../stores/access-store.js";
+import { useKeyboard } from "../../shared/hooks/use-keyboard.js";
+import { useApi } from "../../shared/hooks/use-api.js";
+
+interface DelegationChainViewProps {
+  readonly delegationId: string;
+  readonly onClose: () => void;
+}
+
+export function DelegationChainView({
+  delegationId,
+  onClose,
+}: DelegationChainViewProps): React.ReactNode {
+  const client = useApi();
+  const chain = useAccessStore((s) => s.delegationChain);
+  const loading = useAccessStore((s) => s.delegationChainLoading);
+  const error = useAccessStore((s) => s.error);
+  const fetchDelegationChain = useAccessStore((s) => s.fetchDelegationChain);
+
+  useEffect(() => {
+    if (client) {
+      fetchDelegationChain(delegationId, client);
+    }
+  }, [delegationId, client, fetchDelegationChain]);
+
+  useKeyboard({ escape: onClose });
+
+  if (loading) {
+    return (
+      <box height="100%" width="100%" justifyContent="center" alignItems="center">
+        <text>Loading delegation chain...</text>
+      </box>
+    );
+  }
+
+  if (error) {
+    return (
+      <box height="100%" width="100%" flexDirection="column">
+        <box height={1} width="100%">
+          <text>{`Error: ${error}`}</text>
+        </box>
+        <box height={1} width="100%">
+          <text>{"Escape:close"}</text>
+        </box>
+      </box>
+    );
+  }
+
+  if (!chain || chain.chain.length === 0) {
+    return (
+      <box height="100%" width="100%" flexDirection="column">
+        <box height={1} width="100%">
+          <text>{`No chain found for delegation ${delegationId}`}</text>
+        </box>
+        <box height={1} width="100%">
+          <text>{"Escape:close"}</text>
+        </box>
+      </box>
+    );
+  }
+
+  return (
+    <box height="100%" width="100%" flexDirection="column">
+      <box height={1} width="100%">
+        <text>{`Delegation Chain (depth: ${chain.total_depth})`}</text>
+      </box>
+      <box height={1} width="100%">
+        <text>{"  DEPTH  AGENT            PARENT           MODE       STATUS     INTENT"}</text>
+      </box>
+      <box height={1} width="100%">
+        <text>{"  -----  ---------------  ---------------  ---------  ---------  ----------"}</text>
+      </box>
+
+      <scrollbox flexGrow={1} width="100%">
+        {chain.chain.map((entry) => {
+          const indent = "  ".repeat(entry.depth);
+          const agent = entry.agent_id.length > 15
+            ? `${entry.agent_id.slice(0, 12)}..`
+            : entry.agent_id;
+          const parent = entry.parent_agent_id.length > 15
+            ? `${entry.parent_agent_id.slice(0, 12)}..`
+            : entry.parent_agent_id;
+          const intentStr = entry.intent.length > 20
+            ? `${entry.intent.slice(0, 17)}...`
+            : entry.intent;
+
+          return (
+            <box key={entry.delegation_id} height={1} width="100%">
+              <text>
+                {`${indent}  ${String(entry.depth).padEnd(5)}  ${agent.padEnd(15)}  ${parent.padEnd(15)}  ${entry.delegation_mode.padEnd(9)}  ${entry.status.padEnd(9)}  ${intentStr}`}
+              </text>
+            </box>
+          );
+        })}
+      </scrollbox>
+
+      <box height={1} width="100%">
+        <text>{"Escape:close"}</text>
+      </box>
+    </box>
+  );
+}

package/src/panels/access/delegation-completer.tsx

@@ -0,0 +1,120 @@
+/**
+ * Delegation completer form: mark a delegation as completed/failed/timeout.
+ *
+ * Tab cycles between outcome and quality score fields.
+ * Enter submits via the store's completeDelegation().
+ * Escape cancels and returns to normal mode.
+ */
+
+import React, { useState, useCallback } from "react";
+import { useAccessStore } from "../../stores/access-store.js";
+import { useKeyboard } from "../../shared/hooks/use-keyboard.js";
+import { useApi } from "../../shared/hooks/use-api.js";
+
+type ActiveField = "outcome" | "qualityScore";
+
+const FIELD_ORDER: readonly ActiveField[] = ["outcome", "qualityScore"];
+
+interface DelegationCompleterProps {
+  readonly delegationId: string;
+  readonly onClose: () => void;
+}
+
+export function DelegationCompleter({
+  delegationId,
+  onClose,
+}: DelegationCompleterProps): React.ReactNode {
+  const client = useApi();
+  const completeDelegation = useAccessStore((s) => s.completeDelegation);
+  const delegationsLoading = useAccessStore((s) => s.delegationsLoading);
+  const error = useAccessStore((s) => s.error);
+
+  const [outcome, setOutcome] = useState("completed");
+  const [qualityScore, setQualityScore] = useState("");
+  const [activeField, setActiveField] = useState<ActiveField>("outcome");
+
+  const setters: Readonly<Record<ActiveField, (fn: (b: string) => string) => void>> = {
+    outcome: (fn) => setOutcome((b) => fn(b)),
+    qualityScore: (fn) => setQualityScore((b) => fn(b)),
+  };
+
+  const handleSubmit = useCallback(() => {
+    if (!client || !outcome.trim()) return;
+    const score = qualityScore.trim() ? parseFloat(qualityScore.trim()) : null;
+    completeDelegation(delegationId, outcome.trim(), score, client);
+  }, [client, delegationId, outcome, qualityScore, completeDelegation]);
+
+  const handleUnhandledKey = useCallback(
+    (keyName: string) => {
+      const setter = setters[activeField];
+      if (keyName.length === 1) {
+        setter((b) => b + keyName);
+      } else if (keyName === "space") {
+        setter((b) => b + " ");
+      }
+    },
+    [activeField],
+  );
+
+  useKeyboard(
+    {
+      return: handleSubmit,
+      escape: onClose,
+      backspace: () => {
+        setters[activeField]((b) => b.slice(0, -1));
+      },
+      tab: () => {
+        const currentIdx = FIELD_ORDER.indexOf(activeField);
+        const nextIdx = (currentIdx + 1) % FIELD_ORDER.length;
+        const next = FIELD_ORDER[nextIdx];
+        if (next) {
+          setActiveField(next);
+        }
+      },
+    },
+    handleUnhandledKey,
+  );
+
+  const cursor = "\u2588";
+
+  return (
+    <box height="100%" width="100%" flexDirection="column">
+      <box height={1} width="100%">
+        <text>{`Complete delegation: ${delegationId}`}</text>
+      </box>
+
+      <box height={1} width="100%">
+        <text>
+          {activeField === "outcome"
+            ? `> Outcome:       ${outcome}${cursor}  (completed|failed|timeout)`
+            : `  Outcome:       ${outcome}`}
+        </text>
+      </box>
+      <box height={1} width="100%">
+        <text>
+          {activeField === "qualityScore"
+            ? `> Quality Score: ${qualityScore}${cursor}  (0.0-1.0, optional)`
+            : `  Quality Score: ${qualityScore}`}
+        </text>
+      </box>
+
+      {delegationsLoading && (
+        <box height={1} width="100%">
+          <text>Completing delegation...</text>
+        </box>
+      )}
+
+      {error && !delegationsLoading && (
+        <box height={1} width="100%">
+          <text>{`Error: ${error}`}</text>
+        </box>
+      )}
+
+      <box height={1} width="100%">
+        <text>
+          {"Tab:next field  Enter:complete  Escape:cancel  Backspace:delete"}
+        </text>
+      </box>
+    </box>
+  );
+}