@gridland/demo 0.2.49 → 0.2.50

package/dist/demo-names.json

@@ -1 +1 @@
-["gradient","ascii","table","spinner","select-input","multi-select","prompt-input","text-input","link","tabs","status-bar","modal","primitives","chat","timeline","message","terminal-window","landing"]
+["gradient","ascii","table","spinner","select-input","multi-select","prompt-input","text-input","link","tabs","status-bar","modal","primitives","chat","chain-of-thought","message","terminal-window","landing"]

package/dist/landing.js

@@ -563,13 +563,19 @@ PromptInput.Model = PromptInputModel;
 // ../ui/components/chat/chat.tsx
 import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 
-// ../ui/components/timeline/timeline.tsx
-import { useState as useState7, useEffect as useEffect2, useRef as useRef5 } from "react";
-import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+// ../ui/components/chain-of-thought/chain-of-thought.tsx
+import { createContext as createContext5, memo, useContext as useContext5, useEffect as useEffect2, useMemo as useMemo4, useState as useState7 } from "react";
+import { Fragment as Fragment6, jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 var DOTS = ["\u25CB", "\u25D4", "\u25D1", "\u25D5", "\u25CF"];
-function getStepDot(status) {
-  return status === "pending" ? "\u25CB" : "\u25CF";
-}
+var SPINNER_INTERVAL = 150;
+var ChainOfThoughtContext = createContext5(null);
+var useChainOfThought = () => {
+  const context = useContext5(ChainOfThoughtContext);
+  if (!context) {
+    throw new Error("ChainOfThought components must be used within <ChainOfThought>");
+  }
+  return context;
+};
 function getStepColor(status, theme) {
   switch (status) {
     case "done":
@@ -584,78 +590,89 @@ function getStepColor(status, theme) {
       return theme.muted;
   }
 }
-function StepRow({ step, isLast, theme, frame }) {
-  const color = getStepColor(step.status, theme);
-  const isActive = step.status === "running";
-  const isPending = step.status === "pending";
+var ChainOfThought = memo(({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  children
+}) => {
+  const [internalOpen, setInternalOpen] = useState7(defaultOpen);
+  const isOpen = open ?? internalOpen;
+  const setIsOpen = onOpenChange ?? setInternalOpen;
+  const context = useMemo4(
+    () => ({ isOpen, setIsOpen }),
+    [isOpen, setIsOpen]
+  );
+  return /* @__PURE__ */ jsx18(ChainOfThoughtContext.Provider, { value: context, children: /* @__PURE__ */ jsx18("box", { flexDirection: "column", children }) });
+});
+var ChainOfThoughtHeader = memo(({
+  duration,
+  children = "Thought for"
+}) => {
+  const theme = useTheme();
+  const { isOpen } = useChainOfThought();
+  const arrow = isOpen ? "\u25BC" : "\u25B6";
+  return /* @__PURE__ */ jsxs12("text", { children: [
+    /* @__PURE__ */ jsx18("span", { style: textStyle({ fg: theme.muted }), children: arrow }),
+    /* @__PURE__ */ jsxs12("span", { style: textStyle({ dim: true, fg: theme.muted }), children: [
+      " ",
+      children,
+      duration ? " " + duration : ""
+    ] })
+  ] });
+});
+var ChainOfThoughtContent = memo(({ children }) => {
+  const { isOpen } = useChainOfThought();
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx18(Fragment6, { children });
+});
+var ChainOfThoughtStep = memo(({
+  label,
+  description,
+  status = "done",
+  isLast = false,
+  children
+}) => {
+  const theme = useTheme();
+  const isActive = status === "running";
+  const isPending = status === "pending";
+  const color = getStepColor(status, theme);
   const pipe = "\u2502";
-  const dot = isActive ? DOTS[frame % DOTS.length] : getStepDot(step.status);
-  const dashIdx = step.label.indexOf(" \u2014 ");
-  const mainLabel = dashIdx >= 0 ? step.label.slice(0, dashIdx) : step.label;
-  const detail = dashIdx >= 0 ? step.label.slice(dashIdx) : "";
+  const [frame, setFrame] = useState7(0);
+  useEffect2(() => {
+    if (!isActive) {
+      setFrame(0);
+      return;
+    }
+    const id = setInterval(() => setFrame((f) => f + 1), SPINNER_INTERVAL);
+    return () => clearInterval(id);
+  }, [isActive]);
+  const dot = isActive ? DOTS[frame % DOTS.length] : isPending ? "\u25CB" : "\u25CF";
   return /* @__PURE__ */ jsxs12("box", { flexDirection: "column", marginLeft: 1, children: [
     /* @__PURE__ */ jsxs12("text", { children: [
       /* @__PURE__ */ jsx18("span", { style: textStyle({ fg: color }), children: dot }),
       /* @__PURE__ */ jsx18("span", { style: textStyle({ fg: theme.foreground }), children: " " }),
-      /* @__PURE__ */ jsx18("span", { style: textStyle({ fg: isPending ? theme.muted : color, dim: isPending, bold: isActive }), children: mainLabel }),
-      detail && /* @__PURE__ */ jsx18("span", { style: textStyle({ dim: true, fg: theme.muted }), children: detail })
+      /* @__PURE__ */ jsx18("span", { style: textStyle({ fg: isPending ? theme.muted : color, dim: isPending, bold: isActive }), children: label }),
+      description && /* @__PURE__ */ jsx18("span", { style: textStyle({ dim: true, fg: theme.muted }), children: " \u2014 " + description })
     ] }),
-    step.output && /* @__PURE__ */ jsxs12("text", { children: [
+    children && /* @__PURE__ */ jsxs12("text", { children: [
       /* @__PURE__ */ jsx18("span", { style: textStyle({ fg: color, dim: true }), children: pipe + "  " }),
-      /* @__PURE__ */ jsx18("span", { style: textStyle({ fg: step.status === "error" ? theme.error : theme.accent }), children: step.output })
+      /* @__PURE__ */ jsx18("span", { style: textStyle({ fg: status === "error" ? theme.error : theme.accent }), children })
     ] }),
     !isLast && /* @__PURE__ */ jsx18("text", { children: /* @__PURE__ */ jsx18("span", { style: textStyle({ fg: color, dim: true }), children: pipe }) })
   ] });
-}
-function Timeline({
-  steps,
-  duration,
-  collapsed = true,
-  headerLabel = "Thought for"
-}) {
-  const theme = useTheme();
-  const arrow = collapsed ? "\u25B6" : "\u25BC";
-  const durationStr = duration ?? "0ms";
-  const hasRunning = steps?.some((s) => s.status === "running") ?? false;
-  const [frame, setFrame] = useState7(0);
-  const alive = useRef5(true);
-  useEffect2(() => {
-    alive.current = true;
-    return () => {
-      alive.current = false;
-    };
-  }, []);
-  useEffect2(() => {
-    if (!hasRunning) return;
-    const id = setInterval(() => {
-      if (alive.current) setFrame((f) => f + 1);
-    }, 150);
-    return () => clearInterval(id);
-  }, [hasRunning]);
-  return /* @__PURE__ */ jsxs12("box", { flexDirection: "column", children: [
-    /* @__PURE__ */ jsxs12("text", { children: [
-      /* @__PURE__ */ jsx18("span", { style: textStyle({ fg: theme.muted }), children: arrow }),
-      /* @__PURE__ */ jsx18("span", { style: textStyle({ dim: true, fg: theme.muted }), children: " " + headerLabel + " " + durationStr })
-    ] }),
-    !collapsed && steps && steps.map((step, i) => /* @__PURE__ */ jsx18(
-      StepRow,
-      {
-        step,
-        isLast: i === steps.length - 1,
-        theme,
-        frame
-      },
-      `step-${i}`
-    ))
-  ] });
-}
+});
+ChainOfThought.displayName = "ChainOfThought";
+ChainOfThoughtHeader.displayName = "ChainOfThoughtHeader";
+ChainOfThoughtContent.displayName = "ChainOfThoughtContent";
+ChainOfThoughtStep.displayName = "ChainOfThoughtStep";
 
 // ../ui/components/message/message.tsx
-import { createContext as createContext5, useContext as useContext5 } from "react";
+import { createContext as createContext6, useContext as useContext6 } from "react";
 import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
-var MessageContext = createContext5(null);
+var MessageContext = createContext6(null);
 function useMessage() {
-  const ctx = useContext5(MessageContext);
+  const ctx = useContext6(MessageContext);
   if (!ctx) throw new Error("useMessage must be used within <Message>");
   return ctx;
 }
@@ -706,14 +723,20 @@ function MessageText({ children, isLast = false }) {
   ] });
 }
 function MessageReasoning({ part }) {
-  return /* @__PURE__ */ jsx19(
-    Timeline,
-    {
-      steps: part.steps,
-      duration: part.duration,
-      collapsed: part.collapsed
-    }
-  );
+  return /* @__PURE__ */ jsxs13(ChainOfThought, { defaultOpen: part.collapsed === false, children: [
+    /* @__PURE__ */ jsx19(ChainOfThoughtHeader, { duration: part.duration }),
+    /* @__PURE__ */ jsx19(ChainOfThoughtContent, { children: part.steps?.map((step, i) => /* @__PURE__ */ jsx19(
+      ChainOfThoughtStep,
+      {
+        label: step.label,
+        description: step.description,
+        status: step.status,
+        isLast: i === (part.steps?.length ?? 0) - 1,
+        children: step.output
+      },
+      i
+    )) })
+  ] });
 }
 function MessageToolInvocation({ part, toolColors }) {
   const theme = useTheme();
@@ -806,7 +829,7 @@ function useBreakpoints() {
 }
 
 // ../docs/components/landing/landing-app.tsx
-import { useCallback as useCallback3, useRef as useRef8, useState as useState10 } from "react";
+import { useCallback as useCallback3, useRef as useRef7, useState as useState10 } from "react";
 
 // ../docs/components/landing/about-modal.tsx
 import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
@@ -906,10 +929,10 @@ function LinksBox() {
 }
 
 // ../docs/components/landing/logo.tsx
-import { useState as useState8, useEffect as useEffect3, useRef as useRef6, useMemo as useMemo4 } from "react";
+import { useState as useState8, useEffect as useEffect3, useRef as useRef5, useMemo as useMemo5 } from "react";
 import figlet from "figlet";
 import ansiShadow from "figlet/importable-fonts/ANSI Shadow.js";
-import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
 figlet.parseFont("ANSI Shadow", ansiShadow);
 function makeArt(text) {
   return figlet.textSync(text, { font: "ANSI Shadow" }).split("\n").filter((l) => l.trimEnd().length > 0).join("\n");
@@ -921,7 +944,7 @@ var ART_HEIGHT = 6;
 function useAnimation(duration = 1e3) {
   const isBrowser = typeof document !== "undefined";
   const [progress, setProgress] = useState8(isBrowser ? 0 : 1);
-  const startTime = useRef6(null);
+  const startTime = useRef5(null);
   useEffect3(() => {
     if (!isBrowser) return;
     let raf;
@@ -943,7 +966,7 @@ function RevealGradient({ children, revealCol }) {
   const lines = children.split("\n");
   const maxLength = Math.max(...lines.map((l) => l.length));
   if (maxLength === 0) return /* @__PURE__ */ jsx24("text", { children });
-  const hexColors = useMemo4(() => generateGradient(gradientColors, maxLength), [maxLength]);
+  const hexColors = useMemo5(() => generateGradient(gradientColors, maxLength), [maxLength]);
   return /* @__PURE__ */ jsx24("box", { position: "relative", width: maxLength, height: lines.length, shouldFill: false, children: lines.map((line, lineIndex) => {
     const runs = [];
     let current = null;
@@ -993,7 +1016,7 @@ function Logo({ compact, narrow, mobile }) {
   const maxWidth = compact ? 8 : narrow ? 40 : 62;
   const revealCol = Math.round(revealProgress * (maxWidth + 4)) - 2;
   const taglineOpacity = Math.max(0, Math.min(1, (progress - 0.7) / 0.3));
-  const subtitle = /* @__PURE__ */ jsxs18(Fragment6, { children: [
+  const subtitle = /* @__PURE__ */ jsxs18(Fragment7, { children: [
     /* @__PURE__ */ jsx24("text", { children: " " }),
     /* @__PURE__ */ jsx24("box", { flexDirection: "column", alignItems: "center", width: "100%", shouldFill: false, children: /* @__PURE__ */ jsxs18("text", { style: textStyle({ fg: "#d4b0e8" }), opacity: taglineOpacity, wrapMode: "word", textAlign: "center", width: "100%", shouldFill: false, children: [
       "A framework for building terminal apps, built on ",
@@ -1035,10 +1058,10 @@ function Logo({ compact, narrow, mobile }) {
 }
 
 // ../docs/components/landing/matrix-background.tsx
-import { useMemo as useMemo5 } from "react";
+import { useMemo as useMemo6 } from "react";
 
 // ../docs/components/landing/use-matrix.ts
-import { useState as useState9, useEffect as useEffect4, useRef as useRef7 } from "react";
+import { useState as useState9, useEffect as useEffect4, useRef as useRef6 } from "react";
 var CHARS = "abcdefghijklmnopqrstuvwxyz0123456789@#$%^&*(){}[]|;:<>,.?/~`";
 function randomChar() {
   return CHARS[Math.floor(Math.random() * CHARS.length)];
@@ -1072,7 +1095,7 @@ function buildGrid(columns, width, height) {
   return { grid, brightness };
 }
 function useMatrix(width, height) {
-  const columnsRef = useRef7([]);
+  const columnsRef = useRef6([]);
   const [state, setState] = useState9(() => {
     const columns = Array.from(
       { length: width },
@@ -1136,11 +1159,11 @@ function colorForCell(mutedColors, b) {
 function MatrixBackground({ width, height, clearRect, clearRects }) {
   const { grid, brightness } = useMatrix(width, height);
   const theme = useTheme();
-  const columnColors = useMemo5(
+  const columnColors = useMemo6(
     () => width > 0 ? generateGradient([theme.accent, theme.secondary, theme.primary], width) : [],
     [width, theme.accent, theme.secondary, theme.primary]
   );
-  const columnMutedColors = useMemo5(
+  const columnMutedColors = useMemo6(
     () => columnColors.map(buildMutedColors),
     [columnColors]
   );
@@ -1180,7 +1203,7 @@ function LandingApp({ useKeyboard }) {
   const [showAbout, setShowAbout] = useState10(false);
   const [messages, setMessages] = useState10([]);
   const [chatStatus, setChatStatus] = useState10("ready");
-  const responseIdx = useRef8(0);
+  const responseIdx = useRef7(0);
   const handleChatSubmit = useCallback3(({ text }) => {
     const userMsg = { id: `u-${Date.now()}`, role: "user", content: text };
     setMessages((prev) => [...prev, userMsg]);

package/dist/run.js

@@ -2,7 +2,7 @@
 import { createCliRenderer, createRoot, useKeyboard as useKeyboard2 } from "@gridland/bun";
 
 // ../ui/scripts/demo-apps.tsx
-import { useState as useState11, useCallback as useCallback4, useRef as useRef9, useEffect as useEffect5 } from "react";
+import { useState as useState11, useCallback as useCallback4, useRef as useRef8, useEffect as useEffect5 } from "react";
 import { useKeyboard } from "@gridland/utils";
 
 // ../ui/components/theme/themes.ts
@@ -1443,13 +1443,19 @@ function ChatPanel({
   ] });
 }
 
-// ../ui/components/timeline/timeline.tsx
-import { useState as useState7, useEffect as useEffect2, useRef as useRef5 } from "react";
-import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+// ../ui/components/chain-of-thought/chain-of-thought.tsx
+import { createContext as createContext5, memo, useContext as useContext5, useEffect as useEffect2, useMemo as useMemo4, useState as useState7 } from "react";
+import { Fragment as Fragment6, jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 var DOTS = ["\u25CB", "\u25D4", "\u25D1", "\u25D5", "\u25CF"];
-function getStepDot(status) {
-  return status === "pending" ? "\u25CB" : "\u25CF";
-}
+var SPINNER_INTERVAL = 150;
+var ChainOfThoughtContext = createContext5(null);
+var useChainOfThought = () => {
+  const context = useContext5(ChainOfThoughtContext);
+  if (!context) {
+    throw new Error("ChainOfThought components must be used within <ChainOfThought>");
+  }
+  return context;
+};
 function getStepColor(status, theme) {
   switch (status) {
     case "done":
@@ -1464,78 +1470,89 @@ function getStepColor(status, theme) {
       return theme.muted;
   }
 }
-function StepRow({ step, isLast, theme, frame }) {
-  const color = getStepColor(step.status, theme);
-  const isActive = step.status === "running";
-  const isPending = step.status === "pending";
+var ChainOfThought = memo(({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  children
+}) => {
+  const [internalOpen, setInternalOpen] = useState7(defaultOpen);
+  const isOpen = open ?? internalOpen;
+  const setIsOpen = onOpenChange ?? setInternalOpen;
+  const context = useMemo4(
+    () => ({ isOpen, setIsOpen }),
+    [isOpen, setIsOpen]
+  );
+  return /* @__PURE__ */ jsx18(ChainOfThoughtContext.Provider, { value: context, children: /* @__PURE__ */ jsx18("box", { flexDirection: "column", children }) });
+});
+var ChainOfThoughtHeader = memo(({
+  duration,
+  children = "Thought for"
+}) => {
+  const theme = useTheme();
+  const { isOpen } = useChainOfThought();
+  const arrow = isOpen ? "\u25BC" : "\u25B6";
+  return /* @__PURE__ */ jsxs12("text", { children: [
+    /* @__PURE__ */ jsx18("span", { style: textStyle({ fg: theme.muted }), children: arrow }),
+    /* @__PURE__ */ jsxs12("span", { style: textStyle({ dim: true, fg: theme.muted }), children: [
+      " ",
+      children,
+      duration ? " " + duration : ""
+    ] })
+  ] });
+});
+var ChainOfThoughtContent = memo(({ children }) => {
+  const { isOpen } = useChainOfThought();
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx18(Fragment6, { children });
+});
+var ChainOfThoughtStep = memo(({
+  label,
+  description,
+  status = "done",
+  isLast = false,
+  children
+}) => {
+  const theme = useTheme();
+  const isActive = status === "running";
+  const isPending = status === "pending";
+  const color = getStepColor(status, theme);
   const pipe = "\u2502";
-  const dot = isActive ? DOTS[frame % DOTS.length] : getStepDot(step.status);
-  const dashIdx = step.label.indexOf(" \u2014 ");
-  const mainLabel = dashIdx >= 0 ? step.label.slice(0, dashIdx) : step.label;
-  const detail = dashIdx >= 0 ? step.label.slice(dashIdx) : "";
+  const [frame, setFrame] = useState7(0);
+  useEffect2(() => {
+    if (!isActive) {
+      setFrame(0);
+      return;
+    }
+    const id = setInterval(() => setFrame((f) => f + 1), SPINNER_INTERVAL);
+    return () => clearInterval(id);
+  }, [isActive]);
+  const dot = isActive ? DOTS[frame % DOTS.length] : isPending ? "\u25CB" : "\u25CF";
   return /* @__PURE__ */ jsxs12("box", { flexDirection: "column", marginLeft: 1, children: [
     /* @__PURE__ */ jsxs12("text", { children: [
       /* @__PURE__ */ jsx18("span", { style: textStyle({ fg: color }), children: dot }),
       /* @__PURE__ */ jsx18("span", { style: textStyle({ fg: theme.foreground }), children: " " }),
-      /* @__PURE__ */ jsx18("span", { style: textStyle({ fg: isPending ? theme.muted : color, dim: isPending, bold: isActive }), children: mainLabel }),
-      detail && /* @__PURE__ */ jsx18("span", { style: textStyle({ dim: true, fg: theme.muted }), children: detail })
+      /* @__PURE__ */ jsx18("span", { style: textStyle({ fg: isPending ? theme.muted : color, dim: isPending, bold: isActive }), children: label }),
+      description && /* @__PURE__ */ jsx18("span", { style: textStyle({ dim: true, fg: theme.muted }), children: " \u2014 " + description })
     ] }),
-    step.output && /* @__PURE__ */ jsxs12("text", { children: [
+    children && /* @__PURE__ */ jsxs12("text", { children: [
       /* @__PURE__ */ jsx18("span", { style: textStyle({ fg: color, dim: true }), children: pipe + "  " }),
-      /* @__PURE__ */ jsx18("span", { style: textStyle({ fg: step.status === "error" ? theme.error : theme.accent }), children: step.output })
+      /* @__PURE__ */ jsx18("span", { style: textStyle({ fg: status === "error" ? theme.error : theme.accent }), children })
     ] }),
     !isLast && /* @__PURE__ */ jsx18("text", { children: /* @__PURE__ */ jsx18("span", { style: textStyle({ fg: color, dim: true }), children: pipe }) })
   ] });
-}
-function Timeline({
-  steps,
-  duration,
-  collapsed = true,
-  headerLabel = "Thought for"
-}) {
-  const theme = useTheme();
-  const arrow = collapsed ? "\u25B6" : "\u25BC";
-  const durationStr = duration ?? "0ms";
-  const hasRunning = steps?.some((s) => s.status === "running") ?? false;
-  const [frame, setFrame] = useState7(0);
-  const alive = useRef5(true);
-  useEffect2(() => {
-    alive.current = true;
-    return () => {
-      alive.current = false;
-    };
-  }, []);
-  useEffect2(() => {
-    if (!hasRunning) return;
-    const id = setInterval(() => {
-      if (alive.current) setFrame((f) => f + 1);
-    }, 150);
-    return () => clearInterval(id);
-  }, [hasRunning]);
-  return /* @__PURE__ */ jsxs12("box", { flexDirection: "column", children: [
-    /* @__PURE__ */ jsxs12("text", { children: [
-      /* @__PURE__ */ jsx18("span", { style: textStyle({ fg: theme.muted }), children: arrow }),
-      /* @__PURE__ */ jsx18("span", { style: textStyle({ dim: true, fg: theme.muted }), children: " " + headerLabel + " " + durationStr })
-    ] }),
-    !collapsed && steps && steps.map((step, i) => /* @__PURE__ */ jsx18(
-      StepRow,
-      {
-        step,
-        isLast: i === steps.length - 1,
-        theme,
-        frame
-      },
-      `step-${i}`
-    ))
-  ] });
-}
+});
+ChainOfThought.displayName = "ChainOfThought";
+ChainOfThoughtHeader.displayName = "ChainOfThoughtHeader";
+ChainOfThoughtContent.displayName = "ChainOfThoughtContent";
+ChainOfThoughtStep.displayName = "ChainOfThoughtStep";
 
 // ../ui/components/message/message.tsx
-import { createContext as createContext5, useContext as useContext5 } from "react";
+import { createContext as createContext6, useContext as useContext6 } from "react";
 import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
-var MessageContext = createContext5(null);
+var MessageContext = createContext6(null);
 function useMessage() {
-  const ctx = useContext5(MessageContext);
+  const ctx = useContext6(MessageContext);
   if (!ctx) throw new Error("useMessage must be used within <Message>");
   return ctx;
 }
@@ -1586,14 +1603,20 @@ function MessageText({ children, isLast = false }) {
   ] });
 }
 function MessageReasoning({ part }) {
-  return /* @__PURE__ */ jsx19(
-    Timeline,
-    {
-      steps: part.steps,
-      duration: part.duration,
-      collapsed: part.collapsed
-    }
-  );
+  return /* @__PURE__ */ jsxs13(ChainOfThought, { defaultOpen: part.collapsed === false, children: [
+    /* @__PURE__ */ jsx19(ChainOfThoughtHeader, { duration: part.duration }),
+    /* @__PURE__ */ jsx19(ChainOfThoughtContent, { children: part.steps?.map((step, i) => /* @__PURE__ */ jsx19(
+      ChainOfThoughtStep,
+      {
+        label: step.label,
+        description: step.description,
+        status: step.status,
+        isLast: i === (part.steps?.length ?? 0) - 1,
+        children: step.output
+      },
+      i
+    )) })
+  ] });
 }
 function MessageToolInvocation({ part, toolColors }) {
   const theme = useTheme();
@@ -1686,7 +1709,7 @@ function useBreakpoints() {
 }
 
 // ../docs/components/landing/landing-app.tsx
-import { useCallback as useCallback3, useRef as useRef8, useState as useState10 } from "react";
+import { useCallback as useCallback3, useRef as useRef7, useState as useState10 } from "react";
 
 // ../docs/components/landing/about-modal.tsx
 import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
@@ -1786,10 +1809,10 @@ function LinksBox() {
 }
 
 // ../docs/components/landing/logo.tsx
-import { useState as useState8, useEffect as useEffect3, useRef as useRef6, useMemo as useMemo4 } from "react";
+import { useState as useState8, useEffect as useEffect3, useRef as useRef5, useMemo as useMemo5 } from "react";
 import figlet from "figlet";
 import ansiShadow from "figlet/importable-fonts/ANSI Shadow.js";
-import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
 figlet.parseFont("ANSI Shadow", ansiShadow);
 function makeArt(text) {
   return figlet.textSync(text, { font: "ANSI Shadow" }).split("\n").filter((l) => l.trimEnd().length > 0).join("\n");
@@ -1801,7 +1824,7 @@ var ART_HEIGHT = 6;
 function useAnimation(duration = 1e3) {
   const isBrowser = typeof document !== "undefined";
   const [progress, setProgress] = useState8(isBrowser ? 0 : 1);
-  const startTime = useRef6(null);
+  const startTime = useRef5(null);
   useEffect3(() => {
     if (!isBrowser) return;
     let raf;
@@ -1823,7 +1846,7 @@ function RevealGradient({ children, revealCol }) {
   const lines = children.split("\n");
   const maxLength = Math.max(...lines.map((l) => l.length));
   if (maxLength === 0) return /* @__PURE__ */ jsx24("text", { children });
-  const hexColors = useMemo4(() => generateGradient(gradientColors, maxLength), [maxLength]);
+  const hexColors = useMemo5(() => generateGradient(gradientColors, maxLength), [maxLength]);
   return /* @__PURE__ */ jsx24("box", { position: "relative", width: maxLength, height: lines.length, shouldFill: false, children: lines.map((line, lineIndex) => {
     const runs = [];
     let current = null;
@@ -1873,7 +1896,7 @@ function Logo({ compact, narrow, mobile }) {
   const maxWidth = compact ? 8 : narrow ? 40 : 62;
   const revealCol = Math.round(revealProgress * (maxWidth + 4)) - 2;
   const taglineOpacity = Math.max(0, Math.min(1, (progress - 0.7) / 0.3));
-  const subtitle = /* @__PURE__ */ jsxs18(Fragment6, { children: [
+  const subtitle = /* @__PURE__ */ jsxs18(Fragment7, { children: [
     /* @__PURE__ */ jsx24("text", { children: " " }),
     /* @__PURE__ */ jsx24("box", { flexDirection: "column", alignItems: "center", width: "100%", shouldFill: false, children: /* @__PURE__ */ jsxs18("text", { style: textStyle({ fg: "#d4b0e8" }), opacity: taglineOpacity, wrapMode: "word", textAlign: "center", width: "100%", shouldFill: false, children: [
       "A framework for building terminal apps, built on ",
@@ -1915,10 +1938,10 @@ function Logo({ compact, narrow, mobile }) {
 }
 
 // ../docs/components/landing/matrix-background.tsx
-import { useMemo as useMemo5 } from "react";
+import { useMemo as useMemo6 } from "react";
 
 // ../docs/components/landing/use-matrix.ts
-import { useState as useState9, useEffect as useEffect4, useRef as useRef7 } from "react";
+import { useState as useState9, useEffect as useEffect4, useRef as useRef6 } from "react";
 var CHARS = "abcdefghijklmnopqrstuvwxyz0123456789@#$%^&*(){}[]|;:<>,.?/~`";
 function randomChar() {
   return CHARS[Math.floor(Math.random() * CHARS.length)];
@@ -1952,7 +1975,7 @@ function buildGrid(columns, width, height) {
   return { grid, brightness };
 }
 function useMatrix(width, height) {
-  const columnsRef = useRef7([]);
+  const columnsRef = useRef6([]);
   const [state, setState] = useState9(() => {
     const columns = Array.from(
       { length: width },
@@ -2016,11 +2039,11 @@ function colorForCell(mutedColors, b) {
 function MatrixBackground({ width, height, clearRect, clearRects }) {
   const { grid, brightness } = useMatrix(width, height);
   const theme = useTheme();
-  const columnColors = useMemo5(
+  const columnColors = useMemo6(
     () => width > 0 ? generateGradient([theme.accent, theme.secondary, theme.primary], width) : [],
     [width, theme.accent, theme.secondary, theme.primary]
   );
-  const columnMutedColors = useMemo5(
+  const columnMutedColors = useMemo6(
     () => columnColors.map(buildMutedColors),
     [columnColors]
   );
@@ -2060,7 +2083,7 @@ function LandingApp({ useKeyboard: useKeyboard3 }) {
   const [showAbout, setShowAbout] = useState10(false);
   const [messages, setMessages] = useState10([]);
   const [chatStatus, setChatStatus] = useState10("ready");
-  const responseIdx = useRef8(0);
+  const responseIdx = useRef7(0);
   const handleChatSubmit = useCallback3(({ text }) => {
     const userMsg = { id: `u-${Date.now()}`, role: "user", content: text };
     setMessages((prev) => [...prev, userMsg]);
@@ -2471,31 +2494,31 @@ function TerminalWindowApp() {
     /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(StatusBar, { items: [{ key: "q", label: "quit" }] }) })
   ] });
 }
-var TIMELINE_STEPS = [
-  { tool: "Read", label: "Reading codebase \u2014 src/", status: "done", delay: 1800 },
-  { tool: "Think", label: "Planning changes \u2014 auth module", status: "done", delay: 2500 },
-  { tool: "Edit", label: "Editing files \u2014 4 files", status: "done", delay: 3200 },
-  { tool: "Bash", label: "Running tests \u2014 vitest", status: "done", delay: 2e3 },
-  { tool: "Edit", label: "Fixing test \u2014 routes.test.ts", status: "done", delay: 1500 }
+var COT_STEPS = [
+  { tool: "Read", label: "Reading codebase", description: "src/", status: "done", delay: 1800 },
+  { tool: "Think", label: "Planning changes", description: "auth module", status: "done", delay: 2500 },
+  { tool: "Edit", label: "Editing files", description: "4 files", status: "done", delay: 3200 },
+  { tool: "Bash", label: "Running tests", description: "vitest", status: "done", delay: 2e3 },
+  { tool: "Edit", label: "Fixing test", description: "routes.test.ts", status: "done", delay: 1500 }
 ];
-function TimelineApp() {
+function ChainOfThoughtApp() {
   const [expanded, setExpanded] = useState11(true);
   const [phase, setPhase] = useState11("running");
   const [stepIndex, setStepIndex] = useState11(0);
-  const timerRef = useRef9(null);
+  const timerRef = useRef8(null);
   useKeyboard((event) => {
     if (event.name === "E" && event.ctrl && event.shift) setExpanded((v) => !v);
-    if (event.name === "r") timelineRestart();
+    if (event.name === "r") cotRestart();
   });
-  function timelineRestart() {
+  function cotRestart() {
     if (timerRef.current) clearTimeout(timerRef.current);
     setPhase("running");
     setStepIndex(0);
   }
   useEffect5(() => {
     if (phase !== "running") return;
-    if (stepIndex < TIMELINE_STEPS.length) {
-      const delay = TIMELINE_STEPS[stepIndex].delay;
+    if (stepIndex < COT_STEPS.length) {
+      const delay = COT_STEPS[stepIndex].delay;
       timerRef.current = setTimeout(() => setStepIndex((i) => i + 1), delay);
     } else {
       timerRef.current = setTimeout(() => setPhase("done"), 500);
@@ -2506,28 +2529,35 @@ function TimelineApp() {
   }, [phase, stepIndex]);
   useEffect5(() => {
     if (phase === "done") {
-      timerRef.current = setTimeout(() => timelineRestart(), 3e3);
+      timerRef.current = setTimeout(() => cotRestart(), 3e3);
     }
     return () => {
       if (timerRef.current) clearTimeout(timerRef.current);
     };
   }, [phase]);
-  const steps = TIMELINE_STEPS.map((s, i) => {
+  const steps = COT_STEPS.map((s, i) => {
     if (i < stepIndex) return { ...s, status: "done" };
     if (i === stepIndex && phase === "running") return { ...s, status: "running" };
     return { ...s, status: phase === "done" ? "done" : "pending" };
   });
-  const elapsedMs = TIMELINE_STEPS.slice(0, stepIndex).reduce((sum, s) => sum + s.delay, 0);
-  const totalMs = TIMELINE_STEPS.reduce((sum, s) => sum + s.delay, 0);
+  const elapsedMs = COT_STEPS.slice(0, stepIndex).reduce((sum, s) => sum + s.delay, 0);
+  const totalMs = COT_STEPS.reduce((sum, s) => sum + s.delay, 0);
+  const durationStr = phase === "done" ? `${(totalMs / 1e3).toFixed(1)}s` : `${(elapsedMs / 1e3).toFixed(1)}s`;
   return /* @__PURE__ */ jsxs20("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsx28("box", { flexDirection: "column", padding: 1, flexGrow: 1, children: /* @__PURE__ */ jsx28(
-      Timeline,
-      {
-        steps,
-        duration: phase === "done" ? `${(totalMs / 1e3).toFixed(1)}s` : `${(elapsedMs / 1e3).toFixed(1)}s`,
-        collapsed: !expanded
-      }
-    ) }),
+    /* @__PURE__ */ jsx28("box", { flexDirection: "column", padding: 1, flexGrow: 1, children: /* @__PURE__ */ jsxs20(ChainOfThought, { open: expanded, onOpenChange: setExpanded, children: [
+      /* @__PURE__ */ jsx28(ChainOfThoughtHeader, { duration: durationStr }),
+      /* @__PURE__ */ jsx28(ChainOfThoughtContent, { children: steps.map((step, i) => /* @__PURE__ */ jsx28(
+        ChainOfThoughtStep,
+        {
+          label: step.label,
+          description: step.description,
+          status: step.status,
+          isLast: i === steps.length - 1,
+          children: step.output
+        },
+        i
+      )) })
+    ] }) }),
     /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(StatusBar, { items: [
       { key: "ctrl+shift+e", label: "toggle" },
       { key: "r", label: "restart" },
@@ -2536,11 +2566,11 @@ function TimelineApp() {
   ] });
 }
 var BUBBLE_STEPS = [
-  { tool: "Read", label: "Reading codebase \u2014 src/", status: "done", delay: 1800 },
-  { tool: "Think", label: "Planning changes \u2014 auth module", status: "done", delay: 2500 },
-  { tool: "Edit", label: "Editing files \u2014 4 files", status: "done", delay: 3200 },
-  { tool: "Bash", label: "Running tests \u2014 vitest", status: "done", delay: 2e3 },
-  { tool: "Edit", label: "Fixing test \u2014 routes.test.ts", status: "done", delay: 1500 }
+  { tool: "Read", label: "Reading codebase", description: "src/", status: "done", delay: 1800 },
+  { tool: "Think", label: "Planning changes", description: "auth module", status: "done", delay: 2500 },
+  { tool: "Edit", label: "Editing files", description: "4 files", status: "done", delay: 3200 },
+  { tool: "Bash", label: "Running tests", description: "vitest", status: "done", delay: 2e3 },
+  { tool: "Edit", label: "Fixing test", description: "routes.test.ts", status: "done", delay: 1500 }
 ];
 var BUBBLE_RESPONSE = "I've refactored the auth module. The changes include extracting the token validation into a shared helper, consolidating the middleware chain, and updating the test suite to match.";
 var BUBBLE_TOTAL_MS = BUBBLE_STEPS.reduce((sum, s) => sum + s.delay, 0);
@@ -2549,7 +2579,7 @@ function MessageApp() {
   const [phase, setPhase] = useState11("idle");
   const [stepIndex, setStepIndex] = useState11(0);
   const [streamedText, setStreamedText] = useState11("");
-  const timerRef = useRef9(null);
+  const timerRef = useRef8(null);
   useKeyboard((event) => {
     if (event.name === "E" && event.ctrl && event.shift) setExpanded((v) => !v);
     if (event.name === "r") bubbleRestart();
@@ -2626,7 +2656,7 @@ function MessageApp() {
         (isStreaming || isDone) && /* @__PURE__ */ jsx28(Message.Content, { children: /* @__PURE__ */ jsx28(Message.Text, { isLast: true, children: isDone ? BUBBLE_RESPONSE : streamedText }) })
       ] })
     ] }),
-    /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(StatusBar, { items: [{ key: "ctrl+shift+e", label: "toggle timeline" }, { key: "r", label: "restart" }, { key: "q", label: "quit" }] }) })
+    /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(StatusBar, { items: [{ key: "ctrl+shift+e", label: "toggle chain of thought" }, { key: "r", label: "restart" }, { key: "q", label: "quit" }] }) })
   ] });
 }
 var initialChatMessages = [
@@ -2641,7 +2671,7 @@ function ChatApp() {
   const [isLoading, setIsLoading] = useState11(false);
   const [streamingText, setStreamingText] = useState11("");
   const [activeToolCalls, setActiveToolCalls] = useState11([]);
-  const intervalRef = useRef9(null);
+  const intervalRef = useRef8(null);
   const handleSend = useCallback4((text) => {
     const userMsg = { id: String(chatNextId++), role: "user", content: text };
     setMessages((prev) => [...prev, userMsg]);
@@ -2711,7 +2741,7 @@ var demos = [
   { name: "modal", app: () => /* @__PURE__ */ jsx28(ModalApp, {}) },
   { name: "primitives", app: () => /* @__PURE__ */ jsx28(PrimitivesApp, {}) },
   { name: "chat", app: () => /* @__PURE__ */ jsx28(ChatApp, {}) },
-  { name: "timeline", app: () => /* @__PURE__ */ jsx28(TimelineApp, {}) },
+  { name: "chain-of-thought", app: () => /* @__PURE__ */ jsx28(ChainOfThoughtApp, {}) },
   { name: "message", app: () => /* @__PURE__ */ jsx28(MessageApp, {}) },
   { name: "terminal-window", app: () => /* @__PURE__ */ jsx28(TerminalWindowApp, {}) },
   { name: "landing", app: () => /* @__PURE__ */ jsx28(LandingApp, { useKeyboard }) }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gridland/demo",
-  "version": "0.2.49",
+  "version": "0.2.50",
   "type": "module",
   "description": "Run gridland component demos from anywhere",
   "exports": {
@@ -21,8 +21,8 @@
     "test": "bun test"
   },
   "dependencies": {
-    "@gridland/bun": "0.2.49",
-    "@gridland/utils": "0.2.49",
+    "@gridland/bun": "0.2.50",
+    "@gridland/utils": "0.2.50",
     "figlet": "^1.10.0",
     "react": "^19.0.0"
   },