npm - @x12i/static-memorix - Versions diffs - 2.0.0 - Mend

@x12i/static-memorix 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (83) hide show

package/LICENSE +21 -0
package/README.md +431 -0
package/dist/cli.d.ts +17 -0
package/dist/cli.js +278 -0
package/dist/config.d.ts +39 -0
package/dist/config.js +109 -0
package/dist/engine/aliases.d.ts +32 -0
package/dist/engine/aliases.js +74 -0
package/dist/engine/associations.d.ts +26 -0
package/dist/engine/associations.js +60 -0
package/dist/engine/identity.d.ts +22 -0
package/dist/engine/identity.js +50 -0
package/dist/engine/inventory.d.ts +29 -0
package/dist/engine/inventory.js +133 -0
package/dist/engine/lists.d.ts +18 -0
package/dist/engine/lists.js +62 -0
package/dist/engine/narratives.d.ts +16 -0
package/dist/engine/narratives.js +67 -0
package/dist/engine/objectTypes.d.ts +11 -0
package/dist/engine/objectTypes.js +71 -0
package/dist/engine/query.d.ts +38 -0
package/dist/engine/query.js +191 -0
package/dist/engine/records.d.ts +23 -0
package/dist/engine/records.js +152 -0
package/dist/engine/snapshots.d.ts +17 -0
package/dist/engine/snapshots.js +110 -0
package/dist/engine/write.d.ts +30 -0
package/dist/engine/write.js +163 -0
package/dist/routes/helpers.d.ts +4 -0
package/dist/routes/helpers.js +29 -0
package/dist/routes/index.d.ts +2 -0
package/dist/routes/index.js +402 -0
package/dist/server.d.ts +15 -0
package/dist/server.js +130 -0
package/dist/storage/InMemoryStore.d.ts +31 -0
package/dist/storage/InMemoryStore.js +242 -0
package/dist/storage/fs.d.ts +6 -0
package/dist/storage/fs.js +54 -0
package/dist/types.d.ts +88 -0
package/dist/types.js +37 -0
package/guides/demo-app.md +527 -0
package/guides/managing-json-files.md +384 -0
package/guides/running-the-service.md +269 -0
package/guides/using-the-api.md +265 -0
package/mocks/data/admin/snapshots.json +52 -0
package/mocks/data/assets/analysis.json +14 -0
package/mocks/data/assets/decisions.json +14 -0
package/mocks/data/assets/events.json +4 -0
package/mocks/data/assets/snapshots.json +49 -0
package/mocks/data/findings/analysis.json +4 -0
package/mocks/data/findings/decisions.json +4 -0
package/mocks/data/findings/events.json +3 -0
package/mocks/data/findings/snapshots.json +21 -0
package/mocks/data/marketing/snapshots.json +75 -0
package/mocks/data/memory/memory.json +31 -0
package/mocks/data/product/snapshots.json +84 -0
package/mocks/data/system/inventory.json +8 -0
package/mocks/data/users/snapshots.json +5 -0
package/mocks/demo.html +828 -0
package/mocks/metadata/agents.json +7 -0
package/mocks/metadata/lists/assets-default.json +22 -0
package/mocks/metadata/lists/backlog.json +10 -0
package/mocks/metadata/lists/findings-default.json +9 -0
package/mocks/metadata/lists/my-plate.json +10 -0
package/mocks/metadata/lists/this-week.json +10 -0
package/mocks/metadata/narratives/admin.json +7 -0
package/mocks/metadata/narratives/assets.json +17 -0
package/mocks/metadata/narratives/findings.json +7 -0
package/mocks/metadata/narratives/marketing.json +17 -0
package/mocks/metadata/narratives/product.json +12 -0
package/mocks/metadata/object-types/admin.json +6 -0
package/mocks/metadata/object-types/assets.json +9 -0
package/mocks/metadata/object-types/findings.json +8 -0
package/mocks/metadata/object-types/marketing.json +6 -0
package/mocks/metadata/object-types/memory.json +6 -0
package/mocks/metadata/object-types/product.json +6 -0
package/mocks/metadata/object-types/users.json +13 -0
package/mocks/metadata/write-descriptors/admin-task-write.json +20 -0
package/mocks/metadata/write-descriptors/assets-analysis-write.json +14 -0
package/mocks/metadata/write-descriptors/marketing-task-write.json +20 -0
package/mocks/metadata/write-descriptors/memory-write.json +14 -0
package/mocks/metadata/write-descriptors/product-task-write.json +20 -0
package/package.json +67 -0

package/mocks/demo.html ADDED Viewed

