claude-artifact-framework 0.7.0 → 0.7.2

package/dist/index.esm.js

@@ -134,7 +134,7 @@ var Component = React && React.Component || class ReactMissing {
 // src/appState.js
 var DATA_KEY = "caf:data";
 var VIEW_KEY = "caf:view";
-var EMPTY_VIEW = { screen: null, arg: null, stack: [], step: 0, selected: null };
+var EMPTY_VIEW = { screen: null, arg: null, stack: [], step: 0, selected: null, tabs: {}, collapsed: {} };
 function isPlainObject(v) {
   return v !== null && typeof v === "object" && !Array.isArray(v);
 }
@@ -372,6 +372,241 @@ function seriesColors(seed, n) {
   return Array.from({ length: n }, (_, i) => hsl((h0 + i * 137.5) % 360, s, 52));
 }
 
+// src/chat.js
+var CHAT_KEYS = ["system", "greeting", "placeholder", "tools", "model", "maxTokens"];
+var DEFAULT_MODEL = "claude-sonnet-4-6";
+var MAX_ROUNDS = 8;
+async function streamCall({ model, maxTokens, system, messages, onText }) {
+  const res = await fetch("https://api.anthropic.com/v1/messages", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ model, max_tokens: maxTokens, system, messages, stream: true })
+  });
+  if (!res.ok || !res.body) {
+    let detail = "";
+    try {
+      const b = await res.json();
+      detail = b && b.error && b.error.message || JSON.stringify(b);
+    } catch {
+      detail = await res.text().catch(() => "");
+    }
+    throw new Error(`HTTP ${res.status}${detail ? ": " + detail : ""}`);
+  }
+  const reader = res.body.getReader();
+  const decoder = new TextDecoder();
+  let full = "";
+  let buf = "";
+  for (; ; ) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    buf += decoder.decode(value, { stream: true });
+    const lines = buf.split("\n");
+    buf = lines.pop();
+    for (const line of lines) {
+      if (!line.startsWith("data: ")) continue;
+      try {
+        const j = JSON.parse(line.slice(6));
+        if (j.type === "content_block_delta" && j.delta && j.delta.text) {
+          full += j.delta.text;
+          if (onText) onText(full);
+        }
+      } catch {
+      }
+    }
+  }
+  return full;
+}
+function parseToolCalls(text) {
+  const match = text.match(/```tool_call\s*\n?([\s\S]*?)```/);
+  if (!match) return null;
+  try {
+    const calls = JSON.parse(match[1]);
+    return Array.isArray(calls) && calls.length ? calls : null;
+  } catch {
+    return null;
+  }
+}
+function stripToolCallBlock(text) {
+  return text.replace(/```tool_call\s*\n?[\s\S]*?```/, "").trim();
+}
+function toolProtocol(tools) {
+  const list = Object.entries(tools).map(([name, t]) => `- ${name}: ${t.description}
+  Input: ${JSON.stringify(t.input || {})}`).join("\n");
+  return `
+
+You have tools available:
+${list}
+
+This environment does not support native function calling. To use a tool, reply ONLY with a \`\`\`tool_call code block containing a JSON array, with no other text in that turn. Example:
+
+\`\`\`tool_call
+[{ "name": "tool_name", "input": { "param": "value" } }]
+\`\`\`
+
+You may include several calls in one array. NEVER invent a tool's result \u2014 emit the pure tool_call block and wait for the real result, which arrives in the next message tagged [TOOL_RESULT]. When you have everything you need, answer in natural language with no tool_call block.`;
+}
+function runTools(calls, tools, ctx) {
+  return calls.map((call) => {
+    const tool = tools[call.name];
+    if (!tool) {
+      return { name: call.name, error: `unknown tool "${call.name}". Valid tools: ${Object.keys(tools).join(", ")}` };
+    }
+    try {
+      const result = tool.run(call.input || {}, ctx);
+      return { name: call.name, result: result === void 0 ? { ok: true } : result };
+    } catch (e) {
+      return { name: call.name, error: String(e && e.message || e) };
+    }
+  });
+}
+var escHtml = (t) => String(t).replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+function renderMarkdown(text) {
+  const codeBlocks = [];
+  let t = String(text).replace(/```[a-z]*\n?([\s\S]*?)```/g, (m, code) => {
+    codeBlocks.push(code.replace(/\n$/, ""));
+    return "\0" + (codeBlocks.length - 1) + "\0";
+  });
+  t = escHtml(t);
+  t = t.replace(/`([^`]+)`/g, "<code>$1</code>");
+  t = t.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
+  t = t.replace(/(^|[^*])\*([^*\n]+)\*/g, "$1<em>$2</em>");
+  t = t.replace(/^#{1,3} (.+)$/gm, '<strong class="caf-md-h">$1</strong>');
+  t = t.replace(/^[-•*] (.+)$/gm, '<span class="caf-md-li">$1</span>');
+  t = t.replace(/^\d+\. (.+)$/gm, '<span class="caf-md-li caf-md-num">$1</span>');
+  t = t.replace(/\n/g, "<br>");
+  t = t.replace(/\u0000(\d+)\u0000/g, (m, i) => '<pre class="caf-code">' + escHtml(codeBlocks[Number(i)]) + "</pre>");
+  return t;
+}
+function Bubble({ m }) {
+  if (m.role === "tools") {
+    return createElement("div", { className: "caf-msg-tools" }, `used: ${m.tools.join(", ")}`);
+  }
+  if (m.role === "error") {
+    return createElement(
+      "div",
+      { className: "caf-msg caf-msg-error" },
+      createElement("strong", null, "The call failed"),
+      createElement("span", null, m.content),
+      createElement("span", { className: "caf-hint" }, "Your message is kept \u2014 send again to retry.")
+    );
+  }
+  if (m.role === "user") return createElement("div", { className: "caf-msg caf-msg-user" }, m.content);
+  return createElement("div", {
+    className: "caf-msg caf-msg-assistant",
+    dangerouslySetInnerHTML: { __html: renderMarkdown(m.content) }
+  });
+}
+function ChatPanel({ cfg, ctx }) {
+  const c = cfg;
+  const [draft, setDraft] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [live, setLive] = useState(null);
+  const endRef = useRef(null);
+  const chat = ctx.data.chat || { api: [], log: [] };
+  const log = chat.log || [];
+  useEffect(() => {
+    if (endRef.current) endRef.current.scrollIntoView({ block: "end" });
+  }, [log.length, live]);
+  async function send() {
+    const text = draft.trim();
+    if (!text || busy) return;
+    setDraft("");
+    setBusy(true);
+    let api = [...chat.api || [], { role: "user", content: text }];
+    let logNow = [...log, { role: "user", content: text }];
+    const commit = () => ctx.update((d) => {
+      d.chat = { api, log: logNow };
+    });
+    commit();
+    try {
+      const system = (typeof c.system === "function" ? c.system(ctx.data) : c.system || "") + (c.tools ? toolProtocol(c.tools) : "");
+      for (let round = 0; round < MAX_ROUNDS; round++) {
+        const raw = await streamCall({
+          model: c.model || DEFAULT_MODEL,
+          maxTokens: c.maxTokens || 2e3,
+          system,
+          messages: api,
+          onText: (t) => setLive(stripToolCallBlock(t))
+        });
+        api = [...api, { role: "assistant", content: raw }];
+        const shown = stripToolCallBlock(raw);
+        const calls = c.tools ? parseToolCalls(raw) : null;
+        if (!calls) {
+          logNow = [...logNow, { role: "assistant", content: shown || raw }];
+          commit();
+          break;
+        }
+        const results = runTools(calls, c.tools, ctx);
+        if (shown) logNow = [...logNow, { role: "assistant", content: shown }];
+        logNow = [...logNow, { role: "tools", tools: calls.map((x) => x.name) }];
+        api = [
+          ...api,
+          {
+            role: "user",
+            content: `[TOOL_RESULT]
+${JSON.stringify(results)}
+[/TOOL_RESULT]
+
+Continue with this information. If you have everything you need, answer in natural language without further tool_call.`
+          }
+        ];
+        commit();
+        setLive(null);
+      }
+    } catch (e) {
+      logNow = [...logNow, { role: "error", content: String(e && e.message || e) }];
+      commit();
+    } finally {
+      setLive(null);
+      setBusy(false);
+    }
+  }
+  return createElement(
+    "div",
+    { className: "caf-chat-panel" },
+    createElement(
+      "div",
+      { className: "caf-block caf-chat-log" },
+      c.greeting ? createElement("div", { className: "caf-msg caf-msg-assistant", dangerouslySetInnerHTML: { __html: renderMarkdown(c.greeting) } }) : null,
+      log.map((m, i) => createElement(Bubble, { key: i, m })),
+      live !== null ? createElement("div", { className: "caf-msg caf-msg-assistant caf-msg-live", dangerouslySetInnerHTML: { __html: renderMarkdown(live || "\u2026") } }) : null,
+      busy && live === null ? createElement("div", { className: "caf-msg-tools" }, "thinking\u2026") : null,
+      createElement("div", { ref: endRef })
+    ),
+    // Deliberately NOT a <form>: the artifact iframe's sandbox lacks
+    // allow-forms, so native form submission is blocked there — and on mobile
+    // the keyboard's send key triggers exactly that implicit submission. A
+    // plain div with onClick + Enter via onKeyDown never touches the native
+    // form machinery, so it can't be sandboxed away.
+    createElement(
+      "div",
+      { className: "caf-chat-input" },
+      createElement("input", {
+        value: draft,
+        placeholder: c.placeholder || "Message\u2026",
+        disabled: busy,
+        enterKeyHint: "send",
+        onChange: (e) => setDraft(e.target.value),
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            send();
+          }
+        },
+        "aria-label": "Message"
+      }),
+      createElement(
+        "button",
+        { type: "button", className: "caf-btn caf-btn-primary", disabled: busy || !draft.trim(), onClick: send },
+        "Send"
+      )
+    )
+  );
+}
+function ChatLayout({ spec, ctx }) {
+  return createElement("div", { className: "caf-panel caf-panel-single" }, createElement(ChatPanel, { cfg: spec.chat, ctx }));
+}
+
 // src/blocks.js
 var FIELD_TYPES = ["text", "textarea", "number", "money", "percent", "check", "date", "select"];
 function formatValue(value, format) {
@@ -738,6 +973,7 @@ var BLOCKS = {
   chart: ChartBlock,
   timer: TimerBlock,
   actions: ActionsBlock,
+  chat: ({ spec, ctx }) => createElement(ChatPanel, { cfg: spec.chat, ctx }),
   custom: CustomBlock
 };
 var BLOCK_NAMES = Object.keys(BLOCKS);
@@ -1079,253 +1315,41 @@ function StepsLayout({ spec, ctx }) {
   );
 }
 
-// src/chat.js
-var CHAT_KEYS = ["system", "greeting", "placeholder", "tools", "model", "maxTokens"];
-var DEFAULT_MODEL = "claude-sonnet-4-6";
-var MAX_ROUNDS = 8;
-async function streamCall({ model, maxTokens, system, messages, onText }) {
-  const res = await fetch("https://api.anthropic.com/v1/messages", {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ model, max_tokens: maxTokens, system, messages, stream: true })
-  });
-  if (!res.ok || !res.body) {
-    let detail = "";
-    try {
-      const b = await res.json();
-      detail = b && b.error && b.error.message || JSON.stringify(b);
-    } catch {
-      detail = await res.text().catch(() => "");
+// src/app.js
+var LAYOUTS = ["panel", "records", "steps", "chat", "workspace"];
+var RESERVED = ["title", "empty", "wide", "onSelect", "subtitle", "when", "collapsible"];
+var TOP_KEYS = ["title", "subtitle", "theme", "layout", "blocks", "records", "steps", "chat", "data", "shared", "main", "sidebar"];
+function checkFields(fields, where) {
+  for (const f of fields || []) {
+    if (!f || !f.key) throw new Error(`claude-artifact-framework: every field in ${where} needs a \`key\`.`);
+    if (f.type !== void 0 && !FIELD_TYPES.includes(f.type)) {
+      throw new Error(
+        `claude-artifact-framework: field "${f.key}" in ${where} has unknown type "${f.type}". Valid types: ${FIELD_TYPES.join(", ")}.`
+      );
     }
