Deploy Recon UI: consume new recon APIs with streaming results and action matrix

server/web/src/components/Recon/PlaybookWizardModal.tsx

@@ -0,0 +1,48 @@
+import { memo } from 'react';
+import { HelpTip } from '../HelpTip';
+import type { PlaybookTreeNode } from '../../help/deployRecon';
+
+export default memo(function PlaybookWizardModal({
+  open,
+  onClose,
+  tree,
+  focusLane,
+}: {
+  open: boolean;
+  onClose: () => void;
+  tree: PlaybookTreeNode[];
+  focusLane?: string;
+}) {
+  if (!open) return null;
+  const root = tree[0];
+  return (
+    <div className="dr-modal-backdrop" role="dialog" aria-modal="true" data-testid="dr-playbook-modal">
+      <div className="dr-modal">
+        <div className="dr-modal-head">
+          <h2>Playbook wizard <HelpTip field="dr_playbook_wizard" /></h2>
+          <button type="button" className="btn btn-outline btn-sm" onClick={onClose}>
+            Close
+          </button>
+        </div>
+        {root ? (
+          <div className="dr-playbook-tree">
+            <p className="dr-playbook-root">
+              Target <span className="font-tech">{root.label}</span>
+            </p>
+            <ul>
+              {(root.children ?? []).map((node) => (
+                <li key={node.id} className={focusLane === node.id ? 'focused' : ''}>
+                  <a href={node.href} target="_blank" rel="noreferrer">
+                    {node.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ) : (
+          <p className="dr-empty">Run a scan to populate spread lanes.</p>
+        )}
+      </div>
+    </div>
+  );
+});