adhdev 0.1.53 → 0.2.0

package/dist/dev-console.css

@@ -1,326 +0,0 @@
-  @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&family=Inter:wght@400;500;600&display=swap');
-
-  :root {
-    --bg: #0d1117;
-    --bg-panel: #161b22;
-    --bg-input: #0d1117;
-    --border: #30363d;
-    --text: #c9d1d9;
-    --text-dim: #8b949e;
-    --accent: #58a6ff;
-    --accent-green: #3fb950;
-    --accent-red: #f85149;
-    --accent-yellow: #d29922;
-    --accent-purple: #bc8cff;
-  }
-
-  * { margin: 0; padding: 0; box-sizing: border-box; }
-  body {
-    font-family: 'Inter', sans-serif;
-    background: var(--bg);
-    color: var(--text);
-    height: 100vh;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-
-  /* ─── Toolbar ─── */
-  .toolbar {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 16px;
-    background: var(--bg-panel);
-    border-bottom: 1px solid var(--border);
-    flex-shrink: 0;
-  }
-  .toolbar .logo {
-    font-weight: 600;
-    font-size: 14px;
-    color: var(--accent);
-    margin-right: 12px;
-    white-space: nowrap;
-  }
-  .toolbar select, .toolbar button {
-    font-family: 'Inter', sans-serif;
-    font-size: 12px;
-    border: 1px solid var(--border);
-    border-radius: 6px;
-    padding: 6px 12px;
-    background: var(--bg-input);
-    color: var(--text);
-    cursor: pointer;
-    transition: all 0.15s;
-  }
-  .toolbar button:hover { border-color: var(--accent); background: rgba(88,166,255,0.1); }
-  .toolbar button.primary {
-    background: var(--accent);
-    color: #000;
-    border-color: var(--accent);
-    font-weight: 600;
-  }
-  .toolbar button.primary:hover { background: #79c0ff; }
-  .toolbar button.danger { border-color: var(--accent-red); color: var(--accent-red); }
-  .toolbar button.danger:hover { background: rgba(248,81,73,0.1); }
-  .toolbar .spacer { flex: 1; }
-  .toolbar .status {
-    font-size: 11px;
-    color: var(--text-dim);
-    display: flex;
-    align-items: center;
-    gap: 4px;
-  }
-  .toolbar .status .dot {
-    width: 6px; height: 6px; border-radius: 50%;
-    display: inline-block;
-  }
-  .toolbar .status .dot.on { background: var(--accent-green); }
-  .toolbar .status .dot.off { background: var(--accent-red); }
-
-  /* ─── Main Layout ─── */
-  .main {
-    flex: 1;
-    display: flex;
-    overflow: hidden;
-  }
-
-  /* Left: Editor */
-  .editor-panel {
-    width: 50%;
-    display: flex;
-    flex-direction: column;
-    border-right: 1px solid var(--border);
-  }
-  .editor-header {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 6px 12px;
-    background: var(--bg-panel);
-    border-bottom: 1px solid var(--border);
-    font-size: 12px;
-    color: var(--text-dim);
-  }
-  .editor-header .tab {
-    padding: 4px 10px;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 11px;
-  }
-  .editor-header .tab.active {
-    background: rgba(88,166,255,0.15);
-    color: var(--accent);
-  }
-  .editor-header .tab:hover { background: rgba(255,255,255,0.05); }
-  #editor-container {
-    flex: 1;
-    overflow: hidden;
-    background: var(--bg);
-  }
-  /* Hidden textarea for backward compat */
-  #editor { display: none; }
-
-  /* Right: Preview + Output */
-  .right-panel {
-    width: 50%;
-    display: flex;
-    flex-direction: column;
-  }
-
-  /* Screenshot */
-  .screenshot-panel {
-    flex: 0 0 50%;
-    position: relative;
-    overflow: hidden;
-    border-bottom: 1px solid var(--border);
-    background: #000;
-  }
-  .screenshot-panel img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-  }
-  .screenshot-panel .placeholder {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    color: var(--text-dim);
-    font-size: 13px;
-  }
-  .screenshot-panel .overlay {
-    position: absolute;
-    border: 2px solid var(--accent);
-    background: rgba(88,166,255,0.08);
-    pointer-events: none;
-    transition: all 0.2s;
-  }
-  .screenshot-panel .overlay .label {
-    position: absolute;
-    top: -18px;
-    left: 0;
-    font-size: 10px;
-    background: var(--accent);
-    color: #000;
-    padding: 1px 4px;
-    border-radius: 2px;
-    white-space: nowrap;
-    font-family: 'JetBrains Mono', monospace;
-  }
-
-  /* Output */
-  .output-panel {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-  .output-header {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 6px 12px;
-    background: var(--bg-panel);
-    border-bottom: 1px solid var(--border);
-    font-size: 12px;
-    color: var(--text-dim);
-  }
-  .output-header .badge {
-    font-size: 10px;
-    padding: 1px 6px;
-    border-radius: 8px;
-    font-weight: 600;
-  }
-  .output-header .badge.ok { background: rgba(63,185,80,0.2); color: var(--accent-green); }
-  .output-header .badge.err { background: rgba(248,81,73,0.2); color: var(--accent-red); }
-  .output-search {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 11px;
-    border: 1px solid var(--border);
-    border-radius: 4px;
-    padding: 2px 8px;
-    background: var(--bg-input);
-    color: var(--text);
-    width: 140px;
-    outline: none;
-  }
-  .output-search:focus { border-color: var(--accent); }
-  #output {
-    flex: 1;
-    overflow-y: auto;
-    padding: 4px 0;
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 12px;
-    line-height: 1.5;
-  }
-  .output-entry {
-    padding: 4px 12px;
-    border-bottom: 1px solid rgba(48,54,61,0.3);
-    display: flex;
-    gap: 8px;
-    align-items: flex-start;
-    transition: background 0.15s;
-  }
-  .output-entry:hover { background: rgba(255,255,255,0.02); }
-  .output-entry .ts {
-    color: var(--text-dim);
-    font-size: 10px;
-    flex-shrink: 0;
-    min-width: 60px;
-    padding-top: 1px;
-  }
-  .output-entry .icon {
-    flex-shrink: 0;
-    width: 16px;
-    text-align: center;
-    font-size: 11px;
-  }
-  .output-entry .content {
-    flex: 1;
-    white-space: pre-wrap;
-    word-break: break-all;
-  }
-  .output-entry.type-log .icon { color: var(--text-dim); }
-  .output-entry.type-result .icon { color: var(--accent-green); }
-  .output-entry.type-error .icon { color: var(--accent-red); }
-  .output-entry.type-error .content { color: var(--accent-red); }
-  .output-entry.type-warn .icon { color: var(--accent-yellow); }
-  .output-entry.type-warn .content { color: var(--accent-yellow); }
-  .output-entry.type-query .icon { color: var(--accent-purple); }
-  .output-entry.hidden { display: none; }
-
-  /* Watch indicator */
-  .watch-indicator {
-    display: none;
-    align-items: center;
-    gap: 4px;
-    font-size: 11px;
-    color: var(--accent-green);
-    animation: pulse 2s infinite;
-  }
-  .watch-indicator.active { display: flex; }
-  @keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.4; }
-  }
-
-  /* Script list dropdown */
-  .script-menu {
-    position: relative;
-  }
-  .script-dropdown {
-    display: none;
-    position: absolute;
-    top: 100%;
-    left: 0;
-    background: var(--bg-panel);
-    border: 1px solid var(--border);
-    border-radius: 6px;
-    padding: 4px;
-    min-width: 200px;
-    z-index: 100;
-    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
-  }
-  .script-dropdown.show { display: block; }
-  .script-dropdown .item {
-    padding: 6px 10px;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 12px;
-    display: flex;
-    justify-content: space-between;
-  }
-  .script-dropdown .item:hover { background: rgba(255,255,255,0.05); }
-  .script-dropdown .item .hint { color: var(--text-dim); font-size: 11px; }
-
-  /* Selector tester */
-  .selector-bar {
-    display: flex;
-    gap: 6px;
-    padding: 4px 8px;
-    background: var(--bg-panel);
-    border-bottom: 1px solid var(--border);
-  }
-  .selector-bar input {
-    flex: 1;
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 12px;
-    border: 1px solid var(--border);
-    border-radius: 4px;
-    padding: 4px 8px;
-    background: var(--bg-input);
-    color: var(--text);
-    outline: none;
-  }
-  .selector-bar input:focus { border-color: var(--accent); }
-  .selector-bar button {
-    font-size: 11px;
-    padding: 4px 8px;
-    border: 1px solid var(--border);
-    border-radius: 4px;
-    background: var(--bg-input);
-    color: var(--text);
-    cursor: pointer;
-  }
-  .selector-bar .count { font-size: 11px; color: var(--text-dim); line-height: 28px; }