-    throw new Error(`HTTP ${res.status}${detail ? ": " + detail : ""}`);
-  }
-  const reader = res.body.getReader();
-  const decoder = new TextDecoder();
-  let full = "";
-  let buf = "";
-  for (; ; ) {
-    const { done, value } = await reader.read();
-    if (done) break;
-    buf += decoder.decode(value, { stream: true });
-    const lines = buf.split("\n");
-    buf = lines.pop();
-    for (const line of lines) {
-      if (!line.startsWith("data: ")) continue;
-      try {
-        const j = JSON.parse(line.slice(6));
-        if (j.type === "content_block_delta" && j.delta && j.delta.text) {
-          full += j.delta.text;
-          if (onText) onText(full);
-        }
-      } catch {
-      }
+    if (f.type === "select" && f.options !== void 0 && !Array.isArray(f.options) && typeof f.options !== "function") {
+      throw new Error(
+        `claude-artifact-framework: field "${f.key}" in ${where}: \`options\` must be an array or a function of data returning one.`
+      );
     }
   }
-  return full;
-}
-function parseToolCalls(text) {
-  const match = text.match(/```tool_call\s*\n?([\s\S]*?)```/);
-  if (!match) return null;
-  try {
-    const calls = JSON.parse(match[1]);
-    return Array.isArray(calls) && calls.length ? calls : null;
-  } catch {
-    return null;
-  }
-}
-function stripToolCallBlock(text) {
-  return text.replace(/```tool_call\s*\n?[\s\S]*?```/, "").trim();
-}
-function toolProtocol(tools) {
-  const list = Object.entries(tools).map(([name, t]) => `- ${name}: ${t.description}
-  Input: ${JSON.stringify(t.input || {})}`).join("\n");
-  return `
-
-You have tools available:
-${list}
-
-This environment does not support native function calling. To use a tool, reply ONLY with a \`\`\`tool_call code block containing a JSON array, with no other text in that turn. Example:
-
-\`\`\`tool_call
-[{ "name": "tool_name", "input": { "param": "value" } }]
-\`\`\`
-
-You may include several calls in one array. NEVER invent a tool's result \u2014 emit the pure tool_call block and wait for the real result, which arrives in the next message tagged [TOOL_RESULT]. When you have everything you need, answer in natural language with no tool_call block.`;
 }
