chore: snapshot workflow migration progress

2026-04-12 11:49:04 +02:00
parent 0cd02513d5
commit 3e810c74a3
163 changed files with 31774 additions and 2753 deletions
@@ -0,0 +1,83 @@
+import { Boxes, Wand2 } from 'lucide-react'
+
+import type { WorkflowNodeDefinition } from '../../api/workflows'
+import type { WorkflowGraphFamily } from './workflowNodeLibrary'
+import { getWorkflowAuthoringPlan } from './workflowAuthoringGuidance'
+import type { WorkflowModuleBundleId } from './workflowModuleBundles'
+
+type WorkflowModuleBundlePanelProps = {
+  definitions: WorkflowNodeDefinition[]
+  graphFamily: WorkflowGraphFamily
+  activeSteps: string[]
+  onInsertModule?: (bundleId: WorkflowModuleBundleId) => void
+}
+
+export function WorkflowModuleBundlePanel({
+  definitions,
+  graphFamily,
+  activeSteps,
+  onInsertModule,
+}: WorkflowModuleBundlePanelProps) {
+  const { moduleBundles } = getWorkflowAuthoringPlan(definitions, graphFamily, activeSteps)
+
+  if (moduleBundles.length === 0) return null
+
+  return (
+    <div className="space-y-2 rounded-2xl border border-border-default bg-surface-hover/30 p-3">
+      <div className="flex items-start justify-between gap-3">
+        <div>
+          <div className="flex items-center gap-2">
+            <Boxes size={14} className="text-accent" />
+            <p className="text-xs font-semibold uppercase tracking-wide text-content-secondary">
+              Production Modules
+            </p>
+          </div>
+          <p className="mt-1 text-xs text-content-muted">
+            Insert reusable subgraphs for core production stages instead of assembling every node from scratch.
+          </p>
+        </div>
+        <span className="rounded-full border border-border-default bg-surface px-2 py-0.5 text-[11px] text-content-muted">
+          {moduleBundles.length} bundles
+        </span>
+      </div>
+
+      <div className="space-y-2">
+        {moduleBundles.map(bundle => (
+            <div
+              key={bundle.id}
+              className="rounded-2xl border border-border-default bg-surface px-3 py-3"
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div className="space-y-1">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <p className="text-sm font-semibold text-content">{bundle.label}</p>
+                    <span className="rounded-full bg-surface-hover px-2 py-0.5 text-[11px] font-medium text-content-secondary">
+                      {bundle.stage}
+                    </span>
+                    <span className="rounded-full bg-surface-hover px-2 py-0.5 text-[11px] text-content-muted">
+                      {bundle.presentCount}/{bundle.totalCount} present
+                    </span>
+                  </div>
+                  <p className="text-xs text-content-muted">{bundle.description}</p>
+                  <p className="text-[11px] text-content-muted">
+                    {bundle.stepIds.join(' -> ')}
+                  </p>
+                </div>
+                {onInsertModule ? (
+                  <button
+                    type="button"
+                    onClick={() => onInsertModule(bundle.id)}
+                    aria-label={`Insert ${bundle.label}`}
+                    className="inline-flex items-center gap-1 rounded-xl bg-accent px-3 py-1.5 text-xs font-semibold text-white transition-colors hover:bg-accent-hover"
+                  >
+                    <Wand2 size={12} />
+                    Insert
+                  </button>
+                ) : null}
+              </div>
+            </div>
+        ))}
+      </div>
+    </div>
+  )
+}