@@ -0,0 +1,828 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#0c0f16" />
+  <title>FlowState</title>
+  <style>
+    :root {
+      --bg: #0c0f16; --panel: #11151f; --panel-2: #161c28;
+      --line: #222c3c; --line-soft: rgba(255,255,255,.065);
+      --text: #f0f2f6; --muted: #7e8da0; --muted-2: #556072;
+      --accent: #8b7cff; --accent-rgb: 139,124,255;
+      --product: #8b7cff; --marketing: #5cb8ff; --admin: #f1b761;
+      --todo: #556072; --doing: #5cb8ff; --done: #52d4a8;
+      --urgent: #ff7088; --normal: #7e8da0; --low: #444e4e;
+      --danger: #ff7088;
+      --shadow: 0 20px 60px rgba(0,0,0,.4);
+    }
+    * { box-sizing: border-box; }
+    html, body { height: 100%; margin: 0; }
+    body { overflow: hidden; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
+    button, input, select, textarea { font: inherit; color: inherit; }
+    button, input, select, textarea { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 6px; padding: 6px 10px; outline: none; transition: .12s; }
+    button, input, select, textarea:focus { border-color: var(--accent); }
+    button { cursor: pointer; }
+    button.primary { background: var(--accent); border-color: transparent; color: white; }
+    button.primary:hover { filter: brightness(1.08); }
+    button.danger { background: transparent; border-color: rgba(255,112,136,.25); color: var(--danger); }
+    button.danger:hover { background: rgba(255,112,136,.08); }
+    textarea { resize: vertical; min-height: 80px; }
+    .app { display: grid; grid-template-columns: 240px 1fr 360px; height: 100vh; }
+    /* ── Sidebar ─────────────────────────────── */
+    .sidebar { background: var(--panel); border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; overflow: hidden; }
+    .brand { padding: 20px 18px 16px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; gap: 11px; }
+    .brand-icon { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, #aa9fff, #6657e8); box-shadow: 0 8px 24px rgba(102,87,232,.35); flex-shrink: 0; display: grid; place-items: center; }
+    .brand-icon svg { width: 16px; height: 16px; }
+    .brand h1 { font-size: 15px; letter-spacing: -.02em; margin: 0; }
+    .brand small { display: block; font-size: 9px; color: var(--muted-2); letter-spacing: .06em; text-transform: uppercase; margin-top: 1px; }
+    .nav-group { padding: 14px 12px 6px; }
+    .nav-label { font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); padding: 0 8px 7px; }
+    .nav-list { list-style: none; margin: 0; padding: 0; }
+    .nav-item { margin: 1px 0; }
+    .nav-item button { width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid transparent; background: transparent; text-align: left; font-size: 12px; }
+    .nav-item button:hover { background: rgba(255,255,255,.035); }
+    .nav-item.active button { background: rgba(var(--accent-rgb),.1); border-color: rgba(var(--accent-rgb),.25); }
+    .nav-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+    .nav-text { min-width: 0; }
+    .nav-text strong { display: block; font-weight: 600; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .nav-text small { display: block; font-size: 9px; color: var(--muted-2); margin-top: 1px; }
+    .nav-count { margin-left: auto; font-size: 9px; font-weight: 700; color: var(--muted-2); background: rgba(255,255,255,.04); padding: 1px 6px; border-radius: 5px; }
+    .sidebar-footer { margin-top: auto; border-top: 1px solid var(--line-soft); padding: 12px 14px; }
+    .status-pill { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.025); border: 1px solid var(--line-soft); font-size: 9px; }
+    .status-light { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
+    .status-light.on { background: var(--done); box-shadow: 0 0 8px rgba(82,212,168,.5); }
+    .status-light.off { background: var(--muted-2); }
+    .status-light.busy { background: var(--doing); animation: pulse 1s ease-in-out infinite; }
+    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
+    /* ── Main ────────────────────────────────── */
+    .main { min-width: 0; display: flex; flex-direction: column; background: radial-gradient(ellipse at 50% 20%, #131a28 0%, #0c0f16 60%); }
+    .topbar { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-bottom: 1px solid var(--line-soft); background: rgba(12,15,22,.7); backdrop-filter: blur(12px); flex-shrink: 0; }
+    .search-box { position: relative; flex: 1; max-width: 400px; }
+    .search-box svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; stroke: var(--muted-2); fill: none; }
+    .search-box input { width: 100%; height: 34px; padding: 0 30px 0 30px; background: rgba(255,255,255,.03); }
+    .search-box kbd { position: absolute; right: 8px; top: 7px; font-size: 9px; color: var(--muted-2); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; font-family: inherit; }
+    .filter-btn { height: 34px; padding: 0 10px; font-size: 10px; font-weight: 600; background: rgba(255,255,255,.03); color: var(--muted); }
+    .filter-btn:hover { background: rgba(255,255,255,.06); color: var(--text); }
+    .filter-btn.active { background: rgba(var(--accent-rgb),.12); border-color: rgba(var(--accent-rgb),.3); color: var(--text); }
+    .content-head { padding: 16px 22px 12px; border-bottom: 1px solid var(--line-soft); flex-shrink: 0; }
+    .content-head h2 { margin: 0; font-size: 20px; letter-spacing: -.035em; font-weight: 750; }
+    .content-head p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
+    .content-body { flex: 1; overflow: auto; padding: 14px 22px 32px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
+    .metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
+    .metric { padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 9px; background: rgba(255,255,255,.018); }
+    .metric strong { display: block; font-size: 18px; letter-spacing: -.03em; }
+    .metric span { display: block; font-size: 9px; color: var(--muted); margin-top: 1px; }
+    .task-list { display: grid; gap: 6px; }
+    .task-card { display: grid; grid-template-columns: 3px 1fr auto; gap: 0 12px; padding: 11px 13px; border: 1px solid var(--line-soft); border-radius: 9px; background: rgba(255,255,255,.015); cursor: pointer; transition: .12s; align-items: center; }
+    .task-card:hover { border-color: rgba(var(--accent-rgb),.3); background: rgba(var(--accent-rgb),.03); }
+    .task-card.selected { border-color: var(--accent); background: rgba(var(--accent-rgb),.06); }
+    .task-bar { width: 3px; height: 36px; border-radius: 2px; grid-row: 1; }
+    .task-title { font-size: 12px; font-weight: 600; line-height: 1.3; }
+    .task-meta { font-size: 10px; color: var(--muted); margin-top: 2px; }
+    .task-badges { display: flex; gap: 4px; align-self: center; flex-wrap: wrap; justify-content: end; }
+    .badge { padding: 2px 6px; border-radius: 5px; font-size: 8px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
+    .badge.urgent { background: rgba(255,112,136,.12); color: var(--urgent); }
+    .badge.normal { background: rgba(255,255,255,.05); color: var(--muted); }
+    .badge.low { background: rgba(255,255,255,.03); color: var(--low); }
+    .badge.todo { background: rgba(85,96,114,.15); color: var(--todo); }
+    .badge.doing { background: rgba(92,184,255,.12); color: var(--doing); }
+    .badge.done { background: rgba(82,212,168,.12); color: var(--done); }
+    .badge.someday { background: rgba(85,96,114,.08); color: var(--muted-2); }
+    .badge.user { background: rgba(139,124,255,.12); color: var(--accent); }
+    .empty { text-align: center; padding: 48px 20px; color: var(--muted); }
+    .empty .ico { font-size: 24px; margin-bottom: 10px; opacity: .4; }
+    /* ── Detail Panel ────────────────────────── */
+    .detail { background: var(--panel); border-left: 1px solid var(--line-soft); display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
+    .detail-head { padding: 18px 18px 14px; border-bottom: 1px solid var(--line-soft); position: relative; }
+    .detail-head-actions { position: absolute; top: 14px; right: 14px; display: flex; gap: 6px; }
+    .icon-btn { padding: 4px 8px; font-size: 11px; line-height: 1; border-radius: 6px; background: rgba(255,255,255,.03); border-color: var(--line-soft); color: var(--muted); }
+    .icon-btn:hover { background: rgba(255,255,255,.07); color: var(--text); }
+    .detail-kicker { font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
+    .detail-head h2 { margin: 5px 0 3px; font-size: 17px; letter-spacing: -.03em; line-height: 1.2; }
+    .detail-head p { margin: 0; font-size: 10px; color: var(--muted); line-height: 1.5; }
+    .title-edit { width: 100%; font-size: 17px; font-weight: 700; letter-spacing: -.03em; padding: 4px 6px; }
+    .detail-tabs { display: flex; border-bottom: 1px solid var(--line-soft); padding: 0 14px; flex-shrink: 0; }
+    .dtab { flex: 1; padding: 10px 4px 8px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: 9px; font-weight: 750; }
+    .dtab.active { color: white; border-bottom-color: var(--accent); }
+    .dtab:hover { color: var(--text); }
+    .detail-body { flex: 1; overflow: auto; padding: 16px 16px 28px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
+    .dsection { margin-bottom: 20px; }
+    .dsection h3 { font-size: 8px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 9px; }
+    .edit-grid { display: grid; gap: 10px; }
+    .edit-row { display: grid; grid-template-columns: 90px 1fr; gap: 10px; align-items: center; }
+    .edit-label { font-size: 10px; color: var(--muted-2); font-weight: 600; }
+    .edit-input { width: 100%; }
+    .status-btns { display: flex; gap: 6px; flex-wrap: wrap; }
+    .status-btn { flex: 1; min-width: 60px; padding: 7px; font-size: 10px; font-weight: 600; border-radius: 6px; background: rgba(255,255,255,.04); color: var(--muted); transition: .12s; }
+    .status-btn:hover { background: rgba(255,255,255,.08); }
+    .status-btn.active { color: white; }
+    .chat-list { display: grid; gap: 10px; margin-bottom: 14px; }
+    .chat-msg { padding: 10px 12px; border-radius: 9px; background: rgba(255,255,255,.025); border: 1px solid var(--line-soft); }
+    .chat-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
+    .chat-author { font-size: 10px; font-weight: 650; color: var(--accent); }
+    .chat-time { font-size: 9px; color: var(--muted-2); }
+    .chat-text { font-size: 11px; line-height: 1.5; color: var(--muted); white-space: pre-wrap; word-break: break-word; }
+    .chat-input-area { display: grid; gap: 8px; }
+    .chat-input { width: 100%; min-height: 60px; }
+    .chat-row { display: flex; gap: 8px; }
+    .chat-row select { flex: 1; }
+    .chat-row button { padding: 0 16px; }
+    .empty-detail { text-align: center; padding: 48px 16px; color: var(--muted); }
+    .empty-detail .ico { font-size: 22px; margin-bottom: 8px; opacity: .35; }
+    .toast { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; padding: 8px 14px; border-radius: 9px; border: 1px solid rgba(var(--accent-rgb),.25); background: rgba(22,28,40,.95); color: var(--text); font-size: 10px; box-shadow: var(--shadow); transition: .25s; z-index: 100; }
+    .toast.show { transform: translate(-50%, 0); opacity: 1; }
+    .toast.error { border-color: rgba(255,112,136,.4); }
+    /* ── Create Modal ────────────────────────── */
+    .modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; z-index: 200; }
+    .modal-bg.show { display: flex; }
+    .modal { width: min(440px, calc(100vw - 32px)); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 20px; }
+    .modal h3 { margin: 0 0 4px; font-size: 16px; letter-spacing: -.02em; }
+    .modal p { margin: 0 0 16px; font-size: 10px; color: var(--muted); }
+    .modal .field { display: grid; gap: 4px; margin-bottom: 12px; }
+    .modal .field label { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
+    .modal .field input, .modal .field select { width: 100%; }
+    .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
+    @media (max-width: 1000px) { .app { grid-template-columns: 220px 1fr; } .detail { display: none; } }
+    @media (max-width: 640px) { .app { grid-template-columns: 1fr; } .sidebar { display: none; } }
+  </style>
+</head>
+<body>
+  <div class="app">
+    <aside class="sidebar">
+      <div class="brand">
+        <div class="brand-icon"><svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.2" stroke-linecap="round"><path d="M5 12h14M12 5v14"/></svg></div>
+        <div><h1>FlowState</h1><small>Explorer demo</small></div>
+      </div>
+      <div class="nav-group">
+        <div class="nav-label">Areas</div>
+        <ul id="areaList" class="nav-list"></ul>
+      </div>
+      <div class="nav-group">
+        <div class="nav-label">Quick Views</div>
+        <ul id="viewList" class="nav-list"></ul>
+      </div>
+      <div class="sidebar-footer">
+        <div class="status-pill"><span id="statusDot" class="status-light off"></span><span id="statusText">Connecting…</span><span id="savingIndicator" class="nav-count" style="display:none; margin-left:auto">Saving…</span></div>
+      </div>
+    </aside>
+    <main class="main">
+      <header class="topbar">
+        <div class="search-box">
+          <svg viewBox="0 0 24 24" stroke-width="1.8"><circle cx="11" cy="11" r="6.5"/><path d="m16 16 4.5 4.5"/></svg>
+          <input id="search" type="search" placeholder="Search tasks…" autocomplete="off" />
+          <kbd>/</kbd>
+        </div>
+        <button class="filter-btn" data-filter="status:todo">To Do</button>
+        <button class="filter-btn" data-filter="status:doing">Doing</button>
+        <button class="filter-btn" data-filter="status:done">Done</button>
+        <button class="filter-btn" data-filter="priority:urgent">Urgent</button>
+        <button id="addTaskBtn" class="primary" style="margin-left:auto; padding: 0 14px;">+ New Task</button>
+      </header>
+      <div id="contentHead" class="content-head">
+        <h2 id="headTitle">All Tasks</h2>
+        <p id="headDesc">Everything across every area.</p>
+      </div>
+      <div id="contentBody" class="content-body"></div>
+    </main>
+    <aside class="detail">
+      <div class="detail-head">
+        <div id="detailHeadActions" class="detail-head-actions" style="display:none">
+          <button id="deleteBtn" class="icon-btn" title="Delete task">Delete</button>
+        </div>
+        <div id="dKicker" class="detail-kicker" style="color:var(--accent)">Task</div>
+        <h2 id="dTitle">Select a task</h2>
+        <p id="dDesc">Click any task to see details.</p>
+      </div>
+      <div class="detail-tabs">
+        <button class="dtab active" data-tab="overview">Overview</button>
+        <button class="dtab" data-tab="chat">Chat</button>
+      </div>
+      <div id="dBody" class="detail-body">
+        <div class="empty-detail"><div class="ico">&#9671;</div><p>No task selected.</p></div>
+      </div>
+    </aside>
+  </div>
+  <!-- Create Modal -->
+  <div id="createModal" class="modal-bg" role="dialog" aria-modal="true">
+    <div class="modal">
+      <h3>New Task</h3>
+      <p>Creates a record via <code>POST /api/explorer/records/write</code>.</p>
+      <div class="field">
+        <label for="newTitle">Title</label>
+        <input id="newTitle" type="text" placeholder="What needs to be done?" />
+      </div>
+      <div class="field">
+        <label for="newArea">Area</label>
+        <select id="newArea"></select>
+      </div>
+      <div class="field">
+        <label for="newStatus">Status</label>
+        <select id="newStatus"></select>
+      </div>
+      <div class="field">
+        <label for="newPriority">Priority</label>
+        <select id="newPriority"></select>
+      </div>
+      <div class="field">
+        <label for="newAssignee">Assignee</label>
+        <select id="newAssignee"></select>
+      </div>
+      <div class="modal-actions">
+        <button id="cancelCreateBtn">Cancel</button>
+        <button id="confirmCreateBtn" class="primary">Create task</button>
+      </div>
+    </div>
+  </div>
+  <div id="toast" class="toast" role="status"></div>
+  <script>
+  "use strict";
+  // ──────────────────────────────────────────────────
+  // API client (uses the Explorer API exclusively)
+  // ──────────────────────────────────────────────────
+  const API = location.origin + "/api/explorer";
+  async function apiGet(path) {
+    const r = await fetch(`${API}${path}`);
+    if (!r.ok) throw new Error(`GET ${path} → ${r.status}`);
+    return r.json();
+  }
+  async function apiWrite(writeDescriptorId, operation, input) {
+    const r = await fetch(`${API}/records/write`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ writeDescriptorId, operation, input }),
+    });
+    if (!r.ok) {
+      const body = await r.json().catch(() => ({}));
+      throw new Error(`write ${operation} → ${r.status}: ${body.error || r.statusText}`);
+    }
+    return r.json();
+  }
+  async function apiDelete(entityName, recordId) {
+    const writeDescriptorId = `${entityName}-task-write`;
+    const r = await fetch(
+      `${API}/records/item?entityName=${encodeURIComponent(entityName)}&recordId=${encodeURIComponent(recordId)}&writeDescriptorId=${encodeURIComponent(writeDescriptorId)}`,
+      { method: "DELETE" },
+    );
+    if (!r.ok) throw new Error(`delete → ${r.status}`);
+    return r.json();
+  }
+  const $ = (s, r = document) => r.querySelector(s);
+  const $$ = (s, r = document) => [...r.querySelectorAll(s)];
+  const h = s => String(s ?? "").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
+  const AREAS = {
+    product:    { label: "Product",    color: "var(--product)",    desc: "Building the thing." },
+    marketing:  { label: "Marketing",  color: "var(--marketing)",  desc: "Getting people to see the thing." },
+    admin:      { label: "Admin",      color: "var(--admin)",      desc: "Keeping the lights on." },
+  };
+  const AREA_KEYS = Object.keys(AREAS);
+  const STATUS_COLORS = { todo: "var(--todo)", doing: "var(--doing)", done: "var(--done)", someday: "var(--muted-2)" };
+  const STATUS_ORDER  = { doing: 0, todo: 1, someday: 2, done: 3 };
+  const STATUS_OPTIONS   = ["todo", "doing", "done", "someday"];
+  const PRIORITY_OPTIONS = ["urgent", "normal", "low"];
+  const label = value => value ? value[0].toUpperCase() + value.slice(1) : "";
+  const state = {
+    users: [],
+    tasks: [],
+    view: "all",
+    filterStatus: "",
+    filterPriority: "",
+    search: "",
+    selectedId: null,
+    detailTab: "overview",
+    savingInFlight: 0,
+    toastTimer: null,
+  };
+  function toast(msg, isError = false) {
+    const el = $("#toast");
+    el.textContent = msg;
+    el.classList.toggle("error", isError);
+    el.classList.add("show");
+    clearTimeout(state.toastTimer);
+    state.toastTimer = setTimeout(() => el.classList.remove("show"), 2400);
+  }
+  function setBusy(isBusy) {
+    const el = $("#savingIndicator");
+    el.style.display = isBusy ? "inline-block" : "none";
+    el.textContent = "Saving…";
+  }
+  // ──────────────────────────────────────────────────
+  // Data loading
+  // ──────────────────────────────────────────────────
+  async function loadUsers() {
+    const res = await apiGet("/records/collection?entityName=users&limit=500");
+    return res.rows || [];
+  }
+  async function loadAllTasks() {
+    // Tasks span 3 area collections; fan out and merge.
+    const results = await Promise.all(
+      AREA_KEYS.map(a => apiGet(`/records/collection?entityName=${a}&limit=500`)),
+    );
+    return results.flatMap(r => r.rows || []);
+  }
+  async function refreshAll() {
+    const [users, tasks] = await Promise.all([loadUsers(), loadAllTasks()]);
+    state.users = users;
+    state.tasks = tasks;
+  }
+  // ──────────────────────────────────────────────────
+  // Mutations (all go through /records/write)
+  // ──────────────────────────────────────────────────
+  async function persistTask(task, operation) {
+    const wd = `${task.area}-task-write`;
+    state.savingInFlight++;
+    setBusy(true);
+    try {
+      const res = await apiWrite(wd, operation, task);
+      return res;
+    } catch (e) {
+      toast(`Save failed: ${e.message}`, true);
+      throw e;
+    } finally {
+      state.savingInFlight--;
+      if (state.savingInFlight === 0) setBusy(false);
+    }
+  }
+  async function updateTask(taskId, updates) {
+    const idx = state.tasks.findIndex(t => t.recordId === taskId);
+    if (idx === -1) return;
+    const previous = state.tasks[idx];
+    const next = { ...previous, ...updates };
+    state.tasks[idx] = next;
+    renderMain();
+    renderDetail();
+    try {
+      await persistTask(next, "upsert");
+    } catch {
+      state.tasks[idx] = previous; // rollback
+      renderMain();
+      renderDetail();
+    }
+  }
+  async function createTask(draft) {
+    try {
+      const res = await persistTask(draft, "add");
+      // Server may return created records; otherwise use the draft as-is.
+      const created = (res.results && res.results[0]) || draft;
+      state.tasks.unshift(created);
+      state.selectedId = created.recordId;
+      state.view = "all";
+      renderSidebar();
+      renderMain();
+      renderDetail();
+      toast("Task created");
+    } catch {
+      /* error already toasted */
+    }
+  }
+  async function deleteTask(taskId) {
+    const idx = state.tasks.findIndex(t => t.recordId === taskId);
+    if (idx === -1) return;
+    const task = state.tasks[idx];
+    state.savingInFlight++;
+    setBusy(true);
+    try {
+      await apiDelete(task.area, task.recordId);
+      state.tasks.splice(idx, 1);
+      if (state.selectedId === taskId) state.selectedId = null;
+      renderSidebar();
+      renderMain();
+      renderDetail();
+      toast("Task deleted");
+    } catch (e) {
+      toast(`Delete failed: ${e.message}`, true);
+    } finally {
+      state.savingInFlight--;
+      if (state.savingInFlight === 0) setBusy(false);
+    }
+  }
+  async function addComment(taskId, text, authorId) {
+    const idx = state.tasks.findIndex(t => t.recordId === taskId);
+    if (idx === -1) return;
+    const task = state.tasks[idx];
+    const chat = Array.isArray(task.chat) ? [...task.chat] : [];
+    chat.push({
+      id: `cmt-${Date.now()}`,
+      authorId,
+      timestamp: new Date().toISOString(),
+      text,
+    });
+    await updateTask(taskId, { chat });
+  }
+  // ──────────────────────────────────────────────────
+  // Filtering
+  // ──────────────────────────────────────────────────
+  function filtered() {
+    let tasks = state.tasks;
+    const v = state.view;
+    if (v.startsWith("area:")) tasks = tasks.filter(t => t.area === v.split(":")[1]);
+    else if (v === "view:my-plate")     tasks = tasks.filter(t => t.assigneeId);
+    else if (v === "view:this-week")    tasks = tasks.filter(t => t.dueDate && t.status !== "Done");
+    else if (v === "view:backlog")      tasks = tasks.filter(t => t.status === "todo" && t.priority === "normal");
+    if (state.filterStatus)   tasks = tasks.filter(t => t.status === state.filterStatus);
+    if (state.filterPriority) tasks = tasks.filter(t => t.priority === state.filterPriority);
+    if (state.search) {
+      const q = state.search.toLowerCase();
+      tasks = tasks.filter(t => (t.title + " " + t.area + " " + (t.notes || "")).toLowerCase().includes(q));
+    }
+    tasks.sort((a, b) => (STATUS_ORDER[(a.status || "").toLowerCase()] ?? 9) - (STATUS_ORDER[(b.status || "").toLowerCase()] ?? 9));
+    return tasks;
+  }
+  // ──────────────────────────────────────────────────
+  // Rendering
+  // ──────────────────────────────────────────────────
+  function renderSidebar() {
+    const counts = {};
+    state.tasks.forEach(t => { counts[t.area] = (counts[t.area] || 0) + 1; });
+    $("#areaList").innerHTML = AREA_KEYS.map(id => {
+      const a = AREAS[id];
+      const active = state.view === `area:${id}`;
+      return `<li class="nav-item${active ? " active" : ""}"><button data-view="area:${id}">
+        <span class="nav-dot" style="background:${a.color}"></span>
+        <span class="nav-text"><strong>${h(a.label)}</strong><small>${counts[id] || 0} tasks</small></span>
+      </button></li>`;
+    }).join("");
+    const views = [
+      ["my-plate",   "My Plate",   "Assigned tasks"],
+      ["this-week",  "This Week",  "Active & due soon"],
+      ["backlog",    "Backlog",    "Todo / normal priority"],
+    ];
+    $("#viewList").innerHTML = views.map(([id, label, sub]) => {
+      const active = state.view === `view:${id}`;
+      return `<li class="nav-item${active ? " active" : ""}"><button data-view="view:${id}">
+        <span class="nav-dot" style="background:var(--muted-2)"></span>
+        <span class="nav-text"><strong>${label}</strong><small>${sub}</small></span>
+      </button></li>`;
+    }).join("");
+  }
+  function renderMain() {
+    const tasks = filtered();
+    const total  = state.tasks.length;
+    const doing  = state.tasks.filter(t => t.status === "doing").length;
+    const done   = state.tasks.filter(t => t.status === "done").length;
+    const urgent = state.tasks.filter(t => t.priority === "urgent" && t.status !== "done").length;
+    let title = "All Tasks", desc = "Everything across every area.";
+    if (state.view.startsWith("area:")) {
+      const key = state.view.split(":")[1];
+      const a = AREAS[key];
+      title = a?.label || title;
+      desc = a?.desc || desc;
+    }
+    else if (state.view === "view:my-plate")    { title = "My Plate";   desc = "Tasks assigned to someone."; }
+    else if (state.view === "view:this-week")   { title = "This Week";  desc = "Active tasks with due dates."; }
+    else if (state.view === "view:backlog")     { title = "Backlog";    desc = "Todo items with normal priority."; }
+    $("#headTitle").textContent = title;
+    $("#headDesc").textContent  = desc;
+    let html = `<div class="metrics">
+      <div class="metric"><strong>${total}</strong><span>Total</span></div>
+      <div class="metric"><strong>${doing}</strong><span>In Progress</span></div>
+      <div class="metric"><strong>${done}</strong><span>Done</span></div>
+      <div class="metric" style="${urgent ? "" : "opacity:.4"}"><strong style="${urgent ? "color:var(--urgent)" : ""}">${urgent}</strong><span>Urgent</span></div>
+    </div>`;
+    if (!tasks.length) html += `<div class="empty"><div class="ico">&#9744;</div><p>No tasks here.</p></div>`;
+    else html += `<div class="task-list">${tasks.map(t => {
+      const sel = state.selectedId === t.recordId;
+      const areaKey = (t.area || "").toLowerCase();
+      const areaColor = AREAS[areaKey]?.color || "var(--muted)";
+      const user = state.users.find(u => u.recordId === t.assigneeId);
+      const statusKey = (t.status || "").toLowerCase();
+      const priorityKey = (t.priority || "").toLowerCase();
+      return `<div class="task-card${sel ? " selected" : ""}" data-id="${h(t.recordId)}">
+        <div class="task-bar" style="background:${areaColor}"></div>
+        <div>
+          <div class="task-title">${h(t.title)}</div>
+          <div class="task-meta">${user ? h(user.name) : "Unassigned"}${t.dueDate ? " · " + h(t.dueDate.split("T")[0]) : ""}</div>
+        </div>
+        <div class="task-badges">
+          <span class="badge ${priorityKey}">${h(t.priority)}</span>
+          <span class="badge ${statusKey}">${h(t.status)}</span>
+        </div>
+      </div>`;
+    }).join("")}</div>`;
+    $("#contentBody").innerHTML = html;
+  }
+  function renderDetail() {
+    const t = state.tasks.find(x => x.recordId === state.selectedId);
+    const actions = $("#detailHeadActions");
+    if (!t) {
+      actions.style.display = "none";
+      $("#dKicker").textContent = "Task";
+      $("#dKicker").style.color = "var(--accent)";
+      $("#dTitle").textContent = "Select a task";
+      $("#dDesc").textContent = "Click any task to see details.";
+      $("#dBody").innerHTML = `<div class="empty-detail"><div class="ico">&#9671;</div><p>No task selected.</p></div>`;
+      return;
+    }
+    actions.style.display = "flex";
+    const areaKey = (t.area || "").toLowerCase();
+    const areaColor = AREAS[areaKey]?.color || "var(--accent)";
+    $("#dKicker").textContent = AREAS[areaKey]?.label || t.area || "Task";
+    $("#dKicker").style.color = areaColor;
+    $("#dTitle").textContent = t.title;
+    $("#dDesc").textContent  = `${t.status} · ${t.priority} priority${t.dueDate ? " · due " + t.dueDate.split("T")[0] : ""}`;
+    if (state.detailTab === "overview") {
+      const userOptions = [{ recordId: "", name: "Unassigned" }, ...state.users];
+      $("#dBody").innerHTML = `
+        <div class="dsection"><h3>Properties</h3><div class="edit-grid">
+          <div class="edit-row"><span class="edit-label">Status</span><div class="status-btns">
+            ${STATUS_OPTIONS.map(s => `<button class="status-btn ${t.status === s ? "active" : ""}" style="${t.status === s ? `background:${STATUS_COLORS[s] || "var(--accent)"};border-color:transparent` : ""}" data-field="status" data-value="${h(s)}">${h(label(s))}</button>`).join("")}
+          </div></div>
+          <div class="edit-row"><span class="edit-label">Priority</span><div class="status-btns">
+            ${PRIORITY_OPTIONS.map(p => `<button class="status-btn ${t.priority === p ? "active" : ""}" style="${t.priority === p ? "background:var(--accent);border-color:transparent" : ""}" data-field="priority" data-value="${h(p)}">${h(label(p))}</button>`).join("")}
+          </div></div>
+          <div class="edit-row"><span class="edit-label">Area</span>
+            <select class="edit-input" id="areaSelect" data-field="area">
+              ${AREA_KEYS.map(k => `<option value="${h(k)}" ${areaKey === k ? "selected" : ""}>${h(AREAS[k].label)}</option>`).join("")}
+            </select>
+          </div>
+          <div class="edit-row"><span class="edit-label">Assignee</span>
+            <select class="edit-input" id="assigneeSelect" data-field="assigneeId">
+              ${userOptions.map(u => `<option value="${h(u.recordId)}" ${t.assigneeId === u.recordId ? "selected" : ""}>${h(u.name)}</option>`).join("")}
+            </select>
+          </div>
+          <div class="edit-row"><span class="edit-label">Due Date</span>
+            <input type="date" class="edit-input" id="dueDateInput" data-field="dueDate" value="${h(t.dueDate?.split("T")[0] || "")}" />
+          </div>
+        </div></div>
+        <div class="dsection"><h3>Notes</h3>
+          <textarea id="notesInput" class="edit-input" placeholder="Add notes...">${h(t.notes || "")}</textarea>
+        </div>`;
+      bindOverviewInputs();
+    } else {
+      const userMap = new Map(state.users.map(u => [u.recordId, u.name]));
+      $("#dBody").innerHTML = `
+        <div class="dsection"><h3>Chat (${(t.chat || []).length})</h3>
+          <div class="chat-list">${(t.chat || []).map(c => {
+            const author = userMap.get(c.authorId) || "Unknown";
+            const time = new Date(c.timestamp).toLocaleString();
+            return `<div class="chat-msg">
+              <div class="chat-header">
+                <span class="chat-author">${h(author)}</span>
+                <span class="chat-time">${h(time)}</span>
+              </div>
+              <div class="chat-text">${h(c.text)}</div>
+            </div>`;
+          }).join("")}</div>
+        </div>
+        <div class="dsection"><h3>Add Comment</h3>
+          <div class="chat-input-area">
+            <textarea id="chatInput" class="chat-input edit-input" placeholder="Write a comment..."></textarea>
+            <div class="chat-row">
+              <select id="chatAuthor">${state.users.map(u => `<option value="${h(u.recordId)}">${h(u.name)}</option>`).join("")}</select>
+              <button id="sendChatBtn" class="primary">Send</button>
+            </div>
+          </div>
+        </div>`;
+    }
+  }
+  // ──────────────────────────────────────────────────
+  // Create Modal
+  // ──────────────────────────────────────────────────
+  function openCreateModal() {
+    $("#newArea").innerHTML = AREA_KEYS.map(k => `<option value="${h(k)}">${h(AREAS[k].label)}</option>`).join("");
+    $("#newStatus").innerHTML = STATUS_OPTIONS.map(s => `<option value="${h(s)}">${h(label(s))}</option>`).join("");
+    $("#newPriority").innerHTML = PRIORITY_OPTIONS.map(p => `<option value="${h(p)}">${h(label(p))}</option>`).join("");
+    $("#newAssignee").innerHTML =
+      `<option value="">Unassigned</option>` +
+      state.users.map(u => `<option value="${h(u.recordId)}">${h(u.name)}</option>`).join("");
+    // Default area to current view if looking at a single area
+    if (state.view.startsWith("area:")) $("#newArea").value = state.view.split(":")[1];
+    $("#newTitle").value = "";
+    $("#createModal").classList.add("show");
+    setTimeout(() => $("#newTitle").focus(), 30);
+  }
+  function closeCreateModal() {
+    $("#createModal").classList.remove("show");
+  }
+  async function confirmCreate() {
+    const title = $("#newTitle").value.trim();
+    if (!title) { toast("Title is required", true); return; }
+    const area = $("#newArea").value;
+    const draft = {
+      recordId: `t-${Date.now()}`,
+      title,
+      area,
+      status: $("#newStatus").value,
+      priority: $("#newPriority").value,
+      assigneeId: $("#newAssignee").value || null,
+      dueDate: "",
+      notes: "",
+      chat: [],
+      narratives: {},
+    };
+    closeCreateModal();
+    await createTask(draft);
+  }
+  // ──────────────────────────────────────────────────
+  // Events
+  // ──────────────────────────────────────────────────
+  function bindOverviewInputs() {
+    const areaSel = $("#areaSelect");
+    if (areaSel) areaSel.addEventListener("change", async () => {
+      // Moving areas requires delete + add on the old/new collections.
+      const task = state.tasks.find(t => t.recordId === state.selectedId);
+      if (!task) return;
+      const newArea = areaSel.value;
+      if (newArea === task.area) return;
+      const moved = { ...task, area: newArea };
+      try {
+        await apiDelete(task.area, task.recordId);
+        try {
+          await persistTask(moved, "add");
+        } catch (moveError) {
+          // A move spans two collection writes. Restore the source record if
+          // the destination write fails so the task is never silently lost.
+          await persistTask(task, "add");
+          throw moveError;
+        }
+        const idx = state.tasks.findIndex(t => t.recordId === task.recordId);
+        state.tasks[idx] = moved;
+        renderSidebar();
+        renderMain();
+        renderDetail();
+        toast("Task moved");
+      } catch (e) {
+        toast(`Move failed: ${e.message}`, true);
+      }
+    });
+    const assigneeSel = $("#assigneeSelect");
+    if (assigneeSel) assigneeSel.addEventListener("change", () =>
+      updateTask(state.selectedId, { assigneeId: assigneeSel.value || null }));
+    const dueInput = $("#dueDateInput");
+    if (dueInput) dueInput.addEventListener("change", () =>
+      updateTask(state.selectedId, { dueDate: dueInput.value }));
+    const notesInput = $("#notesInput");
+    if (notesInput) {
+      let timer;
+      notesInput.addEventListener("input", () => {
+        clearTimeout(timer);
+        const v = notesInput.value;
+        timer = setTimeout(() => updateTask(state.selectedId, { notes: v }), 400);
+      });
+    }
+  }
+  function bindEvents() {
+    document.addEventListener("click", e => {
+      const navBtn = e.target.closest("[data-view]");
+      if (navBtn) { state.view = navBtn.dataset.view; state.selectedId = null; renderSidebar(); renderMain(); renderDetail(); return; }
+      const taskCard = e.target.closest("[data-id]");
+      if (taskCard) { state.selectedId = taskCard.dataset.id; renderMain(); renderDetail(); return; }
+      const statusBtn = e.target.closest("[data-field]");
+      if (statusBtn && (statusBtn.dataset.field === "status" || statusBtn.dataset.field === "priority")) {
+        updateTask(state.selectedId, { [statusBtn.dataset.field]: statusBtn.dataset.value });
+        return;
+      }
+      if (e.target.id === "addTaskBtn") { openCreateModal(); return; }
+      if (e.target.id === "cancelCreateBtn") { closeCreateModal(); return; }
+      if (e.target.id === "confirmCreateBtn") { confirmCreate(); return; }
+      if (e.target.id === "deleteBtn") {
+        if (state.selectedId && confirm("Delete this task? This calls DELETE /api/explorer/records/item.")) {
+          deleteTask(state.selectedId);
+        }
+        return;
+      }
+      if (e.target.id === "sendChatBtn") {
+        const text = $("#chatInput")?.value.trim();
+        const author = $("#chatAuthor")?.value;
+        if (text && author) {
+          addComment(state.selectedId, text, author);
+          $("#chatInput").value = "";
+        }
+        return;
+      }
+    });
+    $$(".dtab").forEach(t => t.addEventListener("click", () => {
+      state.detailTab = t.dataset.tab;
+      $$(".dtab").forEach(x => x.classList.toggle("active", x === t));
+      renderDetail();
+    }));
+    $$(".filter-btn").forEach(btn => btn.addEventListener("click", () => {
+      const [kind, val] = btn.dataset.filter.split(":");
+      const currentlyActive = btn.classList.contains("active");
+      $$(".filter-btn").forEach(b => b.classList.remove("active"));
+      if (kind === "status") state.filterStatus = currentlyActive ? "" : val;
+      if (kind === "priority") state.filterPriority = currentlyActive ? "" : val;
+      if (!currentlyActive) btn.classList.add("active");
+      renderMain();
+    }));
+    let searchTimer;
+    $("#search").addEventListener("input", () => {
+      clearTimeout(searchTimer);
+      searchTimer = setTimeout(() => { state.search = $("#search").value; renderMain(); }, 150);
+    });
+    $("#newTitle").addEventListener("keydown", e => {
+      if (e.key === "Enter") { e.preventDefault(); confirmCreate(); }
+      if (e.key === "Escape") closeCreateModal();
+    });
+    document.addEventListener("keydown", e => {
+      if ($("#createModal").classList.contains("show")) return;
+      if (e.key === "/" && !/input|textarea|select/i.test(document.activeElement.tagName)) {
+        e.preventDefault(); $("#search").focus();
+      }
+      if (e.key === "Escape") {
+        if (state.selectedId) { state.selectedId = null; renderMain(); renderDetail(); }
+      }
+      if ((e.metaKey || e.ctrlKey) && e.key === "n") { e.preventDefault(); openCreateModal(); }
+    });
+  }
+  // ──────────────────────────────────────────────────
+  // Init
+  // ──────────────────────────────────────────────────
+  async function init() {
+    bindEvents();
+    const dot = $("#statusDot"), txt = $("#statusText");
+    dot.className = "status-light busy";
+    txt.textContent = "Loading…";
+    try {
+      await refreshAll();
+      dot.className = "status-light on";
+      txt.textContent = `Connected · ${state.tasks.length} tasks`;
+    } catch (e) {
+      dot.className = "status-light off";
+      txt.textContent = "Failed to load";
+      toast(`Load failed: ${e.message}`, true);
+    }
+    renderSidebar();
+    renderMain();
+    renderDetail();
+  }
+  init();
+  </script>
+</body>
+</html>