claudeck 1.0.0

package/plugins/tasks/client.js

@@ -0,0 +1,394 @@
+// Tasks Tab — Tab SDK plugin for Todo list with brag tracking
+import { registerTab } from '/js/ui/tab-sdk.js';
+
+const ICONS = {
+  star: `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>`,
+  archive: `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="21 8 21 21 3 21 3 8"/><rect x="1" y="3" width="22" height="5"/><line x1="10" y1="12" x2="14" y2="12"/></svg>`,
+  unarchive: `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>`,
+  starBrag: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>`,
+  archiveBig: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="21 8 21 21 3 21 3 8"/><rect x="1" y="3" width="22" height="5"/><line x1="10" y1="12" x2="14" y2="12"/></svg>`,
+};
+
+function escapeHtml(str) {
+  const div = document.createElement('div');
+  div.textContent = str;
+  return div.innerHTML;
+}
+
+registerTab({
+  id: 'tasks',
+  title: 'Tasks',
+  icon: '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>',
+  init(ctx) {
+    let todos = [];
+    let brags = [];
+    let showArchived = false;
+    let showBrags = false;
+
+    const PRIORITY_LABELS = ['none', 'low', 'medium', 'high'];
+
+    // ── Build DOM ────────────────────────────────────
+    const root = document.createElement('div');
+    root.className = 'tasks-tab';
+    root.style.cssText = 'display:flex;flex-direction:column;flex:1;overflow:hidden;';
+
+    root.innerHTML = `
+      <div class="todo-panel-header">
+        <h3>Todo</h3>
+        <div class="todo-header-actions">
+          <button class="todo-brag-toggle todo-toggle-btn" title="Show brag list">${ICONS.starBrag}</button>
+          <button class="todo-archive-toggle todo-toggle-btn" title="Show archived">${ICONS.archiveBig}</button>
+          <button class="todo-add-btn" title="Add todo">+</button>
+        </div>
+      </div>
+      <div class="todo-list"></div>
+      <div class="todo-input-bar" style="display:none;">
+        <input type="text" class="todo-input" placeholder="New todo..." autocomplete="off">
+      </div>
+    `;
+
+    const todoList = root.querySelector('.todo-list');
+    const todoAddBtn = root.querySelector('.todo-add-btn');
+    const todoInputBar = root.querySelector('.todo-input-bar');
+    const todoInput = root.querySelector('.todo-input');
+    const archToggle = root.querySelector('.todo-archive-toggle');
+    const bragToggle = root.querySelector('.todo-brag-toggle');
+    const todoHeader = root.querySelector('.todo-panel-header h3');
+
+    // ── Render ───────────────────────────────────────
+
+    function renderTodos() {
+      if (showBrags) {
+        renderBrags();
+        return;
+      }
+
+      if (!todos.length) {
+        const isArchived = showArchived;
+        todoList.innerHTML = `
+          <div class="todo-empty">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+              ${isArchived
+                ? '<polyline points="21 8 21 21 3 21 3 8"/><rect x="1" y="3" width="22" height="5"/><line x1="10" y1="12" x2="14" y2="12"/>'
+                : '<path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>'}
+            </svg>
+            <span>${isArchived ? 'No archived todos' : 'No todos yet'}</span>
+            ${!isArchived ? '<span class="todo-empty-hint">Click + to add one</span>' : ''}
+          </div>`;
+        return;
+      }
+
+      todoList.innerHTML = '';
+      for (const t of todos) {
+        const pri = t.priority || 0;
+        const row = document.createElement('div');
+        row.className = 'todo-item' + (t.done ? ' done' : '');
+        if (pri > 0) row.classList.add(`priority-${pri}`);
+        row.dataset.id = t.id;
+
+        const priDot = document.createElement('button');
+        priDot.className = `todo-priority-dot priority-${pri}`;
+        priDot.title = `Priority: ${PRIORITY_LABELS[pri]} (click to change)`;
+        priDot.addEventListener('click', () => handlePriority(t.id, (pri + 1) % 4));
+
+        const cb = document.createElement('input');
+        cb.type = 'checkbox';
+        cb.checked = !!t.done;
+        cb.addEventListener('change', () => handleToggle(t.id, cb.checked ? 1 : 0));
+
+        const span = document.createElement('span');
+        span.className = 'todo-text';
+        span.textContent = t.text;
+        if (!showArchived) span.addEventListener('dblclick', () => startEdit(span, t));
+
+        const actions = document.createElement('span');
+        actions.className = 'todo-actions';
+
+        if (!showArchived) {
+          const bragBtn = document.createElement('button');
+          bragBtn.className = 'todo-action-btn todo-brag-btn';
+          bragBtn.title = 'Brag about this';
+          bragBtn.innerHTML = ICONS.star;
+          bragBtn.addEventListener('click', () => showBragPrompt(t));
+          actions.appendChild(bragBtn);
+        }
+
+        const archBtn = document.createElement('button');
+        archBtn.className = 'todo-action-btn todo-archive-btn';
+        archBtn.title = showArchived ? 'Unarchive' : 'Archive';
+        archBtn.innerHTML = showArchived ? ICONS.unarchive : ICONS.archive;
+        archBtn.addEventListener('click', () => handleArchive(t.id, !showArchived));
+
+        const del = document.createElement('button');
+        del.className = 'todo-action-btn todo-delete-btn';
+        del.textContent = '\u00d7';
+        del.title = 'Delete';
+        del.addEventListener('click', () => handleDelete(t.id));
+
+        actions.append(archBtn, del);
+        row.append(priDot, cb, span, actions);
+        todoList.appendChild(row);
+      }
+    }
+
+    function renderBrags() {
+      if (!brags.length) {
+        todoList.innerHTML = `
+          <div class="todo-empty">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+              <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
+            </svg>
+            <span>No brags yet</span>
+            <span class="todo-empty-hint">Complete a todo and brag about it</span>
+          </div>`;
+        return;
+      }
+      todoList.innerHTML = '';
+      for (const b of brags) {
+        const row = document.createElement('div');
+        row.className = 'brag-item';
+
+        const text = document.createElement('div');
+        text.className = 'brag-text';
+        text.textContent = b.text;
+
+        const summary = document.createElement('div');
+        summary.className = 'brag-summary';
+        summary.textContent = b.summary;
+
+        const date = document.createElement('div');
+        date.className = 'brag-date';
+        date.textContent = new Date(b.created_at * 1000).toLocaleDateString();
+
+        const del = document.createElement('button');
+        del.className = 'todo-action-btn todo-delete-btn brag-delete';
+        del.textContent = '\u00d7';
+        del.title = 'Delete';
+        del.addEventListener('click', async () => {
+          try {
+            await ctx.api.deleteBragApi(b.id);
+            brags = brags.filter(x => x.id !== b.id);
+            renderTodos();
+            refreshCounts();
+          } catch { /* ignore */ }
+        });
+
+        row.append(text, summary, date, del);
+        todoList.appendChild(row);
+      }
+    }
+
+    function updateHeaderToggle() {
+      archToggle.classList.toggle('active', showArchived);
+      archToggle.title = showArchived ? 'Show active todos' : 'Show archived';
+      bragToggle.classList.toggle('active', showBrags);
+      bragToggle.title = showBrags ? 'Show active todos' : 'Show brag list';
+    }
+
+    async function refreshCounts() {
+      try {
+        const counts = await ctx.api.fetchTodoCounts();
+        const label = showBrags ? 'Brags' : showArchived ? 'Archived' : 'Todo';
+        const count = showBrags ? counts.brags : showArchived ? counts.archived : counts.active;
+        todoHeader.textContent = `${label} (${count})`;
+        setBadge(archToggle, counts.archived);
+        setBadge(bragToggle, counts.brags);
+      } catch { /* ignore */ }
+    }
+
+    function setBadge(btn, count) {
+      let badge = btn.querySelector('.todo-count-badge');
+      if (count > 0) {
+        if (!badge) {
+          badge = document.createElement('span');
+          badge.className = 'todo-count-badge';
+          btn.appendChild(badge);
+        }
+        badge.textContent = count;
+      } else if (badge) {
+        badge.remove();
+      }
+    }
+
+    // ── CRUD handlers ────────────────────────────────
+    async function loadTodos() {
+      try {
+        todos = await ctx.api.fetchTodos(showArchived);
+        renderTodos();
+        refreshCounts();
+      } catch { /* ignore */ }
+    }
+
+    async function handleToggle(id, done) {
+      try {
+        await ctx.api.updateTodoApi(id, { done });
+        const t = todos.find(x => x.id === id);
+        if (t) t.done = done;
+        renderTodos();
+      } catch { /* ignore */ }
+    }
+
+    async function handleArchive(id, archived) {
+      try {
+        await ctx.api.archiveTodoApi(id, archived);
+        todos = todos.filter(x => x.id !== id);
+        renderTodos();
+        refreshCounts();
+      } catch { /* ignore */ }
+    }
+
+    async function handlePriority(id, priority) {
+      try {
+        await ctx.api.updateTodoApi(id, { priority });
+        const t = todos.find(x => x.id === id);
+        if (t) t.priority = priority;
+        renderTodos();
+      } catch { /* ignore */ }
+    }
+
+    async function handleDelete(id) {
+      try {
+        await ctx.api.deleteTodoApi(id);
+        todos = todos.filter(x => x.id !== id);
+        renderTodos();
+        refreshCounts();
+      } catch { /* ignore */ }
+    }
+
+    function showBragPrompt(todo) {
+      const existing = document.querySelector('.brag-prompt-overlay');
+      if (existing) existing.remove();
+
+      const overlay = document.createElement('div');
+      overlay.className = 'brag-prompt-overlay';
+      overlay.innerHTML = `
+        <div class="brag-prompt">
+          <div class="brag-prompt-title">Brag about it!</div>
+          <div class="brag-prompt-task">${escapeHtml(todo.text)}</div>
+          <textarea class="brag-prompt-input" placeholder="Write a summary of what you accomplished..." maxlength="500" rows="4"></textarea>
+          <div class="brag-prompt-counter"><span class="brag-char-count">0</span>/500</div>
+          <div class="brag-prompt-actions">
+            <button class="brag-prompt-cancel">Cancel</button>
+            <button class="brag-prompt-submit">Brag it!</button>
+          </div>
+        </div>
+      `;
+
+      const textarea = overlay.querySelector('.brag-prompt-input');
+      const counter = overlay.querySelector('.brag-char-count');
+      const submitBtn = overlay.querySelector('.brag-prompt-submit');
+      const cancelBtn = overlay.querySelector('.brag-prompt-cancel');
+
+      textarea.addEventListener('input', () => { counter.textContent = textarea.value.length; });
+      cancelBtn.addEventListener('click', () => overlay.remove());
+      overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.remove(); });
+
+      submitBtn.addEventListener('click', async () => {
+        const summary = textarea.value.trim();
+        if (!summary) { textarea.focus(); return; }
+        submitBtn.disabled = true;
+        submitBtn.textContent = 'Saving...';
+        try {
+          await ctx.api.bragTodoApi(todo.id, summary);
+          overlay.remove();
+          todos = todos.filter(x => x.id !== todo.id);
+          renderTodos();
+          refreshCounts();
+        } catch {
+          submitBtn.disabled = false;
+          submitBtn.textContent = 'Brag it!';
+        }
+      });
+
+      document.body.appendChild(overlay);
+      textarea.focus();
+    }
+
+    function startEdit(span, todo) {
+      span.contentEditable = 'true';
+      span.classList.add('editing');
+      span.focus();
+
+      const range = document.createRange();
+      range.selectNodeContents(span);
+      const sel = window.getSelection();
+      sel.removeAllRanges();
+      sel.addRange(range);
+
+      const finish = async () => {
+        span.contentEditable = 'false';
+        span.classList.remove('editing');
+        const newText = span.textContent.trim();
+        if (newText && newText !== todo.text) {
+          try {
+            await ctx.api.updateTodoApi(todo.id, { text: newText });
+            todo.text = newText;
+          } catch {
+            span.textContent = todo.text;
+          }
+        } else {
+          span.textContent = todo.text;
+        }
+      };
+
+      span.addEventListener('blur', finish, { once: true });
+      span.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') { e.preventDefault(); span.blur(); }
+        if (e.key === 'Escape') { span.textContent = todo.text; span.blur(); }
+      });
+    }
+
+    // ── Event listeners ──────────────────────────────
+    todoAddBtn.addEventListener('click', () => {
+      todoInputBar.style.display = '';
+      todoInput.value = '';
+      todoInput.focus();
+    });
+
+    todoInput.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') {
+        const text = todoInput.value.trim();
+        if (!text) return;
+        todoInput.value = '';
+        todoInputBar.style.display = 'none';
+        ctx.api.createTodoApi(text).then(() => loadTodos()).catch(() => {});
+      }
+      if (e.key === 'Escape') {
+        todoInputBar.style.display = 'none';
+      }
+    });
+
+    archToggle.addEventListener('click', () => {
+      showArchived = !showArchived;
+      showBrags = false;
+      updateHeaderToggle();
+      todoAddBtn.style.display = showArchived ? 'none' : '';
+      todoInputBar.style.display = 'none';
+      loadTodos();
+    });
+
+    bragToggle.addEventListener('click', async () => {
+      showBrags = !showBrags;
+      showArchived = false;
+      updateHeaderToggle();
+      todoAddBtn.style.display = showBrags ? 'none' : '';
+      todoInputBar.style.display = 'none';
+      if (showBrags) {
+        try { brags = await ctx.api.fetchBrags(); } catch { brags = []; }
+        renderTodos();
+        refreshCounts();
+      } else {
+        loadTodos();
+      }
+    });
+
+    // Initial load
+    loadTodos();
+
+    return root;
+  },
+
+  onActivate() {
+    // no-op: todos load on init
+  },
+});

