nextworks 0.2.0-alpha.13 → 0.2.0-alpha.14

package/dist/kits/blocks/components/sections/product-demo/DemoStage.tsx

@@ -4,17 +4,18 @@ import React from "react";
 import { motion } from "motion/react";
 import { cn } from "@/lib/utils";
 import { DemoWindow } from "./DemoWindow";
-import { ApprovalInboxPanel } from "./ApprovalInboxPanel";
 import { KnowledgePanel } from "./KnowledgePanel";
 import { RunConsolePanel } from "./RunConsolePanel";
+import { TaskListPanel } from "./TaskListPanel";
 import { WorkflowStudioPanel } from "./WorkflowStudioPanel";
 import type {
   ProductDemoHighlightTarget,
   ProductDemoHighlightTone,
+  ProductDemoRunConsolePlaybackConfig,
   ProductDemoScenario,
-  ProductDemoStatusTone,
   ProductDemoWindowKey,
   ProductDemoWindowMeta,
+  ProductDemoWorkflowPlaybackConfig,
 } from "./types";
 
 export interface DemoStageProps {
@@ -35,10 +36,10 @@ type WindowRenderData = {
 };
 
 const WINDOW_ORDER: ProductDemoWindowKey[] = [
+  "taskList",
   "workflowStudio",
-  "knowledgePanel",
   "runConsole",
-  "approvalInbox",
+  "knowledgePanel",
 ];
 
 const HIGHLIGHT_TONE_CLASSES: Record<ProductDemoHighlightTone, string> = {
@@ -53,16 +54,6 @@ const HIGHLIGHT_TONE_CLASSES: Record<ProductDemoHighlightTone, string> = {
   muted: "border-border/60 bg-background/70 text-muted-foreground",
 };
 
-const STATUS_TONE_CLASSES: Record<ProductDemoStatusTone, string> = {
-  neutral: "border-border/60 bg-muted/55 text-muted-foreground",
-  info: "border-sky-500/30 bg-sky-500/10 text-sky-600 dark:text-sky-300",
-  success:
-    "border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-300",
-  warning:
-    "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300",
-  danger: "border-rose-500/30 bg-rose-500/10 text-rose-600 dark:text-rose-300",
-};
-
 function clampInitialScenarioIndex(index: number | undefined, count: number) {
   if (count <= 0) {
     return 0;
@@ -75,22 +66,14 @@ function getHighlightClass(tone: ProductDemoHighlightTone = "accent") {
   return HIGHLIGHT_TONE_CLASSES[tone];
 }
 
-function getStatusClass(tone: ProductDemoStatusTone = "neutral") {
-  return STATUS_TONE_CLASSES[tone];
-}
-
 function useActiveScenario({
   scenarios,
   initialScenarioIndex,
   activeScenarioKey,
-  autoCycle,
-  cycleIntervalMs,
 }: {
   scenarios: ProductDemoScenario[];
   initialScenarioIndex?: number;
   activeScenarioKey?: string;
-  autoCycle?: boolean;
-  cycleIntervalMs?: number;
 }) {
   const fallbackIndex = React.useMemo(
     () => clampInitialScenarioIndex(initialScenarioIndex, scenarios.length),
@@ -117,20 +100,122 @@ function useActiveScenario({
     }
   }, [activeScenarioKey, controlledIndex]);
 
+  return {
+    activeScenario: scenarios[activeIndex] ?? scenarios[0],
+    activeIndex,
+    setActiveIndex: setInternalIndex,
+  };
+}
+
+type PlaybackTimelineConfig = {
+  stepCount: number;
+  playbackMs?: number;
+  playbackStepDurationsMs?: number[];
+  playbackResetDelayMs?: number;
+  scenarioKey: string;
+};
+
+function getWorkflowPlaybackConfig(
+  scenario: ProductDemoScenario,
+): ProductDemoWorkflowPlaybackConfig {
+  return {
+    playbackMs:
+      scenario.playback?.workflowStudio?.playbackMs ??
+      scenario.workflowStudio.playbackMs,
+    playbackStepDurationsMs:
+      scenario.playback?.workflowStudio?.playbackStepDurationsMs ??
+      scenario.workflowStudio.playbackStepDurationsMs,
+    playbackResetDelayMs:
+      scenario.playback?.workflowStudio?.playbackResetDelayMs ??
+      scenario.workflowStudio.playbackResetDelayMs,
+  };
+}
+
+function getRunConsolePlaybackConfig(
+  scenario: ProductDemoScenario,
+): ProductDemoRunConsolePlaybackConfig {
+  return {
+    playbackMs:
+      scenario.playback?.runConsole?.playbackMs ??
+      scenario.runConsole.playbackMs,
+    playbackStepDurationsMs:
+      scenario.playback?.runConsole?.playbackStepDurationsMs ??
+      scenario.runConsole.playbackStepDurationsMs,
+    playbackResetDelayMs:
+      scenario.playback?.runConsole?.playbackResetDelayMs ??
+      scenario.runConsole.playbackResetDelayMs,
+    playbackStepEntryIndices:
+      scenario.playback?.runConsole?.playbackStepEntryIndices ??
+      scenario.runConsole.playbackStepEntryIndices,
+    playbackStepVisibleLineCounts:
+      scenario.playback?.runConsole?.playbackStepVisibleLineCounts ??
+      scenario.runConsole.playbackStepVisibleLineCounts,
+  };
+}
+
+function useDeterministicPlaybackStep({
+  stepCount,
+  playbackMs,
+  playbackStepDurationsMs,
+  playbackResetDelayMs,
+  scenarioKey,
+}: PlaybackTimelineConfig) {
+  const basePlaybackMs = playbackMs ?? 1800;
+  const stepDurations = playbackStepDurationsMs ?? [];
+  const resetDelayMs =
+    playbackResetDelayMs ?? Math.max(basePlaybackMs + 240, 1600);
+  const [playbackStep, setPlaybackStep] = React.useState(1);
+
   React.useEffect(() => {
-    if (activeScenarioKey || !autoCycle || scenarios.length <= 1) {
+    const initialStep = Math.max(1, Math.min(2, stepCount));
+    setPlaybackStep(initialStep);
+
+    if (stepCount <= 2) {
       return;
     }
 
-    const intervalMs = Math.max(cycleIntervalMs ?? 4500, 1200);
-    const timer = window.setInterval(() => {
-      setInternalIndex((currentIndex) => (currentIndex + 1) % scenarios.length);
-    }, intervalMs);
+    let timeoutId = 0;
+    let cancelled = false;
+
+    const scheduleStep = (step: number) => {
+      const delay = Math.max(260, stepDurations[step - 3] ?? basePlaybackMs);
+
+      timeoutId = window.setTimeout(() => {
+        if (cancelled) {
+          return;
+        }
+
+        setPlaybackStep(step);
 
-    return () => window.clearInterval(timer);
-  }, [activeScenarioKey, autoCycle, cycleIntervalMs, scenarios.length]);
+        if (step >= stepCount) {
+          timeoutId = window.setTimeout(
+            () => {
+              if (cancelled) {
+                return;
+              }
 
-  return scenarios[activeIndex] ?? scenarios[0];
+              setPlaybackStep(initialStep);
+              scheduleStep(initialStep + 1);
+            },
+            Math.max(600, resetDelayMs),
+          );
+
+          return;
+        }
+
+        scheduleStep(step + 1);
+      }, delay);
+    };
+
+    scheduleStep(initialStep + 1);
+
+    return () => {
+      cancelled = true;
+      window.clearTimeout(timeoutId);
+    };
+  }, [basePlaybackMs, stepCount, resetDelayMs, stepDurations, scenarioKey]);
+
+  return playbackStep;
 }
 
 function HighlightPills({
@@ -161,45 +246,33 @@ function HighlightPills({
 
 function getWindowRenderData(
   scenario: ProductDemoScenario,
+  onSelectTask: (taskId: string) => void,
 ): WindowRenderData[] {
   return [
     {
-      key: "workflowStudio",
-      meta: scenario.workflowStudio.window,
+      key: "taskList",
+      meta: scenario.taskList.window,
       content: (
-        <>
-          <HighlightPills highlights={scenario.workflowStudio.highlights} />
-          <WorkflowStudioPanel state={scenario.workflowStudio} />
-        </>
+        <TaskListPanel state={scenario.taskList} onSelect={onSelectTask} />
       ),
     },
     {
-      key: "knowledgePanel",
-      meta: scenario.knowledgePanel.window,
-      content: (
-        <>
-          <HighlightPills highlights={scenario.knowledgePanel.highlights} />
-          <KnowledgePanel state={scenario.knowledgePanel} />
-        </>
-      ),
+      key: "workflowStudio",
+      meta: scenario.workflowStudio.window,
+      content: <WorkflowStudioPanel state={scenario.workflowStudio} />,
     },
     {
       key: "runConsole",
       meta: scenario.runConsole.window,
-      content: (
-        <>
-          <HighlightPills highlights={scenario.runConsole.highlights} />
-          <RunConsolePanel state={scenario.runConsole} />
-        </>
-      ),
+      content: <RunConsolePanel state={scenario.runConsole} />,
     },
     {
-      key: "approvalInbox",
-      meta: scenario.approvalInbox.window,
+      key: "knowledgePanel",
+      meta: scenario.knowledgePanel.window,
       content: (
         <>
-          <HighlightPills highlights={scenario.approvalInbox.highlights} />
-          <ApprovalInboxPanel state={scenario.approvalInbox} />
+          <HighlightPills highlights={scenario.knowledgePanel.highlights} />
+          <KnowledgePanel state={scenario.knowledgePanel} />
         </>
       ),
     },
@@ -208,66 +281,34 @@ function getWindowRenderData(
 
 function getWindowShellClass(key: ProductDemoWindowKey) {
   switch (key) {
+    case "taskList":
+      return "lg:col-span-2";
     case "workflowStudio":
-      return "lg:absolute lg:left-[2%] lg:top-[9%] lg:h-[66%] lg:w-[46%]";
-    case "knowledgePanel":
-      return "lg:absolute lg:left-[50%] lg:top-[10%] lg:h-[34%] lg:w-[30%] xl:left-[49%] xl:w-[29%]";
+      return "lg:col-span-3";
     case "runConsole":
-      return "lg:absolute lg:left-[50%] lg:bottom-[10%] lg:h-[33%] lg:w-[32%] xl:left-[49%] xl:w-[31%]";
+      return "lg:col-span-5";
+    case "knowledgePanel":
     case "approvalInbox":
-      return "lg:absolute lg:right-[1%] lg:top-[17%] lg:h-[45%] lg:w-[24%] xl:right-[2%] xl:h-[44%] xl:w-[23%]";
+      return "hidden";
     default:
       return "";
   }
 }
 
-function getTransformStyle(
-  meta: ProductDemoWindowMeta,
-): React.CSSProperties | undefined {
-  const layoutHint = meta.layoutHint;
-
-  if (!layoutHint) {
-    return undefined;
-  }
-
-  const translateX = layoutHint.x ?? 0;
-  const translateY = layoutHint.y ?? 0;
-  const rotate = layoutHint.rotateDeg ?? 0;
-
-  return {
-    zIndex: layoutHint.zIndex,
-    transform: `translate(${translateX}px, ${translateY}px) rotate(${rotate}deg)`,
-  };
-}
-
 export function DemoStage({
   scenarios = [],
   initialScenarioIndex,
   activeScenarioKey,
-  autoCycle = false,
-  cycleIntervalMs = 4500,
   className,
   enableMotion = true,
   ariaLabel = "Product demo stage",
 }: DemoStageProps) {
-  const activeScenario = useActiveScenario({
+  const { activeScenario, activeIndex, setActiveIndex } = useActiveScenario({
     scenarios,
     initialScenarioIndex,
     activeScenarioKey,
-    autoCycle,
-    cycleIntervalMs,
   });
 
-  const activeIndex = React.useMemo(() => {
-    if (!activeScenario) {
-      return 0;
-    }
-
-    return scenarios.findIndex(
-      (scenario) => scenario.key === activeScenario.key,
-    );
-  }, [activeScenario, scenarios]);
-
   if (!activeScenario) {
     return (
       <div
@@ -286,48 +327,77 @@ export function DemoStage({
     );
   }
 
-  const windows = getWindowRenderData(activeScenario).sort(
-    (a, b) => WINDOW_ORDER.indexOf(a.key) - WINDOW_ORDER.indexOf(b.key),
-  );
+  const workflowPlayback = getWorkflowPlaybackConfig(activeScenario);
+  const runConsolePlayback = getRunConsolePlaybackConfig(activeScenario);
+
+  const workflowPlaybackStep = useDeterministicPlaybackStep({
+    stepCount: Math.max(
+      1,
+      activeScenario.workflowStudio.transcript?.length ?? 1,
+    ),
+    playbackMs: workflowPlayback.playbackMs,
+    playbackStepDurationsMs: workflowPlayback.playbackStepDurationsMs,
+    playbackResetDelayMs: workflowPlayback.playbackResetDelayMs,
+    scenarioKey: `${activeScenario.key}-workflowStudio`,
+  });
+
+  const runConsolePlaybackStep = useDeterministicPlaybackStep({
+    stepCount: Math.max(
+      1,
+      runConsolePlayback.playbackStepEntryIndices?.length ?? 0,
+      runConsolePlayback.playbackStepVisibleLineCounts?.length ?? 0,
+      activeScenario.runConsole.entries.length,
+    ),
+    playbackMs: runConsolePlayback.playbackMs,
+    playbackStepDurationsMs: runConsolePlayback.playbackStepDurationsMs,
+    playbackResetDelayMs: runConsolePlayback.playbackResetDelayMs,
+    scenarioKey: `${activeScenario.key}-runConsole`,
+  });
+
+  const scenarioWithPlayback: ProductDemoScenario = {
+    ...activeScenario,
+    workflowStudio: {
+      ...activeScenario.workflowStudio,
+      ...workflowPlayback,
+      playbackStep: workflowPlaybackStep,
+    },
+    runConsole: {
+      ...activeScenario.runConsole,
+      ...runConsolePlayback,
+      playbackStep: runConsolePlaybackStep,
+    },
+  };
+
+  const windows = getWindowRenderData(scenarioWithPlayback, (taskId) => {
+    const nextIndex = scenarios.findIndex(
+      (scenario) => scenario.key === taskId,
+    );
+
+    if (nextIndex >= 0) {
+      setActiveIndex(nextIndex);
+    }
+  }).sort((a, b) => WINDOW_ORDER.indexOf(a.key) - WINDOW_ORDER.indexOf(b.key));
 
   return (
     <div
       data-product-demo-stage
-      data-auto-cycle={autoCycle ? "true" : "false"}
       data-enable-motion={enableMotion ? "true" : "false"}
       data-scenario-count={scenarios.length}
       data-active-scenario-key={activeScenario.key}
       data-active-scenario-index={activeIndex}
-      data-cycle-interval-ms={cycleIntervalMs}
       className={cn(
-        "relative isolate min-h-[30rem] w-full overflow-hidden rounded-[2rem] border border-border/60 bg-[radial-gradient(circle_at_top,rgba(59,130,246,0.13),transparent_35%),linear-gradient(135deg,rgba(15,23,42,0.04),transparent_55%)] shadow-2xl",
+        "relative isolate min-h-[36rem] w-full overflow-visible rounded-none border-0 bg-transparent shadow-none lg:h-full lg:min-h-0",
         className,
       )}
       aria-label={ariaLabel}
     >
-      <div className="absolute inset-0 bg-gradient-to-br from-background via-background/96 to-muted/45" />
-      <div className="absolute inset-x-0 top-0 h-24 bg-gradient-to-b from-primary/8 to-transparent" />
-
-      <div className="relative z-10 flex min-h-[30rem] flex-col gap-4 p-4 sm:p-5 lg:block lg:p-6">
-        <div className="flex flex-wrap items-center justify-between gap-3 pb-1">
-          <div>
-            {activeScenario.label && (
-              <div className="text-[11px] font-medium uppercase tracking-[0.18em] text-primary/80">
-                {activeScenario.label}
-              </div>
-            )}
-            {activeScenario.description && (
-              <p className="mt-1 max-w-xl text-xs leading-relaxed text-muted-foreground">
-                {activeScenario.description}
-              </p>
-            )}
-          </div>
-
-          <HighlightPills highlights={activeScenario.highlights} />
-        </div>
-
+      <div className="relative z-10 flex h-[36rem] min-h-[36rem] flex-col gap-0 lg:h-full lg:min-h-0">
         <div className="grid gap-4 lg:hidden">
           {windows.map((windowData) => {
+            if (getWindowShellClass(windowData.key) === "hidden") {
+              return null;
+            }
+
             const activeWindow =
               activeScenario.activeWindow === windowData.key ||
               (!activeScenario.activeWindow &&
@@ -339,6 +409,9 @@ export function DemoStage({
                 window={windowData.meta}
                 active={activeWindow}
                 enableMotion={enableMotion}
+                showControls={false}
+                showResizeHandle={false}
+                showHeader={false}
               >
                 {windowData.content}
               </DemoWindow>
@@ -346,50 +419,98 @@ export function DemoStage({
           })}
         </div>
 
-        <div className="hidden lg:block lg:h-[34rem] xl:h-[36rem]">
-          {windows.map((windowData) => {
-            const activeWindow =
-              activeScenario.activeWindow === windowData.key ||
-              (!activeScenario.activeWindow &&
-                windowData.key === "workflowStudio");
+        <div className="hidden overflow-hidden rounded-[0.4rem] border border-[var(--demo-border)] bg-[var(--demo-shell-bg)] shadow-[var(--demo-shell-shadow)] ring-1 ring-[var(--demo-shell-ring)] lg:flex lg:h-full lg:min-h-0 lg:flex-col">
+          <div className="relative flex h-[3.2rem] items-center justify-between border-b border-[var(--demo-border)] bg-[var(--demo-shell-muted-bg)] px-4 py-2.5 shadow-[inset_0_1px_0_rgba(255,255,255,0.72)] dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.05)] sm:px-5">
+            <div className="flex min-w-0 items-center gap-3.5">
+              <div className="flex h-8 w-8 items-center justify-center rounded-[0.4rem] border border-[var(--demo-border)] bg-[var(--demo-shell-strong-bg)] text-[var(--demo-fg)] shadow-[inset_0_1px_0_rgba(255,255,255,0.72)] dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]">
+                <span className="grid grid-cols-2 gap-[2px]">
+                  <span className="h-[3px] w-[3px] rounded-[1px] bg-[var(--demo-fg)]" />
+                  <span className="h-[3px] w-[3px] rounded-[1px] bg-[var(--demo-muted-fg)]" />
+                  <span className="h-[3px] w-[3px] rounded-[1px] bg-[var(--demo-muted-fg)]" />
+                  <span className="h-[3px] w-[3px] rounded-[1px] bg-[var(--demo-fg)]" />
+                </span>
+              </div>
+              <div className="min-w-0 space-y-0.5">
+                <div className="flex min-w-0 items-center gap-2">
+                  <div className="truncate text-[12px] font-semibold tracking-[-0.02em] text-[var(--demo-fg)]">
+                    Agent workspace
+                  </div>
+                  <span className="hidden rounded-full border border-[var(--demo-border)] bg-[var(--demo-panel-bg)] px-2 py-0.5 text-[9px] font-medium uppercase tracking-[0.14em] text-[var(--demo-subtle-fg)] xl:inline-flex">
+                    session 03
+                  </span>
+                </div>
+                <div className="text-[10px] uppercase tracking-[0.18em] text-[var(--demo-subtle-fg)]">
+                  Session · live repo
+                </div>
+              </div>
+            </div>
+            <div className="flex items-center gap-2.5 text-[10px] uppercase tracking-[0.16em] text-[var(--demo-subtle-fg)]">
+              <div className="hidden items-center gap-2 text-[10px] text-[var(--demo-subtle-fg)] xl:flex">
+                <span>repo</span>
+                <span className="font-mono text-[var(--demo-muted-fg)]">
+                  apps/web
+                </span>
+              </div>
+              <span className="inline-flex items-center gap-1.5 rounded-full border border-[var(--demo-border)] bg-[var(--demo-panel-bg)] px-2.5 py-1 text-[var(--demo-muted-fg)]">
+                <span className="h-1.5 w-1.5 rounded-full bg-[var(--demo-success)]" />
+                Active
+              </span>
+            </div>
+          </div>
 
-            return (
-              <motion.div
-                key={windowData.key}
-                initial={
-                  enableMotion ? { opacity: 0, y: 18, scale: 0.98 } : false
-                }
-                animate={{
-                  opacity: 1,
-                  y: 0,
-                  scale: activeWindow ? 1 : 0.985,
-                }}
-                transition={
-                  enableMotion
-                    ? {
-                        type: "tween",
-                        duration: 0.45,
-                      }
-                    : { duration: 0 }
-                }
-                className={cn(
-                  "will-change-transform",
-                  getWindowShellClass(windowData.key),
-                )}
-                style={getTransformStyle(windowData.meta)}
-              >
-                <DemoWindow
-                  window={windowData.meta}
-                  active={activeWindow}
-                  dimmed={!activeWindow}
-                  enableMotion={enableMotion}
-                  className="h-full"
+          <div className="grid min-h-0 flex-1 lg:grid-cols-10 lg:gap-0">
+            {windows.map((windowData) => {
+              const shellClass = getWindowShellClass(windowData.key);
+
+              if (shellClass === "hidden") {
+                return null;
+              }
+
+              const activeWindow =
+                activeScenario.activeWindow === windowData.key ||
+                (!activeScenario.activeWindow &&
+                  windowData.key === "workflowStudio");
+
+              return (
+                <motion.div
+                  key={windowData.key}
+                  initial={enableMotion ? { opacity: 0 } : false}
+                  animate={{ opacity: 1 }}
+                  transition={
+                    enableMotion
+                      ? {
+                          type: "tween",
+                          duration: 0.24,
+                        }
+                      : { duration: 0 }
+                  }
+                  className={cn("min-h-0", shellClass)}
                 >
-                  {windowData.content}
-                </DemoWindow>
-              </motion.div>
-            );
-          })}
+                  <DemoWindow
+                    window={windowData.meta}
+                    active={activeWindow}
+                    dimmed={false}
+                    enableMotion={enableMotion}
+                    showControls={false}
+                    showResizeHandle={false}
+                    showHeader={false}
+                    className={cn(
+                      "h-full min-h-0 border-0 shadow-none",
+                      windowData.key === "taskList" &&
+                        "rounded-none border-r border-[var(--demo-border)]",
+                      windowData.key === "workflowStudio" &&
+                        "rounded-none border-r border-[var(--demo-border)]",
+
+                      windowData.key === "runConsole" && "rounded-none",
+                    )}
+                    bodyClassName="px-0 py-0 sm:px-0 sm:py-0"
+                  >
+                    {windowData.content}
+                  </DemoWindow>
+                </motion.div>
+              );
+            })}
+          </div>
         </div>
       </div>
     </div>