clamper-ai 1.1.6

package/dashboard/app.js

@@ -0,0 +1,287 @@
+// Clamper Dashboard — Generic Agent Dashboard
+(function() {
+  'use strict';
+
+  const DEFAULT_WS = 'ws://localhost:18789';
+  let ws = null;
+  let tier = 'free'; // 'free' or 'pro'
+  let connected = false;
+
+  // --- Config ---
+  function getConfig() {
+    try {
+      return JSON.parse(localStorage.getItem('clamper_dash') || '{}');
+    } catch { return {}; }
+  }
+  function saveConfig(c) { localStorage.setItem('clamper_dash', JSON.stringify(c)); }
+  function getWsUrl() { return getConfig().wsUrl || DEFAULT_WS; }
+
+  // --- Tier ---
+  function loadTier() {
+    const cfg = getConfig();
+    if (cfg.proKey && cfg.proKey.startsWith('clk_pro_')) {
+      tier = 'pro';
+    } else {
+      tier = 'free';
+    }
+    updateTierUI();
+  }
+
+  function updateTierUI() {
+    const badge = document.getElementById('tierBadge');
+    badge.textContent = tier.toUpperCase();
+    badge.style.color = tier === 'pro' ? '#ffcc00' : '#8888a0';
+
+    const isPro = tier === 'pro';
+    // Chat
+    const chatInput = document.getElementById('chatInputWrap');
+    const chatGate = document.getElementById('chatProGate');
+    chatInput.style.display = isPro ? 'flex' : 'none';
+    chatGate.style.display = isPro ? 'none' : 'block';
+    document.getElementById('chatInput').disabled = !isPro || !connected;
+    document.getElementById('chatSend').disabled = !isPro || !connected;
+
+    // Tasks
+    const taskInput = document.getElementById('taskInputWrap');
+    const taskGate = document.getElementById('taskProGate');
+    taskInput.style.display = isPro ? 'flex' : 'none';
+    taskGate.style.display = isPro ? 'none' : 'block';
+    document.getElementById('taskInput').disabled = !isPro || !connected;
+    document.getElementById('taskAdd').disabled = !isPro || !connected;
+  }
+
+  // --- Tabs ---
+  document.querySelectorAll('.tab').forEach(tab => {
+    tab.addEventListener('click', () => {
+      document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+      document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
+      tab.classList.add('active');
+      document.getElementById('tab-' + tab.dataset.tab).classList.add('active');
+    });
+  });
+
+  // --- Settings ---
+  document.getElementById('settingsBtn').addEventListener('click', () => {
+    const cfg = getConfig();
+    document.getElementById('wsUrlInput').value = cfg.wsUrl || '';
+    document.getElementById('proKeyInput').value = cfg.proKey || '';
+    document.getElementById('settingsModal').style.display = 'flex';
+  });
+  document.getElementById('closeSettings').addEventListener('click', () => {
+    document.getElementById('settingsModal').style.display = 'none';
+  });
+  document.getElementById('saveSettings').addEventListener('click', () => {
+    const cfg = getConfig();
+    const newUrl = document.getElementById('wsUrlInput').value.trim();
+    const newKey = document.getElementById('proKeyInput').value.trim();
+    cfg.wsUrl = newUrl || '';
+    cfg.proKey = newKey || '';
+    saveConfig(cfg);
+    document.getElementById('settingsModal').style.display = 'none';
+    loadTier();
+    connectWS();
+  });
+
+  // --- WebSocket ---
+  function setConnected(state) {
+    connected = state;
+    const ind = document.getElementById('wsIndicator');
+    const lbl = document.getElementById('wsLabel');
+    const sub = document.getElementById('connectionStatus');
+    if (state) {
+      ind.classList.add('live');
+      lbl.textContent = 'LIVE';
+      sub.textContent = 'Connected to ' + getWsUrl();
+    } else {
+      ind.classList.remove('live');
+      lbl.textContent = 'OFFLINE';
+      sub.textContent = 'Disconnected';
+    }
+    updateTierUI();
+  }
+
+  function connectWS() {
+    if (ws) { try { ws.close(); } catch {} }
+    const url = getWsUrl();
+    document.getElementById('connectionStatus').textContent = 'Connecting to ' + url + '...';
+
+    try {
+      ws = new WebSocket(url);
+    } catch {
+      setConnected(false);
+      return;
+    }
+
+    ws.onopen = () => {
+      setConnected(true);
+      addFeedItem('Connected to agent');
+      // Request initial status
+      wsSend({ type: 'dashboard_status' });
+      wsSend({ type: 'file_read', path: 'tasks/QUEUE.md' });
+    };
+
+    ws.onclose = () => {
+      setConnected(false);
+      addFeedItem('Connection lost');
+      setTimeout(() => { if (!connected) connectWS(); }, 5000);
+    };
+
+    ws.onerror = () => {
+      setConnected(false);
+    };
+
+    ws.onmessage = (ev) => {
+      try {
+        const msg = JSON.parse(ev.data);
+        handleMessage(msg);
+      } catch {}
+    };
+  }
+
+  function wsSend(obj) {
+    if (ws && ws.readyState === 1) {
+      ws.send(JSON.stringify(obj));
+    }
+  }
+
+  // --- Message Handler ---
+  function handleMessage(msg) {
+    switch (msg.type) {
+      case 'status':
+      case 'dashboard_status':
+        updateDashboardStats(msg);
+        break;
+      case 'chat_message':
+        addChatMessage(msg.role || 'agent', msg.content || msg.text || '');
+        break;
+      case 'file_content':
+        if (msg.path && msg.path.includes('QUEUE')) {
+          renderTasks(msg.content || '');
+        }
+        break;
+      case 'event':
+      case 'activity':
+        addFeedItem(msg.text || msg.message || JSON.stringify(msg));
+        break;
+      default:
+        if (msg.text || msg.message) {
+          addFeedItem(msg.text || msg.message);
+        }
+    }
+  }
+
+  // --- Dashboard Stats ---
+  function updateDashboardStats(data) {
+    const set = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val || '—'; };
+    set('statAgentStatus', data.agentStatus || data.status || 'Online');
+    set('statModel', data.model || '—');
+    set('statUptime', data.uptime || '—');
+    set('statChannel', data.channel || '—');
+    set('statDailyNotes', data.dailyNotes ?? '—');
+    set('statKnowledge', data.knowledgeFiles ?? '—');
+    set('statMemory', data.hasMemory ? '✓' : '—');
+    set('statLearnings', data.hasLearnings ? '✓' : '—');
+    set('statSkillCount', data.skillCount ?? '—');
+    set('statTier', tier.toUpperCase());
+    set('statSkillsUpdated', data.skillsUpdated || '—');
+  }
+
+  // --- Activity Feed ---
+  function addFeedItem(text) {
+    const feed = document.getElementById('activityFeed');
+    const empty = feed.querySelector('.feed-empty');
+    if (empty) empty.remove();
+
+    const now = new Date();
+    const time = now.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' });
+    const item = document.createElement('div');
+    item.className = 'feed-item';
+    item.innerHTML = `<span class="feed-time">${time}</span><span class="feed-msg">${escapeHtml(text)}</span>`;
+    feed.appendChild(item);
+    feed.scrollTop = feed.scrollHeight;
+
+    // Keep last 50
+    while (feed.children.length > 50) feed.removeChild(feed.firstChild);
+  }
+
+  // --- Chat ---
+  function addChatMessage(role, content) {
+    const box = document.getElementById('chatMessages');
+    const div = document.createElement('div');
+    div.className = 'chat-msg ' + (role === 'user' ? 'user' : 'agent');
+    const time = new Date().toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' });
+    div.innerHTML = `<div class="msg-meta">${role === 'user' ? 'You' : 'Agent'} · ${time}</div><div>${escapeHtml(content)}</div>`;
+    box.appendChild(div);
+    box.scrollTop = box.scrollHeight;
+  }
+
+  document.getElementById('chatSend').addEventListener('click', sendChat);
+  document.getElementById('chatInput').addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendChat(); }
+  });
+
+  function sendChat() {
+    const input = document.getElementById('chatInput');
+    const text = input.value.trim();
+    if (!text) return;
+    addChatMessage('user', text);
+    wsSend({ type: 'chat_message', content: text });
+    input.value = '';
+  }
+
+  // --- Tasks ---
+  function renderTasks(content) {
+    const box = document.getElementById('tasksList');
+    box.innerHTML = '';
+    if (!content.trim()) {
+      box.innerHTML = '<div class="feed-empty">No tasks found</div>';
+      return;
+    }
+    const lines = content.split('\n');
+    for (const line of lines) {
+      const trimmed = line.trim();
+      if (!trimmed) continue;
+      const match = trimmed.match(/^-\s*\[([ xX])\]\s*(.+)/);
+      const div = document.createElement('div');
+      if (match) {
+        const done = match[1] !== ' ';
+        div.className = 'task-item' + (done ? ' done' : '');
+        div.innerHTML = `<span class="task-check">${done ? '☑' : '☐'}</span><span class="task-text">${escapeHtml(match[2])}</span>`;
+      } else if (trimmed.startsWith('- ') || trimmed.startsWith('* ')) {
+        div.className = 'task-item';
+        div.innerHTML = `<span class="task-check">•</span><span class="task-text">${escapeHtml(trimmed.slice(2))}</span>`;
+      } else {
+        div.className = 'task-item';
+        div.innerHTML = `<span class="task-text" style="color:var(--text-dim)">${escapeHtml(trimmed)}</span>`;
+      }
+      box.appendChild(div);
+    }
+  }
+
+  document.getElementById('refreshTasks').addEventListener('click', () => {
+    wsSend({ type: 'file_read', path: 'tasks/QUEUE.md' });
+  });
+
+  document.getElementById('taskAdd').addEventListener('click', addTask);
+  document.getElementById('taskInput').addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') addTask();
+  });
+
+  function addTask() {
+    const input = document.getElementById('taskInput');
+    const text = input.value.trim();
+    if (!text) return;
+    wsSend({ type: 'file_append', path: 'tasks/QUEUE.md', content: '\n- [ ] ' + text });
+    input.value = '';
+    setTimeout(() => wsSend({ type: 'file_read', path: 'tasks/QUEUE.md' }), 500);
+  }
+
+  // --- Helpers ---
+  function escapeHtml(s) {
+    return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+  }
+
+  // --- Init ---
+  loadTier();
+  connectWS();
+})();

