diff --git a/webui/src/web-components/demo/demo-fixtures/tool-calls.ts b/webui/src/web-components/demo/demo-fixtures/tool-calls.ts
new file mode 100644
index 0000000..eaa5009
--- /dev/null
+++ b/webui/src/web-components/demo/demo-fixtures/tool-calls.ts
@@ -0,0 +1,101 @@
+/**
+ * Shared fake tool call data for demos
+ */
+
+import { ToolCall } from "../../../types";
+
+export const sampleToolCalls: ToolCall[] = [
+  {
+    name: "multiple-choice",
+    input: JSON.stringify({
+      question: "What is your favorite programming language?",
+      choices: [
+        "JavaScript",
+        "TypeScript",
+        "Python",
+        "Go",
+        "Rust",
+        "Java",
+        "C#",
+        "C++",
+      ],
+    }),
+    tool_call_id: "toolu_01choice123",
+    result_message: {
+      type: "tool",
+      end_of_turn: false,
+      content: "Go",
+      tool_result: JSON.stringify({
+        selected: "Go",
+      }),
+      timestamp: new Date().toISOString(),
+      conversation_id: "demo-conversation",
+      idx: 1,
+    },
+  },
+  {
+    name: "multiple-choice",
+    input: JSON.stringify({
+      question: "Which feature would you like to implement next?",
+      choices: [
+        "Dark mode",
+        "User profiles",
+        "Social sharing",
+        "Analytics dashboard",
+      ],
+    }),
+    tool_call_id: "toolu_01choice456",
+    // No result yet, showing the choices without a selection
+  },
+  {
+    name: "bash",
+    input: JSON.stringify({
+      command:
+        "docker ps -a --format '{{.ID}} {{.Image }} {{.Names}}' | grep sketch | awk '{print $1 }' | xargs -I {} docker rm {} && docker image prune -af",
+    }),
+    tool_call_id: "toolu_01bash123",
+    result: "Removed containers and pruned images",
+  },
+  {
+    name: "patch",
+    input: JSON.stringify({
+      path: "/app/src/components/Button.tsx",
+      patches: [
+        {
+          operation: "replace",
+          oldText: "className='btn'",
+          newText: "className='btn btn-primary'",
+        },
+      ],
+    }),
+    tool_call_id: "toolu_01patch123",
+    result: "Applied patch successfully",
+  },
+  {
+    name: "think",
+    input: JSON.stringify({
+      thoughts:
+        "I need to analyze the user's requirements and break this down into smaller steps. The user wants to implement a file upload feature with drag-and-drop support.",
+    }),
+    tool_call_id: "toolu_01think123",
+    result: "Recorded thoughts for planning",
+  },
+];
+
+export const longBashCommand: ToolCall = {
+  name: "bash",
+  input: JSON.stringify({
+    command:
+      'git commit --allow-empty -m "chore: create empty commit with very long message\n\nThis is an extremely long commit message to demonstrate how Git handles verbose commit messages.\nThis empty commit has no actual code changes, but contains a lengthy explanation.\n\nThe empty commit pattern can be useful in several scenarios:\n1. Triggering CI/CD pipelines without modifying code\n2. Marking significant project milestones or releases\n3. Creating annotated reference points in the commit history\n4. Documenting important project decisions"',
+  }),
+  tool_call_id: "toolu_01longbash",
+  result:
+    "[main abc1234] chore: create empty commit with very long message\n\ncommit created successfully",
+};
+
+export const multipleToolCallGroups = [
+  [sampleToolCalls[0], sampleToolCalls[1]], // Multiple choice examples
+  [sampleToolCalls[2]], // Single bash command
+  [sampleToolCalls[3], sampleToolCalls[4]], // Patch and think
+  [longBashCommand], // Long command example
+];