Initial commit: Hammer workspace

2026-01-26 18:54:36 +00:00
commit a149d1666a
8 changed files with 427 additions and 0 deletions
--- a/canvas/index.html
+++ b/canvas/index.html
@@ -0,0 +1,76 @@
+<!doctype html>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Clawdbot Canvas</title>
+<style>
+  html, body { height: 100%; margin: 0; background: #000; color: #fff; font: 16px/1.4 -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
+  .wrap { min-height: 100%; display: grid; place-items: center; padding: 24px; }
+  .card { width: min(720px, 100%); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; padding: 18px 18px 14px; }
+  .title { display: flex; align-items: baseline; gap: 10px; }
+  h1 { margin: 0; font-size: 22px; letter-spacing: 0.2px; }
+  .sub { opacity: 0.75; font-size: 13px; }
+  .row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
+  button { appearance: none; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.10); color: #fff; padding: 10px 12px; border-radius: 12px; font-weight: 600; cursor: pointer; }
+  button:active { transform: translateY(1px); }
+  .ok { color: #24e08a; }
+  .bad { color: #ff5c5c; }
+  .log { margin-top: 14px; opacity: 0.85; font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; white-space: pre-wrap; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.08); padding: 10px; border-radius: 12px; }
+</style>
+<div class="wrap">
+  <div class="card">
+    <div class="title">
+      <h1>Clawdbot Canvas</h1>
+      <div class="sub">Interactive test page (auto-reload enabled)</div>
+    </div>
+
+    <div class="row">
+      <button id="btn-hello">Hello</button>
+      <button id="btn-time">Time</button>
+      <button id="btn-photo">Photo</button>
+      <button id="btn-dalek">Dalek</button>
+    </div>
+
+    <div id="status" class="sub" style="margin-top: 10px;"></div>
+    <div id="log" class="log">Ready.</div>
+  </div>
+</div>
+<script>
+(() => {
+  const logEl = document.getElementById("log");
+  const statusEl = document.getElementById("status");
+  const log = (msg) => { logEl.textContent = String(msg); };
+
+  const hasIOS = () => !!(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.clawdbotCanvasA2UIAction);
+  const hasAndroid = () => !!(window.clawdbotCanvasA2UIAction && typeof window.clawdbotCanvasA2UIAction.postMessage === "function");
+  const hasHelper = () => typeof window.clawdbotSendUserAction === "function";
+  statusEl.innerHTML =
+    "Bridge: " +
+    (hasHelper() ? "<span class='ok'>ready</span>" : "<span class='bad'>missing</span>") +
+    " · iOS=" + (hasIOS() ? "yes" : "no") +
+    " · Android=" + (hasAndroid() ? "yes" : "no");
+
+  window.addEventListener("clawdbot:a2ui-action-status", (ev) => {
+    const d = ev && ev.detail || {};
+    log("Action status: id=" + (d.id || "?") + " ok=" + String(!!d.ok) + (d.error ? (" error=" + d.error) : ""));
+  });
+
+  function send(name, sourceComponentId) {
+    if (!hasHelper()) {
+      log("No action bridge found. Ensure you're viewing this on an iOS/Android Clawdbot node canvas.");
+      return;
+    }
+    const ok = window.clawdbotSendUserAction({
+      name,
+      surfaceId: "main",
+      sourceComponentId,
+      context: { t: Date.now() },
+    });
+    log(ok ? ("Sent action: " + name) : ("Failed to send action: " + name));
+  }
+
+  document.getElementById("btn-hello").onclick = () => send("hello", "demo.hello");
+  document.getElementById("btn-time").onclick = () => send("time", "demo.time");
+  document.getElementById("btn-photo").onclick = () => send("photo", "demo.photo");
+  document.getElementById("btn-dalek").onclick = () => send("dalek", "demo.dalek");
+})();
+</script>