package/plugins/tasks/server.js

@@ -0,0 +1,116 @@
+import { Router } from "express";
+import { listTodos, createTodo, updateTodo, archiveTodo, deleteTodo, createBrag, listBrags, deleteBrag, getTodoCounts } from "../../db.js";
+
+const router = Router();
+
+router.get("/", (req, res) => {
+  try {
+    const archived = req.query.archived === "1";
+    const todos = listTodos(archived);
+    res.json(todos);
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+router.get("/counts", (req, res) => {
+  try {
+    res.json(getTodoCounts());
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+router.post("/", (req, res) => {
+  try {
+    const { text } = req.body;
+    if (!text || typeof text !== "string") {
+      return res.status(400).json({ error: "text is required" });
+    }
+    const info = createTodo(text.trim());
+    res.json({ id: info.lastInsertRowid });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+router.put("/:id", (req, res) => {
+  try {
+    const id = Number(req.params.id);
+    const { text, done, priority } = req.body;
+    updateTodo(id, text ?? null, done ?? null, priority ?? null);
+    res.json({ ok: true });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+router.put("/:id/archive", (req, res) => {
+  try {
+    const id = Number(req.params.id);
+    const { archived } = req.body;
+    archiveTodo(id, archived ?? true);
+    res.json({ ok: true });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+router.delete("/:id", (req, res) => {
+  try {
+    const id = Number(req.params.id);
+    deleteTodo(id);
+    res.json({ ok: true });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// ── Brags ──────────────────────────────────────────────
+router.get("/brags", (req, res) => {
+  try {
+    res.json(listBrags());
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+router.post("/:id/brag", (req, res) => {
+  try {
+    const todoId = Number(req.params.id);
+    const { summary } = req.body;
+    if (!summary || typeof summary !== "string" || summary.trim().length === 0) {
+      return res.status(400).json({ error: "summary is required" });
+    }
+    if (summary.length > 500) {
+      return res.status(400).json({ error: "summary must be 500 chars or less" });
+    }
+    // Get the todo text before archiving
+    const todos = listTodos(false);
+    const todo = todos.find(t => t.id === todoId);
+    const archivedTodos = listTodos(true);
+    const archivedTodo = archivedTodos.find(t => t.id === todoId);
+    const foundTodo = todo || archivedTodo;
+    if (!foundTodo) {
+      return res.status(404).json({ error: "Todo not found" });
+    }
+    const info = createBrag(todoId, foundTodo.text, summary.trim());
+    // Archive the todo
+    archiveTodo(todoId, true);
+    res.json({ id: info.lastInsertRowid });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+router.delete("/brags/:id", (req, res) => {
+  try {
+    const id = Number(req.params.id);
+    deleteBrag(id);
+    res.json({ ok: true });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+export default router;

package/plugins/tic-tac-toe/client.css

@@ -0,0 +1,167 @@
+/* Tic Tac Toe — Tab SDK plugin styles */
+
+.tic-tac-toe-tab {
+  font-family: var(--font-mono);
+  color: var(--text);
+  padding: 12px;
+  gap: 12px;
+  align-items: center;
+}
+
+/* ── Header ── */
+.ttt-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  max-width: 240px;
+  gap: 8px;
+}
+
+.ttt-diff-btns {
+  display: flex;
+  gap: 4px;
+}
+
+.ttt-diff-btn {
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 3px 8px;
+  font-size: 11px;
+  font-family: var(--font-mono);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.ttt-diff-btn:hover {
+  background: var(--bg-secondary);
+  color: var(--text);
+}
+
+.ttt-diff-btn.active {
+  background: var(--accent);
+  color: var(--bg);
+  border-color: var(--accent);
+}
+
+/* ── Status ── */
+.ttt-status {
+  font-size: 13px;
+  font-weight: 600;
+  text-align: center;
+  min-height: 20px;
+  color: var(--text-secondary);
+}
+
+.ttt-status.status-win {
+  color: var(--success);
+}
+
+.ttt-status.status-lose {
+  color: var(--error);
+}
+
+.ttt-status.status-draw {
+  color: var(--warning);
+}
+
+/* ── Board ── */
+.ttt-board-wrap {
+  display: flex;
+  justify-content: center;
+}
+
+.ttt-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 70px);
+  grid-template-rows: repeat(3, 70px);
+  gap: 4px;
+  background: var(--border);
+  border-radius: var(--radius);
+  padding: 4px;
+}
+
+.ttt-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-secondary);
+  border-radius: var(--radius);
+  font-size: 28px;
+  font-weight: 700;
+  cursor: default;
+  transition: all 0.15s;
+  user-select: none;
+}
+
+.ttt-cell.empty {
+  cursor: pointer;
+}
+
+.ttt-cell.empty:hover {
+  background: var(--bg-tertiary);
+}
+
+.ttt-cell.is-x {
+  color: var(--accent);
+}
+
+.ttt-cell.is-o {
+  color: var(--error);
+}
+
+.ttt-cell.winner {
+  background: rgba(99, 102, 241, 0.15);
+  animation: ttt-pulse 0.6s ease-in-out infinite alternate;
+}
+
+@keyframes ttt-pulse {
+  from { transform: scale(1); }
+  to { transform: scale(1.08); }
+}
+
+/* ── Scores ── */
+.ttt-scores {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  font-size: 12px;
+  color: var(--text-dim);
+}
+
+.ttt-score-item {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+
+.ttt-score-x { color: var(--accent); font-weight: 600; }
+.ttt-score-o { color: var(--error); font-weight: 600; }
+.ttt-score-draw { color: var(--warning); font-weight: 600; }
+.ttt-score-sep { color: var(--border); }
+
+/* ── Actions ── */
+.ttt-actions {
+  display: flex;
+  gap: 6px;
+}
+
+.ttt-action-btn {
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 4px 10px;
+  font-size: 11px;
+  font-family: var(--font-mono);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.ttt-action-btn:hover {
+  background: var(--bg-secondary);
+  color: var(--text);
+  border-color: var(--text-dim);
+}