package/dashboard/index.html

@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ClawKit | Agent Dashboard</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+<div class="crt-overlay"></div>
+
+<div class="dashboard">
+    <!-- Header -->
+    <header class="header">
+        <div class="brand">
+            <span class="logo">⚡</span>
+            <div>
+                <div class="title">CLAWKIT <span class="dim">DASHBOARD</span></div>
+                <div class="subtitle" id="connectionStatus">Connecting...</div>
+            </div>
+        </div>
+        <div class="status-bar">
+            <div class="status-item">
+                <span class="indicator" id="wsIndicator"></span>
+                <span id="wsLabel">OFFLINE</span>
+            </div>
+            <div class="status-item" id="tierBadge">FREE</div>
+            <button class="icon-btn" id="settingsBtn" title="Settings">⚙</button>
+        </div>
+    </header>
+
+    <!-- Tabs -->
+    <nav class="tabs">
+        <button class="tab active" data-tab="dashboard">📊 Dashboard</button>
+        <button class="tab" data-tab="chat">💬 Chat</button>
+        <button class="tab" data-tab="tasks">📋 Tasks</button>
+    </nav>
+
+    <!-- Dashboard Tab -->
+    <div class="tab-content active" id="tab-dashboard">
+        <div class="grid-3">
+            <div class="panel">
+                <div class="panel-header"><span class="panel-title">AGENT STATUS</span></div>
+                <div class="panel-body" id="agentStatus">
+                    <div class="stat-row"><span class="stat-label">Status</span><span class="stat-value" id="statAgentStatus">—</span></div>
+                    <div class="stat-row"><span class="stat-label">Model</span><span class="stat-value" id="statModel">—</span></div>
+                    <div class="stat-row"><span class="stat-label">Uptime</span><span class="stat-value" id="statUptime">—</span></div>
+                    <div class="stat-row"><span class="stat-label">Channel</span><span class="stat-value" id="statChannel">—</span></div>
+                </div>
+            </div>
+            <div class="panel">
+                <div class="panel-header"><span class="panel-title">MEMORY HEALTH</span></div>
+                <div class="panel-body" id="memoryHealth">
+                    <div class="stat-row"><span class="stat-label">Daily Notes</span><span class="stat-value" id="statDailyNotes">—</span></div>
+                    <div class="stat-row"><span class="stat-label">Knowledge Files</span><span class="stat-value" id="statKnowledge">—</span></div>
+                    <div class="stat-row"><span class="stat-label">MEMORY.md</span><span class="stat-value" id="statMemory">—</span></div>
+                    <div class="stat-row"><span class="stat-label">LEARNINGS.md</span><span class="stat-value" id="statLearnings">—</span></div>
+                </div>
+            </div>
+            <div class="panel">
+                <div class="panel-header"><span class="panel-title">SKILLS</span></div>
+                <div class="panel-body" id="skillsPanel">
+                    <div class="stat-row"><span class="stat-label">Installed</span><span class="stat-value" id="statSkillCount">—</span></div>
+                    <div class="stat-row"><span class="stat-label">Tier</span><span class="stat-value" id="statTier">—</span></div>
+                    <div class="stat-row"><span class="stat-label">Last Updated</span><span class="stat-value" id="statSkillsUpdated">—</span></div>
+                </div>
+            </div>
+        </div>
+        <div class="panel" style="margin-top:1rem">
+            <div class="panel-header"><span class="panel-title">ACTIVITY FEED</span></div>
+            <div class="panel-body feed-tape" id="activityFeed">
+                <div class="feed-empty">Waiting for events...</div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Chat Tab -->
+    <div class="tab-content" id="tab-chat">
+        <div class="panel chat-panel">
+            <div class="panel-header"><span class="panel-title">CHAT</span></div>
+            <div class="chat-messages" id="chatMessages"></div>
+            <div class="chat-input-wrap" id="chatInputWrap">
+                <textarea id="chatInput" placeholder="Send a message..." rows="1" disabled></textarea>
+                <button id="chatSend" disabled>Send</button>
+            </div>
+            <div class="pro-gate" id="chatProGate" style="display:none">
+                🔒 Chat requires <a href="https://clawkit.net/get-started" target="_blank">ClawKit Pro</a>
+            </div>
+        </div>
+    </div>
+
+    <!-- Tasks Tab -->
+    <div class="tab-content" id="tab-tasks">
+        <div class="panel tasks-panel">
+            <div class="panel-header">
+                <span class="panel-title">TASKS / QUEUE.md</span>
+                <button class="icon-btn" id="refreshTasks" title="Refresh">🔄</button>
+            </div>
+            <div class="panel-body" id="tasksList">
+                <div class="feed-empty">Loading tasks...</div>
+            </div>
+            <div class="task-input-wrap" id="taskInputWrap">
+                <input type="text" id="taskInput" placeholder="Add a task..." disabled>
+                <button id="taskAdd" disabled>Add</button>
+            </div>
+            <div class="pro-gate" id="taskProGate" style="display:none">
+                🔒 Editing requires <a href="https://clawkit.net/get-started" target="_blank">ClawKit Pro</a>
+            </div>
+        </div>
+    </div>
+
+    <!-- Settings Modal -->
+    <div class="modal-overlay" id="settingsModal" style="display:none">
+        <div class="modal">
+            <div class="modal-header">
+                <span>⚙ Settings</span>
+                <button class="icon-btn" id="closeSettings">✕</button>
+            </div>
+            <div class="modal-body">
+                <label class="form-label">WebSocket URL</label>
+                <input type="text" id="wsUrlInput" class="form-input" placeholder="ws://localhost:18789">
+                <div class="form-hint">Default: ws://localhost:18789</div>
+                <label class="form-label" style="margin-top:1rem">Pro Key</label>
+                <input type="text" id="proKeyInput" class="form-input" placeholder="clk_pro_...">
+                <div class="form-hint">Enter your Pro key to unlock all features</div>
+                <button class="btn-primary" id="saveSettings" style="margin-top:1.5rem">Save & Reconnect</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script src="app.js"></script>
+</body>
+</html>

