Merge pull request #214 from ScriptedAlchemy/feat/dashboard-ux-improvements

[codex] feat(dashboard): restructure curation tabs and surface LCM payload GC

Author: ScriptedAlchemy

dashboard/holographic/src/CurationPanel.tsx

@@ -1,25 +1,28 @@
 import {
+  Bot,
   History,
+  Inbox,
   ListChecks,
   ScrollText,
   Wand2,
 } from "lucide-react";
 import { Button, Card, CardContent, CardHeader, CardTitle } from "./sdk";
 import { Spinner } from "./Spinner";
-import {
-  countLabel,
-  formatHistoryTime,
-} from "./curation/format";
+import { countLabel, formatHistoryTime } from "./curation/format";
 import { groupActions } from "./curation/risk";
 import { ActivityScroller } from "./curation/ActivityScroller";
 import { ActionReviewGroup } from "./curation/ActionReviewGroup";
-import {
-  useCurationData,
-  type CurationTab,
-} from "./curation/useCurationData";
+import { useCurationData, type CurationTab } from "./curation/useCurationData";
+import { usePendingAutomationCounts } from "./curation/usePendingAutomationCounts";
+import { api } from "./api";
+import { CurationAutomationPanel } from "./curation/CurationAutomationPanel";
+import { CurationProposalsPanel } from "./curation/CurationProposalsPanel";
 import { CurationHistoryPanel } from "./curation/CurationHistoryPanel";
 import { InlineConfirm } from "./curation/InlineConfirm";
