@nextworks/blocks-templates 0.2.0-alpha.13 → 0.2.0-alpha.14

package/dist/templates/aiworkflow/components/Hero.jsx

@@ -4,591 +4,839 @@
 import { HeroProductDemo } from "@nextworks/blocks-sections";
 const scenarios = [
     {
-        key: "intake-triage",
-        label: "Intake & triage",
-        description: "AI turns (test ) revenue operations request into a routed workflow with approvals and live context.",
+        key: "fix-auth-flow",
+        label: "Coding agent",
+        description: "Choose a repo task and watch the agent inspect code, apply edits, and update the diff.",
         activeWindow: "workflowStudio",
+        playback: {
+            workflowStudio: {
+                playbackStepDurationsMs: [780, 860, 1480, 1120, 940, 760, 1720],
+                playbackResetDelayMs: 2200,
+            },
+            runConsole: {
+                playbackStepDurationsMs: [1260, 1540, 980, 760, 680, 620, 1380],
+                playbackResetDelayMs: 2200,
+                playbackStepEntryIndices: [0, 0, 1, 1, 2, 2, 2, 2, 3],
+                playbackStepVisibleLineCounts: [2, 2, 3, 4, 6, 9, 12, 15, 16],
+            },
+        },
+        taskList: {
+            window: {
+                key: "taskList",
+                title: "Tasks",
+                subtitle: "Current workspace",
+                status: { label: "3 tasks", tone: "info" },
+            },
+            title: "Agent tasks",
+            subtitle: "Select a coding task to inspect and execute.",
+            activeItemId: "fix-auth-flow",
+            items: [
+                {
+                    id: "fix-auth-flow",
+                    title: "Fix auth flow",
+                    description: "Fix the post-login redirect after the OAuth callback.",
+                    meta: "apps/web · active",
+                },
+                {
+                    id: "refactor-pricing-page",
+                    title: "Refactor pricing page",
+                    description: "Extract repeated pricing sections into reusable components.",
+                    meta: "marketing site · queued",
+                },
+                {
+                    id: "ship-command-palette",
+                    title: "Ship command palette",
+                    description: "Add global search, shortcuts, and action routing.",
+                    meta: "dashboard · ready",
+                },
+            ],
+        },
         workflowStudio: {
             window: {
                 key: "workflowStudio",
-                title: "Workflow Studio",
-                subtitle: "Request intake",
-                status: { label: "Drafting", tone: "info" },
-                badge: "Scenario 01",
-                layoutHint: {
-                    x: 0,
-                    y: 0,
-                    width: 62,
-                    height: 72,
-                    zIndex: 40,
-                    rotateDeg: -2,
-                },
+                title: "Agent",
+                subtitle: "Active session",
+                status: { label: "Thinking", tone: "info" },
             },
-            title: "New request → launch expansion campaign",
-            subtitle: "AI maps triggers, owners, systems, and approval checkpoints before launch.",
-            activeNodeId: "route-approval",
-            activeRegionId: "handoffs",
-            highlights: [
-                { id: "route-approval", label: "Approval routing", tone: "accent" },
-                { id: "crm-sync", label: "CRM sync", tone: "info" },
-            ],
-            nodes: [
+            title: "Investigating redirect bug",
+            subtitle: "The agent inspects the callback and prepares a safe patch.",
+            activeNodeId: "edit-callback",
+            transcript: [
+                { id: "auth-title", kind: "title", text: "Fix auth flow" },
                 {
-                    id: "request-intake",
-                    label: "Parse request",
-                    description: "Extract goal, audience, budget, and timing from Slack.",
-                    type: "AI",
-                    status: "success",
-                    metadata: "Slack → structured brief",
+                    id: "auth-prompt",
+                    kind: "prompt",
+                    text: "Fix the OAuth callback redirect so the app preserves the intended destination after sign-in.",
                 },
                 {
-                    id: "policy-check",
-                    label: "Check playbooks",
-                    description: "Validate budget thresholds and required approvers.",
-                    type: "Guardrail",
-                    status: "success",
-                    metadata: "Policy set v3.2",
+                    id: "auth-read-1",
+                    kind: "activity",
+                    text: "Read app/auth/callback/page.tsx",
                 },
                 {
-                    id: "route-approval",
-                    label: "Route approval",
-                    description: "Send legal + finance review in parallel with due dates.",
-                    type: "Approval",
-                    status: "warning",
-                    active: true,
-                    emphasized: true,
-                    metadata: "2 approvers pending",
+                    id: "auth-file-1",
+                    kind: "file",
+                    path: "app/auth/callback/page.tsx",
+                    text: "app/auth/callback/page.tsx",
+                    added: 14,
+                    removed: 3,
                 },
                 {
-                    id: "crm-sync",
-                    label: "Update CRM",
-                    description: "Create campaign and account tasks once approved.",
-                    type: "Action",
-                    status: "neutral",
-                    metadata: "HubSpot + Salesforce",
+                    id: "auth-file-2",
+                    kind: "file",
+                    path: "lib/auth/normalize-return-to.ts",
+                    text: "lib/auth/normalize-return-to.ts",
+                    added: 6,
+                    removed: 1,
                 },
-            ],
-            branches: [
                 {
-                    id: "b1",
-                    fromNodeId: "request-intake",
-                    toNodeId: "policy-check",
-                    status: "success",
-                    active: true,
+                    id: "auth-run-1",
+                    kind: "activity",
+                    text: "Run redirect scenarios for nested routes and invalid returnTo values",
                 },
                 {
-                    id: "b2",
-                    fromNodeId: "policy-check",
-                    toNodeId: "route-approval",
-                    label: "Budget > $25k",
-                    status: "warning",
-                    active: true,
+                    id: "auth-thought-1",
+                    kind: "thought",
+                    text: "Preserve same-origin destinations, drop empty values, and avoid redirecting twice after the callback completes.",
                 },
                 {
-                    id: "b3",
-                    fromNodeId: "route-approval",
-                    toNodeId: "crm-sync",
-                    label: "On approval",
-                    status: "neutral",
+                    id: "auth-message-1",
+                    kind: "message",
+                    text: "Patch keeps /dashboard/settings intact, falls back only when sanitize returns null, and records the redirect source for debugging.",
+                },
+                {
+                    id: "auth-run-2",
+                    kind: "activity",
+                    text: "Prepare regression notes for auth loop and malformed path checks",
                 },
             ],
-            regions: [
+            composer: {
+                placeholder: "Plan, inspect, or patch the next issue...",
+                modeLabel: "Agent",
+                modelLabel: "Sonnet",
+            },
+            highlights: [
+                { id: "inspect-route", label: "Read files", tone: "info" },
+                { id: "edit-callback", label: "Write patch", tone: "accent" },
+            ],
+            nodes: [
                 {
-                    id: "intake",
-                    label: "Intake",
-                    description: "AI request parsing and enrichment",
+                    id: "inspect-route",
+                    label: "Inspect auth callback",
+                    description: "Read callback handler and post-login redirect logic.",
+                    type: "Read",
                     status: "success",
-                    nodeIds: ["request-intake", "policy-check"],
+                    metadata: "app/auth/callback/page.tsx",
                 },
                 {
-                    id: "handoffs",
-                    label: "Handoffs",
-                    description: "Approval routing and downstream actions",
-                    status: "warning",
-                    nodeIds: ["route-approval", "crm-sync"],
+                    id: "trace-session",
+                    label: "Trace session state",
+                    description: "Verify redirect target after token exchange completes.",
+                    type: "Analyze",
+                    status: "success",
+                    metadata: "session + router state",
+                },
+                {
+                    id: "edit-callback",
+                    label: "Patch redirect handling",
+                    type: "Edit",
+                    status: "info",
                     active: true,
-                    highlighted: true,
+                    emphasized: true,
+                    metadata: "drafting change set",
+                },
+                {
+                    id: "run-checks",
+                    label: "Run validation",
+                    description: "Check for auth loop regression and invalid destination paths.",
+                    type: "Verify",
+                    status: "neutral",
+                    metadata: "tests next",
                 },
             ],
         },
         runConsole: {
             window: {
                 key: "runConsole",
-                title: "Live Run",
-                subtitle: "Execution feed",
-                status: { label: "Streaming", tone: "info" },
-                badge: "24 events",
-                layoutHint: {
-                    x: 50,
-                    y: 12,
-                    width: 44,
-                    height: 52,
-                    zIndex: 30,
-                    rotateDeg: 2,
-                },
+                title: "Editor",
+                subtitle: "Live diff",
+                status: { label: "Updating", tone: "info" },
             },
-            title: "AI orchestration log",
-            subtitle: "Every step is visible, timed, and recoverable.",
-            statusLabel: "Awaiting approvals",
-            progressLabel: "3 of 5 steps complete",
-            progressPercent: 64,
-            activeEntryId: "log-3",
+            title: "app/auth/callback/page.tsx",
+            subtitle: "The diff updates as the agent writes the patch.",
+            statusLabel: "Applying patch",
+            progressLabel: "17 lines changed",
+            progressPercent: 68,
+            activeEntryId: "diff-3",
+            editorTabLabel: "page.tsx",
+            editorLanguage: "TypeScript",
+            editorSummary: "Guard empty return paths and preserve intended destination.",
             entries: [
                 {
-                    id: "log-1",
-                    message: "Parsed inbound request from #revops-priority",
-                    timestamp: "09:14",
-                    source: "Slack",
+                    id: "diff-1",
+                    message: "Opened callback page and redirect helper",
+                    timestamp: "11:02",
+                    source: "agent",
                     status: "success",
                 },
                 {
-                    id: "log-2",
-                    message: "Matched campaign launch playbook and risk policy",
-                    timestamp: "09:14",
-                    source: "Policy Engine",
+                    id: "diff-2",
+                    message: "Found empty redirect path after OAuth callback",
+                    timestamp: "11:02",
+                    source: "analysis",
                     status: "success",
+                    detail: "Fallback was defaulting too early and dropping intended destination.",
                 },
                 {
-                    id: "log-3",
-                    message: "Opened approval tasks for finance and legal",
-                    timestamp: "09:15",
-                    source: "Approval Router",
-                    status: "warning",
+                    id: "diff-3",
+                    message: "Writing guarded redirect with preserved returnTo",
+                    timestamp: "11:03",
+                    source: "editor",
+                    status: "info",
                     highlighted: true,
-                    detail: "Due in 2h • fallback escalation enabled",
+                    lineNumber: "38",
+                    code: [
+                        " const safeReturnTo = normalizeReturnTo(searchParams.get('returnTo'))",
+                        "+const shouldTrackRedirect = safeReturnTo !== null",
+                        "+const fallbackDestination = '/dashboard'",
+                        " const destination = safeReturnTo ?? '/dashboard'",
+                        "+const nextPath = destination || fallbackDestination",
+                        "+const redirectSource = safeReturnTo ? 'return_to' : 'fallback'",
+                        " ",
+                        "+if (!nextPath.startsWith('/')) {",
+                        "+  router.replace(fallbackDestination)",
+                        "+  return null",
+                        "+}",
+                        "-router.replace('/dashboard')",
+                        "+router.replace(nextPath)",
+                        "+if (shouldTrackRedirect) trackAuthRedirect(nextPath, redirectSource)",
+                        "+logAuthNavigation('oauth_callback_redirect', { destination: nextPath })",
+                        " return null",
+                    ],
                 },
                 {
-                    id: "log-4",
-                    message: "Prepared CRM updates and downstream notifications",
-                    timestamp: "09:15",
-                    source: "Workflow Engine",
-                    status: "info",
+                    id: "diff-4",
+                    message: "Validated redirect to /dashboard/settings",
+                    timestamp: "11:03",
+                    source: "preview",
+                    status: "neutral",
                 },
             ],
             metrics: [
-                { id: "m1", label: "Latency", value: "1.8s", tone: "success" },
-                { id: "m2", label: "Systems", value: "6", tone: "info" },
-                { id: "m3", label: "Fallbacks", value: "0", tone: "success" },
+                { id: "m1", label: "Files", value: "2", tone: "success" },
+                { id: "m2", label: "Edits", value: "12", tone: "info" },
+                { id: "m3", label: "Checks", value: "1/2", tone: "warning" },
             ],
-            highlights: [{ id: "log-3", label: "Approval handoff", tone: "warning" }],
+            highlights: [],
         },
         approvalInbox: {
             window: {
                 key: "approvalInbox",
-                title: "Approval Inbox",
-                subtitle: "Decisions",
-                status: { label: "Needs review", tone: "warning" },
-                badge: "2 pending",
-                layoutHint: {
-                    x: 8,
-                    y: 56,
-                    width: 38,
-                    height: 38,
-                    zIndex: 20,
-                    rotateDeg: 1,
-                },
+                title: "Hidden",
             },
-            title: "High-confidence approvals",
-            subtitle: "Review only where policy requires human sign-off.",
-            activeItemId: "approval-1",
-            counts: [
-                { id: "c1", label: "Pending", value: "2", tone: "warning" },
-                { id: "c2", label: "Auto-approved", value: "14", tone: "success" },
-                { id: "c3", label: "Escalated", value: "0", tone: "info" },
-            ],
-            items: [
-                {
-                    id: "approval-1",
-                    title: "Budget increase for EMEA launch",
-                    description: "AI recommends +18% budget based on forecasted pipeline lift.",
-                    requester: "Growth workflow",
-                    status: "warning",
-                    priorityLabel: "High impact",
-                    dueLabel: "Due in 2h",
-                    highlighted: true,
-                    actions: [
-                        { id: "a1", label: "Approve", tone: "success" },
-                        { id: "a2", label: "Request change", tone: "warning" },
-                    ],
-                },
-                {
-                    id: "approval-2",
-                    title: "Legal review for new vendor terms",
-                    description: "Generated summary attached with highlighted clause changes.",
-                    requester: "Procurement workflow",
-                    status: "info",
-                    priorityLabel: "Standard",
-                    dueLabel: "Today",
-                },
-            ],
-            highlights: [
-                { id: "approval-1", label: "Priority approval", tone: "accent" },
-            ],
+            items: [],
         },
         knowledgePanel: {
             window: {
                 key: "knowledgePanel",
                 title: "Knowledge",
-                subtitle: "Grounding",
-                status: { label: "Synced", tone: "success" },
-                badge: "12 sources",
-                layoutHint: {
-                    x: 58,
-                    y: 56,
-                    width: 36,
-                    height: 36,
-                    zIndex: 10,
-                    rotateDeg: -1,
-                },
+                subtitle: "Preview",
+                status: { label: "Ready", tone: "success" },
             },
-            title: "Context behind every action",
-            subtitle: "AI cites policies, customer context, and prior outcomes before it acts.",
-            query: "Which approvals are required for a regional budget expansion over $25k?",
-            summary: "Finance and legal approval are required when forecasted spend exceeds threshold and vendor terms change.",
-            sources: [
-                { id: "s1", label: "Budget Policy", kind: "Policy", status: "success" },
-                { id: "s2", label: "Vendor Terms", kind: "Contract", status: "info" },
-                {
-                    id: "s3",
-                    label: "Campaign Playbook",
-                    kind: "Runbook",
-                    status: "success",
-                },
-            ],
-            activeSnippetId: "snippet-1",
+            title: "Patch preview",
+            subtitle: "Show the code the agent is producing right now.",
+            query: "page.tsx",
+            summary: "Redirects now preserve a sanitized returnTo destination and fall back only when needed.",
             snippets: [
                 {
                     id: "snippet-1",
-                    title: "Budget threshold rule",
-                    content: "Campaigns above $25k require finance approval. Add legal review when vendor commitments or contractual language change.",
-                    sourceId: "s1",
-                    confidence: "98% match",
-                    excerptLabel: "Recommended policy",
-                    tags: ["finance", "approval routing"],
+                    title: "Updated callback handler",
+                    excerptLabel: "Live diff",
+                    confidence: "12 changed lines",
                     highlighted: true,
-                },
-                {
-                    id: "snippet-2",
-                    title: "Previous launch outcome",
-                    content: "Similar EMEA launch workflows reduced manual routing time by 72% while keeping audit logs intact.",
-                    sourceId: "s3",
-                    confidence: "Historical pattern",
-                    tags: ["benchmark", "ops efficiency"],
+                    content: "const safeReturnTo = normalizeReturnTo(searchParams.get('returnTo'))\nconst destination = safeReturnTo ?? '/dashboard'\nrouter.replace(destination)",
+                    tags: ["redirect", "auth", "callback"],
                 },
             ],
             highlights: [
-                { id: "snippet-1", label: "Policy citation", tone: "success" },
+                { id: "snippet-1", label: "Generated code", tone: "success" },
             ],
         },
         highlights: [
-            { id: "route-approval", label: "Approval branch", tone: "accent" },
-            { id: "approval-1", label: "Human checkpoint", tone: "warning" },
+            { id: "edit-callback", label: "Active edit", tone: "accent" },
+            { id: "diff-3", label: "Result updates", tone: "info" },
         ],
     },
     {
-        key: "run-sync",
-        label: "Live execution",
-        description: "Once approved, AI updates systems, posts status, and keeps teams synced in real time.",
-        activeWindow: "runConsole",
+        key: "refactor-pricing-page",
+        label: "Coding agent",
+        description: "Choose a repo task and watch the agent inspect code, apply edits, and update the diff.",
+        activeWindow: "workflowStudio",
+        playback: {
+            workflowStudio: {
+                playbackStepDurationsMs: [820, 920, 1380, 1180, 980, 840, 1640],
+                playbackResetDelayMs: 2200,
+            },
+            runConsole: {
+                playbackStepDurationsMs: [1320, 1480, 920, 760, 700, 660, 1320],
+                playbackResetDelayMs: 2200,
+                playbackStepEntryIndices: [0, 0, 1, 1, 2, 2, 2, 3, 3],
+                playbackStepVisibleLineCounts: [2, 2, 3, 4, 5, 7, 9, 11, 11],
+            },
+        },
+        taskList: {
+            window: {
+                key: "taskList",
+                title: "Tasks",
+                subtitle: "Current workspace",
+                status: { label: "3 tasks", tone: "info" },
+            },
+            title: "Agent tasks",
+            subtitle: "Select a coding task to inspect and execute.",
+            activeItemId: "refactor-pricing-page",
+            items: [
+                {
+                    id: "fix-auth-flow",
+                    title: "Fix auth flow",
+                    description: "Fix the post-login redirect after the OAuth callback.",
+                    meta: "apps/web · active",
+                },
+                {
+                    id: "refactor-pricing-page",
+                    title: "Refactor pricing page",
+                    description: "Extract repeated pricing sections into reusable components.",
+                    meta: "marketing site · queued",
+                },
+                {
+                    id: "ship-command-palette",
+                    title: "Ship command palette",
+                    description: "Add global search, shortcuts, and action routing.",
+                    meta: "dashboard · ready",
+                },
+            ],
+        },
         workflowStudio: {
             window: {
                 key: "workflowStudio",
-                title: "Workflow Studio",
-                subtitle: "Approved flow",
-                status: { label: "Executing", tone: "success" },
-                badge: "Scenario 02",
-                layoutHint: {
-                    x: 0,
-                    y: 0,
-                    width: 62,
-                    height: 72,
-                    zIndex: 30,
-                    rotateDeg: -2,
+                title: "Agent",
+                subtitle: "Active session",
+                status: { label: "Planning", tone: "info" },
+            },
+            title: "Extracting pricing sections",
+            subtitle: "The agent maps repeated UI and rewires the page composition.",
+            activeNodeId: "create-blocks",
+            transcript: [
+                { id: "pricing-title", kind: "title", text: "Refactor pricing page" },
+                {
+                    id: "pricing-prompt",
+                    kind: "prompt",
+                    text: "Extract the pricing page into reusable sections without changing the visual output.",
+                },
+                {
+                    id: "pricing-read-1",
+                    kind: "activity",
+                    text: "Read app/(marketing)/pricing/page.tsx",
+                },
+                {
+                    id: "pricing-file-1",
+                    kind: "file",
+                    path: "components/pricing/PricingTiers.tsx",
+                    text: "components/pricing/PricingTiers.tsx",
+                    added: 52,
+                    removed: 0,
+                },
+                {
+                    id: "pricing-file-2",
+                    kind: "file",
+                    path: "app/(marketing)/pricing/page.tsx",
+                    text: "app/(marketing)/pricing/page.tsx",
+                    added: 18,
+                    removed: 34,
+                },
+                {
+                    id: "pricing-run-1",
+                    kind: "activity",
+                    text: "Move the tier grid wrapper into PricingTiers and normalize the plans prop shape",
+                },
+                {
+                    id: "pricing-thought-1",
+                    kind: "thought",
+                    text: "Keep the visual output identical by preserving card order, CTA copy, and the existing spacing classes.",
+                },
+                {
+                    id: "pricing-message-1",
+                    kind: "message",
+                    text: "The page entry now composes extracted sections while shared pricing data stays centralized and easier to extend.",
                 },
+                {
+                    id: "pricing-run-2",
+                    kind: "activity",
+                    text: "Compare extracted markup against the original layout before final cleanup",
+                },
+            ],
+            composer: {
+                placeholder: "Plan, search, or restructure the page...",
+                modeLabel: "Agent",
+                modelLabel: "Sonnet",
             },
-            title: "Approved workflow in motion",
-            subtitle: "The same flow now drives tool updates, notifications, and handoffs automatically.",
-            activeNodeId: "notify-teams",
+            highlights: [
+                { id: "scan-page", label: "Find repetition", tone: "info" },
+                { id: "create-blocks", label: "Extract components", tone: "accent" },
+            ],
             nodes: [
                 {
-                    id: "approval-complete",
-                    label: "Approvals cleared",
-                    description: "Finance and legal sign-off recorded.",
-                    type: "Checkpoint",
+                    id: "scan-page",
+                    label: "Scan pricing page",
+                    description: "Detect repeated tier, feature, and CTA structures.",
+                    type: "Read",
                     status: "success",
-                    metadata: "2/2 approved",
+                    metadata: "app/(marketing)/pricing/page.tsx",
                 },
                 {
-                    id: "update-crm",
-                    label: "Update CRM",
-                    description: "Sync campaign fields, account owners, and target lists.",
-                    type: "Action",
+                    id: "map-sections",
+                    label: "Map component boundaries",
+                    description: "Group hero, tiers, FAQ, and comparison table logic.",
+                    type: "Analyze",
                     status: "success",
-                    metadata: "HubSpot + Salesforce",
+                    metadata: "4 extractable sections",
                 },
                 {
-                    id: "notify-teams",
-                    label: "Notify teams",
-                    description: "Post launch brief and tasks to GTM channels.",
-                    type: "Action",
+                    id: "create-blocks",
+                    label: "Create reusable blocks",
+                    type: "Edit",
                     status: "info",
                     active: true,
                     emphasized: true,
-                    metadata: "Slack + Linear",
+                    metadata: "components/pricing/*",
                 },
                 {
-                    id: "monitor-results",
-                    label: "Monitor rollout",
-                    description: "Track errors, latency, and downstream completion.",
-                    type: "Observe",
+                    id: "trim-page",
+                    label: "Simplify page entry",
+                    description: "Reduce the page to composition and imported data.",
+                    type: "Verify",
                     status: "neutral",
-                    metadata: "Audit + telemetry",
+                    metadata: "cleanup pending",
                 },
             ],
-            branches: [
+        },
+        runConsole: {
+            window: {
+                key: "runConsole",
+                title: "Editor",
+                subtitle: "Component output",
+                status: { label: "Updating", tone: "info" },
+            },
+            title: "components/pricing/PricingTiers.tsx",
+            subtitle: "The diff updates as the extracted component takes shape.",
+            statusLabel: "Extracting components",
+            progressLabel: "3 files updated",
+            progressPercent: 59,
+            activeEntryId: "pricing-3",
+            editorTabLabel: "PricingTiers.tsx",
+            editorLanguage: "TSX",
+            editorSummary: "Move repeated pricing JSX into a reusable tiers component.",
+            entries: [
                 {
-                    id: "rb1",
-                    fromNodeId: "approval-complete",
-                    toNodeId: "update-crm",
+                    id: "pricing-1",
+                    message: "Found repeated tier markup and CTA footer",
+                    timestamp: "11:11",
+                    source: "agent",
                     status: "success",
-                    active: true,
                 },
                 {
-                    id: "rb2",
-                    fromNodeId: "update-crm",
-                    toNodeId: "notify-teams",
+                    id: "pricing-2",
+                    message: "Created shared types for pricing data and features",
+                    timestamp: "11:12",
+                    source: "editor",
+                    status: "success",
+                },
+                {
+                    id: "pricing-3",
+                    message: "Extracting PricingTiers component and props shape",
+                    timestamp: "11:12",
+                    source: "editor",
                     status: "info",
-                    active: true,
+                    highlighted: true,
+                    lineNumber: "18",
+                    code: [
+                        " export function PricingTiers({ plans }: PricingTiersProps) {",
+                        "-  return plans.map((plan) => (",
+                        "+  return (",
+                        "+    <div className='grid gap-6 lg:grid-cols-3'>",
+                        "+      {plans.map((plan) => (",
+                        "         <PricingCard key={plan.name} plan={plan} />",
+                        "+      ))}",
+                        "+    </div>",
+                        "-  ))",
+                        "+  )",
+                        " }",
+                    ],
                 },
                 {
-                    id: "rb3",
-                    fromNodeId: "notify-teams",
-                    toNodeId: "monitor-results",
+                    id: "pricing-4",
+                    message: "Updating page.tsx to compose extracted sections",
+                    timestamp: "11:13",
+                    source: "editor",
                     status: "neutral",
                 },
             ],
-            regions: [
+            metrics: [
+                { id: "pm1", label: "Files", value: "4", tone: "success" },
+                { id: "pm2", label: "Blocks", value: "3", tone: "info" },
+                { id: "pm3", label: "Dupes", value: "-38%", tone: "success" },
+            ],
+            highlights: [],
+        },
+        approvalInbox: {
+            window: {
+                key: "approvalInbox",
+                title: "Hidden",
+            },
+            items: [],
+        },
+        knowledgePanel: {
+            window: {
+                key: "knowledgePanel",
+                title: "Knowledge",
+                subtitle: "Preview",
+                status: { label: "Ready", tone: "success" },
+            },
+            title: "Component preview",
+            subtitle: "Show the extracted UI structure the agent is generating.",
+            query: "PricingTiers.tsx",
+            summary: "The page is being reduced to reusable blocks with shared data and a slimmer entry point.",
+            snippets: [
                 {
-                    id: "execution",
-                    label: "Execution lane",
-                    description: "System updates and notifications",
-                    status: "info",
-                    nodeIds: ["update-crm", "notify-teams", "monitor-results"],
-                    active: true,
+                    id: "pricing-snippet",
+                    title: "Extracted tier component",
+                    excerptLabel: "Live component",
+                    confidence: "3 components created",
                     highlighted: true,
+                    content: "export function PricingTiers({ plans }: PricingTiersProps) {\n  return plans.map((plan) => <PricingCard key={plan.name} plan={plan} />)\n}",
+                    tags: ["components", "refactor", "pricing"],
                 },
             ],
+            highlights: [
+                { id: "pricing-snippet", label: "Generated UI", tone: "success" },
+            ],
         },
-        runConsole: {
+        highlights: [
+            { id: "create-blocks", label: "Active extraction", tone: "accent" },
+            { id: "pricing-3", label: "Result updates", tone: "info" },
+        ],
+    },
+    {
+        key: "ship-command-palette",
+        label: "Coding agent",
+        description: "Choose a repo task and watch the agent inspect code, apply edits, and update the diff.",
+        activeWindow: "workflowStudio",
+        playback: {
+            workflowStudio: {
+                playbackStepDurationsMs: [760, 900, 1320, 1160, 920, 820, 1560],
+                playbackResetDelayMs: 2200,
+            },
+            runConsole: {
+                playbackStepDurationsMs: [1180, 1420, 940, 780, 700, 660, 1280],
+                playbackResetDelayMs: 2200,
+                playbackStepEntryIndices: [0, 0, 1, 1, 2, 2, 2, 3, 3],
+                playbackStepVisibleLineCounts: [2, 2, 3, 4, 6, 8, 10, 12, 12],
+            },
+        },
+        taskList: {
             window: {
-                key: "runConsole",
-                title: "Live Run",
-                subtitle: "Execution feed",
-                status: { label: "Healthy", tone: "success" },
-                badge: "42 events",
-                layoutHint: {
-                    x: 50,
-                    y: 10,
-                    width: 44,
-                    height: 54,
-                    zIndex: 40,
-                    rotateDeg: 2,
+                key: "taskList",
+                title: "Tasks",
+                subtitle: "Current workspace",
+                status: { label: "3 tasks", tone: "info" },
+            },
+            title: "Agent tasks",
+            subtitle: "Select a coding task to inspect and execute.",
+            activeItemId: "ship-command-palette",
+            items: [
+                {
+                    id: "fix-auth-flow",
+                    title: "Fix auth flow",
+                    description: "Fix the post-login redirect after the OAuth callback.",
+                    meta: "apps/web · active",
+                },
+                {
+                    id: "refactor-pricing-page",
+                    title: "Refactor pricing page",
+                    description: "Extract repeated pricing sections into reusable components.",
+                    meta: "marketing site · queued",
+                },
+                {
+                    id: "ship-command-palette",
+                    title: "Ship command palette",
+                    description: "Add global search, shortcuts, and action routing.",
+                    meta: "dashboard · ready",
                 },
+            ],
+        },
+        workflowStudio: {
+            window: {
+                key: "workflowStudio",
+                title: "Agent",
+                subtitle: "Active session",
+                status: { label: "Building", tone: "info" },
             },
-            title: "Everything updates in sequence",
-            subtitle: "Users see the workflow advance without digging through logs or scripts.",
-            statusLabel: "Running smoothly",
-            progressLabel: "5 of 6 steps complete",
-            progressPercent: 86,
-            activeEntryId: "exec-4",
-            entries: [
+            title: "Adding command palette",
+            subtitle: "The agent wires shortcuts and fast navigation into one flow.",
+            activeNodeId: "wire-shortcuts",
+            transcript: [
+                { id: "cmd-title", kind: "title", text: "Ship command palette" },
+                {
+                    id: "cmd-prompt",
+                    kind: "prompt",
+                    text: "Add a command palette with global shortcut support, grouped actions, and fast route switching.",
+                },
+                {
+                    id: "cmd-read-1",
+                    kind: "activity",
+                    text: "Read app/dashboard/layout.tsx",
+                },
                 {
-                    id: "exec-1",
-                    message: "Recorded finance and legal approval payloads",
-                    timestamp: "09:18",
-                    source: "Approval Router",
+                    id: "cmd-file-1",
+                    kind: "file",
+                    path: "components/command-menu.tsx",
+                    text: "components/command-menu.tsx",
+                    added: 27,
+                    removed: 4,
+                },
+                {
+                    id: "cmd-file-2",
+                    kind: "file",
+                    path: "app/dashboard/layout.tsx",
+                    text: "app/dashboard/layout.tsx",
+                    added: 9,
+                    removed: 1,
+                },
+                {
+                    id: "cmd-run-1",
+                    kind: "activity",
+                    text: "Index route actions and quick commands so grouped search stays responsive",
+                },
+                {
+                    id: "cmd-thought-1",
+                    kind: "thought",
+                    text: "The global shortcut should ignore focused text inputs and always remove its keydown listener on unmount.",
+                },
+                {
+                    id: "cmd-message-1",
+                    kind: "message",
+                    text: "Palette now opens globally, keeps grouped actions discoverable, and routes immediately after a selection.",
+                },
+                {
+                    id: "cmd-run-2",
+                    kind: "activity",
+                    text: "Validate keyboard open-close flow, route jumps, and the empty search state",
+                },
+            ],
+            composer: {
+                placeholder: "Ask the agent to search, wire, or ship...",
+                modeLabel: "Agent",
+                modelLabel: "Sonnet",
+            },
+            highlights: [
+                { id: "inspect-layout", label: "Inspect layout", tone: "info" },
+                { id: "wire-shortcuts", label: "Add shortcuts", tone: "accent" },
+            ],
+            nodes: [
+                {
+                    id: "inspect-layout",
+                    label: "Inspect app shell",
+                    description: "Find the dashboard layout, nav state, and modal primitives.",
+                    type: "Read",
                     status: "success",
+                    metadata: "dashboard shell",
                 },
                 {
-                    id: "exec-2",
-                    message: "Updated 38 CRM records and created launch tasks",
-                    timestamp: "09:18",
-                    source: "CRM Sync",
+                    id: "gather-actions",
+                    label: "Collect command actions",
+                    description: "Build a searchable list of routes and common actions.",
+                    type: "Analyze",
                     status: "success",
-                    detail: "0 conflicts detected",
+                    metadata: "12 candidate commands",
                 },
                 {
-                    id: "exec-3",
-                    message: "Published launch brief to #gtm-launch and created Linear checklist",
-                    timestamp: "09:19",
-                    source: "Notifier",
+                    id: "wire-shortcuts",
+                    label: "Wire keyboard shortcuts",
+                    type: "Edit",
                     status: "info",
+                    active: true,
+                    emphasized: true,
+                    metadata: "keydown + dialog state",
                 },
                 {
-                    id: "exec-4",
-                    message: "Monitoring downstream task completion and SLA risk",
-                    timestamp: "09:19",
-                    source: "Observer",
-                    status: "success",
-                    highlighted: true,
-                    detail: "Auto-escalation armed if blockers appear",
+                    id: "polish-results",
+                    label: "Polish result list",
+                    description: "Add grouping, empty state, and active selection feedback.",
+                    type: "Verify",
+                    status: "neutral",
+                    metadata: "UX pass next",
                 },
             ],
-            metrics: [
-                { id: "rm1", label: "Tasks created", value: "18", tone: "success" },
-                { id: "rm2", label: "Records updated", value: "38", tone: "info" },
-                { id: "rm3", label: "Errors", value: "0", tone: "success" },
-            ],
-            highlights: [{ id: "exec-4", label: "Live monitoring", tone: "success" }],
         },
-        approvalInbox: {
+        runConsole: {
             window: {
-                key: "approvalInbox",
-                title: "Approval Inbox",
-                subtitle: "Audit trail",
-                status: { label: "Clear", tone: "success" },
-                badge: "0 pending",
-                layoutHint: {
-                    x: 10,
-                    y: 58,
-                    width: 36,
-                    height: 34,
-                    zIndex: 20,
-                    rotateDeg: 1,
-                },
+                key: "runConsole",
+                title: "Editor",
+                subtitle: "UI output",
+                status: { label: "Updating", tone: "info" },
             },
-            title: "Approvals only when needed",
-            subtitle: "Human review is targeted, auditable, and out of the critical path once complete.",
-            counts: [
-                { id: "rc1", label: "Pending", value: "0", tone: "success" },
-                { id: "rc2", label: "Completed", value: "8", tone: "info" },
-                { id: "rc3", label: "Auto-approved", value: "22", tone: "success" },
-            ],
-            items: [
+            title: "components/command-menu.tsx",
+            subtitle: "The diff updates as the command palette is wired into the app shell.",
+            statusLabel: "Wiring command palette",
+            progressLabel: "8 commands indexed",
+            progressPercent: 73,
+            activeEntryId: "cmd-3",
+            editorTabLabel: "command-menu.tsx",
+            editorLanguage: "TSX",
+            editorSummary: "Wire a global shortcut and searchable action list into the dashboard shell.",
+            entries: [
                 {
-                    id: "approval-done-1",
-                    title: "Finance approval recorded",
-                    description: "Budget threshold exception approved with full audit log.",
-                    requester: "Growth workflow",
+                    id: "cmd-1",
+                    message: "Opened dialog primitive and dashboard nav state",
+                    timestamp: "11:21",
+                    source: "agent",
                     status: "success",
-                    priorityLabel: "Complete",
-                    dueLabel: "09:17",
                 },
                 {
-                    id: "approval-done-2",
-                    title: "Legal review completed",
-                    description: "Clause changes accepted and attached to workflow record.",
-                    requester: "Procurement workflow",
+                    id: "cmd-2",
+                    message: "Generated grouped command list and action search",
+                    timestamp: "11:22",
+                    source: "editor",
                     status: "success",
-                    priorityLabel: "Complete",
-                    dueLabel: "09:18",
+                },
+                {
+                    id: "cmd-3",
+                    message: "Binding Cmd+K to open the command menu globally",
+                    timestamp: "11:22",
+                    source: "editor",
+                    status: "info",
+                    highlighted: true,
+                    lineNumber: "27",
+                    code: [
+                        " useEffect(() => {",
+                        "+  const handleKeyDown = (event: KeyboardEvent) => {",
+                        "+    if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {",
+                        "+      event.preventDefault()",
+                        "+      setOpen((current) => !current)",
+                        "+    }",
+                        "+  }",
+                        "-  window.addEventListener('keydown', onKeyDown)",
+                        "+  window.addEventListener('keydown', handleKeyDown)",
+                        "-  return () => window.removeEventListener('keydown', onKeyDown)",
+                        "+  return () => window.removeEventListener('keydown', handleKeyDown)",
+                        " }, [])",
+                    ],
+                },
+                {
+                    id: "cmd-4",
+                    message: "Validated route jump and quick action execution",
+                    timestamp: "11:23",
+                    source: "preview",
+                    status: "neutral",
                 },
             ],
+            metrics: [
+                { id: "cm1", label: "Commands", value: "8", tone: "info" },
+                { id: "cm2", label: "Routes", value: "5", tone: "success" },
+                { id: "cm3", label: "Shortcut", value: "Cmd+K", tone: "success" },
+            ],
+            highlights: [],
+        },
+        approvalInbox: {
+            window: {
+                key: "approvalInbox",
+                title: "Hidden",
+            },
+            items: [],
         },
         knowledgePanel: {
             window: {
                 key: "knowledgePanel",
                 title: "Knowledge",
-                subtitle: "Operational context",
-                status: { label: "Fresh", tone: "success" },
-                badge: "8 live docs",
-                layoutHint: {
-                    x: 58,
-                    y: 56,
-                    width: 34,
-                    height: 34,
-                    zIndex: 10,
-                    rotateDeg: -1,
-                },
+                subtitle: "Preview",
+                status: { label: "Ready", tone: "success" },
             },
-            title: "Grounded automation, not guesswork",
-            subtitle: "Every downstream change is tied back to source context and prior operating rules.",
-            query: "What should happen after launch approval is complete?",
-            summary: "Sync CRM, notify GTM owners, create follow-up tasks, and monitor SLA risks until completion.",
-            sources: [
-                {
-                    id: "rs1",
-                    label: "Launch Runbook",
-                    kind: "Runbook",
-                    status: "success",
-                },
-                { id: "rs2", label: "Team SLA Policy", kind: "Policy", status: "info" },
-            ],
-            activeSnippetId: "runbook-snippet",
+            title: "Palette preview",
+            subtitle: "Show the agent's latest UI output for the command menu.",
+            query: "command-menu.tsx",
+            summary: "A global command palette is being added with grouped actions, shortcut support, and instant route changes.",
             snippets: [
                 {
-                    id: "runbook-snippet",
-                    title: "Post-approval sequence",
-                    content: "After approvals clear, update CRM state, notify GTM channels, open implementation tasks, and start SLA monitoring for any dependencies.",
-                    sourceId: "rs1",
-                    confidence: "Runbook step 4",
-                    excerptLabel: "Execution guidance",
-                    tags: ["execution", "handoff"],
+                    id: "command-snippet",
+                    title: "Command menu",
+                    excerptLabel: "Live UI",
+                    confidence: "8 commands wired",
                     highlighted: true,
+                    content: '<CommandDialog open={open} onOpenChange={setOpen}>\n  <CommandInput placeholder="Search commands" />\n  <CommandList>{groups.map(renderGroup)}</CommandList>\n</CommandDialog>',
+                    tags: ["command palette", "ux", "keyboard"],
                 },
             ],
+            highlights: [
+                { id: "command-snippet", label: "Generated UI", tone: "success" },
+            ],
         },
         highlights: [
-            { id: "notify-teams", label: "Live handoff", tone: "accent" },
-            { id: "exec-4", label: "Observed completion", tone: "success" },
+            { id: "wire-shortcuts", label: "Active build", tone: "accent" },
+            { id: "cmd-3", label: "Result updates", tone: "info" },
         ],
     },
 ];
 export function Hero() {
-    return (<div className="relative overflow-hidden">
-      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top_left,theme(colors.cyan.500/0.18),transparent_32%),radial-gradient(circle_at_bottom_right,theme(colors.violet.500/0.14),transparent_34%)]"/>
-
-      <HeroProductDemo className="bg-[linear-gradient(180deg,rgba(248,250,252,0.98)_0%,rgba(239,246,255,0.92)_46%,rgba(248,250,252,0.98)_100%)] dark:bg-[linear-gradient(180deg,rgba(2,6,23,0.98)_0%,rgba(8,47,73,0.96)_42%,rgba(15,23,42,0.98)_100%)]" heading={{
-            text: "Let AI run the workflows your team still manages by hand.",
-            className: "max-w-3xl text-left font-outfit text-4xl font-semibold leading-tight tracking-tight text-slate-950 sm:text-5xl lg:text-6xl dark:text-white",
+    return (<div className="relative overflow-hidden">
+      <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(180deg,#eef3f8_0%,#f6f8fb_48%,#eef3f8_100%)] dark:bg-[linear-gradient(180deg,#171717_0%,#121212_18%,#1d1d1d_46%,#131313_76%,#1b1b1b_100%)]"/>
+      <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(112deg,transparent_18%,rgba(255,255,255,0.18)_28%,rgba(255,255,255,0.05)_37%,transparent_50%),linear-gradient(248deg,transparent_22%,rgba(255,255,255,0.14)_31%,rgba(255,255,255,0.04)_41%,transparent_56%)] opacity-70 dark:opacity-100"/>
+      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.12),transparent_34%)] opacity-70 dark:opacity-100"/>
+      <div className="pointer-events-none absolute left-1/2 top-[26rem] h-[32rem] w-[62rem] -translate-x-1/2 rounded-full bg-[radial-gradient(circle_at_center,rgba(255,255,255,0.22)_0%,rgba(255,255,255,0.12)_12%,rgba(255,255,255,0.06)_24%,transparent_66%)] blur-3xl opacity-85 dark:opacity-100"/>
+
+      <HeroProductDemo className="bg-transparent" heading={{
+            text: "Code with agents.",
+            className: "max-w-4xl text-left font-outfit text-3xl font-semibold leading-none tracking-tight text-[var(--heading-fg)] sm:text-4xl lg:text-5xl",
         }} subheading={{
-            text: "Turn requests into multi-step workflows that gather context, route approvals, update tools, and show live execution from one AI workflow automation platform.",
-            className: "mt-6 max-w-2xl text-left font-inter text-base leading-7 text-slate-600 sm:text-lg dark:text-slate-300",
+            text: "Watch the agent read, edit, and update the result in real time.",
+            className: "mt-3 max-w-2xl text-left font-inter text-sm leading-6 text-[var(--subheading-fg)] sm:text-base",
         }} cta1={{
-            label: "Start automating",
+            label: "Start building",
             href: "#contact",
             variant: "default",
             size: "lg",
             className: [
-                "px-8 py-3 text-base font-semibold shadow-lg shadow-cyan-500/20",
-                "[--btn-bg:theme(colors.cyan.500)]",
-                "hover:[--btn-hover-bg:theme(colors.cyan.400)]",
-                "[--btn-fg:theme(colors.slate.950)]",
-                "hover:[--btn-hover-fg:theme(colors.slate.950)]",
+                "px-7 py-3 text-sm font-semibold shadow-lg shadow-black/10 dark:shadow-black/30",
+                "[--btn-bg:var(--hero-cta-primary-bg)]",
+                "hover:[--btn-hover-bg:var(--hero-cta-primary-hover-bg)]",
+                "[--btn-fg:var(--hero-cta-primary-fg)]",
+                "hover:[--btn-hover-fg:var(--hero-cta-primary-hover-fg)]",
             ].join(" "),
         }} cta2={{
-            label: "See how it works",
+            label: "View features",
             href: "#features",
             variant: "outline",
             size: "lg",
             className: [
-                "border px-8 py-3 text-base font-semibold shadow-sm",
-                "[--btn-bg:transparent]",
-                "[--btn-fg:theme(colors.cyan.700)]",
-                "[--btn-border:theme(colors.cyan.300)]",
-                "hover:[--btn-hover-bg:theme(colors.cyan.50)]",
-                "hover:[--btn-hover-fg:theme(colors.cyan.800)]",
-                "dark:[--btn-fg:theme(colors.cyan.300)]",
-                "dark:[--btn-border:theme(colors.cyan.700)]",
-                "dark:hover:[--btn-hover-bg:theme(colors.cyan.950)]",
-                "dark:hover:[--btn-hover-fg:theme(colors.cyan.200)]",
+                "border px-7 py-3 text-sm font-semibold shadow-sm dark:shadow-black/20",
+                "[--btn-bg:var(--hero-cta-secondary-bg)]",
+                "[--btn-fg:var(--hero-cta-secondary-fg)]",
+                "[--btn-border:var(--hero-cta-secondary-border)]",
+                "hover:[--btn-hover-bg:var(--hero-cta-secondary-hover-bg)]",
+                "hover:[--btn-hover-fg:var(--hero-cta-secondary-hover-fg)]",
             ].join(" "),
         }} stage={{
             scenarios,
             initialScenarioIndex: 0,
-            autoCycle: true,
-            cycleIntervalMs: 5200,
-            className: "[--demo-stage-bg:linear-gradient(180deg,rgba(255,255,255,0.92)_0%,rgba(224,242,254,0.72)_100%)] dark:[--demo-stage-bg:linear-gradient(180deg,rgba(15,23,42,0.92)_0%,rgba(12,74,110,0.70)_100%)]",
+            className: "mt-0",
         }} section={{
-            className: "px-6 py-16 sm:px-8 lg:px-10 lg:py-24",
+            className: "px-6 py-10 sm:px-8 lg:px-10 lg:py-12",
         }} container={{
-            className: "relative z-10 items-start gap-14 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]",
+            className: "relative z-10 max-w-7xl",
         }} textContainer={{
-            className: "pt-4 lg:pt-10",
+            className: "max-w-3xl pt-1 lg:pl-4 lg:pt-0",
         }} demoContainer={{
-            className: "relative min-h-[36rem] lg:min-h-[42rem]",
+            className: "relative min-h-[32rem] w-full max-w-full lg:px-4 lg:h-[clamp(30rem,calc(100svh-7rem),42rem)] lg:min-h-0",
         }} buttonsContainer={{
-            className: "mt-8 flex-col items-start sm:flex-row sm:items-center",
-        }} ariaLabel="AI workflow automation hero section"/>
+            className: "mt-4 flex-col items-start sm:flex-row sm:items-center",
+        }} demoBelowText ariaLabel="AI coding agent hero section"/>
     </div>);
 }