package/dashboard/style.css

@@ -0,0 +1,121 @@
+:root {
+    --bg-primary: #0a0a0f;
+    --bg-secondary: #111118;
+    --bg-tertiary: #1a1a24;
+    --bg-panel: #13131a;
+    --bg-hover: #1e1e2a;
+    --accent-green: #00ff88;
+    --accent-red: #ff3366;
+    --accent-blue: #00ccff;
+    --accent-yellow: #ffcc00;
+    --text-primary: #e8e8f0;
+    --text-secondary: #8888a0;
+    --text-dim: #555566;
+    --border-color: #2a2a3a;
+    --border-subtle: #1a1a2e;
+    --font-mono: 'JetBrains Mono','Fira Code',monospace;
+    --font-sans: 'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
+}
+
+* { margin:0; padding:0; box-sizing:border-box; }
+html { font-size:14px; background:var(--bg-primary); }
+body { font-family:var(--font-sans); background:var(--bg-primary); color:var(--text-primary); min-height:100vh; line-height:1.5; }
+
+.crt-overlay { position:fixed; inset:0; background:linear-gradient(rgba(18,16,16,0) 50%,rgba(0,0,0,0.08) 50%); background-size:100% 4px; pointer-events:none; z-index:9999; opacity:.12; }
+
+.dashboard { display:flex; flex-direction:column; min-height:100vh; padding:1rem; gap:.75rem; max-width:1400px; margin:0 auto; }
+
+/* Header */
+.header { display:flex; justify-content:space-between; align-items:center; padding:.75rem 1.25rem; background:var(--bg-secondary); border:1px solid var(--border-color); border-left:3px solid var(--accent-green); }
+.brand { display:flex; align-items:center; gap:.75rem; }
+.logo { font-size:1.4rem; color:var(--accent-green); text-shadow:0 0 10px rgba(0,255,136,.3); animation:pulse 2s ease-in-out infinite; }
+@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.7} }
+.title { font-family:var(--font-mono); font-size:1rem; font-weight:600; letter-spacing:.05em; }
+.subtitle { font-family:var(--font-mono); font-size:.7rem; color:var(--text-dim); }
+.dim { color:var(--text-dim); }
+.status-bar { display:flex; align-items:center; gap:1.25rem; font-family:var(--font-mono); font-size:.8rem; }
+.status-item { display:flex; align-items:center; gap:.4rem; color:var(--text-secondary); }
+.indicator { width:8px; height:8px; border-radius:50%; background:var(--text-dim); }
+.indicator.live { background:var(--accent-green); box-shadow:0 0 10px rgba(0,255,136,.3); animation:blink 1s ease-in-out infinite; }
+@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
+.icon-btn { background:none; border:1px solid var(--border-subtle); color:var(--text-secondary); font-size:.9rem; padding:4px 8px; cursor:pointer; border-radius:4px; transition:all .2s; }
+.icon-btn:hover { border-color:var(--accent-blue); color:var(--accent-blue); }
+
+/* Tabs */
+.tabs { display:flex; gap:0; border-bottom:1px solid var(--border-color); }
+.tab { background:none; border:none; color:var(--text-dim); font-family:var(--font-mono); font-size:.8rem; padding:.6rem 1.25rem; cursor:pointer; border-bottom:2px solid transparent; transition:all .2s; }
+.tab:hover { color:var(--text-secondary); }
+.tab.active { color:var(--accent-green); border-bottom-color:var(--accent-green); }
+
+/* Tab content */
+.tab-content { display:none; flex:1; min-height:0; }
+.tab-content.active { display:flex; flex-direction:column; }
+
+/* Grid */
+.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; }
+
+/* Panels */
+.panel { background:var(--bg-panel); border:1px solid var(--border-color); display:flex; flex-direction:column; overflow:hidden; }
+.panel-header { display:flex; justify-content:space-between; align-items:center; padding:.5rem 1rem; background:var(--bg-secondary); border-bottom:1px solid var(--border-color); font-family:var(--font-mono); font-size:.7rem; font-weight:600; letter-spacing:.1em; }
+.panel-title { color:var(--text-secondary); }
+.panel-body { padding:.75rem 1rem; flex:1; overflow-y:auto; }
+
+/* Stats */
+.stat-row { display:flex; justify-content:space-between; align-items:center; padding:.4rem 0; border-bottom:1px solid var(--border-subtle); }
+.stat-row:last-child { border-bottom:none; }
+.stat-label { color:var(--text-dim); font-size:.8rem; }
+.stat-value { font-family:var(--font-mono); font-size:.8rem; color:var(--accent-green); }
+
+/* Feed */
+.feed-tape { max-height:300px; }
+.feed-empty { color:var(--text-dim); font-size:.8rem; text-align:center; padding:2rem; }
+.feed-item { display:flex; gap:.75rem; padding:.4rem .5rem; font-family:var(--font-mono); font-size:.75rem; border-left:2px solid var(--border-subtle); margin-bottom:2px; }
+.feed-item:hover { background:var(--bg-hover); }
+.feed-time { color:var(--text-dim); min-width:55px; }
+.feed-msg { color:var(--text-primary); flex:1; }
+
+/* Chat */
+.chat-panel { flex:1; }
+.chat-messages { flex:1; overflow-y:auto; padding:.75rem; display:flex; flex-direction:column; gap:.5rem; min-height:300px; }
+.chat-msg { padding:.5rem .75rem; border-radius:6px; max-width:80%; font-size:.85rem; line-height:1.4; }
+.chat-msg.user { background:rgba(0,204,255,.1); border:1px solid rgba(0,204,255,.2); align-self:flex-end; }
+.chat-msg.agent { background:var(--bg-tertiary); border:1px solid var(--border-subtle); align-self:flex-start; }
+.chat-msg .msg-meta { font-family:var(--font-mono); font-size:.65rem; color:var(--text-dim); margin-bottom:.25rem; }
+.chat-input-wrap { display:flex; gap:.5rem; padding:.5rem .75rem; border-top:1px solid var(--border-color); }
+.chat-input-wrap textarea { flex:1; background:var(--bg-secondary); border:1px solid var(--border-subtle); color:var(--text-primary); font-family:var(--font-sans); font-size:.85rem; padding:.5rem; resize:none; border-radius:4px; }
+.chat-input-wrap textarea:focus { outline:none; border-color:var(--accent-blue); }
+.chat-input-wrap button, .task-input-wrap button { background:var(--accent-green); color:#000; border:none; padding:.5rem 1rem; font-family:var(--font-mono); font-size:.75rem; font-weight:600; cursor:pointer; border-radius:4px; }
+.chat-input-wrap button:disabled, .task-input-wrap button:disabled { opacity:.3; cursor:not-allowed; }
+
+/* Tasks */
+.tasks-panel { flex:1; }
+.task-item { display:flex; align-items:center; gap:.5rem; padding:.4rem .5rem; font-size:.8rem; border-bottom:1px solid var(--border-subtle); }
+.task-item .task-check { color:var(--accent-green); }
+.task-item .task-text { flex:1; }
+.task-item.done .task-text { text-decoration:line-through; color:var(--text-dim); }
+.task-input-wrap { display:flex; gap:.5rem; padding:.5rem .75rem; border-top:1px solid var(--border-color); }
+.task-input-wrap input { flex:1; background:var(--bg-secondary); border:1px solid var(--border-subtle); color:var(--text-primary); font-family:var(--font-sans); font-size:.85rem; padding:.5rem; border-radius:4px; }
+.task-input-wrap input:focus { outline:none; border-color:var(--accent-blue); }
+
+/* Pro gate */
+.pro-gate { text-align:center; padding:.75rem; font-size:.8rem; color:var(--text-dim); border-top:1px solid var(--border-color); }
+.pro-gate a { color:var(--accent-blue); }
+
+/* Modal */
+.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.7); display:flex; align-items:center; justify-content:center; z-index:10000; }
+.modal { background:var(--bg-secondary); border:1px solid var(--border-color); width:400px; max-width:90vw; border-radius:8px; }
+.modal-header { display:flex; justify-content:space-between; align-items:center; padding:.75rem 1rem; border-bottom:1px solid var(--border-color); font-family:var(--font-mono); font-size:.85rem; }
+.modal-body { padding:1.25rem; }
+.form-label { display:block; font-family:var(--font-mono); font-size:.75rem; color:var(--text-secondary); margin-bottom:.35rem; letter-spacing:.05em; }
+.form-input { width:100%; background:var(--bg-primary); border:1px solid var(--border-subtle); color:var(--text-primary); font-family:var(--font-mono); font-size:.8rem; padding:.5rem; border-radius:4px; }
+.form-input:focus { outline:none; border-color:var(--accent-blue); }
+.form-hint { font-size:.7rem; color:var(--text-dim); margin-top:.25rem; }
+.btn-primary { background:var(--accent-green); color:#000; border:none; padding:.5rem 1.25rem; font-family:var(--font-mono); font-size:.8rem; font-weight:600; cursor:pointer; border-radius:4px; width:100%; }
+.btn-primary:hover { opacity:.9; }
+
+/* Responsive */
+@media (max-width:768px) {
+    .grid-3 { grid-template-columns:1fr; }
+    .header { flex-direction:column; gap:.5rem; }
+    .status-bar { justify-content:center; }
+}

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "clamper-ai",
+  "version": "1.1.6",
+  "description": "Transform your OpenClaw agent into a production-ready AI assistant with memory, skills, and a dashboard",
+  "type": "module",
+  "bin": {
+    "clamper": "./bin/clamper.mjs"
+  },
+  "keywords": [
+    "openclaw",
+    "ai",
+    "agent",
+    "skills",
+    "memory",
+    "dashboard",
+    "clamper"
+  ],
+  "author": "Clamper",
+  "license": "MIT",
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {}
+}