-import { isActiveAutomationStatus, type AutomationRunTask } from "./curation/automationTasks";
+import {
+  isActiveAutomationStatus,
+  type AutomationRunTask,
+} from "./curation/automationTasks";
 import type { SecondsField, TaskField } from "./curation/configTypes";
 
 const DIAGNOSTIC_COUNT_KEYS = new Set([
@@ -118,15 +121,19 @@ export default function CurationPanel({
   const actions = report?.actions ?? [];
   const counts: Record<string, number> = report?.counts ?? {};
   const isPlan = report?.dry_run ?? true;
-  const shownCounts: Record<string, number> = isPlan ? counts : (report?.applied_counts ?? counts);
+  const shownCounts: Record<string, number> = isPlan
+    ? counts
+    : (report?.applied_counts ?? counts);
   const actionCounts = Object.entries(shownCounts).filter(
     ([key]) => !DIAGNOSTIC_COUNT_KEYS.has(key),
   );
   const diagnosticCounts = Object.entries(counts).filter(([key]) =>
     DIAGNOSTIC_COUNT_KEYS.has(key),
   );
   const actionGroups = groupActions(actions);
-  const nonEmptyActionGroups = actionGroups.filter((group) => group.actions.length > 0);
+  const nonEmptyActionGroups = actionGroups.filter(
+    (group) => group.actions.length > 0,
+  );
   const backendAvailability = configResponse?.backend_availability;
   const backendUnavailable =
     !configDirty &&
@@ -145,7 +152,8 @@ export default function CurationPanel({
     !automationRunActioning;
   const activeAutomationStatus = (task: AutomationRunTask) =>
     automationRuns.find(
-      (record) => record.task === task && isActiveAutomationStatus(record.status),
+      (record) =>
+        record.task === task && isActiveAutomationStatus(record.status),
     )?.status;
   const automationRunTitle = configDirty
     ? "Save automation config before running"
@@ -181,15 +189,12 @@ export default function CurationPanel({
       [key]: value ? Math.max(1, Number(value) || 1) : null,
     });
   };
-  const taskFieldError = (
-    task: AutomationRunTask,
-    field: TaskField,
-  ) => configFieldErrors[`${task}.${field}`];
+  const taskFieldError = (task: AutomationRunTask, field: TaskField) =>
+    configFieldErrors[`${task}.${field}`];
   const planLabel = actions.length ? `Plan ${actions.length}` : "Plan";
-  const confirmGroupCounts = nonEmptyActionGroups.map((group) => [
-    group.label,
-    group.actions.length,
-  ] as const);
+  const confirmGroupCounts = nonEmptyActionGroups.map(
+    (group) => [group.label, group.actions.length] as const,
+  );
   const selectedUsage = selectedManagedSkill
     ? managedSkillUsage[selectedManagedSkill.metadata.id]
     : null;
@@ -199,8 +204,16 @@ export default function CurationPanel({
   const selectedImprovementRecommendation = selectedManagedSkill
     ? managedSkillImprovementRecommendations[selectedManagedSkill.metadata.id]
     : null;
+  // Same server-side count the outer Curation tab badge uses, so the two
+  // badges can't disagree and no proposal/skill lists need loading up front.
+  const pendingProposalCount = usePendingAutomationCounts(api);
+  const proposalsLabel = pendingProposalCount
+    ? `Proposals ${pendingProposalCount}`
+    : "Proposals";
   const tabs: Array<{ id: CurationTab; label: string; Icon: typeof Wand2 }> = [
     { id: "plan", label: planLabel, Icon: ListChecks },
+    { id: "automation", label: "Automation", Icon: Bot },
+    { id: "proposals", label: proposalsLabel, Icon: Inbox },
     { id: "history", label: "History", Icon: History },
     { id: "activity", label: "Activity", Icon: ScrollText },
   ];
@@ -213,7 +226,13 @@ export default function CurationPanel({
           Curation
         </CardTitle>
         <div className="flex items-center gap-2 shrink-0">
-          <Button size="sm" ghost disabled={loading} onClick={preview} className="gap-2">
+          <Button
+            size="sm"
+            ghost
+            disabled={loading}
+            onClick={preview}
+            className="gap-2"
+          >
             {loading ? <Spinner /> : null}
             Preview
           </Button>
@@ -245,7 +264,7 @@ export default function CurationPanel({
           ref={panelRef}
           role="tablist"
           aria-label="Curation views"
-          className="grid grid-cols-3 gap-1 rounded-sm border border-border bg-secondary/30 p-1 shrink-0"
+          className="grid grid-cols-5 gap-1 rounded-sm border border-border bg-secondary/30 p-1 shrink-0"
         >
           {tabs.map(({ id, label, Icon }) => {
             const active = activeTab === id;
@@ -286,7 +305,8 @@ export default function CurationPanel({
             )}
             {previewStale ? (
               <div className="border border-warning/30 bg-warning/10 px-3 py-2 text-xs text-warning shrink-0">
-                {previewStaleReason || "This saved preview is stale because the memory store changed."}
+                {previewStaleReason ||
+                  "This saved preview is stale because the memory store changed."}
               </div>
             ) : null}
 
@@ -306,24 +326,31 @@ export default function CurationPanel({
                   <>
                     <span className="text-text-tertiary">· signals</span>
                     {diagnosticCounts.map(([k, v]) => (
-                      <span key={k} className="font-mono-ui whitespace-nowrap text-text-tertiary">
+                      <span
+                        key={k}
+                        className="font-mono-ui whitespace-nowrap text-text-tertiary"
+                      >
                         {countLabel(k)}={v}
                       </span>
                     ))}
                   </>
                 ) : null}
-                <span className="text-text-tertiary whitespace-nowrap">· llm_calls={report.llm_calls}</span>
+                <span className="text-text-tertiary whitespace-nowrap">
+                  · llm_calls={report.llm_calls}
+                </span>
                 {report.coverage ? (
                   <span className="text-text-tertiary whitespace-nowrap">
-                    · scanned={report.coverage.scanned}/{report.coverage.active_total}
+                    · scanned={report.coverage.scanned}/
+                    {report.coverage.active_total}
                     {report.coverage.due_remaining
                       ? ` · due=${report.coverage.due_remaining}`
                       : ""}
                   </span>
                 ) : null}
                 {report.coverage?.entity_total != null ? (
                   <span className="text-text-tertiary whitespace-nowrap">
-                    · entities={report.coverage.entities_scanned ?? 0}/{report.coverage.entity_total}
+                    · entities={report.coverage.entities_scanned ?? 0}/
+                    {report.coverage.entity_total}
                     {report.coverage.entity_scan_remaining
                       ? ` · entity_due=${report.coverage.entity_scan_remaining}`
                       : ""}
@@ -335,7 +362,9 @@ export default function CurationPanel({
                   </span>
                 ) : null}
                 {!isPlan && report.skipped_actions ? (
-                  <span className="text-warning whitespace-nowrap">· skipped={report.skipped_actions}</span>
+                  <span className="text-warning whitespace-nowrap">
+                    · skipped={report.skipped_actions}
+                  </span>
                 ) : null}
               </div>
             )}
@@ -348,7 +377,8 @@ export default function CurationPanel({
 
             {!report && !loading && (
               <p className="text-xs text-text-tertiary shrink-0">
-                Click <span className="text-text-secondary">Preview</span> to see proposed maintenance actions.
+                Click <span className="text-text-secondary">Preview</span> to
+                see proposed maintenance actions.
               </p>
             )}
 
@@ -407,21 +437,11 @@ export default function CurationPanel({
           </div>
         ) : null}
 
-        {activeTab === "history" ? (
-          <CurationHistoryPanel
-            report={report}
-            previewSavedAt={previewSavedAt}
-            previewStale={previewStale}
-            previewStaleReason={previewStaleReason}
-            actionsLength={actions.length}
-            actionCounts={actionCounts}
-            diagnosticCounts={diagnosticCounts}
-            isPlan={isPlan}
+        {activeTab === "automation" ? (
+          <CurationAutomationPanel
             status={status}
             statusLoading={statusLoading}
             statusError={statusError}
-            oplog={oplog}
-            oplogError={oplogError}
             automationRuns={automationRuns}
             automationRunsError={automationRunsError}
             automationRunActioning={automationRunActioning}
@@ -430,20 +450,6 @@ export default function CurationPanel({
             automationRunArtifact={automationRunArtifact}
             automationRunArtifactLoading={automationRunArtifactLoading}
             automationRunArtifactError={automationRunArtifactError}
-            factProposals={factProposals}
-            factProposalsLoading={factProposalsLoading}
-            factProposalsError={factProposalsError}
-            factProposalActioning={factProposalActioning}
-            managedSkills={managedSkills}
-            selectedManagedSkillId={selectedManagedSkillId}
-            selectedManagedSkill={selectedManagedSkill}
-            selectedUsage={selectedUsage}
-            selectedRecommendation={selectedRecommendation}
-            selectedImprovementRecommendation={selectedImprovementRecommendation}
-            managedSkillsLoading={managedSkillsLoading}
-            managedSkillsError={managedSkillsError}
-            managedSkillActioning={managedSkillActioning}
-            managedSkillExports={managedSkillExports}
             configDraft={configDraft}
             configLoading={configLoading}
             configSaving={configSaving}
@@ -463,16 +469,10 @@ export default function CurationPanel({
             automationTaskLabel={automationTaskLabel}
             taskFieldError={taskFieldError}
             loadStatus={loadStatus}
-            loadOplog={loadOplog}
             loadAutomationRuns={loadAutomationRuns}
             loadSchedulerStatus={loadSchedulerStatus}
             loadAutomationRunArtifact={loadAutomationRunArtifact}
-            loadFactProposals={loadFactProposals}
-            loadManagedSkills={loadManagedSkills}
-            loadManagedSkill={loadManagedSkill}
             runAutomationTask={runAutomationTask}
-            runFactProposalAction={runFactProposalAction}
-            runManagedSkillAction={runManagedSkillAction}
             setSchedulerPaused={setSchedulerPaused}
             updateConfigDraft={updateConfigDraft}
             updateConfigTaskDraft={updateConfigTaskDraft}
@@ -482,6 +482,52 @@ export default function CurationPanel({
             saveConfigDraft={saveConfigDraft}
           />
         ) : null}
+
+        {activeTab === "proposals" ? (
+          <CurationProposalsPanel
+            factProposals={factProposals}
+            factProposalsLoading={factProposalsLoading}
+            factProposalsError={factProposalsError}
+            factProposalActioning={factProposalActioning}
+            managedSkills={managedSkills}
+            selectedManagedSkillId={selectedManagedSkillId}
+            selectedManagedSkill={selectedManagedSkill}
+            selectedUsage={selectedUsage}
+            selectedRecommendation={selectedRecommendation}
+            selectedImprovementRecommendation={
+              selectedImprovementRecommendation
+            }
+            managedSkillsLoading={managedSkillsLoading}
+            managedSkillsError={managedSkillsError}
+            managedSkillActioning={managedSkillActioning}
+            managedSkillExports={managedSkillExports}
+            loadFactProposals={loadFactProposals}
+            loadManagedSkills={loadManagedSkills}
+            loadManagedSkill={loadManagedSkill}
+            runFactProposalAction={runFactProposalAction}
+            runManagedSkillAction={runManagedSkillAction}
+          />
+        ) : null}
+
+        {activeTab === "history" ? (
+          <CurationHistoryPanel
+            report={report}
+            previewSavedAt={previewSavedAt}
+            previewStale={previewStale}
+            previewStaleReason={previewStaleReason}
+            actionsLength={actions.length}
+            actionCounts={actionCounts}
+            diagnosticCounts={diagnosticCounts}
+            isPlan={isPlan}
+            status={status}
+            statusLoading={statusLoading}
+            statusError={statusError}
+            oplog={oplog}
+            oplogError={oplogError}
+            loadStatus={loadStatus}
+            loadOplog={loadOplog}
+          />
+        ) : null}
       </CardContent>
 
       <InlineConfirm
@@ -500,9 +546,14 @@ export default function CurationPanel({
           ) : (
             <div className="grid grid-cols-2 gap-x-3 gap-y-1">
               {confirmGroupCounts.map(([label, count]) => (
-                <div key={label} className="flex items-center justify-between gap-2">
+                <div
+                  key={label}
+                  className="flex items-center justify-between gap-2"
+                >
                   <span className="text-text-tertiary">{label}</span>
-                  <span className="font-mono-ui text-text-secondary">{count}</span>
+                  <span className="font-mono-ui text-text-secondary">
+                    {count}
+                  </span>
                 </div>
               ))}
             </div>