-function runTools(calls, tools, ctx) {
-  return calls.map((call) => {
-    const tool = tools[call.name];
-    if (!tool) {
-      return { name: call.name, error: `unknown tool "${call.name}". Valid tools: ${Object.keys(tools).join(", ")}` };
-    }
-    try {
-      const result = tool.run(call.input || {}, ctx);
-      return { name: call.name, result: result === void 0 ? { ok: true } : result };
-    } catch (e) {
-      return { name: call.name, error: String(e && e.message || e) };
-    }
-  });
-}
-var escHtml = (t) => String(t).replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
-function renderMarkdown(text) {
-  const codeBlocks = [];
-  let t = String(text).replace(/```[a-z]*\n?([\s\S]*?)```/g, (m, code) => {
-    codeBlocks.push(code.replace(/\n$/, ""));
-    return "\0" + (codeBlocks.length - 1) + "\0";
-  });
-  t = escHtml(t);
-  t = t.replace(/`([^`]+)`/g, "<code>$1</code>");
-  t = t.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
-  t = t.replace(/(^|[^*])\*([^*\n]+)\*/g, "$1<em>$2</em>");
-  t = t.replace(/^#{1,3} (.+)$/gm, '<strong class="caf-md-h">$1</strong>');
-  t = t.replace(/^[-•*] (.+)$/gm, '<span class="caf-md-li">$1</span>');
-  t = t.replace(/^\d+\. (.+)$/gm, '<span class="caf-md-li caf-md-num">$1</span>');
-  t = t.replace(/\n/g, "<br>");
-  t = t.replace(/\u0000(\d+)\u0000/g, (m, i) => '<pre class="caf-code">' + escHtml(codeBlocks[Number(i)]) + "</pre>");
-  return t;
-}
-function Bubble({ m }) {
-  if (m.role === "tools") {
-    return createElement("div", { className: "caf-msg-tools" }, `used: ${m.tools.join(", ")}`);
-  }
-  if (m.role === "error") {
-    return createElement(
-      "div",
-      { className: "caf-msg caf-msg-error" },
-      createElement("strong", null, "The call failed"),
-      createElement("span", null, m.content),
-      createElement("span", { className: "caf-hint" }, "Your message is kept \u2014 send again to retry.")
+function checkChatConfig(c, where) {
+  if (!c || typeof c.system !== "string" && typeof c.system !== "function") {
+    throw new Error(
+      `claude-artifact-framework: ${where} needs \`{ system: "..." }\` (a string or a function of data).`
     );
   }
