claude-artifact-framework 0.6.0 → 0.7.1

package/dist/index.esm.js

@@ -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) {
@@ -403,7 +638,7 @@ function validateField(field, value) {
   }
   return null;
 }
-function Field({ field, value, onChange }) {
+function Field({ field, value, onChange, data }) {
   const error = validateField(field, value);
   const id = `caf-f-${field.key}`;
   const numeric = field.type === "number" || field.type === "money" || field.type === "percent";
@@ -430,11 +665,12 @@ function Field({ field, value, onChange }) {
   if (field.type === "textarea") {
     control = createElement("textarea", { ...common, rows: field.rows || 3 });
   } else if (field.type === "select") {
+    const options = typeof field.options === "function" ? field.options(data) || [] : field.options || [];
     control = createElement(
       "select",
       common,
       createElement("option", { value: "" }, field.placeholder || "Select\u2026"),
-      (field.options || []).map((opt) => {
+      options.map((opt) => {
         const val = typeof opt === "string" ? opt : opt.value;
         const label = typeof opt === "string" ? opt : opt.label;
         return createElement("option", { key: val, value: val }, label);
@@ -474,6 +710,7 @@ function FieldsBlock({ spec, ctx }) {
       (field) => createElement(Field, {
         key: field.key,
         field,
+        data: ctx.data,
         value: ctx.data[field.key],
         onChange: (v) => ctx.update((d) => {
           d[field.key] = v;
@@ -517,13 +754,15 @@ function TextBlock({ spec, ctx }) {
 }
 function ListBlock({ spec, ctx }) {
   const rows = (typeof spec.list === "function" ? spec.list(ctx.data) : spec.list) || [];
+  const heading = typeof spec.title === "string" ? spec.title : null;
+  const rowTitle2 = typeof spec.title === "function" ? spec.title : (r) => r.title ?? r.name ?? r.label ?? r.text ?? String(r);
   if (!rows.length) {
     return createElement("div", { className: "caf-block caf-empty" }, spec.empty || "Nothing here yet.");
   }
-  const title = spec.title || ((r) => r.title ?? r.name ?? r.label ?? String(r));
   return createElement(
     "div",
     { className: "caf-block caf-list" },
+    heading ? createElement("h2", { className: "caf-block-title" }, heading) : null,
     rows.map(
       (row, i) => createElement(
         "button",
@@ -533,7 +772,7 @@ function ListBlock({ spec, ctx }) {
           type: "button",
           onClick: spec.onSelect ? () => spec.onSelect(row, ctx) : void 0
         },
-        createElement("span", { className: "caf-row-title" }, title(row)),
+        createElement("span", { className: "caf-row-title" }, rowTitle2(row)),
         spec.subtitle ? createElement("span", { className: "caf-row-sub" }, spec.subtitle(row)) : null
       )
     )
@@ -734,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);
@@ -890,6 +1130,7 @@ function DetailScreen({ spec, ctx, record }) {
       (field) => createElement(Field, {
         key: field.key,
         field,
+        data: ctx.data,
         value: record[field.key],
         onChange: (v) => ctx.update((d) => {
           const rec = d.records.find((r) => r.id === record.id);
@@ -950,6 +1191,7 @@ function ItemsEditor({ spec, ctx, record }) {
           (field) => createElement(Field, {
             key: field.key,
             field,
+            data: ctx.data,
             value: item[field.key],
             onChange: (v) => mutate((rec) => {
               const it = rec.items.find((x) => x.id === item.id);
@@ -1047,6 +1289,7 @@ function StepsLayout({ spec, ctx }) {
         (field) => createElement(Field, {
           key: field.key,
           field,
+          data: ctx.data,
           value: ctx.data[field.key],
           onChange: (v) => ctx.update((d) => {
             d[field.key] = v;
@@ -1072,242 +1315,10 @@ 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(() => "");
-    }
-    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 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);
-    }
-  }
-  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 LAYOUTS = ["panel", "records", "steps", "chat", "workspace"];
 var RESERVED = ["title", "empty", "wide", "onSelect", "subtitle"];
-var TOP_KEYS = ["title", "subtitle", "theme", "layout", "blocks", "records", "steps", "chat", "data", "shared"];
+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\`.`);
@@ -1316,6 +1327,31 @@ function checkFields(fields, where) {
         `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") {
+      throw new Error(
+        `claude-artifact-framework: field "${f.key}" in ${where}: \`options\` must be an array or a function of data returning one.`
+      );
+    }
+  }
+}
+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).`
+    );
+  }
+  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(", ")}.`
+    );
+  }
+  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.`
+      );
+    }
   }
 }
 var ACTION_KEYS = ["label", "run", "when", "kind"];
@@ -1359,6 +1395,7 @@ 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`);
   });
 }
 function validate(spec) {
@@ -1407,25 +1444,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 = [...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") {
@@ -1492,10 +1532,12 @@ function defaultsFrom(spec) {
   if ((spec.layout || "panel") === "records" && !Array.isArray(data.records)) {
     data.records = [];
   }
-  if ((spec.layout || "panel") === "chat" && !data.chat) {
+  const allBlocks = [...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 : "";
@@ -1567,7 +1609,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) });
@@ -1747,6 +1798,16 @@ 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-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); }