nextworks 0.2.0-alpha.13 → 0.2.0-alpha.15

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

@@ -15,17 +15,20 @@ export interface DemoWindowProps {
   enableMotion?: boolean;
   showControls?: boolean;
   showResizeHandle?: boolean;
+  showHeader?: boolean;
   children?: React.ReactNode;
 }
 
 const STATUS_TONE_CLASSES: Record<ProductDemoStatusTone, string> = {
-  neutral: "border-border/60 bg-muted/60 text-muted-foreground",
-  info: "border-sky-500/30 bg-sky-500/10 text-sky-600 dark:text-sky-300",
+  neutral:
+    "border-[var(--demo-border)] bg-[var(--demo-panel-bg)] text-[var(--demo-muted-fg)]",
+  info: "border-[var(--demo-info-border)] bg-[var(--demo-info-soft-bg)] text-[var(--demo-info)]",
   success:
-    "border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-300",
+    "border-[var(--demo-success-border)] bg-[var(--demo-success-soft-bg)] text-[var(--demo-success)]",
   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",
+    "border-[var(--demo-warning-border)] bg-[var(--demo-warning-soft-bg)] text-[var(--demo-warning)]",
+  danger:
+    "border-[var(--demo-danger-border)] bg-[var(--demo-danger-soft-bg)] text-[var(--demo-danger)]",
 };
 
 export function DemoWindow({
@@ -39,6 +42,7 @@ export function DemoWindow({
   enableMotion = true,
   showControls = true,
   showResizeHandle = true,
+  showHeader = true,
   children,
 }: DemoWindowProps) {
   const statusTone = window.status?.tone ?? "neutral";
@@ -46,11 +50,14 @@ export function DemoWindow({
   return (
     <section
       className={cn(
-        "group relative flex h-full min-h-[14rem] flex-col overflow-hidden rounded-[1.5rem] border border-border/60 bg-card/92 shadow-[0_18px_48px_-24px_rgba(15,23,42,0.45)] backdrop-blur-xl",
+        "group relative flex h-full min-h-[14rem] flex-col overflow-hidden border border-[var(--demo-border)] bg-[var(--demo-shell-bg)] text-[var(--demo-fg)] shadow-none [font-synthesis:none] antialiased",
+
+        "before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-[linear-gradient(90deg,transparent,rgba(255,255,255,0.68),transparent)] before:opacity-70 dark:before:bg-[linear-gradient(90deg,transparent,rgba(255,255,255,0.16),transparent)] dark:before:opacity-100",
+        "after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-8 after:bg-[linear-gradient(180deg,transparent,rgba(15,23,42,0.03))] dark:after:bg-[linear-gradient(180deg,transparent,rgba(255,255,255,0.02))]",
         enableMotion &&
-          "transition-[transform,opacity,box-shadow,border-color] duration-500 ease-out motion-reduce:transition-none",
-        active &&
-          "border-primary/45 shadow-[0_24px_60px_-26px_rgba(59,130,246,0.45)]",
+          "transition-[opacity,border-color,background-color] duration-500 ease-out motion-reduce:transition-none",
+        active && "border-[var(--demo-border-strong)]",
+
         dimmed && "opacity-90",
         className,
       )}
@@ -58,55 +65,60 @@ export function DemoWindow({
       data-active={active ? "true" : "false"}
       aria-label={window.title}
     >
-      <header
-        className={cn(
-          "relative flex items-start justify-between gap-3 border-b border-border/50 px-4 py-3 sm:px-5",
-          chromeClassName,
-        )}
-      >
-        <div className="flex items-start gap-3">
-          {showControls && (
-            <div className="mt-1 flex items-center gap-1.5 opacity-75 transition-opacity duration-200 group-hover:opacity-100">
-              <span className="h-2.5 w-2.5 rounded-full bg-rose-400/90" />
-              <span className="h-2.5 w-2.5 rounded-full bg-amber-400/90" />
-              <span className="h-2.5 w-2.5 rounded-full bg-emerald-400/90" />
-            </div>
+      {showHeader ? (
+        <header
+          className={cn(
+            "relative flex min-h-[3.25rem] items-center justify-between gap-3 border-b border-[var(--demo-border)] bg-[var(--demo-shell-muted-bg)] px-4 py-2.5 [font-synthesis:none] antialiased sm:px-5",
+
+            chromeClassName,
           )}
+        >
+          <div className="flex min-w-0 items-center gap-3">
+            {showControls && (
+              <div className="flex items-center gap-1.5 opacity-75 transition-opacity duration-200 group-hover:opacity-100">
+                <span className="h-2.5 w-2.5 rounded-full bg-rose-400/90" />
+                <span className="h-2.5 w-2.5 rounded-full bg-amber-400/90" />
+                <span className="h-2.5 w-2.5 rounded-full bg-emerald-400/90" />
+              </div>
+            )}
 
-          <div className="min-w-0">
-            <div className="flex flex-wrap items-center gap-2">
-              <h3 className="truncate text-sm font-semibold text-card-foreground sm:text-[0.95rem]">
-                {window.title}
-              </h3>
-              {window.badge && (
-                <span className="rounded-full border border-border/60 bg-muted/70 px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.16em] text-muted-foreground">
-                  {window.badge}
-                </span>
-              )}
+            <div className="min-w-0 flex items-center gap-2 overflow-hidden">
+              <div className="flex min-w-0 items-center gap-2 whitespace-nowrap">
+                <h3 className="shrink-0 text-sm font-semibold tracking-[-0.02em] text-[var(--demo-fg)] sm:text-[0.95rem]">
+                  {window.title}
+                </h3>
+                {window.badge && (
+                  <span className="rounded-full border border-[var(--demo-border)] bg-[var(--demo-panel-bg)] px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.16em] text-[var(--demo-muted-fg)]">
+                    {window.badge}
+                  </span>
+                )}
+                {window.subtitle && (
+                  <p className="min-w-0 truncate text-[11px] leading-5 tracking-[0.005em] text-[var(--demo-muted-fg)] sm:text-[0.8rem]">
+                    {window.subtitle}
+                  </p>
+                )}
+              </div>
             </div>
-            {window.subtitle && (
-              <p className="mt-1 truncate text-xs text-muted-foreground sm:text-[0.8rem]">
-                {window.subtitle}
-              </p>
-            )}
           </div>
-        </div>
 
-        {window.status?.label && (
-          <span
-            className={cn(
-              "shrink-0 rounded-full border px-2.5 py-1 text-[10px] font-medium uppercase tracking-[0.16em]",
-              STATUS_TONE_CLASSES[statusTone],
-            )}
-          >
-            {window.status.label}
-          </span>
-        )}
-      </header>
+          {window.status?.label && (
+            <span
+              className={cn(
+                "shrink-0 rounded-full border px-2.5 py-1 text-[10px] font-medium uppercase tracking-[0.16em]",
+                STATUS_TONE_CLASSES[statusTone],
+                "hidden sm:inline-flex",
+              )}
+            >
+              {window.status.label}
+            </span>
+          )}
+        </header>
+      ) : null}
 
       <div
         className={cn(
-          "relative flex-1 px-4 py-4 sm:px-5 sm:py-5",
+          "relative flex-1 min-h-0 px-4 py-4 sm:px-5 sm:py-5",
+
           bodyClassName,
         )}
       >
@@ -117,9 +129,9 @@ export function DemoWindow({
             aria-hidden="true"
             className="pointer-events-none absolute bottom-3 right-3 h-4 w-4 opacity-0 transition-opacity duration-200 group-hover:opacity-70"
           >
-            <span className="absolute bottom-0 right-0 h-px w-3 rotate-45 bg-border/80" />
-            <span className="absolute bottom-1 right-0 h-px w-2 rotate-45 bg-border/70" />
-            <span className="absolute bottom-0 right-1 h-px w-2 rotate-45 bg-border/60" />
+            <span className="absolute bottom-0 right-0 h-px w-3 rotate-45 bg-[var(--demo-border-strong)]" />
+            <span className="absolute bottom-1 right-0 h-px w-2 rotate-45 bg-[var(--demo-border)]" />
+            <span className="absolute bottom-0 right-1 h-px w-2 rotate-45 bg-[var(--demo-border)]" />
           </div>
         )}
       </div>

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

@@ -10,13 +10,15 @@ export interface KnowledgePanelProps {
 }
 
 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",
+  neutral:
+    "border-[var(--demo-border)] bg-[var(--demo-panel-bg)] text-[var(--demo-muted-fg)]",
+  info: "border-[var(--demo-info-border)] bg-[var(--demo-info-soft-bg)] text-[var(--demo-info)]",
   success:
-    "border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-300",
+    "border-[var(--demo-success-border)] bg-[var(--demo-success-soft-bg)] text-[var(--demo-success)]",
   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",
+    "border-[var(--demo-warning-border)] bg-[var(--demo-warning-soft-bg)] text-[var(--demo-warning)]",
+  danger:
+    "border-[var(--demo-danger-border)] bg-[var(--demo-danger-soft-bg)] text-[var(--demo-danger)]",
 };
 
 function getStatusClass(tone: ProductDemoStatusTone = "neutral") {
@@ -25,28 +27,28 @@ function getStatusClass(tone: ProductDemoStatusTone = "neutral") {
 
 export function KnowledgePanel({ state }: KnowledgePanelProps) {
   return (
-    <div className="flex h-full flex-col gap-4">
+    <div className="flex h-full flex-col gap-4 text-[var(--demo-fg)]">
       <div className="space-y-1.5">
         {state.title && (
-          <h4 className="text-sm font-semibold text-card-foreground">
+          <h4 className="text-sm font-semibold text-[var(--demo-fg)]">
             {state.title}
           </h4>
         )}
         {state.subtitle && (
-          <p className="text-xs leading-relaxed text-muted-foreground">
+          <p className="text-xs leading-relaxed text-[var(--demo-muted-fg)]">
             {state.subtitle}
           </p>
         )}
       </div>
 
       {state.query && (
-        <div className="rounded-xl border border-primary/25 bg-primary/8 px-3 py-2 text-xs text-primary">
+        <div className="rounded-xl border border-[var(--demo-info-border)] bg-[var(--demo-info-soft-bg)] px-3 py-2 text-xs text-[var(--demo-info)]">
           {state.query}
         </div>
       )}
 
       {state.summary && (
-        <p className="text-xs leading-relaxed text-muted-foreground">
+        <p className="text-xs leading-relaxed text-[var(--demo-muted-fg)]">
           {state.summary}
         </p>
       )}
@@ -80,17 +82,18 @@ export function KnowledgePanel({ state }: KnowledgePanelProps) {
             <div
               key={snippet.id}
               className={cn(
-                "rounded-2xl border border-border/60 bg-background/80 p-3",
-                isActive && "border-primary/45 bg-primary/6 shadow-sm",
+                "rounded-2xl border border-[var(--demo-border)] bg-[var(--demo-panel-bg)] p-3",
+                isActive &&
+                  "border-[var(--demo-info-border)] bg-[var(--demo-info-soft-bg)] shadow-sm",
               )}
             >
               <div className="flex items-start justify-between gap-3">
                 <div>
-                  <div className="text-sm font-semibold text-card-foreground">
+                  <div className="text-sm font-semibold text-[var(--demo-fg)]">
                     {snippet.title}
                   </div>
                   {(snippet.excerptLabel || source?.label) && (
-                    <div className="mt-1 text-[11px] text-muted-foreground">
+                    <div className="mt-1 text-[11px] text-[var(--demo-muted-fg)]">
                       {[snippet.excerptLabel, source?.label]
                         .filter(Boolean)
                         .join(" • ")}
@@ -98,12 +101,12 @@ export function KnowledgePanel({ state }: KnowledgePanelProps) {
                   )}
                 </div>
                 {snippet.confidence && (
-                  <span className="rounded-full border border-border/60 bg-muted/60 px-2 py-1 text-[10px] font-medium uppercase tracking-[0.14em] text-muted-foreground">
+                  <span className="rounded-full border border-[var(--demo-border)] bg-[var(--demo-panel-muted-bg)] px-2 py-1 text-[10px] font-medium uppercase tracking-[0.14em] text-[var(--demo-muted-fg)]">
                     {snippet.confidence}
                   </span>
                 )}
               </div>
-              <p className="mt-2 text-xs leading-relaxed text-muted-foreground">
+              <p className="mt-2 text-xs leading-relaxed text-[var(--demo-muted-fg)]">
                 {snippet.content}
               </p>
               {snippet.tags?.length ? (
@@ -111,7 +114,7 @@ export function KnowledgePanel({ state }: KnowledgePanelProps) {
                   {snippet.tags.map((tag) => (
                     <span
                       key={tag}
-                      className="rounded-full border border-border/60 bg-background/70 px-2 py-0.5 text-[10px] text-muted-foreground"
+                      className="rounded-full border border-[var(--demo-border)] bg-[var(--demo-panel-bg)] px-2 py-0.5 text-[10px] text-[var(--demo-muted-fg)]"
                     >
                       {tag}
                     </span>

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

@@ -1,149 +1,230 @@
 import React from "react";
 import { cn } from "@/lib/utils";
-import type {
-  ProductDemoRunConsoleState,
-  ProductDemoStatusTone,
-} from "./types";
+import type { ProductDemoRunConsoleState } from "./types";
 
 export interface RunConsolePanelProps {
   state: ProductDemoRunConsoleState;
 }
 
-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 getStatusClass(tone: ProductDemoStatusTone = "neutral") {
-  return STATUS_TONE_CLASSES[tone];
-}
+export function RunConsolePanel({ state }: RunConsolePanelProps) {
+  const playbackMs = state.playbackMs ?? 1800;
+  const playbackStepEntryIndices = state.playbackStepEntryIndices ?? [];
+  const playbackStepVisibleLineCounts =
+    state.playbackStepVisibleLineCounts ?? [];
+  const [activeIndex, setActiveIndex] = React.useState(
+    Math.max(
+      0,
+      state.entries.findIndex(
+        (entry) => entry.id === state.activeEntryId || entry.highlighted,
+      ),
+    ),
+  );
 
-function getProgressPercent(value: number | undefined) {
-  if (typeof value !== "number" || Number.isNaN(value)) {
-    return undefined;
-  }
+  React.useEffect(() => {
+    const preferredIndex = state.entries.findIndex(
+      (entry) => entry.id === state.activeEntryId || entry.highlighted,
+    );
 
-  return Math.min(100, Math.max(0, value));
-}
+    if (typeof state.playbackStep === "number") {
+      const mappedIndex = playbackStepEntryIndices[state.playbackStep - 1];
+      const syncedIndex = Math.min(
+        Math.max(
+          typeof mappedIndex === "number"
+            ? mappedIndex
+            : state.playbackStep - 2,
+          0,
+        ),
+        Math.max(state.entries.length - 1, 0),
+      );
+      setActiveIndex(syncedIndex);
+      return;
+    }
 
-export function RunConsolePanel({ state }: RunConsolePanelProps) {
-  const progressPercent = getProgressPercent(state.progressPercent);
+    setActiveIndex(Math.max(0, preferredIndex));
+
+    if (state.entries.length <= 1) {
+      return;
+    }
+
+    const interval = window.setInterval(() => {
+      setActiveIndex((current) => (current + 1) % state.entries.length);
+    }, playbackMs);
+
+    return () => window.clearInterval(interval);
+  }, [
+    playbackMs,
+    playbackStepEntryIndices,
+    state.activeEntryId,
+    state.entries,
+    state.title,
+    state.playbackStep,
+  ]);
+
+  const fallbackCodeEntry =
+    state.entries.find((entry) => (entry.code?.length ?? 0) > 0) ??
+    state.entries[0];
+  const activeEntry = state.entries[activeIndex] ?? state.entries[0];
+  const displayEntry =
+    (activeEntry?.code?.length ?? 0) > 0 ? activeEntry : fallbackCodeEntry;
+  const activeCode = displayEntry?.code ?? [];
+  const startLine = Number(
+    displayEntry?.lineNumber ?? activeEntry?.lineNumber ?? 24,
+  );
+  const activeLineCount = Math.max(1, activeCode.length || 1);
+  const [visibleLineCount, setVisibleLineCount] = React.useState(
+    Math.max(1, Math.min(2, activeCode.length || 1)),
+  );
+
+  React.useEffect(() => {
+    if (typeof state.playbackStep === "number") {
+      const mappedVisibleCount =
+        playbackStepVisibleLineCounts[state.playbackStep - 1];
+      const revealFromStep = Math.max(state.playbackStep - 1, 1);
+      const syncedVisibleCount = Math.min(
+        activeCode.length || 1,
+        Math.max(
+          1,
+          typeof mappedVisibleCount === "number"
+            ? mappedVisibleCount
+            : revealFromStep * 2,
+        ),
+      );
+      setVisibleLineCount(syncedVisibleCount);
+      return;
+    }
+
+    setVisibleLineCount(Math.max(1, Math.min(2, activeCode.length || 1)));
+
+    if (activeCode.length <= 2) {
+      return;
+    }
+
+    const interval = window.setInterval(
+      () => {
+        setVisibleLineCount((current) => {
+          if (current >= activeCode.length) {
+            return Math.max(1, Math.min(2, activeCode.length));
+          }
+
+          return current + 1;
+        });
+      },
+      Math.max(
+        520,
+        Math.round(playbackMs / Math.max(activeCode.length - 1, 1)),
+      ),
+    );
+
+    return () => window.clearInterval(interval);
+  }, [
+    activeCode,
+    playbackMs,
+    playbackStepVisibleLineCounts,
+    activeEntry?.id,
+    state.playbackStep,
+  ]);
+
+  const visibleCode = activeCode.slice(0, visibleLineCount);
 
   return (
-    <div className="flex h-full flex-col gap-4">
-      <div className="flex flex-wrap items-start justify-between gap-3">
-        <div className="space-y-1.5">
-          {state.title && (
-            <h4 className="text-sm font-semibold text-card-foreground">
-              {state.title}
-            </h4>
-          )}
-          {state.subtitle && (
-            <p className="text-xs leading-relaxed text-muted-foreground">
-              {state.subtitle}
-            </p>
-          )}
-        </div>
+    <div className="flex h-full min-h-0 flex-col text-[var(--demo-fg)] [font-synthesis:none] antialiased">
+      <div className="flex min-h-0 flex-1 overflow-hidden rounded-none border border-[var(--demo-border)] bg-[var(--demo-code-bg)] shadow-none">
+        <div className="flex min-h-0 min-w-0 flex-1 flex-col">
+          <div className="grid min-h-0 flex-1 grid-cols-[3.5rem_minmax(0,1fr)] bg-[var(--demo-code-bg)]">
+            <div className="border-r border-[var(--demo-border)] bg-[var(--demo-code-gutter-bg)] px-2 py-3 font-mono text-[11px] leading-7 text-[var(--demo-subtle-fg)]">
+              {visibleCode.map((line, index) => {
+                const isAdded = line.trimStart().startsWith("+");
+                const isRemoved = line.trimStart().startsWith("-");
 
-        {(state.statusLabel || state.progressLabel) && (
-          <div className="space-y-1 text-right">
-            {state.statusLabel && (
-              <div className="text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground">
-                {state.statusLabel}
-              </div>
-            )}
-            {state.progressLabel && (
-              <div className="text-sm font-semibold text-card-foreground">
-                {state.progressLabel}
-              </div>
-            )}
-          </div>
-        )}
-      </div>
+                return (
+                  <div
+                    key={`${startLine + index}`}
+                    className={cn(
+                      "text-right",
+                      isAdded && "text-[var(--demo-info)]",
+                      isRemoved && "text-[var(--demo-danger)]",
+                    )}
+                  >
+                    {startLine + index}
+                  </div>
+                );
+              })}
+            </div>
 
-      {typeof progressPercent === "number" ? (
-        <div className="space-y-2">
-          <div className="h-2 overflow-hidden rounded-full bg-muted/70">
-            <div
-              className="h-full rounded-full bg-primary transition-[width] duration-500"
-              style={{ width: `${progressPercent}%` }}
-            />
-          </div>
-          <div className="text-[11px] text-muted-foreground">
-            {progressPercent}% complete
-          </div>
-        </div>
-      ) : null}
-
-      {state.metrics?.length ? (
-        <div className="grid grid-cols-2 gap-2">
-          {state.metrics.map((metric) => (
-            <div
-              key={metric.id}
-              className={cn(
-                "rounded-xl border px-3 py-2",
-                getStatusClass(metric.tone),
-              )}
-            >
-              <div className="text-[10px] font-medium uppercase tracking-[0.14em] opacity-80">
-                {metric.label}
+            <div className="relative flex h-full min-h-0 flex-col overflow-hidden bg-[var(--demo-code-bg)] px-3 py-3 font-mono text-[12px] leading-7 text-[var(--demo-fg)]">
+              <div>
+                {visibleCode.map((line, index) => {
+                  const isAdded = line.trimStart().startsWith("+");
+                  const isRemoved = line.trimStart().startsWith("-");
+
+                  return (
+                    <div
+                      key={`${line}-${index}`}
+                      className={cn(
+                        "flex border-l border-transparent pl-3 transition-colors duration-300",
+                        isAdded &&
+                          "border-[var(--demo-info-border)] bg-[var(--demo-info-soft-bg)] text-[var(--demo-fg)]",
+                        isRemoved &&
+                          "border-[var(--demo-danger-border)] bg-[var(--demo-danger-soft-bg)] text-[var(--demo-fg)]",
+                        !isAdded && !isRemoved && "text-[var(--demo-muted-fg)]",
+
+                        displayEntry?.highlighted &&
+                          index === Math.min(1, visibleCode.length - 1) &&
+                          "animate-pulse",
+                      )}
+                    >
+                      <span
+                        className={cn(
+                          "mr-3 w-3 shrink-0 text-center text-[11px]",
+                          isAdded
+                            ? "text-[var(--demo-info)]"
+                            : isRemoved
+                              ? "text-[var(--demo-danger)]"
+                              : "text-[var(--demo-subtle-fg)]",
+                        )}
+                      >
+                        {isAdded ? "+" : isRemoved ? "-" : " "}
+                      </span>
+                      <span className="min-w-0 flex-1 whitespace-pre-wrap break-words">
+                        {isAdded || isRemoved
+                          ? line.slice(1).trimStart()
+                          : line}
+                      </span>
+                    </div>
+                  );
+                })}
+
+                {displayEntry?.highlighted &&
+                visibleLineCount < activeLineCount ? (
+                  <div className="mt-2 flex items-center gap-2 pl-3 text-[11px] text-[var(--demo-subtle-fg)]">
+                    <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-[var(--demo-accent)]" />
+                    Applying change...
+                  </div>
+                ) : null}
               </div>
-              <div className="mt-1 text-sm font-semibold">{metric.value}</div>
+
+              <div className="flex-1" />
             </div>
-          ))}
+          </div>
         </div>
-      ) : null}
-
-      <div className="space-y-2">
-        {state.entries.map((entry) => {
-          const isActive =
-            entry.id === state.activeEntryId || entry.highlighted;
-
-          return (
-            <div
-              key={entry.id}
-              className={cn(
-                "rounded-xl border border-border/60 bg-background/70 px-3 py-2.5",
-                isActive && "border-primary/40 bg-primary/6",
-              )}
-            >
-              <div className="flex items-start justify-between gap-3">
-                <div className="min-w-0 flex-1">
-                  <div className="text-sm text-card-foreground">
-                    {entry.message}
-                  </div>
-                  {(entry.source || entry.timestamp) && (
-                    <div className="mt-1 text-[11px] text-muted-foreground">
-                      {[entry.source, entry.timestamp]
-                        .filter(Boolean)
-                        .join(" • ")}
-                    </div>
-                  )}
-                  {entry.detail && (
-                    <p className="mt-2 text-xs leading-relaxed text-muted-foreground">
-                      {entry.detail}
-                    </p>
-                  )}
+
+        {state.metrics?.length ? (
+          <div className="hidden w-[6.75rem] shrink-0 border-l border-[var(--demo-border)] bg-[var(--demo-panel-muted-bg)] p-2 lg:flex lg:flex-col lg:gap-2">
+            {state.metrics.map((metric) => (
+              <div
+                key={metric.id}
+                className="rounded-md border border-[var(--demo-border)] bg-[var(--demo-panel-bg)] px-2 py-2 text-center"
+              >
+                <div className="text-[10px] uppercase tracking-[0.16em] text-[var(--demo-subtle-fg)]">
+                  {metric.label}
+                </div>
+                <div className="mt-1 font-mono text-[12px] text-[var(--demo-fg)]">
+                  {metric.value}
                 </div>
-                {entry.status && (
-                  <span
-                    className={cn(
-                      "rounded-full border px-2 py-1 text-[10px] font-medium uppercase tracking-[0.14em]",
-                      getStatusClass(entry.status),
-                    )}
-                  >
-                    {entry.status}
-                  </span>
-                )}
               </div>
-            </div>
-          );
-        })}
+            ))}
+          </div>
+        ) : null}
       </div>
     </div>
   );