@tokenoftrust/storefront-runner 2.0.2 → 2.0.3

package/apps/storefront/src/components/admin/AdminAIWorkflowsTab.astro

@@ -1,531 +0,0 @@
----
-/**
- * AI Workflows tab (baseline §AI Workflows). Renders the 8 named workflow
- * records from the live view model (lib/admin/services/mock, from
- * data-view-contracts). Still NO real execution or external side effects:
- * 3 of the 8 workflows (OPERATIONAL_WORKFLOW_KEYS) are "operational" in the
- * baseline's sense — trigger → real mock source data → an evidence-backed,
- * approval-gated AiRecommendation + run history (ai/operationalRuns.ts) —
- * the other 5 stay scaffold-only until their own units connect real data.
- * Every action affordance stays inert or navigational; nothing here mutates
- * anything.
- */
-import { getAiWorkflowsViewModel } from "@/lib/admin/services/mock";
-import type { ApprovalMode, WorkflowRecord, WorkflowStatus } from "@/lib/admin/viewmodels/aiWorkflows";
-import type { AdminTenantEnvelope } from "@/lib/admin/envelope";
-import { isOperational, runOperationalWorkflow } from "@/lib/admin/ai/operationalRuns";
-
-interface Props {
-  envelope: AdminTenantEnvelope;
-}
-
-const { envelope } = Astro.props;
-const cspNonce = Astro.locals.cspNonce;
-
-const vm = getAiWorkflowsViewModel(envelope);
-
-const STATUS_TONE: Record<WorkflowStatus, string> = {
-  scheduled: "teal",
-  running: "blue",
-  needs_review: "amber",
-  paused: "",
-  planned: "violet",
-};
-
-const STATUS_LABEL: Record<WorkflowStatus, string> = {
-  scheduled: "Scheduled",
-  running: "Running",
-  needs_review: "Needs review",
-  paused: "Paused",
-  planned: "Planned",
-};
-
-const APPROVAL_LABEL: Record<ApprovalMode, string> = {
-  draft_only: "Draft only",
-  approval_required: "Approval required",
-  guarded_automation: "Guarded automation",
-};
-
-const APPROVAL_TONE: Record<ApprovalMode, string> = {
-  draft_only: "blue",
-  approval_required: "amber",
-  guarded_automation: "green",
-};
-
-function viewKeysFor(workflow: WorkflowRecord): string[] {
-  const keys = ["all", workflow.approvalMode];
-  if (workflow.status === "needs_review") keys.push("needs_review");
-  return keys;
-}
-
-function formatTime(iso: string | null): string {
-  if (!iso) return "—";
-  return new Date(iso).toLocaleString([], { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" });
-}
-
-const needsReviewCount = vm.workflows.filter((w) => w.status === "needs_review").length;
-const draftOnlyCount = vm.workflows.filter((w) => w.approvalMode === "draft_only").length;
-const guardedCount = vm.workflows.filter((w) => w.approvalMode === "guarded_automation").length;
-
-const defaultWorkflow = vm.workflows.find((w) => isOperational(w.key)) ?? vm.workflows[0] ?? null;
-const operationalCount = vm.workflows.filter((w) => isOperational(w.key)).length;
-
-const SAVED_VIEWS: { key: string; label: string }[] = [
-  { key: "all", label: "All" },
-  { key: "needs_review", label: "Needs review" },
-  { key: "draft_only", label: "Draft only" },
-  { key: "approval_required", label: "Approval required" },
-  { key: "guarded_automation", label: "Guarded automation" },
-];
----
-
-<section id="ai-workflows" class="band ai-workflows-tab" aria-labelledby="admin-tab-ai-workflows ai-workflows-title" data-admin-panel data-agent-scope="ai-workflows" role="tabpanel" data-workflows-target-tenant={vm.targetTenant}>
-  <div class="section-title">
-    <div>
-      <h2 id="ai-workflows-title">AI Workflows</h2>
-      <p>Scheduled, recurring, evidence-backed jobs — {operationalCount} of {vm.workflows.length} operational, no external side effects yet.</p>
-    </div>
-    <div class="actions">
-      <button class="btn primary" type="button"><svg><use href="#i-workflows"></use></svg>New workflow</button>
-    </div>
-  </div>
-
-  <div class="grid cols-4">
-    <div class="metric"><span>Workflows</span><strong>{vm.workflows.length}</strong><small>{operationalCount} run against mock data</small></div>
-    <div class="metric"><span>Needs review</span><strong>{needsReviewCount}</strong><small>Status flagged for review</small></div>
-    <div class="metric"><span>Draft only</span><strong>{draftOnlyCount}</strong><small>Never act without a human draft</small></div>
-    <div class="metric"><span>Guarded automation</span><strong>{guardedCount}</strong><small>Narrowest auto-action scope</small></div>
-  </div>
-
-  <div class="ship-gate amber ai-workflows-gate" aria-labelledby="ai-workflows-gate-title">
-    <div class="ship-gate-main">
-      <span class="seal"><svg><use href="#i-workflows"></use></svg></span>
-      <div>
-        <b id="ai-workflows-gate-title">{operationalCount} workflows operational — still no external side effects</b>
-        <span>Operational workflows trigger against real mock orders/products data and produce evidence-backed, approval-gated recommendations. Nothing here mutates anything — that's a later, explicitly gated unit.</span>
-      </div>
-    </div>
-  </div>
-
-  <div class="workflow-workspace">
-    <div class="panel workflow-list-panel">
-      <div class="panel-head workflow-panel-head">
-        <h3><svg><use href="#i-workflows"></use></svg>Workflow Queue</h3>
-        <span class="chip teal">{vm.workflows.length} workflows</span>
-      </div>
-      <div class="panel-body grid">
-        <div class="tabs" role="tablist" aria-label="AI workflow saved views" data-workflows-view-list>
-          {SAVED_VIEWS.map((view) => (
-            <button type="button" class:list={["tab", { active: view.key === "all" }]} data-workflows-view-button data-view-key={view.key}>{view.label}</button>
-          ))}
-        </div>
-
-        <div class="workflow-toolbar" aria-label="AI workflow controls">
-          <label class="workflow-search">
-            <span>Search</span>
-            <input type="search" placeholder="Search workflows, owners" aria-label="Search AI workflows" data-workflows-search />
-          </label>
-        </div>
-
-        <div class="table-wrap">
-          <table class="workflow-table">
-            <thead>
-              <tr>
-                <th>Workflow</th>
-                <th>Cadence / trigger</th>
-                <th>Last run / next run</th>
-                <th>Approval mode</th>
-                <th>Status</th>
-                <th>Owner</th>
-                <th class="action">Action</th>
-              </tr>
-            </thead>
-            <tbody data-workflows-tbody>
-              {vm.workflows.map((workflow) => (
-                <tr
-                  class:list={[{ selected: workflow.key === defaultWorkflow?.key }]}
-                  data-workflows-row
-                  data-workflow-key={workflow.key}
-                  data-view-keys={viewKeysFor(workflow).join(" ")}
-                  data-search-haystack={`${workflow.name} ${workflow.owner}`.toLowerCase()}
-                >
-                  <td>
-                    <strong>{workflow.name}</strong>
-                    {isOperational(workflow.key) && <span class="chip teal workflow-operational-badge">Operational</span>}
-                  </td>
-                  <td><strong>{workflow.cadence}</strong><span class="subtle">{workflow.triggerType}</span></td>
-                  <td><span class="subtle">Last {formatTime(workflow.lastRunAt)}</span><span class="subtle">Next {formatTime(workflow.nextRunAt)}</span></td>
-                  <td><span class:list={["chip", APPROVAL_TONE[workflow.approvalMode]]}>{APPROVAL_LABEL[workflow.approvalMode]}</span></td>
-                  <td><span class:list={["chip", STATUS_TONE[workflow.status]]}>{STATUS_LABEL[workflow.status]}</span></td>
-                  <td><strong>{workflow.owner}</strong></td>
-                  <td class="action"><button type="button" class="btn" data-workflows-select-row={workflow.key}>Open</button></td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-          <p class="workflow-empty-state" data-workflows-empty hidden>No workflows match the current filters.</p>
-        </div>
-      </div>
-    </div>
-
-    <aside class="panel workflow-detail-panel" aria-labelledby="workflow-detail-title" data-workflows-detail-root>
-      {vm.workflows.map((workflow) => {
-        const operational = isOperational(workflow.key);
-        const run = isOperational(workflow.key) ? runOperationalWorkflow(workflow.key, envelope, workflow.approvalMode) : null;
-        return (
-          <div class="workflow-detail-record" data-workflows-detail-record={workflow.key} hidden={workflow.key !== defaultWorkflow?.key}>
-            <div class="panel-head">
-              <h3 id={workflow.key === defaultWorkflow?.key ? "workflow-detail-title" : undefined}><svg><use href="#i-shield"></use></svg>{workflow.name}</h3>
-              <span class:list={["chip", operational ? "teal" : STATUS_TONE[workflow.status]]}>{operational ? "Operational" : STATUS_LABEL[workflow.status]}</span>
-            </div>
-            <div class="panel-body grid">
-              <div class="workflow-summary">
-                <span class="eyebrow">{workflow.triggerType}</span>
-                <strong>{workflow.cadence}</strong>
-                <p>{run?.recommendation.summary ?? "No suggested action yet — scaffold stage, no source data connected."}</p>
-              </div>
-
-              <div class="grid cols-2 workflow-detail-metrics">
-                <div class="field">
-                  <label>Owner</label>
-                  <strong>{run?.recommendation.owner ?? workflow.owner}</strong>
-                  <p>Last run {formatTime(workflow.lastRunAt)}</p>
-                </div>
-                <div class="field">
-                  <label>Approval mode</label>
-                  <strong>{APPROVAL_LABEL[workflow.approvalMode]}</strong>
-                  <p>Next run {formatTime(workflow.nextRunAt)}</p>
-                </div>
-              </div>
-
-              {run && (
-                <div class="field workflow-confidence">
-                  <label>Confidence</label>
-                  <strong>{Math.round(run.recommendation.confidence * 100)}%</strong>
-                  <p>Derived from real mock source data this run, not a fixed number.</p>
-                </div>
-              )}
-
-              <div class="workflow-evidence">
-                <div class="detail-section-head">
-                  <h4>Source data</h4>
-                  <span class="chip">{workflow.sourceData.length}</span>
-                </div>
-                <div class="check-row">
-                  <div><b>{workflow.sourceData.join(", ") || "None connected"}</b><p>{operational ? "Domains this run actually read from." : "Domains this workflow reads from once execution is wired."}</p></div>
-                  <strong>{operational ? "Live" : "Scaffold"}</strong>
-                  <span class:list={["chip", operational ? "teal" : ""]}>{operational ? "Connected" : "Read-only"}</span>
-                </div>
-              </div>
-
-              <div class="workflow-evidence">
-                <div class="detail-section-head">
-                  <h4>Evidence links</h4>
-                  <span class="chip">{run?.recommendation.evidenceRefs.length ?? workflow.evidenceLinks.length}</span>
-                </div>
-                {(run?.recommendation.evidenceRefs ?? workflow.evidenceLinks).map((link) => (
-                  <div class="check-row">
-                    <div><b>{link}</b><p>{operational ? "Resolved from the real evidence graph this run." : "Evidence reference — resolves once the evidence graph is wired."}</p></div>
-                    <strong>{operational ? "Resolved" : "Linked"}</strong>
-                    <span class="chip teal">OK</span>
-                  </div>
-                ))}
-              </div>
-
-              <div class="workflow-evidence">
-                <div class="detail-section-head">
-                  <h4>{operational ? "Run history" : "Audit trail"}</h4>
-                  <span class="chip">{(run?.runHistory ?? workflow.auditTrail).length}</span>
-                </div>
-                {(run?.runHistory ?? workflow.auditTrail).map((event) => (
-                  <div class="workflow-run-row">
-                    <span>{formatTime(event.at)}</span>
-                    <div><b>{event.action}</b><span class="subtle">{event.operator} · {event.targetTenant}</span></div>
-                  </div>
-                ))}
-                {operational && run && run.runHistory.length === 0 && <p class="subtle">No runs recorded yet.</p>}
-              </div>
-
-              {operational && (
-                <div class="workflow-approval-gate" aria-label="Approval gate">
-                  {workflow.approvalMode === "draft_only" && <p class="subtle">Draft only — this recommendation can never auto-apply; a human must author the action from it.</p>}
-                  {workflow.approvalMode === "approval_required" && <button class="btn" type="button">Request approval</button>}
-                  {workflow.approvalMode === "guarded_automation" && <button class="btn primary" type="button">Review guarded automation</button>}
-                </div>
-              )}
-            </div>
-          </div>
-        );
-      })}
-    </aside>
-  </div>
-
-  <div class="grid cols-3">
-    <div class="field workflow-guardrail">
-      <label>Mode</label>
-      <strong>Control plane only</strong>
-      <p>Every workflow here is scaffolded — cadence, owner, and approval mode are set, but nothing executes yet.</p>
-    </div>
-    <div class="field workflow-guardrail">
-      <label>Evidence</label>
-      <strong>Linked, not resolved</strong>
-      <p>Evidence references are recorded per workflow; resolving them to real records is a later unit.</p>
-    </div>
-    <div class="field workflow-guardrail">
-      <label>Approval</label>
-      <strong>Draft / approval / guarded</strong>
-      <p>Every workflow declares its approval mode now, so operational execution inherits the right guardrail from day one.</p>
-    </div>
-  </div>
-</section>
-
-<script is:inline nonce={cspNonce}>
-  (() => {
-    const root = document.querySelector('[data-workflows-target-tenant]');
-    if (!root) return;
-
-    const viewButtons = Array.from(root.querySelectorAll("[data-workflows-view-button]"));
-    const searchInput = root.querySelector("[data-workflows-search]");
-    const rows = Array.from(root.querySelectorAll("[data-workflows-row]"));
-    const emptyState = root.querySelector("[data-workflows-empty]");
-    const detailRoot = root.querySelector("[data-workflows-detail-root]");
-    const detailRecords = detailRoot ? Array.from(detailRoot.querySelectorAll("[data-workflows-detail-record]")) : [];
-
-    let activeView = "all";
-
-    const applyFilters = () => {
-      const term = searchInput ? searchInput.value.trim().toLowerCase() : "";
-      let visibleCount = 0;
-
-      for (const row of rows) {
-        const viewKeys = (row.dataset.viewKeys ?? "").split(" ");
-        const matchesView = viewKeys.includes(activeView);
-        const matchesSearch = !term || (row.dataset.searchHaystack ?? "").includes(term);
-        const visible = matchesView && matchesSearch;
-        row.hidden = !visible;
-        if (visible) visibleCount += 1;
-      }
-
-      if (emptyState) emptyState.hidden = visibleCount > 0;
-    };
-
-    const selectWorkflow = (key) => {
-      for (const row of rows) {
-        row.classList.toggle("selected", row.dataset.workflowKey === key);
-      }
-      for (const record of detailRecords) {
-        record.hidden = record.dataset.workflowsDetailRecord !== key;
-      }
-    };
-
-    viewButtons.forEach((button) => {
-      button.addEventListener("click", () => {
-        activeView = button.dataset.viewKey ?? "all";
-        viewButtons.forEach((b) => b.classList.toggle("active", b === button));
-        applyFilters();
-      });
-    });
-
-    searchInput?.addEventListener("input", applyFilters);
-
-    root.querySelectorAll("[data-workflows-select-row]").forEach((button) => {
-      button.addEventListener("click", () => {
-        const key = button.dataset.workflowsSelectRow;
-        if (key) selectWorkflow(key);
-      });
-    });
-
-    rows.forEach((row) => {
-      row.addEventListener("click", (event) => {
-        if (event.target instanceof Element && event.target.closest("[data-workflows-select-row]")) return;
-        const key = row.dataset.workflowKey;
-        if (key) selectWorkflow(key);
-      });
-    });
-
-    applyFilters();
-  })();
-</script>
-
-<style>
-  .ai-workflows-tab {
-    --workflow-control-bg: #fbfcfc;
-  }
-
-  .ai-workflows-gate .seal {
-    background: var(--admin-teal);
-  }
-
-  .workflow-workspace {
-    display: grid;
-    grid-template-columns: minmax(0, 1.32fr) minmax(320px, 0.68fr);
-    gap: 14px;
-    align-items: start;
-  }
-
-  .workflow-list-panel,
-  .workflow-detail-panel {
-    min-width: 0;
-  }
-
-  .workflow-panel-head {
-    flex-wrap: wrap;
-  }
-
-  .workflow-table tbody tr {
-    cursor: pointer;
-  }
-
-  .workflow-toolbar {
-    display: grid;
-    grid-template-columns: minmax(220px, 1fr);
-    gap: 10px;
-    padding: 10px;
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius-sm);
-    background: var(--workflow-control-bg);
-  }
-
-  .workflow-toolbar label {
-    display: grid;
-    gap: 5px;
-    min-width: 0;
-  }
-
-  .workflow-toolbar span,
-  .eyebrow {
-    color: var(--admin-muted);
-    font-size: 11px;
-    font-weight: 760;
-    text-transform: uppercase;
-  }
-
-  .workflow-toolbar input {
-    min-width: 0;
-    min-height: 36px;
-    padding: 0 10px;
-    border: 1px solid var(--admin-line-strong);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-surface);
-    color: var(--admin-ink);
-  }
-
-  .workflow-table {
-    min-width: 980px;
-  }
-
-  .workflow-table tr.selected td {
-    background: var(--admin-teal-soft);
-  }
-
-  .workflow-empty-state {
-    margin: 0;
-    padding: 24px 14px;
-    color: var(--admin-muted);
-    font-size: 13px;
-    text-align: center;
-  }
-
-  .workflow-summary {
-    display: grid;
-    gap: 5px;
-    padding: 12px;
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-surface-soft);
-  }
-
-  .workflow-summary strong {
-    font-size: 16px;
-  }
-
-  .workflow-summary p,
-  .workflow-run-row p {
-    margin: 0;
-    color: var(--admin-muted);
-    font-size: 12px;
-  }
-
-  .workflow-detail-metrics {
-    gap: 10px;
-  }
-
-  .workflow-evidence {
-    display: grid;
-    gap: 8px;
-  }
-
-  .detail-section-head {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-  }
-
-  .detail-section-head h4 {
-    margin: 0;
-    font-size: 13px;
-  }
-
-  .workflow-run-row {
-    display: grid;
-    grid-template-columns: 120px minmax(0, 1fr);
-    gap: 10px;
-    align-items: center;
-    padding: 10px 0;
-    border-bottom: 1px solid var(--admin-line);
-  }
-
-  .workflow-run-row:last-child {
-    border-bottom: 0;
-  }
-
-  .workflow-run-row > span:first-child {
-    color: var(--admin-muted);
-    font-size: 12px;
-    font-weight: 760;
-  }
-
-  .workflow-run-row b {
-    display: block;
-    font-size: 13px;
-  }
-
-  .workflow-guardrail {
-    display: grid;
-    gap: 5px;
-    align-content: start;
-  }
-
-  .workflow-operational-badge {
-    margin-left: 6px;
-  }
-
-  .workflow-confidence {
-    display: grid;
-    gap: 3px;
-  }
-
-  .workflow-approval-gate {
-    padding-top: 4px;
-  }
-
-  .workflow-approval-gate .subtle {
-    margin: 0;
-  }
-
-  @media (max-width: 1180px) {
-    .workflow-workspace,
-    .workflow-toolbar {
-      grid-template-columns: 1fr;
-    }
-  }
-
-  @media (max-width: 760px) {
-    .workflow-run-row,
-    .detail-section-head {
-      align-items: flex-start;
-      grid-template-columns: 1fr;
-    }
-  }
-</style>