package/dist/dev-console.html

@@ -1,148 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>ADHDev DevConsole — Script Development</title>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.2/min/vs/loader.min.js"></script>
-<link rel="stylesheet" href="/static/dev-console.css">
-</head>
-<body>
-
-<!-- Toolbar -->
-<div class="toolbar">
-  <span class="logo">🔧 ADHDev DevConsole</span>
-  <select id="providerSelect"><option value="">Loading...</option></select>
-  <button id="newBtn" title="Create new provider">＋ New</button>
-  <select id="ideTargetSelect" title="CDP Target IDE"><option value="">Auto</option></select>
-  <div class="script-menu">
-    <button id="scriptBtn">📜 Scripts ▾</button>
-    <div class="script-dropdown" id="scriptDropdown"></div>
-  </div>
-  <button class="primary" id="runBtn" title="Ctrl+Enter">▶ Run</button>
-
-  <button id="screenshotBtn">📸</button>
-  <button id="domDebugBtn" title="Analyze inputs, buttons, textareas">🔍 DOM</button>
-  <button id="reloadBtn">🔄</button>
-  <button id="watchBtn">👁 Watch</button>
-  <button id="sourceBtn">📄 Edit Source</button>
-  <button id="saveBtn" style="display:none;background:var(--accent-green);color:#000;border-color:var(--accent-green);font-weight:600">💾 Save & Run</button>
-  <div class="spacer"></div>
-  <div class="watch-indicator" id="watchIndicator">● Watch</div>
-  <div class="status" id="statusBar"><span class="dot off"></span> Connecting...</div>
-</div>
-
-<!-- Scaffold Modal -->
-<div id="scaffoldModal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.75);z-index:200;display:none;align-items:center;justify-content:center">
-  <div style="background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;padding:24px;width:460px;box-shadow:0 20px 40px rgba(0,0,0,0.6);max-height:85vh;overflow-y:auto">
-    <h3 style="margin:0 0 16px;font-size:16px;color:var(--accent)">＋ New Provider</h3>
-    <div style="display:flex;flex-direction:column;gap:10px">
-      <div style="display:flex;gap:8px">
-        <div style="flex:1">
-          <label style="font-size:11px;color:var(--text-dim);display:block;margin-bottom:4px">Type ID</label>
-          <input id="scaffoldType" style="width:100%;padding:8px;background:var(--bg-input);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px" placeholder="zed">
-        </div>
-        <div style="flex:1">
-          <label style="font-size:11px;color:var(--text-dim);display:block;margin-bottom:4px">Display Name</label>
-          <input id="scaffoldName" style="width:100%;padding:8px;background:var(--bg-input);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px" placeholder="Zed">
-        </div>
-      </div>
-      <div>
-        <label style="font-size:11px;color:var(--text-dim);display:block;margin-bottom:4px">Category</label>
-        <select id="scaffoldCategory" onchange="toggleScaffoldFields()" style="width:100%;padding:8px;background:var(--bg-input);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px">
-          <option value="ide">💻 IDE (main window CDP)</option>
-          <option value="extension">🧩 Extension (webview CDP)</option>
-          <option value="cli">⌨️ CLI (terminal agent)</option>
-        </select>
-      </div>
-      <!-- IDE/Extension fields -->
-      <div id="scaffoldIdeFields">
-        <div style="display:flex;gap:8px;margin-bottom:8px">
-          <div style="flex:1">
-            <label style="font-size:11px;color:var(--text-dim);display:block;margin-bottom:4px">CDP Port (primary)</label>
-            <input id="scaffoldCdpPort1" type="number" style="width:100%;padding:8px;background:var(--bg-input);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px" placeholder="9222">
-          </div>
-          <div style="flex:1">
-            <label style="font-size:11px;color:var(--text-dim);display:block;margin-bottom:4px">CDP Port (fallback)</label>
-            <input id="scaffoldCdpPort2" type="number" style="width:100%;padding:8px;background:var(--bg-input);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px" placeholder="9223">
-          </div>
-        </div>
-        <div style="display:flex;gap:8px">
-          <div style="flex:1">
-            <label style="font-size:11px;color:var(--text-dim);display:block;margin-bottom:4px">CLI Command</label>
-            <input id="scaffoldCli" style="width:100%;padding:8px;background:var(--bg-input);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px" placeholder="cursor">
-          </div>
-          <div style="flex:1">
-            <label style="font-size:11px;color:var(--text-dim);display:block;margin-bottom:4px">Process Name</label>
-            <input id="scaffoldProcess" style="width:100%;padding:8px;background:var(--bg-input);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px" placeholder="Cursor">
-          </div>
-        </div>
-      </div>
-      <!-- Extension-only field -->
-      <div id="scaffoldExtFields" style="display:none">
-        <label style="font-size:11px;color:var(--text-dim);display:block;margin-bottom:4px">Extension ID</label>
-        <input id="scaffoldExtId" style="width:100%;padding:8px;background:var(--bg-input);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px" placeholder="publisher.extension-name">
-      </div>
-      <!-- CLI-only field -->
-      <div id="scaffoldCliFields" style="display:none">
-        <label style="font-size:11px;color:var(--text-dim);display:block;margin-bottom:4px">Binary Path</label>
-        <input id="scaffoldBinary" style="width:100%;padding:8px;background:var(--bg-input);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px" placeholder="gemini-cli">
-      </div>
-      <div>
-        <label style="font-size:11px;color:var(--text-dim);display:block;margin-bottom:4px">Install Path (optional)</label>
-        <input id="scaffoldInstallPath" style="width:100%;padding:8px;background:var(--bg-input);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px" placeholder="/Applications/MyIDE.app">
-      </div>
-      <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:8px">
-        <button onclick="document.getElementById('scaffoldModal').style.display='none'" style="padding:8px 16px;background:transparent;border:1px solid var(--border);border-radius:6px;color:var(--text-dim);cursor:pointer">Cancel</button>
-        <button onclick="doScaffold()" style="padding:8px 16px;background:var(--accent);color:#000;border:none;border-radius:6px;font-weight:600;cursor:pointer">Create</button>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Main -->
-<div class="main">
-  <!-- Left: Editor -->
-  <div class="editor-panel">
-    <div class="editor-header">
-      <span class="tab active" data-tab="editor" title="Write and run CDP scripts on the target IDE">🖥 Editor</span>
-      <span class="tab" data-tab="template" title="Provider scaffold template — copy & customize for a new provider">📋 New Provider Template</span>
-      <span class="tab" data-tab="contracts" title="Reference: required JSON output format for each script function">📑 Output Spec</span>
-      <div style="flex:1"></div>
-      <span id="execTime" style="font-size:11px;color:var(--text-dim)"></span>
-    </div>
-    <textarea id="editor" style="display:none"></textarea>
-    <div id="editor-container"></div>
-  </div>
-
-  <!-- Right: Screenshot + Output -->
-  <div class="right-panel">
-    <div class="screenshot-panel" id="screenshotPanel" style="position:relative">
-      <div class="placeholder" id="screenshotPlaceholder">Click 📸 Screenshot to capture IDE<br><small style="color:var(--text-dim)">Then click on the screenshot to inspect elements</small></div>
-      <img id="screenshotImg" style="display:none;cursor:crosshair" />
-      <div id="inspectCrosshair" style="display:none;position:absolute;width:20px;height:20px;border:2px solid var(--accent);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);z-index:10;box-shadow:0 0 8px var(--accent)"></div>
-    </div>
-
-    <div class="selector-bar">
-      <input id="selectorInput" placeholder="CSS selector to test..." />
-      <button id="selectorBtn">Query</button>
-      <span class="count" id="selectorCount"></span>
-    </div>
-
-    <div class="output-panel">
-      <div class="output-header">
-        <span>Output</span>
-        <span class="badge" id="outputBadge" style="display:none"></span>
-        <div style="flex:1"></div>
-        <input class="output-search" id="outputSearch" placeholder="Filter..." />
-        <button style="font-size:11px;padding:2px 6px;border:1px solid var(--border);border-radius:3px;background:transparent;color:var(--text-dim);cursor:pointer" id="clearBtn">Clear</button>
-      </div>
-      <div id="output"></div>
-    </div>
-  </div>
-</div>
-
-<script src="/static/dev-console.js"></script>
-<script src="/static/dev-console-monaco.js"></script>
-</body>
-</html>