@tokenoftrust/storefront-runner 1.3.2

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

@@ -0,0 +1,531 @@
+---
+/**
+ * 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>