-  if (m.role === "user") return createElement("div", { className: "caf-msg caf-msg-user" }, m.content);
-  return createElement("div", {
-    className: "caf-msg caf-msg-assistant",
-    dangerouslySetInnerHTML: { __html: renderMarkdown(m.content) }
-  });
-}
-function ChatLayout({ spec, ctx }) {
-  const c = spec.chat;
-  const [draft, setDraft] = useState("");
-  const [busy, setBusy] = useState(false);
-  const [live, setLive] = useState(null);
-  const endRef = useRef(null);
-  const chat = ctx.data.chat || { api: [], log: [] };
-  const log = chat.log || [];
-  useEffect(() => {
-    if (endRef.current) endRef.current.scrollIntoView({ block: "end" });
-  }, [log.length, live]);
-  async function send() {
-    const text = draft.trim();
-    if (!text || busy) return;
-    setDraft("");
-    setBusy(true);
-    let api = [...chat.api || [], { role: "user", content: text }];
-    let logNow = [...log, { role: "user", content: text }];
-    const commit = () => ctx.update((d) => {
-      d.chat = { api, log: logNow };
-    });
-    commit();
-    try {
-      const system = (typeof c.system === "function" ? c.system(ctx.data) : c.system || "") + (c.tools ? toolProtocol(c.tools) : "");
-      for (let round = 0; round < MAX_ROUNDS; round++) {
-        const raw = await streamCall({
-          model: c.model || DEFAULT_MODEL,
-          maxTokens: c.maxTokens || 2e3,
-          system,
-          messages: api,
-          onText: (t) => setLive(stripToolCallBlock(t))
-        });
-        api = [...api, { role: "assistant", content: raw }];
-        const shown = stripToolCallBlock(raw);
-        const calls = c.tools ? parseToolCalls(raw) : null;
-        if (!calls) {
-          logNow = [...logNow, { role: "assistant", content: shown || raw }];
-          commit();
-          break;
-        }
-        const results = runTools(calls, c.tools, ctx);
-        if (shown) logNow = [...logNow, { role: "assistant", content: shown }];
-        logNow = [...logNow, { role: "tools", tools: calls.map((x) => x.name) }];
-        api = [
-          ...api,
-          {
-            role: "user",
-            content: `[TOOL_RESULT]
-${JSON.stringify(results)}
-[/TOOL_RESULT]
-
-Continue with this information. If you have everything you need, answer in natural language without further tool_call.`
-          }
-        ];
-        commit();
-        setLive(null);
-      }
-    } catch (e) {
-      logNow = [...logNow, { role: "error", content: String(e && e.message || e) }];
-      commit();
-    } finally {
-      setLive(null);
-      setBusy(false);
-    }
+  const unknown = Object.keys(c).filter((k) => !CHAT_KEYS.includes(k));
+  if (unknown.length) {
+    throw new Error(
+      `claude-artifact-framework: ${where} has unknown keys (${unknown.join(", ")}). Valid keys: ${CHAT_KEYS.join(", ")}.`
+    );
   }
-  return createElement(
-    "div",
-    { className: "caf-panel caf-panel-single" },
-    createElement(
-      "div",
-      { className: "caf-block caf-chat-log" },
-      c.greeting ? createElement("div", { className: "caf-msg caf-msg-assistant", dangerouslySetInnerHTML: { __html: renderMarkdown(c.greeting) } }) : null,
-      log.map((m, i) => createElement(Bubble, { key: i, m })),
-      live !== null ? createElement("div", { className: "caf-msg caf-msg-assistant caf-msg-live", dangerouslySetInnerHTML: { __html: renderMarkdown(live || "\u2026") } }) : null,
-      busy && live === null ? createElement("div", { className: "caf-msg-tools" }, "thinking\u2026") : null,
-      createElement("div", { ref: endRef })
-    ),
-    // Deliberately NOT a <form>: the artifact iframe's sandbox lacks
-    // allow-forms, so native form submission is blocked there — and on mobile
-    // the keyboard's send key triggers exactly that implicit submission. A
-    // plain div with onClick + Enter via onKeyDown never touches the native
-    // form machinery, so it can't be sandboxed away.
-    createElement(
-      "div",
-      { className: "caf-chat-input" },
-      createElement("input", {
-        value: draft,
-        placeholder: c.placeholder || "Message\u2026",
-        disabled: busy,
-        enterKeyHint: "send",
-        onChange: (e) => setDraft(e.target.value),
-        onKeyDown: (e) => {
-          if (e.key === "Enter") {
-            e.preventDefault();
-            send();
-          }
-        },
-        "aria-label": "Message"
-      }),
-      createElement(
-        "button",
-        { type: "button", className: "caf-btn caf-btn-primary", disabled: busy || !draft.trim(), onClick: send },
-        "Send"
-      )
-    )
-  );
-}
-
-// src/app.js
-var LAYOUTS = ["panel", "records", "steps", "chat"];
-var RESERVED = ["title", "empty", "wide", "onSelect", "subtitle"];
-var TOP_KEYS = ["title", "subtitle", "theme", "layout", "blocks", "records", "steps", "chat", "data", "shared"];
-function checkFields(fields, where) {
-  for (const f of fields || []) {
-    if (!f || !f.key) throw new Error(`claude-artifact-framework: every field in ${where} needs a \`key\`.`);
-    if (f.type !== void 0 && !FIELD_TYPES.includes(f.type)) {
-      throw new Error(
-        `claude-artifact-framework: field "${f.key}" in ${where} has unknown type "${f.type}". Valid types: ${FIELD_TYPES.join(", ")}.`
-      );
-    }
-    if (f.type === "select" && f.options !== void 0 && !Array.isArray(f.options) && typeof f.options !== "function") {
+  for (const [name, tool] of Object.entries(c.tools || {})) {
+    if (!tool || typeof tool.description !== "string" || typeof tool.run !== "function") {
       throw new Error(
-        `claude-artifact-framework: field "${f.key}" in ${where}: \`options\` must be an array or a function of data returning one.`
+        `claude-artifact-framework: chat tool "${name}" needs a \`description\` string and a \`run(input, ctx)\` function.`
       );
     }
   }
@@ -1356,7 +1380,7 @@ function checkBlocks(blocks) {
       throw new Error(`claude-artifact-framework: blocks[${i}] must be an object like { fields: [...] }.`);
     }
     const keys = Object.keys(block).filter((k) => !RESERVED.includes(k));
-    const known = keys.filter((k) => BLOCK_NAMES.includes(k));
+    const known = keys.filter((k) => BLOCK_NAMES.includes(k) || k === "tabs");
     if (known.length === 0) {
       throw new Error(
         `claude-artifact-framework: blocks[${i}] has no recognised block type (found: ${keys.join(", ") || "nothing"}). Valid block types: ${BLOCK_NAMES.join(", ")}.`
@@ -1371,6 +1395,25 @@ function checkBlocks(blocks) {
     }
     checkFields(block.fields, `blocks[${i}]`);
     if (known[0] === "actions") checkActions(block.actions, `blocks[${i}].actions`);
+    if (known[0] === "chat") checkChatConfig(block.chat, `blocks[${i}].chat`);
+    if (known[0] === "tabs") {
+      const tabs = block.tabs;
+      if (!Array.isArray(tabs) || tabs.length === 0) {
+        throw new Error(`claude-artifact-framework: blocks[${i}].tabs needs an array of { label, blocks: [...] }.`);
+      }
+      tabs.forEach((t, j) => {
+        if (!t || typeof t.label !== "string" || !Array.isArray(t.blocks) || t.blocks.length === 0) {
+          throw new Error(`claude-artifact-framework: tabs[${j}] needs a \`label\` string and a non-empty \`blocks\` array.`);
+        }
+        if (t.blocks.some((b) => b && b.tabs)) {
+          throw new Error("claude-artifact-framework: tabs cannot nest inside tabs.");
+        }
+        checkBlocks(t.blocks);
+      });
+    }
+    if (block.when !== void 0 && typeof block.when !== "function") {
+      throw new Error(`claude-artifact-framework: blocks[${i}].when must be a function of data returning true/false.`);
+    }
   });
 }
 function validate(spec) {
@@ -1419,25 +1462,28 @@ function validate(spec) {
     return layout;
   }
   if (layout === "chat") {
-    const c = spec.chat;
-    if (!c || typeof c.system !== "string" && typeof c.system !== "function") {
+    checkChatConfig(spec.chat, "chat");
+    return layout;
+  }
+  if (layout === "workspace") {
+    if (!Array.isArray(spec.main) || spec.main.length === 0) {
       throw new Error(
-        'claude-artifact-framework: layout "chat" needs `chat: { system: "..." }` (a string or a function of data).'
+        'claude-artifact-framework: layout "workspace" needs `main: [...]` (an array of blocks). `sidebar: [...]` is optional.'
       );
     }
-    const unknown = Object.keys(c).filter((k) => !CHAT_KEYS.includes(k));
-    if (unknown.length) {
+    checkBlocks(spec.main);
+    if (spec.sidebar !== void 0) {
+      if (!Array.isArray(spec.sidebar)) {
+        throw new Error("claude-artifact-framework: workspace `sidebar` must be an array of blocks.");
+      }
+      checkBlocks(spec.sidebar);
+    }
+    const chats = flattenBlocks([...spec.main, ...spec.sidebar || []]).filter((b) => b && b.chat);
+    if (chats.length > 1) {
       throw new Error(
-        `claude-artifact-framework: chat has unknown keys (${unknown.join(", ")}). Valid keys: ${CHAT_KEYS.join(", ")}.`
+        "claude-artifact-framework: only one chat block per app \u2014 the conversation persists under data.chat and there is exactly one."
       );
     }
-    for (const [name, tool] of Object.entries(c.tools || {})) {
-      if (!tool || typeof tool.description !== "string" || typeof tool.run !== "function") {
-        throw new Error(
-          `claude-artifact-framework: chat tool "${name}" needs a \`description\` string and a \`run(input, ctx)\` function.`
-        );
-      }
-    }
     return layout;
   }
   if (layout === "records") {
@@ -1499,15 +1545,25 @@ function validate(spec) {
   checkBlocks(spec.blocks || []);
   return layout;
 }
+function flattenBlocks(blocks) {
+  const out = [];
+  for (const b of blocks || []) {
+    out.push(b);
+    if (b && Array.isArray(b.tabs)) for (const t of b.tabs) out.push(...flattenBlocks(t.blocks));
+  }
+  return out;
+}
 function defaultsFrom(spec) {
   const data = { ...spec.data || {} };
   if ((spec.layout || "panel") === "records" && !Array.isArray(data.records)) {
     data.records = [];
   }
-  if ((spec.layout || "panel") === "chat" && !data.chat) {
+  const allBlocks = flattenBlocks([...spec.blocks || [], ...spec.main || [], ...spec.sidebar || []]);
+  const hasChat = (spec.layout || "panel") === "chat" || allBlocks.some((b) => b && b.chat);
+  if (hasChat && !data.chat) {
     data.chat = { api: [], log: [] };
   }
-  for (const block of [...spec.blocks || [], ...spec.steps || []]) {
+  for (const block of [...allBlocks, ...spec.steps || []]) {
     for (const field of block.fields || []) {
       if (field && field.key !== void 0 && !(field.key in data)) {
         data[field.key] = field.value !== void 0 ? field.value : field.type === "check" ? false : "";
@@ -1542,10 +1598,69 @@ function boundary(React2) {
   }
   return BlockBoundary;
 }
+function TabsBlock({ spec, ctx }) {
+  const tabs = spec.tabs;
+  const key = tabs.map((t) => t.label).join("|");
+  const stored = ctx.view.tabs ? ctx.view.tabs[key] : void 0;
+  const active = Math.min(stored === void 0 ? 0 : stored, tabs.length - 1);
+  return createElement(
+    "div",
+    { className: "caf-tabs" },
+    createElement(
+      "div",
+      { className: "caf-tabbar", role: "tablist" },
+      tabs.map(
+        (t, i) => createElement(
+          "button",
+          {
+            key: t.label,
+            type: "button",
+            role: "tab",
+            "aria-selected": i === active,
+            className: i === active ? "caf-tab caf-tab-active" : "caf-tab",
+            onClick: () => ctx.setTab(key, i)
+          },
+          t.label
+        )
+      )
+    ),
+    createElement(
+      "div",
+      { className: "caf-tabs-body" },
+      tabs[active].blocks.map((b, i) => createElement(Block, { key: active + ":" + i, block: b, ctx }))
+    )
+  );
+}
+var ALL_BLOCKS = { ...BLOCKS, tabs: TabsBlock };
+var ALL_NAMES = [...BLOCK_NAMES, "tabs"];
 function Block({ block, ctx }) {
-  const name = Object.keys(block).find((k) => BLOCK_NAMES.includes(k));
-  const Component2 = BLOCKS[name];
-  return createElement(boundary(ctx.React), null, createElement(Component2, { spec: block, ctx }));
+  if (typeof block.when === "function" && !block.when(ctx.data)) return null;
+  const name = Object.keys(block).find((k) => ALL_NAMES.includes(k));
+  const Component2 = ALL_BLOCKS[name];
+  const inner = createElement(
+    boundary(ctx.React),
+    null,
+    createElement(Component2, { spec: block.collapsible ? { ...block, title: void 0 } : block, ctx })
+  );
+  if (!block.collapsible) return inner;
+  const key = typeof block.title === "string" && block.title ? block.title : name;
+  const collapsed = ctx.view.collapsed && key in ctx.view.collapsed ? ctx.view.collapsed[key] : block.collapsible === "collapsed";
+  return createElement(
+    "div",
+    { className: "caf-collapse" },
+    createElement(
+      "button",
+      {
+        type: "button",
+        className: "caf-collapse-head",
+        "aria-expanded": !collapsed,
+        onClick: () => ctx.toggleCollapsed(key, !collapsed)
+      },
+      createElement("span", null, block.title || name),
+      createElement("span", { className: collapsed ? "caf-chevron caf-chevron-closed" : "caf-chevron" }, "\u25BE")
+    ),
+    collapsed ? null : createElement("div", { className: "caf-collapse-body" }, inner)
+  );
 }
 function Panel({ spec, ctx }) {
   return createElement(
@@ -1579,7 +1694,16 @@ function RecordsWithBlocks({ spec, ctx }) {
     ) : null
   );
 }
-var LAYOUT_COMPONENTS = { panel: Panel, records: RecordsWithBlocks, steps: StepsLayout, chat: ChatLayout };
+function WorkspaceLayout({ spec, ctx }) {
+  const render = (blocks) => (blocks || []).map((block, i) => createElement("section", { key: i, className: "caf-ws-slot" }, createElement(Block, { block, ctx })));
+  return createElement(
+    "div",
+    { className: "caf-workspace" },
+    createElement("div", { className: "caf-ws-main" }, render(spec.main)),
+    spec.sidebar && spec.sidebar.length ? createElement("div", { className: "caf-ws-side" }, render(spec.sidebar)) : null
+  );
+}
+var LAYOUT_COMPONENTS = { panel: Panel, records: RecordsWithBlocks, steps: StepsLayout, chat: ChatLayout, workspace: WorkspaceLayout };
 function createApp(spec = {}) {
   const layout = validate(spec);
   const state = createAppState(defaultsFrom(spec), { shared: Boolean(spec.shared) });
@@ -1604,6 +1728,8 @@ function createApp(spec = {}) {
       go: state.go,
       back: state.back,
       setStep: (n) => state.setView({ step: n }),
+      setTab: (key, i) => state.setView({ tabs: { ...state.getView().tabs, [key]: i } }),
+      toggleCollapsed: (key, val) => state.setView({ collapsed: { ...state.getView().collapsed, [key]: val } }),
       colors: (n) => seriesColors(spec.theme && spec.theme.seed, n)
     };
     const Layout = LAYOUT_COMPONENTS[layout];
@@ -1759,6 +1885,37 @@ var BASE_CSS = `
 .caf-md-h { display: block; margin-top: 0.3rem; }
 .caf-md-li { display: block; padding-left: 1rem; position: relative; }
 .caf-md-li::before { content: "\u2022"; position: absolute; left: 0.2rem; opacity: 0.6; }
+.caf-workspace { max-width: 1200px; margin: 0 auto; display: flex; gap: 1rem; align-items: flex-start; }
+.caf-ws-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
+.caf-ws-side { width: 340px; flex: none; display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 1rem; }
+.caf-ws-slot { min-width: 0; }
+.caf-chat-panel { display: flex; flex-direction: column; min-height: 0; }
+.caf-ws-side .caf-chat-log { max-height: calc(100vh - 220px); }
+@media (max-width: 900px) {
+  .caf-workspace { flex-direction: column; align-items: stretch; }
+  .caf-ws-side { width: 100%; position: static; }
+}
+.caf-tabs { display: flex; flex-direction: column; gap: 0.8rem; min-width: 0; }
+.caf-tabbar { display: flex; gap: 0.2rem; border-bottom: 1px solid var(--caf-border); overflow-x: auto; }
+.caf-tab {
+  font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
+  padding: 0.45rem 0.8rem; border: none; background: none; color: var(--caf-muted);
+  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
+}
+.caf-tab:hover { color: var(--caf-text); }
+.caf-tab:focus-visible { outline: 2px solid var(--caf-accent); outline-offset: -2px; }
+.caf-tab-active { color: var(--caf-accent); border-bottom-color: var(--caf-accent); }
+.caf-tabs-body { display: flex; flex-direction: column; gap: 0.8rem; }
+.caf-collapse { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
+.caf-collapse-head {
+  font: inherit; font-size: 0.95rem; font-weight: 650; cursor: pointer;
+  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
+  padding: 0.7rem 1rem; border: 1px solid var(--caf-border); border-radius: var(--caf-radius);
+  background: var(--caf-surface); color: var(--caf-text); width: 100%; text-align: left;
+}
+.caf-collapse-head:focus-visible { outline: 2px solid var(--caf-accent); outline-offset: 1px; }
+.caf-chevron { transition: transform 0.15s ease; color: var(--caf-muted); }
+.caf-chevron-closed { transform: rotate(-90deg); }
 .caf-empty, .caf-loading { color: var(--caf-muted); font-size: 0.9rem; text-align: center; padding: 1.6rem 1rem; }
 .caf-block-error { border-color: var(--caf-danger); gap: 0.4rem; }
 .caf-block-error strong { font-size: 0.9rem; color: var(--caf-danger); }