npm - create-walle - Versions diffs - 0.1.0 - Mend

create-walle 0.1.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 (136) hide show

package/bin/create-walle.js +134 -0
package/package.json +18 -0
package/template/.env.example +40 -0
package/template/CLAUDE.md +12 -0
package/template/LICENSE +21 -0
package/template/README.md +167 -0
package/template/bin/setup.js +100 -0
package/template/claude-code-skill.md +60 -0
package/template/claude-task-manager/api-prompts.js +1841 -0
package/template/claude-task-manager/api-reviews.js +275 -0
package/template/claude-task-manager/approval-agent.js +454 -0
package/template/claude-task-manager/bin/restart-ctm.sh +16 -0
package/template/claude-task-manager/db.js +1721 -0
package/template/claude-task-manager/docs/PROMPT-MANAGEMENT-DESIGN.md +631 -0
package/template/claude-task-manager/git-utils.js +214 -0
package/template/claude-task-manager/package-lock.json +1607 -0
package/template/claude-task-manager/package.json +31 -0
package/template/claude-task-manager/prompt-harvest.js +1148 -0
package/template/claude-task-manager/public/css/prompts.css +880 -0
package/template/claude-task-manager/public/css/reviews.css +430 -0
package/template/claude-task-manager/public/css/walle.css +732 -0
package/template/claude-task-manager/public/favicon.ico +0 -0
package/template/claude-task-manager/public/icon.svg +37 -0
package/template/claude-task-manager/public/index.html +8346 -0
package/template/claude-task-manager/public/js/prompts.js +3159 -0
package/template/claude-task-manager/public/js/reviews.js +1292 -0
package/template/claude-task-manager/public/js/walle.js +3081 -0
package/template/claude-task-manager/public/manifest.json +13 -0
package/template/claude-task-manager/public/prompts.html +4353 -0
package/template/claude-task-manager/public/setup.html +216 -0
package/template/claude-task-manager/queue-engine.js +404 -0
package/template/claude-task-manager/server-state.js +5 -0
package/template/claude-task-manager/server.js +2254 -0
package/template/claude-task-manager/session-utils.js +124 -0
package/template/claude-task-manager/start.sh +17 -0
package/template/claude-task-manager/tests/test-ai-search.js +61 -0
package/template/claude-task-manager/tests/test-editor-ux.js +76 -0
package/template/claude-task-manager/tests/test-editor-ux2.js +51 -0
package/template/claude-task-manager/tests/test-features-v2.js +127 -0
package/template/claude-task-manager/tests/test-insights-cached.js +78 -0
package/template/claude-task-manager/tests/test-insights.js +124 -0
package/template/claude-task-manager/tests/test-permissions-v2.js +127 -0
package/template/claude-task-manager/tests/test-permissions.js +122 -0
package/template/claude-task-manager/tests/test-pin.js +51 -0
package/template/claude-task-manager/tests/test-prompts.js +164 -0
package/template/claude-task-manager/tests/test-recent-sessions.js +96 -0
package/template/claude-task-manager/tests/test-review.js +104 -0
package/template/claude-task-manager/tests/test-send-dropdown.js +76 -0
package/template/claude-task-manager/tests/test-send-final.js +30 -0
package/template/claude-task-manager/tests/test-send-fixes.js +76 -0
package/template/claude-task-manager/tests/test-send-integration.js +107 -0
package/template/claude-task-manager/tests/test-send-visual.js +34 -0
package/template/claude-task-manager/tests/test-session-create.js +147 -0
package/template/claude-task-manager/tests/test-sidebar-ux.js +83 -0
package/template/claude-task-manager/tests/test-url-hash.js +68 -0
package/template/claude-task-manager/tests/test-ux-crop.js +34 -0
package/template/claude-task-manager/tests/test-ux-review.js +130 -0
package/template/claude-task-manager/tests/test-zoom-card.js +76 -0
package/template/claude-task-manager/tests/test-zoom.js +92 -0
package/template/claude-task-manager/tests/test-zoom2.js +67 -0
package/template/docs/site/api/README.md +187 -0
package/template/docs/site/guides/claude-code.md +58 -0
package/template/docs/site/guides/configuration.md +96 -0
package/template/docs/site/guides/quickstart.md +158 -0
package/template/docs/site/index.md +14 -0
package/template/docs/site/skills/README.md +135 -0
package/template/wall-e/.dockerignore +11 -0
package/template/wall-e/Dockerfile +25 -0
package/template/wall-e/adapters/adapter-base.js +37 -0
package/template/wall-e/adapters/ctm.js +193 -0
package/template/wall-e/adapters/slack.js +56 -0
package/template/wall-e/agent.js +319 -0
package/template/wall-e/api-walle.js +1073 -0
package/template/wall-e/brain.js +1235 -0
package/template/wall-e/channels/agent-api.js +172 -0
package/template/wall-e/channels/channel-base.js +14 -0
package/template/wall-e/channels/imessage-channel.js +113 -0
package/template/wall-e/channels/slack-channel.js +118 -0
package/template/wall-e/chat.js +778 -0
package/template/wall-e/decision/confidence.js +93 -0
package/template/wall-e/deploy.sh +35 -0
package/template/wall-e/docs/specs/2026-04-01-publish-plan.md +112 -0
package/template/wall-e/docs/specs/SKILL-FORMAT.md +326 -0
package/template/wall-e/extraction/contradiction.js +168 -0
package/template/wall-e/extraction/knowledge-extractor.js +190 -0
package/template/wall-e/fly.toml +24 -0
package/template/wall-e/loops/ingest.js +34 -0
package/template/wall-e/loops/reflect.js +63 -0
package/template/wall-e/loops/tasks.js +487 -0
package/template/wall-e/loops/think.js +125 -0
package/template/wall-e/package-lock.json +533 -0
package/template/wall-e/package.json +18 -0
package/template/wall-e/scripts/ingest-slack-search.js +85 -0
package/template/wall-e/scripts/pull-slack-via-claude.js +98 -0
package/template/wall-e/scripts/slack-backfill.js +295 -0
package/template/wall-e/scripts/slack-channel-history.js +454 -0
package/template/wall-e/server.js +93 -0
package/template/wall-e/skills/_bundled/email-digest/SKILL.md +95 -0
package/template/wall-e/skills/_bundled/email-sync/SKILL.md +65 -0
package/template/wall-e/skills/_bundled/email-sync/mail-reader.jxa +104 -0
package/template/wall-e/skills/_bundled/email-sync/run.js +213 -0
package/template/wall-e/skills/_bundled/google-calendar/SKILL.md +73 -0
package/template/wall-e/skills/_bundled/google-calendar/cal-reader.swift +81 -0
package/template/wall-e/skills/_bundled/google-calendar/run.js +181 -0
package/template/wall-e/skills/_bundled/memory-search/SKILL.md +92 -0
package/template/wall-e/skills/_bundled/morning-briefing/SKILL.md +131 -0
package/template/wall-e/skills/_bundled/morning-briefing/run.js +264 -0
package/template/wall-e/skills/_bundled/slack-backfill/SKILL.md +60 -0
package/template/wall-e/skills/_bundled/slack-sync/SKILL.md +55 -0
package/template/wall-e/skills/claude-code-reader.js +144 -0
package/template/wall-e/skills/mcp-client.js +407 -0
package/template/wall-e/skills/skill-executor.js +163 -0
package/template/wall-e/skills/skill-loader.js +410 -0
package/template/wall-e/skills/skill-planner.js +88 -0
package/template/wall-e/skills/slack-ingest.js +329 -0
package/template/wall-e/skills/slack-pull-live.js +270 -0
package/template/wall-e/skills/tool-executor.js +188 -0
package/template/wall-e/tests/adapter-base.test.js +20 -0
package/template/wall-e/tests/adapter-ctm.test.js +122 -0
package/template/wall-e/tests/adapter-slack.test.js +98 -0
package/template/wall-e/tests/agent-api.test.js +256 -0
package/template/wall-e/tests/api-walle.test.js +222 -0
package/template/wall-e/tests/brain.test.js +602 -0
package/template/wall-e/tests/channels.test.js +104 -0
package/template/wall-e/tests/chat.test.js +103 -0
package/template/wall-e/tests/confidence.test.js +134 -0
package/template/wall-e/tests/contradiction.test.js +217 -0
package/template/wall-e/tests/ingest.test.js +113 -0
package/template/wall-e/tests/mcp-client.test.js +71 -0
package/template/wall-e/tests/reflect.test.js +103 -0
package/template/wall-e/tests/server.test.js +111 -0
package/template/wall-e/tests/skills.test.js +198 -0
package/template/wall-e/tests/slack-ingest.test.js +103 -0
package/template/wall-e/tests/think.test.js +435 -0
package/template/wall-e/tools/local-tools.js +697 -0
package/template/wall-e/tools/slack-mcp.js +290 -0

package/template/claude-task-manager/public/prompts.html ADDED Viewed

@@ -0,0 +1,4353 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Claude Prompt Editor</title>
+<link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/icon-16.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/icon-180.png">
+<link rel="manifest" href="/manifest.json">
+<meta name="theme-color" content="#7aa2f7">
+<style>
+  :root {
+    --bg: #1a1b26;
+    --bg-light: #24283b;
+    --bg-lighter: #2f3349;
+    --fg: #c0caf5;
+    --fg-dim: #565f89;
+    --accent: #7aa2f7;
+    --accent-hover: #89b4fa;
+    --green: #9ece6a;
+    --red: #f7768e;
+    --yellow: #e0af68;
+    --purple: #bb9af7;
+    --border: #3b4261;
+  }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
+    background: var(--bg);
+    color: var(--fg);
+    height: 100vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+  /* Top bar */
+  #topbar {
+    display: flex;
+    align-items: center;
+    height: 44px;
+    background: var(--bg-light);
+    border-bottom: 1px solid var(--border);
+    padding: 0 12px;
+    gap: 12px;
+    flex-shrink: 0;
+  }
+  .logo { font-weight: 700; font-size: 14px; color: var(--accent); white-space: nowrap; cursor: pointer; }
+  .topbar-actions { display: flex; gap: 6px; margin-left: auto; }
+  .btn {
+    background: var(--bg-lighter);
+    border: 1px solid var(--border);
+    color: var(--fg);
+    padding: 5px 12px;
+    border-radius: 6px;
+    font-size: 12px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    transition: all 0.15s;
+  }
+  .btn:hover { background: var(--border); }
+  .btn.active { background: var(--accent); color: #1a1b26 !important; border-color: var(--accent); }
+  .btn.active:hover { background: var(--accent-hover); }
+  .btn.primary { background: var(--accent); color: #1a1b26; border-color: var(--accent); }
+  .btn.primary:hover { background: var(--accent-hover); }
+  .btn.danger { color: var(--red); }
+  .btn.danger:hover { background: rgba(247,118,142,0.15); }
+  .btn.small { padding: 3px 8px; font-size: 11px; }
+  .btn.icon-btn { padding: 4px 8px; }
+  /* Main layout: sidebar + editor */
+  #main {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+  }
+  /* Prompt sidebar */
+  #prompt-sidebar {
+    width: 280px;
+    background: var(--bg-light);
+    border-right: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+  }
+  .sidebar-header {
+    padding: 10px;
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+  .sidebar-header .search-row { display: flex; gap: 4px; }
+  .sidebar-header input {
+    flex: 1;
+    background: var(--bg);
+    color: var(--fg);
+    border: 1px solid var(--border);
+    padding: 5px 8px;
+    border-radius: 4px;
+    font-size: 11px;
+    outline: none;
+  }
+  .sidebar-header input:focus { border-color: var(--accent); }
+  .sidebar-header input.ai-active {
+    border-color: var(--purple);
+    background: rgba(187, 154, 247, 0.08);
+  }
+  .ai-search-toggle {
+    background: var(--bg-lighter);
+    border: 1px solid var(--border);
+    color: var(--fg-dim);
+    padding: 4px 7px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 10px;
+    font-weight: 600;
+    white-space: nowrap;
+    transition: all 0.15s;
+  }
+  .ai-search-toggle:hover { border-color: var(--purple); color: var(--purple); }
+  .ai-search-toggle.active {
+    background: var(--purple);
+    border-color: var(--purple);
+    color: #1a1b26;
+  }
+  .ai-result-reason {
+    font-size: 10px;
+    color: var(--purple);
+    margin-top: 2px;
+    line-height: 1.3;
+    font-style: italic;
+  }
+  .ai-result-score {
+    font-size: 9px;
+    background: var(--purple);
+    color: #1a1b26;
+    padding: 1px 5px;
+    border-radius: 8px;
+    font-weight: 600;
+    flex-shrink: 0;
+  }
+  .ai-searching {
+    padding: 16px;
+    text-align: center;
+    color: var(--fg-dim);
+    font-size: 12px;
+  }
+  .ai-searching .spinner {
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    border: 2px solid var(--border);
+    border-top-color: var(--purple);
+    border-radius: 50%;
+    animation: spin 0.6s linear infinite;
+    margin-right: 6px;
+    vertical-align: middle;
+  }
+  @keyframes spin { to { transform: rotate(360deg); } }
+  .folder-tree {
+    flex: 0 0 auto;
+    max-height: 200px;
+    overflow-y: auto;
+    padding: 6px;
+  }
+  .folder-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 5px 8px;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 12px;
+    margin-bottom: 2px;
+    transition: background 0.1s;
+  }
+  .folder-item:hover { background: var(--bg-lighter); }
+  .folder-item.active { background: var(--accent); color: #1a1b26; }
+  .folder-item .folder-icon { font-size: 14px; }
+  .folder-item .folder-count {
+    margin-left: auto;
+    font-size: 10px;
+    background: var(--bg);
+    padding: 1px 6px;
+    border-radius: 8px;
+    color: var(--fg-dim);
+  }
+  .prompt-list {
+    border-top: 1px solid var(--border);
+    flex: 1;
+    overflow-y: auto;
+    padding: 6px;
+  }
+  .prompt-item {
+    padding: 8px 8px 8px 6px;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 12px;
+    margin-bottom: 3px;
+    border-left: 3px solid transparent;
+    transition: background 0.1s;
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    gap: 6px;
+  }
+  .prompt-item:hover { background: var(--bg-lighter); }
+  .prompt-item.active { background: var(--bg-lighter); border-left-color: var(--accent); }
+  .prompt-item.pinned { border-left-color: var(--yellow); }
+  .prompt-item.active.pinned { border-left-color: var(--yellow); }
+  .prompt-item.drag-over { border-top: 2px solid var(--accent); }
+  .prompt-item .drag-handle {
+    cursor: grab;
+    color: var(--fg-dim);
+    opacity: 0;
+    font-size: 10px;
+    padding: 2px 0;
+    flex-shrink: 0;
+    user-select: none;
+    transition: opacity 0.1s;
+  }
+  .prompt-item:hover .drag-handle { opacity: 0.5; }
+  .prompt-item .drag-handle:hover { opacity: 1; }
+  .prompt-item .prompt-content { flex: 1; min-width: 0; }
+  .prompt-item .prompt-title {
+    font-weight: 500;
+    margin-bottom: 2px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .prompt-item .prompt-meta {
+    display: flex;
+    gap: 6px;
+    font-size: 10px;
+    color: var(--fg-dim);
+  }
+  .prompt-item .prompt-meta .tag {
+    background: var(--bg);
+    padding: 0 5px;
+    border-radius: 3px;
+  }
+  .prompt-item .prompt-actions {
+    display: none;
+    gap: 2px;
+    flex-shrink: 0;
+  }
+  .prompt-item:hover .prompt-actions { display: flex; }
+  .prompt-item .prompt-actions .act-btn {
+    background: none;
+    border: none;
+    color: var(--fg-dim);
+    cursor: pointer;
+    padding: 2px 4px;
+    border-radius: 3px;
+    font-size: 11px;
+    line-height: 1;
+    transition: all 0.1s;
+  }
+  .prompt-item .prompt-actions .act-btn:hover { background: var(--bg); color: var(--fg); }
+  .prompt-item .prompt-actions .act-btn.pin-active { color: var(--yellow); }
+  .prompt-item.starred .prompt-title::before { content: '\2605 '; color: var(--yellow); }
+  .prompt-item .pin-badge { color: var(--yellow); font-size: 10px; margin-right: 2px; }
+  /* Folder item actions */
+  .folder-item { position: relative; }
+  .folder-item .folder-actions {
+    display: none;
+    gap: 2px;
+    margin-left: auto;
+    flex-shrink: 0;
+  }
+  .folder-item:hover .folder-actions { display: flex; }
+  .folder-item:hover .folder-count { display: none; }
+  .folder-item .folder-actions .act-btn {
+    background: none;
+    border: none;
+    color: var(--fg-dim);
+    cursor: pointer;
+    padding: 1px 4px;
+    border-radius: 3px;
+    font-size: 11px;
+    transition: all 0.1s;
+  }
+  .folder-item .folder-actions .act-btn:hover { background: var(--bg); color: var(--fg); }
+  .folder-item.drag-over { border-top: 2px solid var(--accent); }
+  .folder-item .drag-handle {
+    cursor: grab;
+    color: var(--fg-dim);
+    opacity: 0;
+    font-size: 10px;
+    flex-shrink: 0;
+    user-select: none;
+  }
+  .folder-item:hover .drag-handle { opacity: 0.5; }
+  .folder-item .drag-handle:hover { opacity: 1; }
+  .folder-rename-input {
+    background: var(--bg);
+    color: var(--fg);
+    border: 1px solid var(--accent);
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-size: 12px;
+    outline: none;
+    width: 100%;
+  }
+  /* Editor area */
+  #editor-area {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+  /* Editor toolbar */
+  .editor-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 7px 18px;
+    border-bottom: 1px solid var(--border);
+    background: var(--bg-light);
+    flex-wrap: wrap;
+    flex-shrink: 0;
+  }
+  .toolbar-group {
+    display: flex;
+    gap: 2px;
+    padding-right: 10px;
+    border-right: 1px solid var(--border);
+    margin-right: 6px;
+  }
+  .toolbar-group:last-child { border-right: none; }
+  .toolbar-btn {
+    background: none;
+    border: 1px solid transparent;
+    color: var(--fg-dim);
+    padding: 5px 9px;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 13px;
+    font-weight: 600;
+    transition: all 0.12s;
+  }
+  .toolbar-btn:hover { background: var(--bg-lighter); color: var(--fg); }
+  .toolbar-btn.active { background: var(--accent); color: #1a1b26; }
+  /* Meta bar (title, tags, context type) */
+  .meta-bar {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 18px;
+    border-bottom: 1px solid var(--border);
+    background: var(--bg-light);
+    flex-shrink: 0;
+  }
+  .meta-bar input {
+    background: transparent;
+    border: none;
+    color: var(--fg);
+    font-size: 17px;
+    font-weight: 600;
+    outline: none;
+    flex: 1;
+    min-width: 0;
+    letter-spacing: -0.01em;
+  }
+  .meta-bar input::placeholder { color: var(--fg-dim); }
+  .meta-bar select {
+    background: var(--bg);
+    color: var(--fg);
+    border: 1px solid var(--border);
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 11px;
+    outline: none;
+  }
+  .tags-input {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex-wrap: wrap;
+  }
+  .tag-chip {
+    background: var(--bg-lighter);
+    border: 1px solid var(--border);
+    padding: 1px 8px;
+    border-radius: 10px;
+    font-size: 10px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    cursor: default;
+  }
+  .tag-chip .tag-remove {
+    cursor: pointer;
+    opacity: 0.6;
+    font-size: 12px;
+  }
+  .tag-chip .tag-remove:hover { opacity: 1; }
+  .tags-input input {
+    background: transparent;
+    border: none;
+    color: var(--fg);
+    font-size: 11px;
+    outline: none;
+    width: 80px;
+    padding: 2px 0;
+  }
+  /* Send dropdown */
+  .send-dropdown-wrap {
+    position: relative;
+    display: inline-flex;
+  }
+  .send-dropdown-wrap .btn-main {
+    border-radius: 6px 0 0 6px;
+    border-right: none;
+  }
+  .send-dropdown-wrap .btn-caret {
+    border-radius: 0 6px 6px 0;
+    padding: 5px 6px;
+    border-left: 1px solid rgba(26,27,38,0.3);
+    min-width: 0;
+  }
+  .send-dropdown {
+    display: none;
+    position: absolute;
+    top: 100%;
+    right: 0;
+    margin-top: 4px;
+    background: var(--bg-light);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    min-width: 280px;
+    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
+    z-index: 100;
+    overflow: hidden;
+  }
+  .send-dropdown.open { display: block; }
+  .send-dropdown-section {
+    padding: 4px 0;
+    border-bottom: 1px solid var(--border);
+  }
+  .send-dropdown-section:last-child { border-bottom: none; }
+  .send-dropdown-section .section-label {
+    padding: 6px 12px 2px;
+    font-size: 10px;
+    text-transform: uppercase;
+    color: var(--fg-dim);
+    letter-spacing: 0.5px;
+  }
+  .send-dropdown-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 7px 12px;
+    font-size: 12px;
+    color: var(--fg);
+    cursor: pointer;
+    transition: background 0.1s;
+  }
+  .send-dropdown-item:hover { background: var(--bg-lighter); }
+  .send-dropdown-item .item-icon { font-size: 14px; flex-shrink: 0; width: 20px; text-align: center; }
+  .send-dropdown-item .item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .send-dropdown-item .item-meta { font-size: 10px; color: var(--fg-dim); flex-shrink: 0; }
+  .send-dropdown-item.disabled { opacity: 0.4; cursor: not-allowed; }
+  .send-dropdown-item.disabled:hover { background: transparent; }
+  /* Usage badges in meta bar */
+  .usage-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 10px;
+    color: var(--fg-dim);
+    background: var(--bg);
+    padding: 2px 8px;
+    border-radius: 10px;
+    border: 1px solid var(--border);
+    cursor: pointer;
+  }
+  .usage-badge:hover { color: var(--fg); border-color: var(--accent); }
+  /* Rich text editor */
+  .editor-wrapper {
+    flex: 1;
+    overflow: auto;
+    padding: 40px 48px;
+    background: #171822;
+  }
+  .ProseMirror {
+    width: 740px;
+    margin: 0 auto;
+    min-height: 400px;
+    outline: none;
+    color: #d1d5e8;
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 15px;
+    line-height: 1.8;
+    padding: 36px 44px;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+  }
+  .ProseMirror p { margin-bottom: 12px; }
+  /* First bold-only paragraph looks like a document title */
+  .ProseMirror > p:first-child > strong:only-child,
+  .ProseMirror > p:first-child > b:only-child {
+    font-size: 1.6em;
+    letter-spacing: -0.02em;
+    line-height: 1.35;
+    color: var(--fg);
+  }
+  /* Empty paragraphs act as section spacers */
+  .ProseMirror > p:empty { margin-bottom: 8px; }
+  .ProseMirror h1 {
+    font-size: 1.75em;
+    font-weight: 700;
+    margin: 32px 0 14px;
+    color: var(--fg);
+    letter-spacing: -0.02em;
+    line-height: 1.3;
+  }
+  .ProseMirror h2 {
+    font-size: 1.4em;
+    font-weight: 600;
+    margin: 28px 0 12px;
+    color: var(--fg);
+    letter-spacing: -0.01em;
+    line-height: 1.35;
+  }
+  .ProseMirror h3 {
+    font-size: 1.15em;
+    font-weight: 600;
+    margin: 22px 0 8px;
+    color: var(--fg);
+    line-height: 1.4;
+  }
+  .ProseMirror ul, .ProseMirror ol { padding-left: 28px; margin-bottom: 12px; }
+  .ProseMirror li { margin-bottom: 5px; }
+  .ProseMirror li p { margin-bottom: 5px; }
+  .ProseMirror blockquote {
+    border-left: 3px solid var(--accent);
+    padding: 4px 0 4px 18px;
+    color: var(--fg-dim);
+    margin: 14px 0;
+    background: rgba(122, 162, 247, 0.04);
+    border-radius: 0 6px 6px 0;
+  }
+  .ProseMirror a {
+    color: var(--accent);
+    text-decoration: underline;
+    text-decoration-color: rgba(122, 162, 247, 0.35);
+    text-underline-offset: 2px;
+    transition: text-decoration-color 0.15s;
+  }
+  .ProseMirror a:hover {
+    text-decoration-color: var(--accent);
+  }
+  .ProseMirror code {
+    background: var(--bg-lighter);
+    padding: 2px 7px;
+    border-radius: 4px;
+    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+    font-size: 0.87em;
+    border: 1px solid rgba(59, 66, 97, 0.5);
+  }
+  .ProseMirror pre {
+    background: var(--bg-light);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 16px 18px;
+    margin: 16px 0;
+    overflow-x: auto;
+  }
+  .ProseMirror pre code {
+    background: none;
+    padding: 0;
+    border-radius: 0;
+    border: none;
+    font-size: 0.87em;
+    display: block;
+    white-space: pre;
+  }
+  .ProseMirror hr {
+    border: none;
+    border-top: 1px solid var(--border);
+    margin: 28px 0;
+  }
+  .ProseMirror strong { font-weight: 700; color: var(--fg); }
+  .ProseMirror em { font-style: italic; }
+  .ProseMirror img {
+    max-width: 100%;
+    border-radius: 8px;
+    margin: 14px 0;
+    cursor: pointer;
+    border: 2px solid transparent;
+    transition: border-color 0.15s, box-shadow 0.15s;
+  }
+  .ProseMirror img.img-selected {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
+  }
+  .ProseMirror .is-editor-empty:first-child::before {
+    content: attr(data-placeholder);
+    color: var(--fg-dim);
+    pointer-events: none;
+    float: left;
+    height: 0;
+  }
+  /* Version panel */
+  #version-panel {
+    display: none;
+    width: 300px;
+    background: var(--bg-light);
+    border-left: 1px solid var(--border);
+    flex-direction: column;
+    overflow: hidden;
+  }
+  #version-panel.active { display: flex; }
+  .version-header {
+    padding: 10px;
+    border-bottom: 1px solid var(--border);
+    font-size: 13px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .version-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 6px;
+  }
+  .version-item {
+    padding: 8px;
+    border-radius: 5px;
+    margin-bottom: 4px;
+    cursor: pointer;
+    border-left: 3px solid transparent;
+    transition: background 0.1s;
+  }
+  .version-item:hover { background: var(--bg-lighter); }
+  .version-item.active { border-left-color: var(--accent); background: var(--bg-lighter); }
+  .version-item .v-num { font-size: 12px; font-weight: 600; color: var(--accent); }
+  .version-item .v-date { font-size: 10px; color: var(--fg-dim); }
+  .version-item .v-msg { font-size: 11px; color: var(--fg-dim); margin-top: 2px; }
+  /* Queue Builder panel */
+  #queue-builder {
+    display: none;
+    width: 300px;
+    background: var(--bg-light);
+    border-left: 1px solid var(--border);
+    flex-direction: column;
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+  #queue-builder.active { display: flex; }
+  .queue-builder-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 8px;
+    border-radius: 5px;
+    margin-bottom: 3px;
+    font-size: 12px;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    cursor: grab;
+  }
+  .queue-builder-item:hover { border-color: var(--accent); }
+  .queue-builder-item.drag-over { border-top: 2px solid var(--accent); }
+  .queue-builder-item .qb-num {
+    font-size: 10px;
+    font-weight: 600;
+    color: var(--accent);
+    width: 18px;
+    text-align: center;
+    flex-shrink: 0;
+  }
+  .queue-builder-item .qb-title {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .queue-builder-item .qb-type {
+    font-size: 9px;
+    color: var(--fg-dim);
+    background: var(--bg-lighter);
+    padding: 1px 5px;
+    border-radius: 8px;
+  }
+  .queue-builder-item .qb-remove {
+    background: none;
+    border: none;
+    color: var(--fg-dim);
+    cursor: pointer;
+    font-size: 14px;
+    padding: 0 2px;
+    line-height: 1;
+  }
+  .queue-builder-item .qb-remove:hover { color: var(--red); }
+  .prompt-item .queue-add-btn {
+    display: none;
+    background: none;
+    border: none;
+    color: var(--fg-dim);
+    cursor: pointer;
+    padding: 2px 4px;
+    border-radius: 3px;
+    font-size: 11px;
+    line-height: 1;
+    transition: all 0.1s;
+  }
+  .prompt-item:hover .queue-add-btn { display: inline-block; }
+  .prompt-item .queue-add-btn:hover { background: var(--bg); color: var(--accent); }
+  /* Image annotation overlay */
+  .annotation-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0,0,0,0.85);
+    z-index: 200;
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+  .annotation-overlay.active { display: flex; }
+  .annotation-toolbar {
+    display: flex;
+    gap: 6px;
+    padding: 8px;
+    background: var(--bg-light);
+    border-radius: 8px;
+    margin-bottom: 8px;
+  }
+  .annotation-toolbar .tool-btn {
+    background: var(--bg-lighter);
+    border: 1px solid var(--border);
+    color: var(--fg);
+    padding: 6px 12px;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 12px;
+    transition: all 0.1s;
+  }
+  .annotation-toolbar .tool-btn:hover { border-color: var(--accent); }
+  .annotation-toolbar .tool-btn.active { background: var(--accent); color: #1a1b26; border-color: var(--accent); }
+  .annotation-canvas-container {
+    position: relative;
+    max-width: 90vw;
+    max-height: calc(100vh - 120px);
+    overflow: auto;
+  }
+  .annotation-canvas-container img {
+    max-width: 100%;
+    display: block;
+  }
+  .annotation-canvas-container canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    cursor: crosshair;
+  }
+  /* Right panel area for chains, permissions, etc */
+  .panel-tabs {
+    display: flex;
+    border-bottom: 1px solid var(--border);
+    background: var(--bg);
+  }
+  .panel-tab {
+    padding: 6px 14px;
+    font-size: 12px;
+    cursor: pointer;
+    color: var(--fg-dim);
+    border-bottom: 2px solid transparent;
+    transition: all 0.1s;
+  }
+  .panel-tab:hover { color: var(--fg); }
+  .panel-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
+  /* Chains visual editor */
+  .chain-canvas {
+    flex: 1;
+    overflow: auto;
+    position: relative;
+    background: var(--bg);
+    background-image: radial-gradient(var(--border) 1px, transparent 1px);
+    background-size: 20px 20px;
+  }
+  .chain-node {
+    position: absolute;
+    background: var(--bg-light);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 10px;
+    min-width: 150px;
+    cursor: move;
+    font-size: 12px;
+  }
+  .chain-node:hover { border-color: var(--accent); }
+  .chain-node .node-title { font-weight: 600; margin-bottom: 4px; }
+  .chain-node .node-type { font-size: 10px; color: var(--fg-dim); }
+  /* Empty state */
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    gap: 12px;
+    color: var(--fg-dim);
+    text-align: center;
+    padding: 40px;
+  }
+  .empty-state h3 { color: var(--fg); font-size: 16px; }
+  .empty-state p { font-size: 13px; line-height: 1.6; max-width: 400px; }
+  /* Modal */
+  .modal-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0,0,0,0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 100;
+  }
+  .modal-overlay.hidden { display: none; }
+  .modal {
+    background: var(--bg-light);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    padding: 20px;
+    min-width: 420px;
+    max-width: 90vw;
+    max-height: 90vh;
+    overflow-y: auto;
+  }
+  .modal h3 { margin-bottom: 14px; font-size: 15px; }
+  .modal label { display: block; font-size: 12px; color: var(--fg-dim); margin-bottom: 4px; margin-top: 10px; }
+  .modal input, .modal select, .modal textarea {
+    width: 100%;
+    background: var(--bg);
+    color: var(--fg);
+    border: 1px solid var(--border);
+    padding: 8px 10px;
+    border-radius: 5px;
+    font-size: 13px;
+    outline: none;
+  }
+  .modal input:focus, .modal select:focus, .modal textarea:focus { border-color: var(--accent); }
+  .modal textarea { min-height: 80px; resize: vertical; font-family: 'SF Mono', monospace; }
+  .modal .btn-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
+  /* Scrollbars */
+  ::-webkit-scrollbar { width: 6px; height: 6px; }
+  ::-webkit-scrollbar-track { background: transparent; }
+  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+  ::-webkit-scrollbar-thumb:hover { background: var(--fg-dim); }
+  /* Bottom status bar */
+  #statusbar {
+    display: flex;
+    align-items: center;
+    height: 24px;
+    background: var(--bg-light);
+    border-top: 1px solid var(--border);
+    padding: 0 12px;
+    font-size: 10px;
+    color: var(--fg-dim);
+    gap: 12px;
+    flex-shrink: 0;
+  }
+  #statusbar .status-item { display: flex; align-items: center; gap: 4px; }
+  /* Toast notification system */
+  #toast-container {
+    position: fixed; bottom: 20px; right: 20px; z-index: 10000;
+    display: flex; flex-direction: column-reverse; gap: 8px;
+    pointer-events: none; max-width: 420px;
+  }
+  .toast {
+    display: flex; align-items: flex-start; gap: 10px;
+    background: var(--bg-light); border: 1px solid var(--border);
+    border-radius: 12px; padding: 12px 16px;
+    box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.2);
+    pointer-events: auto; cursor: default;
+    transform: translateX(120%); opacity: 0;
+    transition: transform 0.35s cubic-bezier(0.21,1.02,0.73,1), opacity 0.35s ease;
+    max-width: 420px; min-width: 280px;
+  }
+  .toast.show { transform: translateX(0); opacity: 1; }
+  .toast.hide { transform: translateX(120%); opacity: 0; }
+  .toast-icon {
+    width: 28px; height: 28px; border-radius: 8px;
+    display: flex; align-items: center; justify-content: center;
+    flex-shrink: 0; font-size: 14px;
+  }
+  .toast-icon.success { background: rgba(158,206,106,0.15); color: var(--green); }
+  .toast-icon.error { background: rgba(247,118,142,0.15); color: var(--red); }
+  .toast-icon.warning { background: rgba(224,175,104,0.15); color: var(--yellow); }
+  .toast-icon.info { background: rgba(122,162,247,0.15); color: var(--accent); }
+  .toast-body { flex: 1; min-width: 0; }
+  .toast-title { font-size: 12px; font-weight: 600; color: var(--fg); margin-bottom: 2px; }
+  .toast-msg { font-size: 11px; color: var(--fg-dim); line-height: 1.4; word-break: break-word; }
+  .toast-close {
+    background: none; border: none; color: var(--fg-dim); cursor: pointer;
+    font-size: 14px; padding: 0 0 0 8px; line-height: 1; flex-shrink: 0;
+    opacity: 0; transition: opacity 0.2s;
+  }
+  .toast:hover .toast-close { opacity: 1; }
+  .toast-progress {
+    position: absolute; bottom: 0; left: 0; height: 2px;
+    border-radius: 0 0 12px 12px; transition: width linear;
+  }
+  .toast-progress.success { background: var(--green); }
+  .toast-progress.error { background: var(--red); }
+  .toast-progress.warning { background: var(--yellow); }
+  .toast-progress.info { background: var(--accent); }
+  /* --- Autocomplete Dropdown --- */
+  .autocomplete-wrap { position: relative; }
+  .autocomplete-dropdown {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: var(--bg-light);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    max-height: 260px;
+    overflow-y: auto;
+    z-index: 200;
+    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
+    margin-top: 2px;
+  }
+  .autocomplete-dropdown.visible { display: block; }
+  .ac-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 6px 10px;
+    cursor: pointer;
+    font-size: 11px;
+    border-bottom: 1px solid var(--border);
+    transition: background 0.1s;
+  }
+  .ac-item:last-child { border-bottom: none; }
+  .ac-item:hover, .ac-item.selected { background: var(--bg-lighter); }
+  .ac-type {
+    font-size: 9px;
+    padding: 1px 5px;
+    border-radius: 4px;
+    font-weight: 600;
+    flex-shrink: 0;
+    margin-top: 1px;
+  }
+  .ac-type.history { background: rgba(122,162,247,0.15); color: var(--accent); }
+  .ac-type.library { background: rgba(158,206,106,0.15); color: var(--green); }
+  .ac-type.tool_context { background: rgba(224,175,104,0.15); color: var(--yellow); }
+  .ac-text { flex: 1; line-height: 1.4; color: var(--fg); }
+  .ac-text .full { display: block; font-size: 10px; color: var(--fg-dim); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  /* --- Lifecycle Badge --- */
+  .lifecycle-badge {
+    font-size: 9px;
+    padding: 1px 5px;
+    border-radius: 8px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+  }
+  .lifecycle-badge.draft { background: rgba(86,95,137,0.3); color: var(--fg-dim); }
+  .lifecycle-badge.used { background: rgba(122,162,247,0.2); color: var(--accent); }
+  .lifecycle-badge.frequent { background: rgba(158,206,106,0.2); color: var(--green); }
+  .lifecycle-badge.template { background: rgba(187,154,247,0.2); color: var(--purple); }
+  .lifecycle-badge.archived { background: rgba(247,118,142,0.15); color: var(--red); }
+  /* --- Harvest Panel (modal overlay) --- */
+  .harvest-modal {
+    position: fixed;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background: rgba(0,0,0,0.6);
+    z-index: 500;
+    display: none;
+    align-items: center;
+    justify-content: center;
+  }
+  .harvest-modal.visible { display: flex; }
+  .harvest-content {
+    background: var(--bg-light);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    padding: 20px;
+    max-width: 560px;
+    width: 90%;
+    max-height: 80vh;
+    overflow-y: auto;
+  }
+  .harvest-stat {
+    display: flex;
+    justify-content: space-between;
+    padding: 4px 0;
+    font-size: 12px;
+    border-bottom: 1px solid var(--border);
+  }
+  .harvest-stat:last-child { border-bottom: none; }
+  .harvest-stat .label { color: var(--fg-dim); }
+  .harvest-stat .value { font-weight: 600; color: var(--fg); }
+  .harvest-projects {
+    max-height: 120px;
+    overflow-y: auto;
+    margin-top: 6px;
+    font-size: 11px;
+  }
+  .harvest-projects div {
+    display: flex;
+    justify-content: space-between;
+    padding: 2px 0;
+    color: var(--fg-dim);
+  }
+  .harvest-projects div span:last-child { color: var(--fg); }
+  /* --- Copilot & Similar Prompts Panel --- */
+  #copilot-panel {
+    width: 340px;
+    background: var(--bg-light);
+    border-left: 1px solid var(--border);
+    display: none;
+    flex-direction: column;
+    flex-shrink: 0;
+    overflow: hidden;
+  }
+  #copilot-panel.active { display: flex; }
+  .copilot-tabs {
+    display: flex;
+    border-bottom: 1px solid var(--border);
+    background: var(--bg);
+  }
+  .copilot-tab {
+    flex: 1;
+    padding: 8px 4px;
+    font-size: 11px;
+    text-align: center;
+    cursor: pointer;
+    color: var(--fg-dim);
+    border-bottom: 2px solid transparent;
+    transition: all 0.15s;
+  }
+  .copilot-tab:hover { color: var(--fg); }
+  .copilot-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
+  .copilot-body { flex: 1; overflow-y: auto; padding: 10px; }
+  /* Similar prompts */
+  .similar-item {
+    padding: 8px;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    margin-bottom: 6px;
+    cursor: pointer;
+    font-size: 11px;
+    transition: border-color 0.15s;
+  }
+  .similar-item:hover { border-color: var(--accent); }
+  .similar-item .si-title { font-weight: 500; margin-bottom: 3px; }
+  .similar-item .si-meta { color: var(--fg-dim); font-size: 10px; }
+  .similar-item .si-match { float: right; font-size: 9px; color: var(--accent); }
+  /* Copilot chat */
+  .copilot-chat { display: flex; flex-direction: column; height: 100%; }
+  .copilot-messages { flex: 1; overflow-y: auto; padding: 8px; }
+  .copilot-msg {
+    padding: 8px 10px;
+    border-radius: 8px;
+    margin-bottom: 6px;
+    font-size: 12px;
+    line-height: 1.5;
+    max-width: 90%;
+  }
+  .copilot-msg.user { background: var(--accent); color: #1a1b26; margin-left: auto; }
+  .copilot-msg.assistant { background: var(--bg); border: 1px solid var(--border); }
+  .copilot-input-row {
+    display: flex;
+    gap: 4px;
+    padding: 8px;
+    border-top: 1px solid var(--border);
+  }
+  .copilot-input-row input {
+    flex: 1;
+    background: var(--bg);
+    color: var(--fg);
+    border: 1px solid var(--border);
+    padding: 6px 10px;
+    border-radius: 6px;
+    font-size: 12px;
+    outline: none;
+  }
+  .copilot-input-row input:focus { border-color: var(--accent); }
+  /* Patterns view */
+  .pattern-item {
+    padding: 8px;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    margin-bottom: 6px;
+  }
+  .pattern-item .pi-freq { float: right; font-size: 10px; background: var(--accent); color: #1a1b26; padding: 1px 6px; border-radius: 8px; font-weight: 600; }
+  .pattern-item .pi-text { font-size: 12px; margin-bottom: 3px; }
+  .pattern-item .pi-meta { font-size: 10px; color: var(--fg-dim); }
+</style>
+</head>
+<body>
+  <div id="toast-container"></div>
+  <div id="topbar">
+    <span class="logo" onclick="navigateToMain()">Claude Task Manager</span>
+    <span style="color:var(--fg-dim);font-size:12px">/</span>
+    <span style="font-size:13px;font-weight:500">Prompt Editor</span>
+    <div class="topbar-actions">
+      <button class="btn" data-view="chains" onclick="showView('chains')">Chains</button>
+      <button class="btn" data-view="conversations" onclick="showView('conversations')">Sessions DB</button>
+      <button class="btn" data-view="templates" onclick="showView('templates')">Templates</button>
+      <button class="btn" data-view="backups" onclick="showView('backups')" style="color:var(--green)">Backups</button>
+      <button class="btn" data-view="patterns" onclick="showView('patterns')">Patterns</button>
+      <button class="btn" onclick="openHarvestModal()" style="color:var(--yellow)">Harvest</button>
+      <button class="btn" onclick="toggleCopilotPanel()" id="copilot-toggle">Copilot</button>
+      <button class="btn" onclick="toggleQueueBuilder()" id="queue-builder-toggle">Queue</button>
+      <button class="btn primary" onclick="createNewPrompt()">+ New Prompt</button>
+    </div>
+  </div>
+  <div id="main">
+    <!-- Sidebar: folders + prompt list -->
+    <div id="prompt-sidebar">
+      <div class="sidebar-header">
+        <div class="search-row autocomplete-wrap">
+          <input id="prompt-search" type="text" placeholder="Search prompts..." oninput="onSearchInput()" onkeydown="onSearchKeydown(event)" autocomplete="off">
+          <div class="autocomplete-dropdown" id="ac-dropdown"></div>
+          <button id="ai-search-btn" class="ai-search-toggle" onclick="toggleAiSearch()" title="AI-powered semantic search (Enter to search)">AI</button>
+          <button class="btn small" onclick="createNewFolder()">+ Folder</button>
+        </div>
+        <div style="display:flex;gap:4px;">
+          <select id="context-filter" onchange="filterPrompts()" style="flex:1;background:var(--bg);color:var(--fg);border:1px solid var(--border);padding:3px 6px;border-radius:4px;font-size:10px;">
+            <option value="">All Types</option>
+            <option value="general">General</option>
+            <option value="coding">Coding</option>
+            <option value="debugging">Debugging</option>
+            <option value="design">Design</option>
+            <option value="research">Research</option>
+            <option value="devops">DevOps</option>
+          </select>
+          <select id="lifecycle-filter" onchange="filterPrompts()" style="flex:1;background:var(--bg);color:var(--fg);border:1px solid var(--border);padding:3px 6px;border-radius:4px;font-size:10px;">
+            <option value="">All Status</option>
+            <option value="draft">Draft</option>
+            <option value="used">Used</option>
+            <option value="frequent">Frequent</option>
+            <option value="template">Template</option>
+            <option value="archived">Archived</option>
+          </select>
+          <button class="btn small" id="pe-star-filter-btn" onclick="filterPrompts('starred')">&#9733;</button>
+        </div>
+      </div>
+      <div class="folder-tree" id="folder-tree"></div>
+      <div class="prompt-list" id="prompt-list"></div>
+    </div>
+    <!-- Editor / Panel area -->
+    <div id="editor-area">
+      <!-- View: Editor -->
+      <div id="view-editor" style="display:flex;flex-direction:column;flex:1;overflow:hidden;">
+        <div class="meta-bar" id="meta-bar" style="display:none;">
+          <input id="prompt-title-input" type="text" placeholder="Prompt title..." oninput="onTitleChange()">
+          <select id="prompt-context-type" onchange="onContextTypeChange()" style="background:var(--bg);color:var(--fg);border:1px solid var(--border);padding:4px 8px;border-radius:4px;font-size:11px;">
+            <option value="general">General</option>
+            <option value="coding">Coding</option>
+            <option value="debugging">Debugging</option>
+            <option value="design">Design</option>
+            <option value="research">Research</option>
+            <option value="devops">DevOps</option>
+          </select>
+          <div class="tags-input" id="tags-input">
+            <input id="tag-input" type="text" placeholder="Add tag..." onkeydown="onTagKeydown(event)">
+          </div>
+          <select id="lifecycle-status" onchange="onLifecycleChange()" style="background:var(--bg);color:var(--fg);border:1px solid var(--border);padding:3px 6px;border-radius:4px;font-size:10px;">
+            <option value="draft">Draft</option>
+            <option value="used">Used</option>
+            <option value="frequent">Frequent</option>
+            <option value="template">Template</option>
+            <option value="archived">Archived</option>
+          </select>
+          <button class="btn small" onclick="toggleStar()" id="star-btn" title="Star/unstar">&#9734;</button>
+          <button class="btn small" onclick="toggleVersions()" title="Version History">History</button>
+          <span id="usage-badge-wrap"></span>
+          <div class="send-dropdown-wrap" id="send-dropdown-wrap">
+            <button class="btn small primary btn-main" onclick="sendToNewSession()">Send</button>
+            <button class="btn small primary btn-caret" onclick="toggleSendDropdown(event)">&#9660;</button>
+            <div class="send-dropdown" id="send-dropdown">
+              <div class="send-dropdown-section">
+                <div class="send-dropdown-item" onclick="sendToNewSession()">
+                  <span class="item-icon">&#128640;</span>
+                  <span class="item-label">Send to New Session</span>
+                </div>
+              </div>
+              <div class="send-dropdown-section" id="send-active-sessions">
+                <div class="section-label">Active Sessions</div>
+                <div class="send-dropdown-item disabled">
+                  <span class="item-icon">&#128268;</span>
+                  <span class="item-label">No active sessions</span>
+                </div>
+              </div>
+              <div class="send-dropdown-section">
+                <div class="send-dropdown-item" onclick="copyPromptText()">
+                  <span class="item-icon">&#128203;</span>
+                  <span class="item-label">Copy as Text</span>
+                </div>
+                <div class="send-dropdown-item" onclick="copyPromptMarkdown()">
+                  <span class="item-icon">&#128221;</span>
+                  <span class="item-label">Copy as Markdown</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="editor-toolbar" id="editor-toolbar" style="display:none;">
+          <div class="toolbar-group">
+            <button class="toolbar-btn" onclick="execCmd('toggleBold')" title="Bold"><b>B</b></button>
+            <button class="toolbar-btn" onclick="execCmd('toggleItalic')" title="Italic"><i>I</i></button>
+            <button class="toolbar-btn" onclick="execCmd('toggleStrike')" title="Strikethrough"><s>S</s></button>
+            <button class="toolbar-btn" onclick="execCmd('toggleCode')" title="Code">&lt;/&gt;</button>
+          </div>
+          <div class="toolbar-group">
+            <button class="toolbar-btn" onclick="execCmd('toggleHeading', {level:1})" title="H1">H1</button>
+            <button class="toolbar-btn" onclick="execCmd('toggleHeading', {level:2})" title="H2">H2</button>
+            <button class="toolbar-btn" onclick="execCmd('toggleHeading', {level:3})" title="H3">H3</button>
+          </div>
+          <div class="toolbar-group">
+            <button class="toolbar-btn" onclick="execCmd('toggleBulletList')" title="Bullet List">&#8226;</button>
+            <button class="toolbar-btn" onclick="execCmd('toggleOrderedList')" title="Ordered List">1.</button>
+            <button class="toolbar-btn" onclick="execCmd('toggleBlockquote')" title="Quote">&ldquo;</button>
+            <button class="toolbar-btn" onclick="execCmd('toggleCodeBlock')" title="Code Block">{ }</button>
+          </div>
+          <div class="toolbar-group">
+            <button class="toolbar-btn" onclick="execCmd('setHorizontalRule')" title="Horizontal Rule">&mdash;</button>
+            <button class="toolbar-btn" onclick="insertImage()" title="Insert Image">&#128247;</button>
+            <button class="toolbar-btn" onclick="takeScreenshot()" title="Screenshot">&#128248;</button>
+          </div>
+          <div class="toolbar-group">
+            <button class="toolbar-btn" onclick="execCmd('undo')" title="Undo">&#8617;</button>
+            <button class="toolbar-btn" onclick="execCmd('redo')" title="Redo">&#8618;</button>
+          </div>
+          <div class="toolbar-group">
+            <select id="font-select" onchange="setEditorFont(this.value)" title="Editor Font" style="background:var(--bg);color:var(--fg);border:1px solid var(--border);border-radius:4px;font-size:11px;padding:2px 4px;outline:none;cursor:pointer;min-width:110px;">
+              <option value="'Courier New', Courier, monospace">Courier New</option>
+              <option value="'Menlo', 'Monaco', 'Consolas', monospace">Menlo / Consolas</option>
+              <option value="'SF Mono', 'Fira Code', 'Cascadia Code', monospace">SF Mono / Fira Code</option>
+              <option value="-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif">System Sans</option>
+              <option value="Georgia, 'Times New Roman', serif">Georgia / Serif</option>
+              <option value="'Helvetica Neue', Arial, sans-serif">Helvetica / Arial</option>
+            </select>
+          </div>
+          <div class="toolbar-group" style="border-right:none;">
+            <button class="toolbar-btn" onclick="zoomEditor(-1)" title="Zoom Out">&#8722;</button>
+            <select id="zoom-select" onchange="setZoom(parseInt(this.value))" style="background:var(--bg);color:var(--fg);border:1px solid var(--border);border-radius:4px;font-size:11px;padding:2px 4px;outline:none;cursor:pointer;min-width:60px;text-align:center;-webkit-appearance:none;appearance:none;background-image:url('data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%228%22 height=%225%22><path d=%22M0 0l4 5 4-5z%22 fill=%22%23565f89%22/></svg>');background-repeat:no-repeat;background-position:right 4px center;padding-right:14px;">
+              <option value="50">50%</option>
+              <option value="67">67%</option>
+              <option value="75">75%</option>
+              <option value="80">80%</option>
+              <option value="90">90%</option>
+              <option value="100" selected>100%</option>
+              <option value="110">110%</option>
+              <option value="125">125%</option>
+              <option value="150">150%</option>
+              <option value="175">175%</option>
+              <option value="200">200%</option>
+              <option value="250">250%</option>
+              <option value="300">300%</option>
+            </select>
+            <button class="toolbar-btn" onclick="zoomEditor(1)" title="Zoom In">+</button>
+          </div>
+        </div>
+        <div id="copilot-suggestion-bar" style="display:none;padding:6px 12px;background:var(--bg-lighter);border-bottom:1px solid var(--border);font-size:11px;color:var(--fg-dim);line-height:1.4;">
+          <div style="display:flex;align-items:flex-start;gap:8px;">
+            <span style="font-size:10px;padding:1px 5px;border-radius:4px;background:rgba(187,154,247,0.2);color:var(--purple);font-weight:600;flex-shrink:0;">Copilot</span>
+            <div id="copilot-suggestion-text" style="flex:1;"></div>
+            <button class="btn small" onclick="toggleCopilotPreview()" id="copilot-preview-btn" style="font-size:10px;">Preview</button>
+            <button class="btn small" onclick="applyCopilotSuggestion()" id="copilot-apply-btn" style="display:none;font-size:10px;">Apply</button>
+            <button class="btn small" onclick="dismissCopilotSuggestion()" style="font-size:10px;padding:2px 6px;">X</button>
+          </div>
+          <div id="copilot-preview" style="display:none;margin-top:8px;max-height:300px;overflow-y:auto;background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:8px;font-family:monospace;font-size:11px;white-space:pre-wrap;color:var(--fg);line-height:1.5;"></div>
+        </div>
+        <div class="editor-wrapper" id="editor-wrapper" style="display:none;">
+          <div id="editor"></div>
+        </div>
+        <div class="empty-state" id="editor-empty">
+          <h3>Prompt Editor</h3>
+          <p>Create, edit, and manage your prompts with rich text formatting, image annotations, versioning, and prompt chains.</p>
+          <p style="font-size:12px;margin-top:8px">
+            <strong>Quick start:</strong> Click <strong>+ New Prompt</strong> or select an existing prompt from the sidebar.
+          </p>
+          <div style="display:grid;grid-template-columns:auto auto;gap:4px 16px;font-size:11px;margin-top:12px;">
+            <span>Paste images</span><span style="color:var(--accent)">Ctrl+V in editor</span>
+            <span>Add tags</span><span style="color:var(--accent)">Type + Enter in tag field</span>
+            <span>Version history</span><span style="color:var(--accent)">History button</span>
+            <span>Send to session</span><span style="color:var(--accent)">Send button</span>
+          </div>
+        </div>
+      </div>
+      <!-- View: Chains -->
+      <div id="view-chains" style="display:none;flex:1;flex-direction:column;overflow:hidden;">
+        <div style="padding:10px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;background:var(--bg);">
+          <h3 style="font-size:14px;flex:1">Prompt Chains</h3>
+          <button class="btn primary small" onclick="createNewChain()">+ New Chain</button>
+        </div>
+        <div id="chain-list" style="padding:10px;overflow-y:auto;flex:1;"></div>
+      </div>
+      <!-- View: Session Conversations DB -->
+      <div id="view-conversations" style="display:none;flex:1;flex-direction:column;overflow:hidden;">
+        <div style="padding:10px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;background:var(--bg);">
+          <h3 style="font-size:14px;flex:1">Session Conversations</h3>
+          <input id="conv-search" type="text" placeholder="Search conversations..." style="width:200px;background:var(--bg-lighter);color:var(--fg);border:1px solid var(--border);padding:4px 8px;border-radius:4px;font-size:11px;outline:none;" oninput="loadConversations()">
+          <button class="btn primary small" onclick="importConversations()">Import All Sessions</button>
+        </div>
+        <div id="conv-list" style="flex:1;overflow-y:auto;padding:10px;"></div>
+      </div>
+      <!-- View: Templates -->
+      <div id="view-templates" style="display:none;flex:1;flex-direction:column;overflow:hidden;">
+        <div style="padding:10px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;background:var(--bg);">
+          <h3 style="font-size:14px;flex:1">Prompt Templates</h3>
+          <button class="btn primary small" onclick="createNewTemplate()">+ New Template</button>
+        </div>
+        <div id="template-list" style="flex:1;overflow-y:auto;padding:10px;"></div>
+      </div>
+      <!-- View: Backups -->
+      <div id="view-backups" style="display:none;flex:1;flex-direction:column;overflow:hidden;">
+        <div style="padding:10px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;background:var(--bg);">
+          <h3 style="font-size:14px;flex:1">Backup Manager</h3>
+          <span id="backup-status" style="font-size:11px;color:var(--fg-dim)"></span>
+          <button class="btn primary small" onclick="createManualBackup()">Backup Now</button>
+        </div>
+        <div style="padding:12px;font-size:12px;color:var(--fg-dim);border-bottom:1px solid var(--border);background:var(--bg-light);">
+          Daily auto-backups are created automatically. Backups older than 30 days are cleaned up (minimum 5 kept). Restoring a backup creates a safety snapshot of the current state first.
+        </div>
+        <div id="backup-list" style="flex:1;overflow-y:auto;padding:10px;"></div>
+      </div>
+      <!-- View: Patterns -->
+      <div id="view-patterns" style="display:none;flex:1;flex-direction:column;overflow:hidden;">
+        <div style="padding:10px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;background:var(--bg);">
+          <h3 style="font-size:14px;flex:1">Prompt Patterns</h3>
+          <span id="pattern-count" style="font-size:11px;color:var(--fg-dim)"></span>
+          <button class="btn primary small" onclick="detectPatterns()">Detect Patterns</button>
+        </div>
+        <div style="padding:8px;font-size:11px;color:var(--fg-dim);border-bottom:1px solid var(--border);background:var(--bg-light);">
+          Patterns are prompts you've used repeatedly across sessions. Detecting patterns helps you identify reusable workflows.
+        </div>
+        <div id="pattern-list" style="flex:1;overflow-y:auto;padding:10px;"></div>
+      </div>
+    </div>
+    <!-- Copilot / Similar Prompts Panel (right side) -->
+    <div id="copilot-panel">
+      <div class="copilot-tabs">
+        <div class="copilot-tab active" onclick="switchCopilotTab('similar')">Similar</div>
+        <div class="copilot-tab" onclick="switchCopilotTab('copilot')">Copilot</div>
+        <div class="copilot-tab" onclick="switchCopilotTab('sessions')">Sessions</div>
+        <div class="copilot-tab" onclick="switchCopilotTab('frequent')">Frequent</div>
+        <div style="margin-left:auto;padding:4px;">
+          <button class="btn small" onclick="toggleCopilotPanel()" style="padding:2px 6px;">X</button>
+        </div>
+      </div>
+      <div class="copilot-body" id="copilot-body">
+        <div id="copilot-similar" class="copilot-tab-content">
+          <div style="padding:12px;text-align:center;color:var(--fg-dim);font-size:12px;">Open a prompt to see similar prompts from your history.</div>
+        </div>
+        <div id="copilot-chat" class="copilot-tab-content" style="display:none;">
+          <div class="copilot-chat">
+            <div class="copilot-messages" id="copilot-messages">
+              <div class="copilot-msg assistant">Hi! I'm Prompt Copilot. Ask me about your prompting history, patterns, or how to improve a prompt.</div>
+            </div>
+            <div class="copilot-input-row">
+              <input id="copilot-input" type="text" placeholder="Ask about your prompts..." onkeydown="if(event.key==='Enter')sendCopilotMsg()">
+              <button class="btn small primary" onclick="sendCopilotMsg()">Send</button>
+            </div>
+          </div>
+        </div>
+        <div id="copilot-sessions" class="copilot-tab-content" style="display:none;">
+          <div style="padding:12px;text-align:center;color:var(--fg-dim);font-size:12px;">Open a prompt to see which sessions it was sent to.</div>
+        </div>
+        <div id="copilot-frequent" class="copilot-tab-content" style="display:none;">
+          <div style="padding:12px;text-align:center;color:var(--fg-dim);font-size:12px;">Loading frequent questions...</div>
+        </div>
+      </div>
+    </div>
+    <!-- Version history panel (right side) -->
+    <div id="version-panel">
+      <div class="version-header">
+        <span>Version History</span>
+        <button class="btn small" onclick="toggleVersions()">Close</button>
+      </div>
+      <div class="version-list" id="version-list"></div>
+    </div>
+    <!-- Queue Builder panel (right side) -->
+    <div id="queue-builder">
+      <div class="version-header" style="display:flex;align-items:center;gap:8px;">
+        <span style="flex:1;font-weight:600;">Queue Builder</span>
+        <button class="btn small" onclick="toggleQueueBuilder()">Close</button>
+      </div>
+      <div style="padding:8px;border-bottom:1px solid var(--border);">
+        <div style="display:flex;gap:6px;align-items:center;margin-bottom:6px;">
+          <label style="font-size:11px;color:var(--fg-dim);white-space:nowrap;">Session:</label>
+          <select id="queue-session-select" onchange="onQueueSessionChange()" style="flex:1;background:var(--bg);color:var(--fg);border:1px solid var(--border);padding:3px 6px;border-radius:4px;font-size:11px;"></select>
+        </div>
+        <div style="display:flex;gap:6px;align-items:center;">
+          <label style="font-size:11px;color:var(--fg-dim);white-space:nowrap;">Mode:</label>
+          <button class="btn small" id="queue-mode-btn" onclick="toggleQueueBuilderMode()" style="font-size:10px;">Manual</button>
+          <label style="font-size:11px;color:var(--fg-dim);white-space:nowrap;margin-left:auto;">Timeout:</label>
+          <input id="queue-idle-timeout" type="number" value="10" min="1" max="120" style="width:48px;background:var(--bg);color:var(--fg);border:1px solid var(--border);padding:2px 4px;border-radius:4px;font-size:11px;">
+          <span style="font-size:10px;color:var(--fg-dim)">s</span>
+        </div>
+      </div>
+      <div style="display:flex;align-items:center;padding:4px 8px;border-bottom:1px solid var(--border);">
+        <span style="font-size:11px;color:var(--fg-dim);flex:1;" id="queue-builder-count">0 items</span>
+        <button class="btn small" style="color:var(--red);font-size:10px;" onclick="clearQueueItems()">Clear All</button>
+      </div>
+      <div id="queue-builder-list" style="flex:1;overflow-y:auto;padding:6px;min-height:60px;">
+        <div style="padding:16px;text-align:center;color:var(--fg-dim);font-size:11px;">
+          Click +Q on prompts to add them here, or type inline prompts below.
+        </div>
+      </div>
+      <div style="padding:8px;border-top:1px solid var(--border);">
+        <div style="display:flex;gap:4px;margin-bottom:6px;position:relative;" class="autocomplete-wrap">
+          <input id="queue-inline-input" type="text" placeholder="Add inline prompt..." style="flex:1;background:var(--bg);color:var(--fg);border:1px solid var(--border);padding:5px 8px;border-radius:4px;font-size:11px;outline:none;" onkeydown="onQueueInputKeydown(event)" oninput="onQueueInputChange()" autocomplete="off">
+          <div class="autocomplete-dropdown" id="queue-ac-dropdown"></div>
+          <button class="btn small" onclick="addInlineToQueue()">+ Add</button>
+        </div>
+        <button class="btn small primary" style="width:100%;" onclick="sendQueue()" id="queue-send-btn">Send Queue</button>
+      </div>
+    </div>
+  </div>
+  <!-- Image Annotation Overlay -->
+  <div class="annotation-overlay" id="annotation-overlay">
+    <div class="annotation-toolbar" id="annotation-toolbar">
+      <button class="tool-btn active" data-tool="arrow" onclick="setAnnotationTool('arrow')">Arrow</button>
+      <button class="tool-btn" data-tool="rect" onclick="setAnnotationTool('rect')">Rectangle</button>
+      <button class="tool-btn" data-tool="circle" onclick="setAnnotationTool('circle')">Circle</button>
+      <button class="tool-btn" data-tool="text" onclick="setAnnotationTool('text')">Text</button>
+      <button class="tool-btn" data-tool="freehand" onclick="setAnnotationTool('freehand')">Freehand</button>
+      <button class="tool-btn" data-tool="blur" onclick="setAnnotationTool('blur')">Blur</button>
+      <button class="tool-btn" data-tool="callout" onclick="setAnnotationTool('callout')">Callout</button>
+      <input type="color" id="annotation-color" value="#f7768e" style="width:30px;height:28px;border:none;cursor:pointer;background:none;">
+      <input type="range" id="annotation-size" min="1" max="10" value="3" style="width:80px;">
+      <button class="btn small" onclick="undoAnnotation()">Undo</button>
+      <button class="btn small primary" onclick="saveAnnotations()">Save</button>
+      <button class="btn small danger" onclick="closeAnnotation()">Cancel</button>
+    </div>
+    <div class="annotation-canvas-container" id="annotation-container">
+      <img id="annotation-image">
+      <canvas id="annotation-canvas"></canvas>
+    </div>
+  </div>
+  <!-- Modals -->
+  <!-- Harvest Modal -->
+  <div class="harvest-modal" id="harvest-modal">
+    <div class="harvest-content">
+      <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
+        <h3 style="font-size:16px;flex:1;">Session Harvester</h3>
+        <button class="btn small" onclick="closeHarvestModal()">Close</button>
+      </div>
+      <div id="harvest-stats" style="margin-bottom:12px;">
+        <div style="text-align:center;color:var(--fg-dim);font-size:12px;">Loading harvest preview...</div>
+      </div>
+      <div style="display:flex;gap:8px;margin-bottom:12px;">
+        <button class="btn primary" onclick="runHarvest('incremental')" id="harvest-inc-btn">Harvest New</button>
+        <button class="btn" onclick="runHarvest('all')" id="harvest-all-btn">Full Re-harvest</button>
+        <select id="harvest-days" style="background:var(--bg);color:var(--fg);border:1px solid var(--border);padding:4px 6px;border-radius:4px;font-size:11px;">
+          <option value="">All time</option>
+          <option value="7">Last 7 days</option>
+          <option value="30" selected>Last 30 days</option>
+          <option value="90">Last 90 days</option>
+        </select>
+      </div>
+      <div id="harvest-result" style="display:none;padding:10px;background:var(--bg);border:1px solid var(--border);border-radius:6px;font-size:12px;"></div>
+    </div>
+  </div>
+  <div class="modal-overlay hidden" id="folder-modal">
+    <div class="modal" style="min-width:320px">
+      <h3>New Folder</h3>
+      <label>Name</label>
+      <input id="folder-name" type="text" placeholder="Folder name...">
+      <label>Color</label>
+      <input id="folder-color" type="color" value="#7aa2f7" style="height:36px;">
+      <div class="btn-row">
+        <button class="btn" onclick="closeModal('folder-modal')">Cancel</button>
+        <button class="btn primary" onclick="saveFolderModal()">Create</button>
+      </div>
+    </div>
+  </div>
+  <div class="modal-overlay hidden" id="chain-modal">
+    <div class="modal">
+      <h3 id="chain-modal-title">New Chain</h3>
+      <label>Name</label>
+      <input id="chain-name" type="text" placeholder="Chain name...">
+      <label>Description</label>
+      <textarea id="chain-desc" placeholder="What does this chain do?"></textarea>
+      <div class="btn-row">
+        <button class="btn" onclick="closeModal('chain-modal')">Cancel</button>
+        <button class="btn primary" onclick="saveChainModal()">Save</button>
+      </div>
+    </div>
+  </div>
+  <div class="modal-overlay hidden" id="template-modal">
+    <div class="modal">
+      <h3>New Template</h3>
+      <label>Name</label>
+      <input id="tpl-name" type="text" placeholder="Template name...">
+      <label>Description</label>
+      <input id="tpl-desc" type="text" placeholder="What is this template for?">
+      <label>Category</label>
+      <select id="tpl-category">
+        <option value="general">General</option>
+        <option value="coding">Coding</option>
+        <option value="debugging">Debugging</option>
+        <option value="design">Design</option>
+        <option value="research">Research</option>
+      </select>
+      <label>Content (use {{variable}} for placeholders)</label>
+      <textarea id="tpl-content" rows="8" placeholder="Write your template here...&#10;Use {{project_name}}, {{description}}, etc."></textarea>
+      <label>Variables (comma-separated)</label>
+      <input id="tpl-vars" type="text" placeholder="project_name, description, language">
+      <div class="btn-row">
+        <button class="btn" onclick="closeModal('template-modal')">Cancel</button>
+        <button class="btn primary" onclick="saveTemplateModal()">Create</button>
+      </div>
+    </div>
+  </div>
+  <div id="statusbar">
+    <span class="status-item" id="status-prompt">No prompt selected</span>
+    <span class="status-item" id="status-version"></span>
+    <span class="status-item" id="status-words"></span>
+    <span class="status-item" style="margin-left:auto" id="status-saved"></span>
+  </div>
+<script src="https://cdn.jsdelivr.net/npm/dompurify@3.2.4/dist/purify.min.js"></script>
+<script>
+// --- Toast Notification System ---
+const TOAST_ICONS = {
+  success: '<svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3 8.5L6.5 12L13 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+  error: '<svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M4 4L12 12M12 4L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>',
+  warning: '<svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M8 3V9M8 12V12.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>',
+  info: '<svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M8 5V5.5M8 8V12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>',
+};
+function toast(message, opts = {}) {
+  const type = opts.type || 'info';
+  const title = opts.title || '';
+  const duration = opts.duration || (type === 'error' ? 6000 : 3500);
+  const container = document.getElementById('toast-container');
+  if (!container) return;
+  const el = document.createElement('div');
+  el.className = 'toast';
+  el.style.position = 'relative';
+  el.innerHTML = `
+    <div class="toast-icon ${type}">${TOAST_ICONS[type]}</div>
+    <div class="toast-body">
+      ${title ? `<div class="toast-title">${title}</div>` : ''}
+      <div class="toast-msg">${message}</div>
+    </div>
+    <button class="toast-close" onclick="this.closest('.toast').remove()">&times;</button>
+    <div class="toast-progress ${type}" style="width:100%"></div>
+  `;
+  container.appendChild(el);
+  requestAnimationFrame(() => {
+    el.classList.add('show');
+    const bar = el.querySelector('.toast-progress');
+    if (bar) {
+      bar.style.transitionDuration = duration + 'ms';
+      requestAnimationFrame(() => { bar.style.width = '0%'; });
+    }
+  });
+  setTimeout(() => {
+    el.classList.remove('show');
+    el.classList.add('hide');
+    setTimeout(() => el.remove(), 400);
+  }, duration);
+  return el;
+}
+// ============================================================
+// State
+// ============================================================
+function getCookie(name) {
+  const m = document.cookie.match(new RegExp('(?:^|;\\s*)' + name + '=([^;]+)'));
+  return m ? m[1] : '';
+}
+const TOKEN = getCookie('ctm_token') || new URLSearchParams(location.search).get('token') || '';
+const API = (path) => `/api${path}${path.includes('?') ? '&' : '?'}token=${TOKEN}`;
+const state = {
+  currentPromptId: null,
+  currentFolderId: null,
+  prompts: [],
+  folders: [],
+  editor: null,
+  tags: [],
+  starred: false,
+  starredFilter: false,
+  saveTimeout: null,
+  currentView: 'editor',
+  versionPanelOpen: false,
+  annotations: [],
+  annotationTool: 'arrow',
+  annotationImageId: null,
+  // Session management
+  ws: null,
+  activeSessions: [],  // [{id, label, cmd, cwd, pid, createdAt}]
+  pendingPromptSend: null,  // {sessionId, text} — waiting for session ready
+};
+// ============================================================
+// Editor Setup (using contenteditable since Tiptap CDN is complex)
+// We use a simple contenteditable div with execCommand for rich text
+// ============================================================
+function cleanPastedHtml(html) {
+  const doc = new DOMParser().parseFromString(html, 'text/html');
+  // Remove Google Docs wrapper elements, style tags, and internal guid spans
+  doc.querySelectorAll('style, meta, script, link, title, google-sheets-html-origin').forEach(el => el.remove());
+  // Unwrap Google Docs internal guid wrapper spans (keep their children)
+  doc.querySelectorAll('span[id^="docs-internal-guid"]').forEach(el => el.replaceWith(...el.childNodes));
+  // Allowed tags — everything else gets unwrapped (keep content, drop tag)
+  const ALLOWED = new Set([
+    'p', 'br', 'div',
+    'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+    'strong', 'b', 'em', 'i', 'u', 's', 'strike', 'del',
+    'ul', 'ol', 'li',
+    'blockquote', 'pre', 'code',
+    'a', 'img', 'hr',
+    'table', 'thead', 'tbody', 'tr', 'th', 'td',
+    'sub', 'sup',
+  ]);
+  // Allowed attributes per tag
+  const ALLOWED_ATTRS = {
+    'a': ['href'],
+    'img': ['src', 'alt', 'width', 'height'],
+    'td': ['colspan', 'rowspan'],
+    'th': ['colspan', 'rowspan'],
+  };
+  function cleanNode(node) {
+    if (node.nodeType === 3) return; // text node, keep as-is
+    if (node.nodeType !== 1) { node.remove(); return; } // non-element, non-text: remove
+    const tag = node.tagName.toLowerCase();
+    // Convert Google Docs styled spans to semantic tags
+    if (tag === 'span') {
+      const style = node.getAttribute('style') || '';
+      let wrapper = null;
+      if (/font-weight:\s*(bold|[7-9]\d\d)/.test(style)) {
+        wrapper = doc.createElement('strong');
+      }
+      if (/font-style:\s*italic/.test(style)) {
+        const em = doc.createElement('em');
+        if (wrapper) { wrapper.appendChild(em); em.append(...node.childNodes); }
+        else { wrapper = em; em.append(...node.childNodes); }
+      }
+      if (/text-decoration[^:]*:\s*[^;]*line-through/.test(style)) {
+        const s = doc.createElement('s');
+        if (wrapper) { const deepest = wrapper.querySelector('em') || wrapper; deepest.appendChild(s); s.append(...node.childNodes); }
+        else { wrapper = s; s.append(...node.childNodes); }
+      }
+      if (wrapper) {
+        if (!wrapper.querySelector('em') && !wrapper.querySelector('s')) wrapper.append(...node.childNodes);
+        node.replaceWith(wrapper);
+        Array.from(wrapper.querySelectorAll('*')).forEach(cleanNode);
+        return;
+      }
+      // Plain span — unwrap
+      node.replaceWith(...node.childNodes);
+      return;
+    }
+    if (!ALLOWED.has(tag)) {
+      // Unwrap: keep children, remove the tag itself
+      node.replaceWith(...node.childNodes);
+      return;
+    }
+    // Strip all attributes except allowed ones
+    const allowedAttrs = ALLOWED_ATTRS[tag] || [];
+    for (const attr of Array.from(node.attributes)) {
+      if (!allowedAttrs.includes(attr.name)) {
+        node.removeAttribute(attr.name);
+      }
+    }
+    // Recurse into children (snapshot the list since we may modify it)
+    Array.from(node.childNodes).forEach(cleanNode);
+  }
+  Array.from(doc.body.childNodes).forEach(cleanNode);
+  // Clean up Google Docs artifacts and excessive empty paragraphs
+  let result = doc.body.innerHTML;
+  // Remove paragraphs that only contain <b><br></b> (Google Docs spacer)
+  result = result.replace(/<p[^>]*>\s*<b>\s*<br\s*\/?>\s*<\/b>\s*<\/p>/gi, '<p></p>');
+  // Remove paragraphs that only contain <br> wrapped in any inline tag
+  result = result.replace(/<p[^>]*>\s*<(?:b|strong|em|i|span)>\s*<br\s*\/?>\s*<\/(?:b|strong|em|i|span)>\s*<\/p>/gi, '<p></p>');
+  result = result.replace(/<p>\s*<br\s*\/?>\s*<\/p>/gi, '<p></p>'); // <p><br></p> → <p></p>
+  result = result.replace(/(<p>\s*<\/p>\s*){3,}/gi, '<p></p>'); // collapse 3+ empty paragraphs to 1
+  return result;
+}
+function initEditor() {
+  const editorDiv = document.getElementById('editor');
+  editorDiv.contentEditable = true;
+  editorDiv.setAttribute('data-placeholder', 'Start writing your prompt...');
+  editorDiv.classList.add('ProseMirror');
+  editorDiv.style.minHeight = '300px';
+  editorDiv.style.outline = 'none';
+  editorDiv.addEventListener('input', () => {
+    scheduleAutoSave();
+    updateWordCount();
+    triggerCopilotSuggestion();
+    if (!editorDiv.textContent.trim()) {
+      editorDiv.classList.add('is-editor-empty');
+    } else {
+      editorDiv.classList.remove('is-editor-empty');
+    }
+  });
+  // Paste handler: clean up rich HTML from Google Docs, Word, etc + image support
+  editorDiv.addEventListener('paste', async (e) => {
+    const items = e.clipboardData?.items;
+    if (!items) return;
+    // Check for images first
+    for (const item of items) {
+      if (item.type.startsWith('image/')) {
+        e.preventDefault();
+        const blob = item.getAsFile();
+        const filename = `paste-${Date.now()}.png`;
+        await uploadAndInsertImage(blob, filename);
+        return;
+      }
+    }
+    // Clean up rich HTML paste (Google Docs, Word, web pages)
+    const html = e.clipboardData.getData('text/html');
+    if (html) {
+      e.preventDefault();
+      const clean = cleanPastedHtml(html);
+      document.execCommand('insertHTML', false, clean);
+      scheduleAutoSave();
+    }
+  });
+  // Drop image support
+  editorDiv.addEventListener('drop', async (e) => {
+    const files = e.dataTransfer?.files;
+    if (!files) return;
+    for (const file of files) {
+      if (file.type.startsWith('image/')) {
+        e.preventDefault();
+        await uploadAndInsertImage(file, file.name);
+        return;
+      }
+    }
+  });
+  state.editor = editorDiv;
+}
+function execCmd(cmd, value) {
+  const editorDiv = document.getElementById('editor');
+  editorDiv.focus();
+  if (cmd === 'undo') { document.execCommand('undo'); return; }
+  if (cmd === 'redo') { document.execCommand('redo'); return; }
+  switch (cmd) {
+    case 'toggleBold': document.execCommand('bold'); break;
+    case 'toggleItalic': document.execCommand('italic'); break;
+    case 'toggleStrike': document.execCommand('strikeThrough'); break;
+    case 'toggleCode':
+      const sel = window.getSelection();
+      if (sel.rangeCount) {
+        const range = sel.getRangeAt(0);
+        const code = document.createElement('code');
+        code.textContent = range.toString();
+        range.deleteContents();
+        range.insertNode(code);
+      }
+      break;
+    case 'toggleHeading':
+      document.execCommand('formatBlock', false, `h${value.level}`);
+      break;
+    case 'toggleBulletList':
+      document.execCommand('insertUnorderedList');
+      break;
+    case 'toggleOrderedList':
+      document.execCommand('insertOrderedList');
+      break;
+    case 'toggleBlockquote':
+      document.execCommand('formatBlock', false, 'blockquote');
+      break;
+    case 'toggleCodeBlock':
+      document.execCommand('formatBlock', false, 'pre');
+      break;
+    case 'setHorizontalRule':
+      document.execCommand('insertHorizontalRule');
+      break;
+  }
+  scheduleAutoSave();
+}
+async function uploadAndInsertImage(blob, filename) {
+  const promptId = state.currentPromptId || 0;
+  try {
+    const res = await fetch(API(`/images/upload?prompt_id=${promptId}&filename=${encodeURIComponent(filename)}`), {
+      method: 'POST',
+      headers: { 'Content-Type': blob.type },
+      body: blob,
+    });
+    const data = await res.json();
+    if (data.filename) {
+      if (!state.imagePathCache) state.imagePathCache = {};
+      state.imagePathCache[data.id] = { file_path: data.path, filename: data.filename };
+      const img = document.createElement('img');
+      img.src = API(`/images/file/${data.filename}`);
+      img.dataset.imageId = data.id;
+      setupImageHandlers(img);
+      const sel = window.getSelection();
+      if (sel.rangeCount) {
+        const range = sel.getRangeAt(0);
+        range.insertNode(img);
+        range.collapse(false);
+      } else {
+        document.getElementById('editor').appendChild(img);
+      }
+      scheduleAutoSave();
+    }
+  } catch (e) {
+    console.error('Upload failed:', e);
+  }
+}
+function insertImage() {
+  const input = document.createElement('input');
+  input.type = 'file';
+  input.accept = 'image/*';
+  input.onchange = async () => {
+    if (input.files[0]) await uploadAndInsertImage(input.files[0], input.files[0].name);
+  };
+  input.click();
+}
+async function takeScreenshot() {
+  try {
+    const res = await fetch(API('/screenshot'), { method: 'POST' });
+    const data = await res.json();
+    if (data.filename) {
+      if (!state.imagePathCache) state.imagePathCache = {};
+      state.imagePathCache[data.id] = { file_path: data.path, filename: data.filename };
+      const img = document.createElement('img');
+      img.src = API(`/images/file/${data.filename}`);
+      img.dataset.imageId = data.id;
+      setupImageHandlers(img);
+      document.getElementById('editor').appendChild(img);
+      scheduleAutoSave();
+    }
+  } catch (e) {
+    toast('Screenshot failed: ' + e.message, { type: 'error' });
+  }
+}
+// ============================================================
+// Image Selection (single click = select, double click = edit)
+// ============================================================
+function selectEditorImage(img) {
+  // Deselect previous
+  document.querySelectorAll('#editor img.img-selected').forEach(el => el.classList.remove('img-selected'));
+  img.classList.add('img-selected');
+}
+function deselectAllImages() {
+  document.querySelectorAll('#editor img.img-selected').forEach(el => el.classList.remove('img-selected'));
+}
+function setupImageHandlers(img) {
+  img.onclick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    selectEditorImage(img);
+  };
+  img.ondblclick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const imageId = parseInt(img.dataset.imageId);
+    if (imageId) openAnnotationEditor(imageId, img.src);
+  };
+}
+// Deselect images when clicking elsewhere in editor
+document.addEventListener('click', (e) => {
+  if (!e.target.closest('#editor img') && !e.target.closest('.annotation-overlay')) {
+    deselectAllImages();
+  }
+});
+// Delete selected image with Backspace/Delete
+document.addEventListener('keydown', (e) => {
+  if (e.target.closest('#editor') && (e.key === 'Backspace' || e.key === 'Delete')) {
+    const selected = document.querySelector('#editor img.img-selected');
+    if (selected) {
+      e.preventDefault();
+      selected.remove();
+      scheduleAutoSave();
+    }
+  }
+});
+// ============================================================
+// Image Annotation
+// ============================================================
+let annotationHistory = [];
+let currentAnnotation = null;
+function openAnnotationEditor(imageId, imageSrc) {
+  state.annotationImageId = imageId;
+  annotationHistory = [];
+  const overlay = document.getElementById('annotation-overlay');
+  const img = document.getElementById('annotation-image');
+  const canvas = document.getElementById('annotation-canvas');
+  img.onload = () => {
+    canvas.width = img.naturalWidth;
+    canvas.height = img.naturalHeight;
+    canvas.style.width = img.width + 'px';
+    canvas.style.height = img.height + 'px';
+    redrawAnnotations();
+  };
+  img.src = imageSrc;
+  overlay.classList.add('active');
+  setupAnnotationCanvas();
+}
+function closeAnnotation() {
+  document.getElementById('annotation-overlay').classList.remove('active');
+}
+function setAnnotationTool(tool) {
+  state.annotationTool = tool;
+  document.querySelectorAll('#annotation-toolbar .tool-btn').forEach(b => {
+    b.classList.toggle('active', b.dataset.tool === tool);
+  });
+}
+function setupAnnotationCanvas() {
+  const canvas = document.getElementById('annotation-canvas');
+  const ctx = canvas.getContext('2d');
+  let drawing = false;
+  let startX, startY;
+  let freehandPoints = [];
+  canvas.onmousedown = (e) => {
+    const rect = canvas.getBoundingClientRect();
+    const scaleX = canvas.width / rect.width;
+    const scaleY = canvas.height / rect.height;
+    startX = (e.clientX - rect.left) * scaleX;
+    startY = (e.clientY - rect.top) * scaleY;
+    drawing = true;
+    freehandPoints = [{ x: startX, y: startY }];
+  };
+  canvas.onmousemove = (e) => {
+    if (!drawing) return;
+    const rect = canvas.getBoundingClientRect();
+    const scaleX = canvas.width / rect.width;
+    const scaleY = canvas.height / rect.height;
+    const x = (e.clientX - rect.left) * scaleX;
+    const y = (e.clientY - rect.top) * scaleY;
+    if (state.annotationTool === 'freehand') {
+      freehandPoints.push({ x, y });
+      redrawAnnotations();
+      drawFreehand(ctx, freehandPoints, getAnnotationColor(), getAnnotationSize());
+    } else {
+      // Preview
+      redrawAnnotations();
+      drawShape(ctx, state.annotationTool, startX, startY, x, y, getAnnotationColor(), getAnnotationSize());
+    }
+  };
+  canvas.onmouseup = (e) => {
+    if (!drawing) return;
+    drawing = false;
+    const rect = canvas.getBoundingClientRect();
+    const scaleX = canvas.width / rect.width;
+    const scaleY = canvas.height / rect.height;
+    const endX = (e.clientX - rect.left) * scaleX;
+    const endY = (e.clientY - rect.top) * scaleY;
+    let annotation;
+    if (state.annotationTool === 'freehand') {
+      annotation = { type: 'freehand', points: freehandPoints, color: getAnnotationColor(), size: getAnnotationSize() };
+    } else if (state.annotationTool === 'text') {
+      const text = prompt('Enter text:');
+      if (!text) return;
+      annotation = { type: 'text', x: startX, y: startY, text, color: getAnnotationColor(), size: getAnnotationSize() * 5 };
+    } else if (state.annotationTool === 'callout') {
+      const num = annotationHistory.filter(a => a.type === 'callout').length + 1;
+      annotation = { type: 'callout', x: startX, y: startY, num, color: getAnnotationColor(), size: 20 };
+    } else {
+      annotation = { type: state.annotationTool, x1: startX, y1: startY, x2: endX, y2: endY, color: getAnnotationColor(), size: getAnnotationSize() };
+    }
+    annotationHistory.push(annotation);
+    redrawAnnotations();
+  };
+}
+function getAnnotationColor() { return document.getElementById('annotation-color').value; }
+function getAnnotationSize() { return parseInt(document.getElementById('annotation-size').value); }
+function redrawAnnotations() {
+  const canvas = document.getElementById('annotation-canvas');
+  const ctx = canvas.getContext('2d');
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  for (const ann of annotationHistory) {
+    if (ann.type === 'freehand') {
+      drawFreehand(ctx, ann.points, ann.color, ann.size);
+    } else if (ann.type === 'text') {
+      ctx.font = `${ann.size}px sans-serif`;
+      ctx.fillStyle = ann.color;
+      ctx.fillText(ann.text, ann.x, ann.y);
+    } else if (ann.type === 'callout') {
+      ctx.beginPath();
+      ctx.arc(ann.x, ann.y, ann.size, 0, Math.PI * 2);
+      ctx.fillStyle = ann.color;
+      ctx.fill();
+      ctx.fillStyle = '#fff';
+      ctx.font = `bold ${ann.size}px sans-serif`;
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(ann.num.toString(), ann.x, ann.y);
+      ctx.textAlign = 'start';
+      ctx.textBaseline = 'alphabetic';
+    } else {
+      drawShape(ctx, ann.type, ann.x1, ann.y1, ann.x2, ann.y2, ann.color, ann.size);
+    }
+  }
+}
+function drawShape(ctx, type, x1, y1, x2, y2, color, size) {
+  ctx.strokeStyle = color;
+  ctx.lineWidth = size;
+  ctx.fillStyle = color;
+  if (type === 'arrow') {
+    ctx.beginPath();
+    ctx.moveTo(x1, y1);
+    ctx.lineTo(x2, y2);
+    ctx.stroke();
+    // Arrowhead
+    const angle = Math.atan2(y2 - y1, x2 - x1);
+    const headLen = size * 5;
+    ctx.beginPath();
+    ctx.moveTo(x2, y2);
+    ctx.lineTo(x2 - headLen * Math.cos(angle - 0.4), y2 - headLen * Math.sin(angle - 0.4));
+    ctx.lineTo(x2 - headLen * Math.cos(angle + 0.4), y2 - headLen * Math.sin(angle + 0.4));
+    ctx.closePath();
+    ctx.fill();
+  } else if (type === 'rect') {
+    ctx.strokeRect(x1, y1, x2 - x1, y2 - y1);
+  } else if (type === 'circle') {
+    const rx = Math.abs(x2 - x1) / 2;
+    const ry = Math.abs(y2 - y1) / 2;
+    const cx = (x1 + x2) / 2;
+    const cy = (y1 + y2) / 2;
+    ctx.beginPath();
+    ctx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
+    ctx.stroke();
+  } else if (type === 'blur') {
+    // Pixelate region
+    const img = document.getElementById('annotation-image');
+    const sx = Math.min(x1, x2), sy = Math.min(y1, y2);
+    const sw = Math.abs(x2 - x1), sh = Math.abs(y2 - y1);
+    if (sw > 0 && sh > 0) {
+      ctx.save();
+      ctx.filter = 'blur(8px)';
+      ctx.drawImage(img, sx, sy, sw, sh, sx, sy, sw, sh);
+      ctx.restore();
+    }
+  }
+}
+function drawFreehand(ctx, points, color, size) {
+  if (points.length < 2) return;
+  ctx.strokeStyle = color;
+  ctx.lineWidth = size;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+  ctx.beginPath();
+  ctx.moveTo(points[0].x, points[0].y);
+  for (let i = 1; i < points.length; i++) {
+    ctx.lineTo(points[i].x, points[i].y);
+  }
+  ctx.stroke();
+}
+function undoAnnotation() {
+  annotationHistory.pop();
+  redrawAnnotations();
+}
+async function saveAnnotations() {
+  if (!state.annotationImageId) return;
+  try {
+    await fetch(API(`/images/${state.annotationImageId}/annotations`), {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ annotations: annotationHistory }),
+    });
+    // Save canvas as new image with annotations burned in
+    const canvas = document.getElementById('annotation-canvas');
+    const img = document.getElementById('annotation-image');
+    const mergedCanvas = document.createElement('canvas');
+    mergedCanvas.width = canvas.width;
+    mergedCanvas.height = canvas.height;
+    const mctx = mergedCanvas.getContext('2d');
+    mctx.drawImage(img, 0, 0);
+    mctx.drawImage(canvas, 0, 0);
+    mergedCanvas.toBlob(async (blob) => {
+      const res = await fetch(API(`/images/upload?prompt_id=${state.currentPromptId || 0}&filename=annotated-${Date.now()}.png`), {
+        method: 'POST',
+        headers: { 'Content-Type': 'image/png' },
+        body: blob,
+      });
+      const data = await res.json();
+      // Update the image in the editor
+      const editorImgs = document.querySelectorAll('#editor img');
+      for (const eimg of editorImgs) {
+        if (eimg.dataset.imageId == state.annotationImageId) {
+          eimg.src = API(`/images/file/${data.filename}`);
+          eimg.dataset.imageId = data.id;
+          break;
+        }
+      }
+      scheduleAutoSave();
+      closeAnnotation();
+    }, 'image/png');
+  } catch (e) {
+    toast('Save annotations failed: ' + e.message, { type: 'error' });
+  }
+}
+// ============================================================
+// CRUD & Data
+// ============================================================
+async function loadFolders() {
+  const res = await fetch(API('/folders'));
+  state.folders = await res.json();
+  renderFolderTree();
+}
+async function loadPrompts() {
+  const opts = [];
+  if (state.currentFolderId) opts.push(`folder_id=${state.currentFolderId}`);
+  const search = document.getElementById('prompt-search')?.value;
+  if (search) opts.push(`search=${encodeURIComponent(search)}`);
+  const ctxFilter = document.getElementById('context-filter')?.value;
+  if (ctxFilter) opts.push(`context_type=${ctxFilter}`);
+  const lcFilter = document.getElementById('lifecycle-filter')?.value;
+  if (lcFilter) opts.push(`lifecycle_status=${lcFilter}`);
+  const res = await fetch(API(`/prompts${opts.length ? '?' + opts.join('&') : ''}`));
+  state.prompts = await res.json();
+  renderPromptList();
+}
+function filterPrompts(special) {
+  if (special === 'starred') {
+    state.starredFilter = !state.starredFilter;
+    const btn = document.getElementById('pe-star-filter-btn');
+    if (btn) {
+      btn.classList.toggle('active', state.starredFilter);
+      btn.style.color = state.starredFilter ? 'var(--yellow)' : '';
+    }
+    if (state.starredFilter) {
+      state.currentFolderId = null;
+      fetch(API('/prompts?starred=1')).then(r => r.json()).then(prompts => {
+        state.prompts = prompts;
+        renderFolderTree();
+        renderPromptList();
+      });
+    } else {
+      loadPrompts();
+    }
+    return;
+  }
+  loadPrompts();
+}
+// ============================================================
+// AI Search
+// ============================================================
+let aiSearchMode = false;
+let aiSearchTimeout = null;
+function toggleAiSearch() {
+  aiSearchMode = !aiSearchMode;
+  const btn = document.getElementById('ai-search-btn');
+  const input = document.getElementById('prompt-search');
+  btn.classList.toggle('active', aiSearchMode);
+  input.classList.toggle('ai-active', aiSearchMode);
+  input.placeholder = aiSearchMode ? 'AI search... (press Enter)' : 'Search prompts...';
+  if (!aiSearchMode) {
+    // Switch back to normal search
+    loadPrompts();
+  } else {
+    input.focus();
+  }
+}
+async function runAiSearch() {
+  const query = document.getElementById('prompt-search').value.trim();
+  if (!query) {
+    loadPrompts();
+    return;
+  }
+  const list = document.getElementById('prompt-list');
+  list.innerHTML = '<div class="ai-searching"><span class="spinner"></span>Searching with AI...</div>';
+  try {
+    const res = await fetch(API('/prompts/ai-search'), {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ query }),
+    });
+    const data = await res.json();
+    if (data.error) {
+      list.innerHTML = `<div style="padding:12px;font-size:12px;color:var(--red);text-align:center">${escHtml(data.error)}</div>`;
+      return;
+    }
+    if (!data.results || !data.results.length) {
+      list.innerHTML = '<div style="padding:12px;font-size:12px;color:var(--fg-dim);text-align:center">No matching prompts found.</div>';
+      return;
+    }
+    renderAiSearchResults(data.results);
+  } catch (e) {
+    list.innerHTML = `<div style="padding:12px;font-size:12px;color:var(--red);text-align:center">Search failed: ${escHtml(e.message)}</div>`;
+  }
+}
+function renderAiSearchResults(results) {
+  const list = document.getElementById('prompt-list');
+  list.innerHTML = results.map(r => {
+    let tags = [];
+    try { const parsed = JSON.parse(r.tags || '[]'); tags = Array.isArray(parsed) ? parsed : String(parsed).split(',').filter(Boolean); } catch { tags = (r.tags || '').split(',').filter(Boolean); }
+    const isActive = state.currentPromptId === r.id;
+    const isPinned = !!r.pinned;
+    return `<div class="prompt-item ${isActive ? 'active' : ''} ${r.starred ? 'starred' : ''} ${isPinned ? 'pinned' : ''}"
+      data-id="${r.id}" onclick="openPrompt(${r.id})">
+      <div class="prompt-content">
+        <div class="prompt-title">${isPinned ? '<span class="pin-badge">&#x1F4CC;</span>' : ''}${escHtml(r.title || 'Untitled')}</div>
+        <div class="prompt-meta">
+          <span>${r.context_type}</span>
+          ${tags.slice(0, 2).map(t => `<span class="tag">${escHtml(t)}</span>`).join('')}
+        </div>
+        <div class="ai-result-reason">${escHtml(r.reason || '')}</div>
+      </div>
+      <span class="ai-result-score">${r.relevance}%</span>
+    </div>`;
+  }).join('');
+}
+function renderFolderTree() {
+  const tree = document.getElementById('folder-tree');
+  const folders = state.folders;
+  let html = `<div class="folder-item ${!state.currentFolderId ? 'active' : ''}" onclick="selectFolder(null)">
+    <span class="folder-icon">&#128193;</span>
+    <span>All Prompts</span>
+  </div>`;
+  for (const f of folders) {
+    html += `<div class="folder-item ${state.currentFolderId === f.id ? 'active' : ''}"
+      data-folder-id="${f.id}" draggable="true"
+      ondragstart="onFolderDragStart(event, ${f.id})"
+      ondragover="onFolderDragOver(event)"
+      ondragleave="onFolderDragLeave(event)"
+      ondrop="onFolderDrop(event, ${f.id})"
+      onclick="selectFolder(${f.id})">
+      <span class="drag-handle" title="Drag to reorder">&#8942;</span>
+      <span class="folder-icon" style="color:${f.color || '#7aa2f7'}">&#128193;</span>
+      <span class="folder-name">${escHtml(f.name)}</span>
+      <div class="folder-actions">
+        <button class="act-btn" onclick="event.stopPropagation();startRenameFolder(${f.id})" title="Rename">&#9998;</button>
+        <button class="act-btn" onclick="event.stopPropagation();deleteFolderItem(${f.id})" title="Delete" style="color:var(--red)">&#x2715;</button>
+      </div>
+    </div>`;
+  }
+  tree.innerHTML = html;
+}
+// --- Folder actions ---
+function startRenameFolder(id) {
+  const el = document.querySelector(`.folder-item[data-folder-id="${id}"] .folder-name`);
+  if (!el) return;
+  const currentName = el.textContent;
+  const input = document.createElement('input');
+  input.type = 'text';
+  input.className = 'folder-rename-input';
+  input.value = currentName;
+  el.replaceWith(input);
+  input.focus();
+  input.select();
+  const save = async () => {
+    const name = input.value.trim();
+    if (name && name !== currentName) {
+      await fetch(API(`/folders/${id}`), {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name }),
+      });
+    }
+    await loadFolders();
+  };
+  input.addEventListener('blur', save);
+  input.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') { e.preventDefault(); input.blur(); }
+    if (e.key === 'Escape') { input.value = currentName; input.blur(); }
+  });
+}
+async function deleteFolderItem(id) {
+  if (!confirm('Delete this folder? Prompts inside will be moved to All Prompts.')) return;
+  await fetch(API(`/folders/${id}`), { method: 'DELETE' });
+  if (state.currentFolderId === id) state.currentFolderId = null;
+  await loadFolders();
+  await loadPrompts();
+}
+// --- Folder drag-and-drop reorder ---
+let dragFolderId = null;
+function onFolderDragStart(e, id) {
+  dragFolderId = id;
+  e.dataTransfer.effectAllowed = 'move';
+  e.dataTransfer.setData('text/plain', id);
+}
+function onFolderDragOver(e) {
+  e.preventDefault();
+  const item = e.target.closest('.folder-item[data-folder-id]');
+  if (item) item.classList.add('drag-over');
+}
+function onFolderDragLeave(e) {
+  const item = e.target.closest('.folder-item[data-folder-id]');
+  if (item) item.classList.remove('drag-over');
+}
+async function onFolderDrop(e, targetId) {
+  e.preventDefault();
+  const item = e.target.closest('.folder-item[data-folder-id]');
+  if (item) item.classList.remove('drag-over');
+  if (dragFolderId === null || dragFolderId === targetId) return;
+  const ids = state.folders.map(f => f.id);
+  const fromIdx = ids.indexOf(dragFolderId);
+  const toIdx = ids.indexOf(targetId);
+  if (fromIdx === -1 || toIdx === -1) return;
+  ids.splice(fromIdx, 1);
+  ids.splice(toIdx, 0, dragFolderId);
+  await fetch(API('/folders/reorder'), {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ ids }),
+  });
+  await loadFolders();
+  dragFolderId = null;
+}
+function renderPromptList() {
+  const list = document.getElementById('prompt-list');
+  if (state.prompts.length === 0) {
+    list.innerHTML = '<div style="padding:12px;font-size:12px;color:var(--fg-dim);text-align:center">No prompts yet. Click + New Prompt to get started.</div>';
+    return;
+  }
+  list.innerHTML = state.prompts.map(p => {
+    let tags = [];
+    try { const parsed = JSON.parse(p.tags || '[]'); tags = Array.isArray(parsed) ? parsed : String(parsed).split(',').filter(Boolean); } catch { tags = (p.tags || '').split(',').filter(Boolean); }
+    const isActive = state.currentPromptId === p.id;
+    const isPinned = !!p.pinned;
+    return `<div class="prompt-item ${isActive ? 'active' : ''} ${p.starred ? 'starred' : ''} ${isPinned ? 'pinned' : ''}"
+      data-id="${p.id}" draggable="true"
+      ondragstart="onPromptDragStart(event, ${p.id})"
+      ondragover="onPromptDragOver(event)"
+      ondragleave="onPromptDragLeave(event)"
+      ondrop="onPromptDrop(event, ${p.id})"
+      onclick="openPrompt(${p.id})">
+      <span class="drag-handle" title="Drag to reorder">&#8942;&#8942;</span>
+      <div class="prompt-content">
+        <div class="prompt-title">${isPinned ? '<span class="pin-badge" title="Pinned">&#x1F4CC;</span>' : ''}${escHtml(p.title || 'Untitled')}</div>
+        <div class="prompt-meta">
+          <span>${p.context_type}</span>
+          ${p.lifecycle_status && p.lifecycle_status !== 'draft' ? `<span class="lifecycle-badge ${p.lifecycle_status}">${p.lifecycle_status}</span>` : ''}
+          ${tags.slice(0, 2).map(t => `<span class="tag">${escHtml(t)}</span>`).join('')}
+          <span>${timeAgo(p.updated_at)}</span>
+        </div>
+      </div>
+      <div class="prompt-actions">
+        <button class="act-btn" onclick="event.stopPropagation();addPromptToQueue(${p.id})" title="Add to Queue">+Q</button>
+        <button class="act-btn ${isPinned ? 'pin-active' : ''}" onclick="event.stopPropagation();togglePin(${p.id},${isPinned?0:1})" title="${isPinned ? 'Unpin' : 'Pin to top'}">&#x1F4CC;</button>
+        <button class="act-btn" onclick="event.stopPropagation();duplicatePrompt(${p.id})" title="Duplicate">&#x2398;</button>
+        <button class="act-btn" onclick="event.stopPropagation();deletePromptItem(${p.id})" title="Delete" style="color:var(--red)">&#x2715;</button>
+      </div>
+    </div>`;
+  }).join('');
+}
+// --- Prompt list actions ---
+async function togglePin(id, pinValue) {
+  await fetch(API(`/prompts/${id}`), {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ pinned: pinValue }),
+  });
+  await loadPrompts();
+}
+async function duplicatePrompt(id) {
+  const res = await fetch(API(`/prompts/${id}/duplicate`), { method: 'POST' });
+  const data = await res.json();
+  if (data.id) {
+    await loadPrompts();
+    openPrompt(data.id);
+  }
+}
+async function deletePromptItem(id) {
+  if (!confirm('Delete this prompt? This cannot be undone.')) return;
+  await fetch(API(`/prompts/${id}`), { method: 'DELETE' });
+  if (state.currentPromptId === id) {
+    state.currentPromptId = null;
+    document.getElementById('meta-bar').style.display = 'none';
+    document.getElementById('editor-toolbar').style.display = 'none';
+    document.getElementById('editor-wrapper').style.display = 'none';
+    document.getElementById('editor-empty').style.display = '';
+  }
+  await loadPrompts();
+}
+// --- Prompt drag-and-drop reorder ---
+let dragPromptId = null;
+function onPromptDragStart(e, id) {
+  dragPromptId = id;
+  e.dataTransfer.effectAllowed = 'move';
+  e.dataTransfer.setData('text/plain', id);
+  e.target.style.opacity = '0.5';
+  setTimeout(() => { e.target.style.opacity = ''; }, 0);
+}
+function onPromptDragOver(e) {
+  e.preventDefault();
+  e.dataTransfer.dropEffect = 'move';
+  const item = e.target.closest('.prompt-item');
+  if (item) item.classList.add('drag-over');
+}
+function onPromptDragLeave(e) {
+  const item = e.target.closest('.prompt-item');
+  if (item) item.classList.remove('drag-over');
+}
+async function onPromptDrop(e, targetId) {
+  e.preventDefault();
+  const item = e.target.closest('.prompt-item');
+  if (item) item.classList.remove('drag-over');
+  if (dragPromptId === null || dragPromptId === targetId) return;
+  // Reorder in local state
+  const ids = state.prompts.map(p => p.id);
+  const fromIdx = ids.indexOf(dragPromptId);
+  const toIdx = ids.indexOf(targetId);
+  if (fromIdx === -1 || toIdx === -1) return;
+  ids.splice(fromIdx, 1);
+  ids.splice(toIdx, 0, dragPromptId);
+  // Save to server
+  await fetch(API('/prompts/reorder'), {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ ids }),
+  });
+  await loadPrompts();
+  dragPromptId = null;
+}
+function selectFolder(id) {
+  state.currentFolderId = id;
+  renderFolderTree();
+  loadPrompts();
+  updateUrlHash({ folder: id });
+}
+async function openPrompt(id) {
+  // Save any pending changes to the current prompt before switching
+  if (state.currentPromptId && state.saveTimeout) {
+    clearTimeout(state.saveTimeout);
+    state.saveTimeout = null;
+    await saveCurrentPrompt();
+  }
+  const res = await fetch(API(`/prompts/${id}`));
+  const prompt = await res.json();
+  state.currentPromptId = id;
+  try { const parsed = JSON.parse(prompt.tags || '[]'); state.tags = Array.isArray(parsed) ? parsed : String(parsed).split(',').filter(Boolean); } catch { state.tags = (prompt.tags || '').split(',').filter(Boolean); }
+  state.starred = !!prompt.starred;
+  // Show editor UI
+  document.getElementById('meta-bar').style.display = 'flex';
+  document.getElementById('editor-toolbar').style.display = 'flex';
+  document.getElementById('editor-wrapper').style.display = 'block';
+  document.getElementById('editor-empty').style.display = 'none';
+  showView('editor', true); // skip hash — we set it ourselves
+  // Update URL
+  updateUrlHash({ prompt: id, folder: state.currentFolderId });
+  // Populate
+  document.getElementById('prompt-title-input').value = prompt.title || '';
+  document.getElementById('prompt-context-type').value = prompt.context_type || 'general';
+  let html = prompt.content_html || prompt.content || '';
+  // Clean legacy Google Docs artifacts from previously saved content
+  if (html.includes('docs-internal-guid') || html.includes('margin-top:0pt') || /<p[^>]*dir="ltr"/.test(html)) {
+    html = cleanPastedHtml(html);
+  }
+  if (typeof DOMPurify !== 'undefined') html = DOMPurify.sanitize(html);
+  document.getElementById('editor').innerHTML = html; // sanitized by DOMPurify above
+  document.getElementById('star-btn').innerHTML = state.starred ? '&#9733;' : '&#9734;';
+  document.getElementById('star-btn').style.color = state.starred ? 'var(--yellow)' : '';
+  // Set lifecycle status
+  const lcSel = document.getElementById('lifecycle-status');
+  if (lcSel) lcSel.value = prompt.lifecycle_status || 'draft';
+  renderTags();
+  updateWordCount();
+  updateStatusBar();
+  updateUsageBadge();
+  renderPromptList();
+  // Update copilot panel if open
+  if (document.getElementById('copilot-panel').classList.contains('active')) {
+    loadSimilarPrompts();
+    loadPromptSessions();
+  }
+  // Cache image file paths for markdown export
+  state.imagePathCache = {};
+  if (prompt.images) {
+    prompt.images.forEach(img => {
+      state.imagePathCache[img.id] = { file_path: img.file_path, filename: img.filename };
+    });
+  }
+  // Setup image selection/annotation handlers
+  document.querySelectorAll('#editor img').forEach(img => {
+    if (img.dataset.imageId) setupImageHandlers(img);
+  });
+}
+async function createNewPrompt() {
+  const res = await fetch(API('/prompts'), {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      title: 'New Prompt',
+      content: '',
+      content_html: '',
+      folder_id: state.currentFolderId,
+      context_type: 'general',
+    }),
+  });
+  const data = await res.json();
+  if (data.id) {
+    await loadPrompts();
+    openPrompt(data.id);
+  }
+}
+async function saveCurrentPrompt() {
+  if (!state.currentPromptId) return;
+  const editorDiv = document.getElementById('editor');
+  const data = {
+    title: document.getElementById('prompt-title-input').value,
+    content: editorDiv.innerText,
+    content_html: editorDiv.innerHTML,
+    context_type: document.getElementById('prompt-context-type').value,
+    tags: state.tags,
+    starred: state.starred,
+  };
+  await fetch(API(`/prompts/${state.currentPromptId}`), {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data),
+  });
+  document.getElementById('status-saved').textContent = `Saved ${new Date().toLocaleTimeString()}`;
+}
+function scheduleAutoSave() {
+  if (state.saveTimeout) clearTimeout(state.saveTimeout);
+  state.saveTimeout = setTimeout(() => saveCurrentPrompt(), 1500);
+  document.getElementById('status-saved').textContent = 'Unsaved...';
+}
+function onTitleChange() {
+  // Sync title to sidebar in real-time
+  const title = document.getElementById('prompt-title-input').value;
+  if (state.currentPromptId) {
+    const p = state.prompts.find(p => p.id === state.currentPromptId);
+    if (p) p.title = title;
+    const el = document.querySelector(`.prompt-item[data-id="${state.currentPromptId}"] .prompt-title`);
+    if (el) el.textContent = title || 'Untitled';
+  }
+  scheduleAutoSave();
+}
+function onContextTypeChange() { scheduleAutoSave(); }
+function renderTags() {
+  const container = document.getElementById('tags-input');
+  const input = document.getElementById('tag-input');
+  container.innerHTML = '';
+  for (const tag of state.tags) {
+    const chip = document.createElement('span');
+    chip.className = 'tag-chip';
+    chip.innerHTML = `${escHtml(tag)} <span class="tag-remove" onclick="removeTag('${escHtml(tag)}')">&times;</span>`;
+    container.appendChild(chip);
+  }
+  container.appendChild(input);
+}
+function onTagKeydown(e) {
+  if (e.key === 'Enter') {
+    const val = e.target.value.trim();
+    if (val && !state.tags.includes(val)) {
+      state.tags.push(val);
+      e.target.value = '';
+      renderTags();
+      scheduleAutoSave();
+    }
+  }
+}
+function removeTag(tag) {
+  state.tags = state.tags.filter(t => t !== tag);
+  renderTags();
+  scheduleAutoSave();
+}
+function toggleStar() {
+  state.starred = !state.starred;
+  document.getElementById('star-btn').innerHTML = state.starred ? '&#9733;' : '&#9734;';
+  document.getElementById('star-btn').style.color = state.starred ? 'var(--yellow)' : '';
+  scheduleAutoSave();
+}
+// ============================================================
+// Version History
+// ============================================================
+async function toggleVersions() {
+  state.versionPanelOpen = !state.versionPanelOpen;
+  document.getElementById('version-panel').classList.toggle('active', state.versionPanelOpen);
+  if (state.versionPanelOpen && state.currentPromptId) {
+    const res = await fetch(API(`/prompts/${state.currentPromptId}/versions`));
+    const versions = await res.json();
+    renderVersions(versions);
+  }
+}
+function renderVersions(versions) {
+  const list = document.getElementById('version-list');
+  if (!versions.length) {
+    list.innerHTML = '<div style="padding:12px;font-size:12px;color:var(--fg-dim)">No versions yet.</div>';
+    return;
+  }
+  list.innerHTML = versions.map(v => `<div class="version-item" onclick="previewVersion(${v.id})">
+    <span class="v-num">v${v.version}</span>
+    <span class="v-date">${new Date(v.created_at).toLocaleString()}</span>
+    <div class="v-msg">${escHtml(v.message || '')}</div>
+    <button class="btn small" style="margin-top:4px" onclick="event.stopPropagation();restoreVersion(${v.id})">Restore</button>
+  </div>`).join('');
+}
+async function restoreVersion(versionId) {
+  if (!confirm('Restore this version? Current changes will be saved as a new version.')) return;
+  await fetch(API(`/prompts/${state.currentPromptId}/restore`), {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ version_id: versionId }),
+  });
+  openPrompt(state.currentPromptId);
+  toggleVersions(); // refresh version list
+  toggleVersions();
+}
+// ============================================================
+// Send to Session / Copy
+// ============================================================
+// ============================================================
+// Send Dropdown & Session Management
+// ============================================================
+function getPromptPlainText() {
+  const editor = document.getElementById('editor');
+  if (!editor) return '';
+  // Clone the editor and replace images with markdown image references
+  const clone = editor.cloneNode(true);
+  clone.querySelectorAll('img').forEach(img => {
+    const imageId = img.dataset.imageId;
+    const src = img.getAttribute('src') || '';
+    // Use cached file_path from state if available
+    const cached = state.imagePathCache?.[imageId];
+    if (cached) {
+      const placeholder = document.createTextNode(`![${cached.filename || 'image'}](${cached.file_path})`);
+      img.parentNode.replaceChild(placeholder, img);
+    } else {
+      const match = src.match(/\/api\/images\/file\/(.+?)(?:\?|$)/);
+      const filename = match ? match[1] : src;
+      const placeholder = document.createTextNode(`![image](${filename})`);
+      img.parentNode.replaceChild(placeholder, img);
+    }
+  });
+  return clone.innerText;
+}
+function toggleSendDropdown(e) {
+  e && e.stopPropagation();
+  const dd = document.getElementById('send-dropdown');
+  dd.classList.toggle('open');
+  if (dd.classList.contains('open')) {
+    refreshActiveSessionsList();
+    document.addEventListener('click', closeSendDropdownOutside, true);
+  } else {
+    document.removeEventListener('click', closeSendDropdownOutside, true);
+  }
+}
+function closeSendDropdownOutside(e) {
+  const wrap = document.getElementById('send-dropdown-wrap');
+  if (!wrap.contains(e.target)) {
+    document.getElementById('send-dropdown').classList.remove('open');
+    document.removeEventListener('click', closeSendDropdownOutside, true);
+  }
+}
+function refreshActiveSessionsList() {
+  const container = document.getElementById('send-active-sessions');
+  if (state.activeSessions.length === 0) {
+    container.innerHTML = `
+      <div class="section-label">Active Sessions</div>
+      <div class="send-dropdown-item disabled">
+        <span class="item-icon">&#128268;</span>
+        <span class="item-label">No active sessions</span>
+      </div>`;
+    return;
+  }
+  container.innerHTML = `<div class="section-label">Send to Session</div>` +
+    state.activeSessions.map(s => {
+      const icon = s.cmd === 'claude' ? '&#129302;' : '&#128187;';
+      const label = s.label || s.id.slice(0, 8);
+      return `<div class="send-dropdown-item" onclick="sendToExistingSession('${s.id}')">
+        <span class="item-icon">${icon}</span>
+        <span class="item-label">${escHtml(label)}</span>
+        <span class="item-meta">PID ${s.pid}</span>
+      </div>`;
+    }).join('');
+}
+function connectWebSocket() {
+  if (state.ws && state.ws.readyState <= 1) return;
+  const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+  const ws = new WebSocket(`${proto}//${location.host}?token=${TOKEN}`);
+  state.ws = ws;
+  ws.onopen = () => {
+    ws.send(JSON.stringify({ type: 'list' }));
+  };
+  ws.onmessage = (e) => {
+    const msg = JSON.parse(e.data);
+    switch (msg.type) {
+      case 'sessions':
+        state.activeSessions = msg.sessions || [];
+        refreshQueueSessionList();
+        break;
+      case 'created':
+        onSessionCreated(msg);
+        break;
+      case 'data-changed':
+        onDataChanged(msg);
+        break;
+    }
+  };
+  ws.onclose = () => {
+    state.ws = null;
+    // Reconnect after 3s
+    setTimeout(connectWebSocket, 3000);
+  };
+}
+function wsSend(msg) {
+  if (state.ws?.readyState === 1) {
+    state.ws.send(JSON.stringify(msg));
+  }
+}
+function resetSendButton() {
+  const sendBtn = document.querySelector('.send-dropdown-wrap .btn-main');
+  if (sendBtn) { sendBtn.disabled = false; sendBtn.textContent = 'Send'; }
+}
+function onDataChanged(msg) {
+  const r = msg.resource;
+  if (r === 'prompts' || r === 'folders') {
+    loadPrompts();
+  }
+  if (r === 'queue-draft') {
+    const sid = getQueueSessionId();
+    if (sid) loadQueueDraftForSession(sid);
+  }
+}
+function onSessionCreated(msg) {
+  // Update sessions list
+  if (!state.activeSessions.find(s => s.id === msg.id)) {
+    state.activeSessions.push({ id: msg.id, label: msg.label, pid: msg.pid, cmd: 'claude', cwd: '' });
+  }
+  // If we have a pending prompt send for this session, send it after a delay
+  if (state.pendingPromptSend && state.pendingPromptSend.sessionId === msg.id) {
+    const text = state.pendingPromptSend.text;
+    state.pendingPromptSend = null;
+    // Wait for Claude to boot up (~2s for interactive mode)
+    setTimeout(() => {
+      wsSend({ type: 'input', id: msg.id, data: text });
+      setTimeout(() => wsSend({ type: 'input', id: msg.id, data: '\r' }), 100);
+      trackPromptUsage(msg.id);
+      resetSendButton();
+      // Navigate to the main page with this session
+      const mainUrl = `/#session=${msg.id}`;
+      window.open(mainUrl, '_blank');
+      showStatusMessage('Prompt sent to new session');
+    }, 2500);
+  } else {
+    // Session created but not from our send — still reset button if stuck
+    resetSendButton();
+  }
+}
+async function sendToNewSession() {
+  closeSendDropdown();
+  // Guard: prevent multiple clicks while a session is being created
+  if (state.pendingPromptSend) {
+    showStatusMessage('Session already being created...');
+    return;
+  }
+  const text = htmlToMarkdown(document.getElementById('editor')?.innerHTML || '').trim();
+  if (!text) { toast('No prompt content to send.', { type: 'warning' }); return; }
+  const title = document.getElementById('prompt-title-input')?.value || 'Untitled';
+  const sessionId = crypto.randomUUID();
+  // Set pending so we send the prompt when the session is ready
+  state.pendingPromptSend = { sessionId, text };
+  // Disable the send button visually
+  const sendBtn = document.querySelector('.send-dropdown-wrap .btn-main');
+  if (sendBtn) { sendBtn.disabled = true; sendBtn.textContent = 'Creating...'; }
+  showStatusMessage('Creating new Claude session...');
+  wsSend({
+    type: 'create',
+    id: sessionId,
+    cmd: 'claude',
+    args: [],
+    label: title.slice(0, 60),
+  });
+  // Safety timeout: re-enable button after 15s if no response
+  setTimeout(() => {
+    if (state.pendingPromptSend?.sessionId === sessionId) {
+      state.pendingPromptSend = null;
+      resetSendButton();
+      showStatusMessage('Session creation timed out');
+    }
+  }, 15000);
+}
+async function sendToExistingSession(sessionId) {
+  closeSendDropdown();
+  const text = htmlToMarkdown(document.getElementById('editor')?.innerHTML || '').trim();
+  if (!text) { toast('No prompt content to send.', { type: 'warning' }); return; }
+  wsSend({ type: 'input', id: sessionId, data: text });
+  setTimeout(() => wsSend({ type: 'input', id: sessionId, data: '\r' }), 100);
+  trackPromptUsage(sessionId);
+  showStatusMessage('Prompt sent to session');
+  // Open the session in main page
+  const mainUrl = `/#session=${sessionId}`;
+  window.open(mainUrl, '_blank');
+}
+async function trackPromptUsage(sessionId) {
+  if (!state.currentPromptId) return;
+  try {
+    await fetch(API(`/prompts/${state.currentPromptId}/usage`), {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ session_id: sessionId }),
+    });
+    updateUsageBadge();
+  } catch (e) {
+    console.error('Failed to track usage:', e);
+  }
+}
+async function updateUsageBadge() {
+  const wrap = document.getElementById('usage-badge-wrap');
+  if (!state.currentPromptId) { wrap.innerHTML = ''; return; }
+  try {
+    const res = await fetch(API(`/prompts/${state.currentPromptId}/usage`));
+    const stats = await res.json();
+    if (stats.use_count > 0) {
+      wrap.innerHTML = `<span class="usage-badge" onclick="showUsageHistory()" title="Click to see session history">
+        &#128640; Used ${stats.use_count}x${stats.last_used ? ' · Last: ' + new Date(stats.last_used).toLocaleDateString() : ''}
+      </span>`;
+    } else {
+      wrap.innerHTML = '';
+    }
+  } catch { wrap.innerHTML = ''; }
+}
+async function showUsageHistory() {
+  if (!state.currentPromptId) return;
+  try {
+    const res = await fetch(API(`/prompts/${state.currentPromptId}/usage/sessions`));
+    const sessions = await res.json();
+    if (sessions.length === 0) { toast('No usage history.', { type: 'info' }); return; }
+    const lines = sessions.map(s => {
+      const date = new Date(s.used_at).toLocaleString();
+      return `${date} — Session: ${s.session_id.slice(0, 8)}...`;
+    });
+    toast(lines.join('<br>'), { type: 'info', title: 'Usage History', duration: 8000 });
+  } catch (e) {
+    toast('Failed to load usage history: ' + e.message, { type: 'error' });
+  }
+}
+function copyPromptText() {
+  closeSendDropdown();
+  const title = document.getElementById('prompt-title-input')?.value?.trim() || '';
+  const body = getPromptPlainText();
+  const text = title ? `${title}\n\n${body}` : body;
+  navigator.clipboard.writeText(text).then(() => {
+    showStatusMessage('Copied as text');
+  });
+}
+function copyPromptMarkdown() {
+  closeSendDropdown();
+  const title = document.getElementById('prompt-title-input')?.value?.trim() || '';
+  const editor = document.getElementById('editor');
+  const html = editor ? editor.innerHTML : '';
+  const body = htmlToMarkdown(html);
+  const md = title ? `# ${title}\n\n${body}` : body;
+  navigator.clipboard.writeText(md).then(() => {
+    showStatusMessage('Copied as markdown');
+  });
+}
+// DOM-based HTML→markdown (handles nested lists correctly)
+// Note: uses createElement+innerHTML on trusted editor content only (same-origin prompt HTML)
+function htmlToMarkdown(html) {
+  const el = document.createElement('div');
+  el.innerHTML = html; // trusted: only called with editor.innerHTML from our own contenteditable
+  return _mdNode(el, 0, null).replace(/\n{3,}/g, '\n\n').trim();
+}
+function _mdNode(node, depth, counter) {
+  let out = '';
+  for (const c of node.childNodes) {
+    if (c.nodeType === 3) { out += c.textContent.replace(/&nbsp;/g, ' '); continue; }
+    if (c.nodeType !== 1) continue;
+    const tag = c.tagName.toLowerCase();
+    const inner = (d, cnt) => _mdNode(c, d !== undefined ? d : depth, cnt !== undefined ? cnt : null);
+    switch (tag) {
+      case 'br': out += '\n'; break;
+      case 'div': { const txt = inner(depth); out += txt + (txt.endsWith('\n') ? '' : '\n'); break; }
+      case 'p': out += inner(depth) + '\n\n'; break;
+      case 'h1': out += '# ' + inner() + '\n'; break;
+      case 'h2': out += '## ' + inner() + '\n'; break;
+      case 'h3': out += '### ' + inner() + '\n'; break;
+      case 'strong': case 'b': out += '**' + inner() + '**'; break;
+      case 'em': case 'i': out += '*' + inner() + '*'; break;
+      case 'code':
+        if (c.parentElement?.tagName === 'PRE') { out += c.textContent; break; }
+        out += '`' + inner() + '`'; break;
+      case 's': case 'strike': case 'del': out += '~~' + inner() + '~~'; break;
+      case 'blockquote': { const t = inner(depth).trim(); out += t.split('\n').map(l => '> ' + l).join('\n') + '\n'; break; }
+      case 'hr': out += '---\n'; break;
+      case 'pre': out += '```\n' + c.textContent + '\n```\n'; break;
+      case 'a': { const href = c.getAttribute('href') || ''; const text = inner(); out += (href && text !== href) ? `[${text}](${href})` : text; break; }
+      case 'img': {
+        const src = c.getAttribute('src') || '';
+        const filePath = c.getAttribute('data-file-path') || '';
+        const f = src.match(/\/api\/images\/file\/(.+?)(?:\?|$)/);
+        const name = f ? f[1] : 'image';
+        out += `![${name}](${filePath || src})\n`;
+        break;
+      }
+      case 'ol': case 'ul': {
+        const hasLi = Array.from(c.children).some(ch => ch.tagName === 'LI');
+        if (hasLi) { out += inner(depth + 1, tag === 'ol' ? { n: 0 } : null); }
+        else { out += _mdNode(c, depth, counter); }
+        break;
+      }
+      case 'li': {
+        const indent = '  '.repeat(Math.max(0, depth - 1));
+        const prefix = counter ? `${++counter.n}. ` : '- ';
+        out += indent + prefix + inner(depth).trim() + '\n';
+        break;
+      }
+      default: out += _mdNode(c, depth, counter); break;
+    }
+  }
+  return out;
+}
+function closeSendDropdown() {
+  document.getElementById('send-dropdown').classList.remove('open');
+  document.removeEventListener('click', closeSendDropdownOutside, true);
+}
+function showStatusMessage(msg) {
+  document.getElementById('status-saved').textContent = msg;
+  setTimeout(() => updateStatusBar(), 2500);
+}
+// ============================================================
+// Folders
+// ============================================================
+function createNewFolder() {
+  document.getElementById('folder-modal').classList.remove('hidden');
+  document.getElementById('folder-name').value = '';
+  document.getElementById('folder-name').focus();
+}
+async function saveFolderModal() {
+  const name = document.getElementById('folder-name').value.trim();
+  if (!name) return;
+  const color = document.getElementById('folder-color').value;
+  await fetch(API('/folders'), {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ name, color }),
+  });
+  closeModal('folder-modal');
+  loadFolders();
+}
+// ============================================================
+// Chains
+// ============================================================
+async function loadChains() {
+  const res = await fetch(API('/chains'));
+  const chains = await res.json();
+  const list = document.getElementById('chain-list');
+  if (!chains.length) {
+    list.innerHTML = `<div class="empty-state"><h3>No Prompt Chains</h3><p>Chains let you sequence multiple prompts with conditional branching.</p></div>`;
+    return;
+  }
+  list.innerHTML = chains.map(c => `<div class="prompt-item" onclick="openChain(${c.id})" style="border-left:3px solid var(--purple)">
+    <div class="prompt-title">${escHtml(c.name)}</div>
+    <div class="prompt-meta"><span>${escHtml(c.description || '')}</span><span>${timeAgo(c.updated_at)}</span></div>
+  </div>`).join('');
+}
+function createNewChain() {
+  document.getElementById('chain-modal-title').textContent = 'New Chain';
+  document.getElementById('chain-name').value = '';
+  document.getElementById('chain-desc').value = '';
+  document.getElementById('chain-modal').classList.remove('hidden');
+}
+async function saveChainModal() {
+  const name = document.getElementById('chain-name').value.trim();
+  if (!name) return;
+  const description = document.getElementById('chain-desc').value;
+  await fetch(API('/chains'), {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ name, description }),
+  });
+  closeModal('chain-modal');
+  loadChains();
+}
+// ============================================================
+// Session Conversations
+// ============================================================
+async function loadConversations() {
+  const search = document.getElementById('conv-search')?.value || '';
+  const res = await fetch(API(`/conversations?limit=100${search ? '&search=' + encodeURIComponent(search) : ''}`));
+  const convs = await res.json();
+  const list = document.getElementById('conv-list');
+  if (!convs.length) {
+    list.innerHTML = `<div class="empty-state"><h3>No Conversations Imported</h3><p>Click "Import All Sessions" to copy session conversations into the database for analysis and data mining.</p></div>`;
+    return;
+  }
+  list.innerHTML = convs.map(c => `<div class="prompt-item" style="border-left-color:var(--green)" onclick="viewConversation('${c.session_id}')">
+    <div class="prompt-title">${escHtml(c.title || c.first_message?.slice(0, 60) || c.session_id.slice(0, 8))}</div>
+    <div class="prompt-meta">
+      <span style="color:var(--accent)">${escHtml(c.project_path?.replace(/^\/Users\/[^/]+\//, '~/') || '')}</span>
+      <span>${c.user_msg_count} user / ${c.assistant_msg_count} assistant msgs</span>
+      <span>${c.git_branch || ''}</span>
+      <span>${timeAgo(c.imported_at)}</span>
+    </div>
+  </div>`).join('');
+}
+async function importConversations() {
+  document.getElementById('conv-list').innerHTML = '<div style="padding:20px;text-align:center;color:var(--accent)">Importing sessions... this may take a moment.</div>';
+  try {
+    const res = await fetch(API('/conversations/import'), { method: 'POST' });
+    const data = await res.json();
+    toast(`Imported ${data.imported} sessions.`, { type: 'success' });
+    loadConversations();
+  } catch (e) {
+    toast('Import failed: ' + e.message, { type: 'error' });
+  }
+}
+async function viewConversation(sessionId) {
+  const res = await fetch(API(`/conversations/${sessionId}`));
+  const conv = await res.json();
+  if (conv.error) { toast(conv.error, { type: 'error' }); return; }
+  const messages = JSON.parse(conv.messages || '[]');
+  const modal = document.createElement('div');
+  modal.className = 'modal-overlay';
+  modal.innerHTML = `<div class="modal" style="max-width:800px;max-height:80vh;overflow-y:auto;">
+    <h3 style="margin-bottom:4px">${escHtml(conv.title || conv.session_id.slice(0, 8))}</h3>
+    <div style="font-size:11px;color:var(--fg-dim);margin-bottom:12px">${escHtml(conv.project_path || '')} | ${messages.length} messages</div>
+    ${messages.map(m => `<div style="margin-bottom:12px;padding:8px;border-radius:6px;background:${m.role === 'user' ? 'var(--bg-lighter)' : 'var(--bg)'};border-left:3px solid ${m.role === 'user' ? 'var(--accent)' : 'var(--green)'}">
+      <div style="font-size:10px;color:${m.role === 'user' ? 'var(--accent)' : 'var(--green)'};text-transform:uppercase;margin-bottom:4px">${m.role === 'user' ? 'You' : 'Claude'}</div>
+      <div style="font-size:12px;line-height:1.6;white-space:pre-wrap;max-height:300px;overflow-y:auto">${escHtml(m.text || '')}</div>
+    </div>`).join('')}
+    <div class="btn-row"><button class="btn" onclick="this.closest('.modal-overlay').remove()">Close</button></div>
+  </div>`;
+  modal.onclick = (e) => { if (e.target === modal) modal.remove(); };
+  document.body.appendChild(modal);
+}
+// ============================================================
+// Templates
+// ============================================================
+async function loadTemplates() {
+  const res = await fetch(API('/templates'));
+  const templates = await res.json();
+  const list = document.getElementById('template-list');
+  if (!templates.length) {
+    list.innerHTML = `<div class="empty-state"><h3>No Templates</h3><p>Templates let you create reusable prompts with {{variables}} that get filled in each time.</p></div>`;
+    return;
+  }
+  list.innerHTML = templates.map(t => {
+    const vars = JSON.parse(t.variables || '[]');
+    return `<div class="prompt-item" style="border-left-color:var(--yellow)">
+      <div class="prompt-title">${escHtml(t.name)}</div>
+      <div class="prompt-meta">
+        <span>${escHtml(t.category)}</span>
+        ${vars.map(v => `<span class="tag">{{${escHtml(v)}}}</span>`).join('')}
+      </div>
+      <div style="margin-top:6px;display:flex;gap:4px;">
+        <button class="btn small" onclick="useTemplate(${t.id})">Use</button>
+        <button class="btn small danger" onclick="deleteTemplate(${t.id})">Delete</button>
+      </div>
+    </div>`;
+  }).join('');
+}
+function createNewTemplate() {
+  document.getElementById('template-modal').classList.remove('hidden');
+  document.getElementById('tpl-name').value = '';
+  document.getElementById('tpl-desc').value = '';
+  document.getElementById('tpl-content').value = '';
+  document.getElementById('tpl-vars').value = '';
+  document.getElementById('tpl-name').focus();
+}
+async function saveTemplateModal() {
+  const data = {
+    name: document.getElementById('tpl-name').value.trim(),
+    description: document.getElementById('tpl-desc').value,
+    content: document.getElementById('tpl-content').value,
+    content_html: document.getElementById('tpl-content').value,
+    category: document.getElementById('tpl-category').value,
+    variables: document.getElementById('tpl-vars').value.split(',').map(s => s.trim()).filter(Boolean),
+  };
+  if (!data.name) return;
+  await fetch(API('/templates'), {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data),
+  });
+  closeModal('template-modal');
+  loadTemplates();
+}
+async function useTemplate(id) {
+  const res = await fetch(API(`/templates/${id}`));
+  const tpl = await res.json();
+  const vars = JSON.parse(tpl.variables || '[]');
+  let content = tpl.content;
+  // Prompt for each variable
+  for (const v of vars) {
+    const val = prompt(`Enter value for {{${v}}}:`);
+    if (val === null) return;
+    const escaped = v.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    content = content.replace(new RegExp(`\\{\\{${escaped}\\}\\}`, 'g'), val);
+  }
+  // Create a new prompt from the template
+  const createRes = await fetch(API('/prompts'), {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      title: `${tpl.name} - ${new Date().toLocaleDateString()}`,
+      content: content,
+      content_html: `<pre>${escHtml(content)}</pre>`,
+      context_type: tpl.category,
+      folder_id: state.currentFolderId,
+    }),
+  });
+  const data = await createRes.json();
+  if (data.id) {
+    showView('editor');
+    await loadPrompts();
+    openPrompt(data.id);
+  }
+}
+async function deleteTemplate(id) {
+  if (!confirm('Delete this template?')) return;
+  await fetch(API(`/templates/${id}`), { method: 'DELETE' });
+  loadTemplates();
+}
+// ============================================================
+// View Navigation
+// ============================================================
+function showView(view, skipHash) {
+  state.currentView = view;
+  const views = ['editor', 'chains', 'conversations', 'templates', 'backups', 'patterns'];
+  for (const v of views) {
+    const el = document.getElementById(`view-${v}`);
+    if (el) el.style.display = v === view ? 'flex' : 'none';
+  }
+  // Highlight active view button
+  document.querySelectorAll('.topbar-actions .btn[data-view]').forEach(btn => {
+    btn.classList.toggle('active', btn.dataset.view === view);
+  });
+  // Load data for the view
+  if (view === 'chains') loadChains();
+  if (view === 'conversations') loadConversations();
+  if (view === 'templates') loadTemplates();
+  if (view === 'backups') loadBackups();
+  if (view === 'patterns') loadPatterns();
+  // Update URL hash (non-editor views)
+  if (!skipHash && view !== 'editor') {
+    updateUrlHash({ view });
+  }
+}
+function navigateToMain() {
+  location.href = '/';
+}
+// ============================================================
+// Utilities
+// ============================================================
+function closeModal(id) {
+  document.getElementById(id).classList.add('hidden');
+}
+function escHtml(s) {
+  if (!s) return '';
+  return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+}
+function timeAgo(dateStr) {
+  if (!dateStr) return '';
+  const seconds = Math.floor((Date.now() - new Date(dateStr).getTime()) / 1000);
+  if (seconds < 60) return 'just now';
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+function updateWordCount() {
+  const text = document.getElementById('editor')?.innerText || '';
+  const words = text.trim() ? text.trim().split(/\s+/).length : 0;
+  document.getElementById('status-words').textContent = `${words} words`;
+}
+function updateStatusBar() {
+  document.getElementById('status-prompt').textContent = state.currentPromptId
+    ? `Prompt #${state.currentPromptId}`
+    : 'No prompt selected';
+}
+// ============================================================
+// Zoom
+// ============================================================
+const ZOOM_STEPS = [50, 67, 75, 80, 90, 100, 110, 125, 150, 175, 200, 250, 300];
+let currentZoom = 100;
+function zoomEditor(dir) {
+  const idx = ZOOM_STEPS.indexOf(currentZoom);
+  if (idx === -1) {
+    currentZoom = dir > 0 ? (ZOOM_STEPS.find(z => z > currentZoom) || 300) : ([...ZOOM_STEPS].reverse().find(z => z < currentZoom) || 50);
+  } else {
+    const next = idx + dir;
+    if (next >= 0 && next < ZOOM_STEPS.length) currentZoom = ZOOM_STEPS[next];
+  }
+  applyZoom();
+}
+function setZoom(value) {
+  currentZoom = value;
+  applyZoom();
+}
+function applyZoom() {
+  const editor = document.getElementById('editor');
+  if (editor) editor.style.zoom = currentZoom / 100;
+  const sel = document.getElementById('zoom-select');
+  if (sel) sel.value = currentZoom;
+  fetch(API('/settings'), { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ ui_editor_zoom: currentZoom }) }).catch(() => {});
+}
+// Restore saved zoom from DB
+fetch(API('/settings?key=ui_editor_zoom')).then(r => r.json()).then(d => {
+  if (d.value) { currentZoom = parseInt(d.value); applyZoom(); }
+}).catch(() => {});
+// --- Font selection ---
+const DEFAULT_FONT = "'Courier New', Courier, monospace";
+function setEditorFont(fontFamily, save) {
+  const editor = document.getElementById('editor');
+  if (editor) editor.style.fontFamily = fontFamily;
+  const sel = document.getElementById('font-select');
+  if (sel) sel.value = fontFamily;
+  if (save !== false) fetch(API('/settings'), { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ ui_editor_font: fontFamily }) }).catch(() => {});
+}
+// Restore saved font from DB (default: Courier New)
+fetch(API('/settings?key=ui_editor_font')).then(r => r.json()).then(d => {
+  setEditorFont(d.value || DEFAULT_FONT, false);
+}).catch(() => { setEditorFont(DEFAULT_FONT, false); });
+// Keyboard shortcuts
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape') {
+    document.querySelectorAll('.modal-overlay:not(.hidden)').forEach(m => m.classList.add('hidden'));
+    if (document.getElementById('annotation-overlay').classList.contains('active')) closeAnnotation();
+  }
+  // Ctrl+S: save
+  if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+    e.preventDefault();
+    saveCurrentPrompt();
+  }
+});
+// Listen for messages from main window (send prompt to session)
+window.addEventListener('message', (e) => {
+  if (e.data?.type === 'session-data') {
+    // Session data feedback
+    console.log('Received session data:', e.data);
+  }
+});
+// ============================================================
+// Init
+// ============================================================
+// ============================================================
+// Backups
+// ============================================================
+async function loadBackups() {
+  const res = await fetch(API('/backups'));
+  const backups = await res.json();
+  const list = document.getElementById('backup-list');
+  if (!backups.length) {
+    list.innerHTML = `<div class="empty-state"><h3>No Backups Yet</h3><p>Click "Backup Now" to create your first manual backup. Daily auto-backups will also appear here.</p></div>`;
+    return;
+  }
+  list.innerHTML = `<table class="perm-table">
+    <thead><tr><th>Backup</th><th>Size</th><th>Images</th><th>Created</th><th></th></tr></thead>
+    <tbody>${backups.map(b => {
+      const sizeKb = (b.size / 1024).toFixed(0);
+      const sizeMb = (b.size / (1024 * 1024)).toFixed(1);
+      const sizeStr = b.size > 1024 * 1024 ? `${sizeMb} MB` : `${sizeKb} KB`;
+      const label = b.name.replace('task-manager-', '').replace('.db', '');
+      const isDaily = b.name.includes('-daily');
+      const isManual = b.name.includes('-manual');
+      const isPreRestore = b.name.includes('-pre-restore');
+      const tagColor = isDaily ? 'var(--accent)' : isManual ? 'var(--yellow)' : isPreRestore ? 'var(--red)' : 'var(--fg-dim)';
+      const tagLabel = isDaily ? 'auto' : isManual ? 'manual' : isPreRestore ? 'pre-restore' : '';
+      return `<tr>
+        <td>
+          <div style="font-weight:500">${escHtml(label)}</div>
+          ${tagLabel ? `<span style="font-size:9px;padding:1px 6px;border-radius:3px;background:${tagColor}20;color:${tagColor}">${tagLabel}</span>` : ''}
+        </td>
+        <td>${sizeStr}</td>
+        <td>${b.hasImages ? '<span style="color:var(--green)">Yes</span>' : '<span style="color:var(--fg-dim)">No</span>'}</td>
+        <td>${new Date(b.createdAt).toLocaleString()}</td>
+        <td style="white-space:nowrap;display:flex;gap:4px;">
+          <button class="btn small primary" onclick="restoreFromBackup('${escHtml(b.name)}')">Restore</button>
+          <button class="btn small danger" onclick="deleteBackupItem('${escHtml(b.name)}')">Delete</button>
+        </td>
+      </tr>`;
+    }).join('')}</tbody>
+  </table>`;
+  document.getElementById('backup-status').textContent = `${backups.length} backup(s)`;
+}
+async function createManualBackup() {
+  const label = prompt('Backup label (optional):', 'manual');
+  if (label === null) return;
+  document.getElementById('backup-status').textContent = 'Creating backup...';
+  try {
+    const res = await fetch(API('/backups'), {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ label: label || 'manual' }),
+    });
+    const data = await res.json();
+    if (data.error) {
+      toast('Backup failed: ' + data.error, { type: 'error' });
+    } else {
+      document.getElementById('backup-status').textContent = `Backup created: ${data.backupName}`;
+    }
+    loadBackups();
+  } catch (e) {
+    toast('Backup failed: ' + e.message, { type: 'error' });
+  }
+}
+async function restoreFromBackup(name) {
+  if (!confirm(`Restore from backup "${name}"?\n\nA safety snapshot of the current state will be created first. The page will reload after restore.`)) return;
+  document.getElementById('backup-status').textContent = 'Restoring...';
+  try {
+    const res = await fetch(API('/backups/restore'), {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name }),
+    });
+    const data = await res.json();
+    if (data.error) {
+      toast('Restore failed: ' + data.error, { type: 'error' });
+    } else {
+      toast('Restore successful! Reloading...', { type: 'success' });
+      setTimeout(() => location.reload(), 1500);
+    }
+  } catch (e) {
+    toast('Restore failed: ' + e.message, { type: 'error' });
+  }
+}
+async function deleteBackupItem(name) {
+  if (!confirm(`Delete backup "${name}"? This cannot be undone.`)) return;
+  await fetch(API(`/backups/${encodeURIComponent(name)}`), { method: 'DELETE' });
+  loadBackups();
+}
+// ============================================================
+// URL Hash Routing
+// ============================================================
+function updateUrlHash(params) {
+  const parts = [];
+  if (params.view && params.view !== 'editor') {
+    parts.push(`view=${params.view}`);
+  } else {
+    if (params.folder) parts.push(`folder=${params.folder}`);
+    if (params.prompt) parts.push(`prompt=${params.prompt}`);
+  }
+  const hash = parts.length ? '#' + parts.join('&') : '';
+  if (location.hash !== hash) {
+    history.replaceState(null, '', location.pathname + location.search + hash);
+  }
+}
+function parseUrlHash() {
+  const hash = location.hash.slice(1);
+  if (!hash) return {};
+  const params = {};
+  for (const part of hash.split('&')) {
+    const [k, v] = part.split('=');
+    if (k && v !== undefined) params[k] = v;
+  }
+  return params;
+}
+async function restoreFromHash() {
+  const params = parseUrlHash();
+  // Restore view (chains, permissions, etc.)
+  if (params.view) {
+    showView(params.view, true);
+    return;
+  }
+  // Restore folder selection
+  if (params.folder) {
+    state.currentFolderId = parseInt(params.folder);
+    renderFolderTree();
+    await loadPrompts();
+  }
+  // Restore open prompt
+  if (params.prompt) {
+    openPrompt(parseInt(params.prompt));
+  }
+}
+window.addEventListener('hashchange', () => {
+  restoreFromHash();
+});
+// ============================================================
+// Queue Builder
+// ============================================================
+let queueItems = [];
+let queueMode = 'manual';
+let queueCurrentSession = null;
+function getQueueSessionId() {
+  return document.getElementById('queue-session-select').value || null;
+}
+function saveQueueToStorage() {
+  const sessionId = queueCurrentSession;
+  if (!sessionId) return;
+  fetch(API(`/queue-draft/${encodeURIComponent(sessionId)}`), {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ items: queueItems, mode: queueMode }),
+  }).catch(() => {});
+}
+async function loadQueueDraftForSession(sessionId) {
+  queueCurrentSession = sessionId;
+  if (!sessionId) { queueItems = []; queueMode = 'manual'; renderQueueBuilderList(); updateQueueModeBtn(); return; }
+  try {
+    const res = await fetch(API(`/queue-draft/${encodeURIComponent(sessionId)}`));
+    const data = await res.json();
+    queueItems = data.items || [];
+    queueMode = data.mode || 'manual';
+  } catch { queueItems = []; queueMode = 'manual'; }
+  renderQueueBuilderList();
+  updateQueueModeBtn();
+}
+function updateQueueModeBtn() {
+  const modeBtn = document.getElementById('queue-mode-btn');
+  if (modeBtn) modeBtn.textContent = queueMode === 'auto' ? 'Auto' : 'Manual';
+}
+function onQueueSessionChange() {
+  const sessionId = getQueueSessionId();
+  if (sessionId !== queueCurrentSession) {
+    loadQueueDraftForSession(sessionId);
+  }
+}
+function clearQueueItems() {
+  queueItems = [];
+  saveQueueToStorage();
+  renderQueueBuilderList();
+}
+function toggleQueueBuilder() {
+  const panel = document.getElementById('queue-builder');
+  const isActive = panel.classList.toggle('active');
+  document.getElementById('queue-builder-toggle').classList.toggle('active', isActive);
+  if (isActive) {
+    refreshQueueSessionList();
+    loadQueueDraftForSession(getQueueSessionId());
+  }
+}
+function toggleQueueBuilderMode() {
+  queueMode = queueMode === 'auto' ? 'manual' : 'auto';
+  updateQueueModeBtn();
+  saveQueueToStorage();
+}
+function refreshQueueSessionList() {
+  const sel = document.getElementById('queue-session-select');
+  const sessions = state.activeSessions || [];
+  if (sessions.length === 0) {
+    sel.innerHTML = '<option value="">No active sessions</option>';
+    return;
+  }
+  const prevVal = sel.value;
+  sel.innerHTML = sessions.map(s =>
+    `<option value="${s.id}">${escHtml(s.label || s.id.slice(0, 8))} (PID ${s.pid || '?'})</option>`
+  ).join('');
+  // Keep previous selection if still valid
+  if (prevVal && sessions.some(s => s.id === prevVal)) {
+    sel.value = prevVal;
+  }
+  if (sel.value !== queueCurrentSession) {
+    loadQueueDraftForSession(sel.value);
+  }
+}
+async function addPromptToQueue(promptId) {
+  // Fetch the prompt text
+  try {
+    const res = await fetch(API(`/prompts/${promptId}`));
+    const prompt = await res.json();
+    queueItems.push({
+      type: 'prompt',
+      promptId,
+      title: prompt.title || 'Untitled',
+      text: prompt.content || '',
+    });
+    saveQueueToStorage();
+    renderQueueBuilderList();
+    // Open queue builder if not open
+    const panel = document.getElementById('queue-builder');
+    if (!panel.classList.contains('active')) {
+      toggleQueueBuilder();
+    }
+  } catch (e) {
+    console.error('Failed to fetch prompt:', e);
+  }
+}
+function addInlineToQueue() {
+  const input = document.getElementById('queue-inline-input');
+  const text = input.value.trim();
+  if (!text) return;
+  queueItems.push({
+    type: 'inline',
+    promptId: null,
+    title: text.slice(0, 60),
+    text,
+  });
+  input.value = '';
+  saveQueueToStorage();
+  renderQueueBuilderList();
+}
+function removeFromQueue(idx) {
+  queueItems.splice(idx, 1);
+  saveQueueToStorage();
+  renderQueueBuilderList();
+}
+function moveQueueItem(fromIdx, toIdx) {
+  if (toIdx < 0 || toIdx >= queueItems.length) return;
+  const [item] = queueItems.splice(fromIdx, 1);
+  queueItems.splice(toIdx, 0, item);
+  saveQueueToStorage();
+  renderQueueBuilderList();
+}
+function renderQueueBuilderList() {
+  const list = document.getElementById('queue-builder-list');
+  const countEl = document.getElementById('queue-builder-count');
+  if (countEl) countEl.textContent = `${queueItems.length} item${queueItems.length !== 1 ? 's' : ''}`;
+  if (queueItems.length === 0) {
+    list.innerHTML = '<div style="padding:16px;text-align:center;color:var(--fg-dim);font-size:11px;">Click +Q on prompts to add them here, or type inline prompts below.</div>';
+    return;
+  }
+  list.innerHTML = queueItems.map((item, idx) => `
+    <div class="queue-builder-item" draggable="true"
+      ondragstart="onQueueDragStart(event,${idx})"
+      ondragover="event.preventDefault();this.classList.add('drag-over')"
+      ondragleave="this.classList.remove('drag-over')"
+      ondrop="onQueueDrop(event,${idx})">
+      <span class="qb-num">${idx + 1}</span>
+      <span class="qb-title" title="${escHtml(item.text)}">${escHtml(item.title)}</span>
+      <span class="qb-type">${item.type === 'prompt' ? '#' + item.promptId : 'inline'}</span>
+      <button class="qb-remove" onclick="removeFromQueue(${idx})" title="Remove">&times;</button>
+    </div>
+  `).join('');
+}
+let _queueDragIdx = -1;
+function onQueueDragStart(event, idx) {
+  _queueDragIdx = idx;
+  event.dataTransfer.effectAllowed = 'move';
+}
+function onQueueDrop(event, toIdx) {
+  event.preventDefault();
+  event.currentTarget.classList.remove('drag-over');
+  if (_queueDragIdx >= 0 && _queueDragIdx !== toIdx) {
+    moveQueueItem(_queueDragIdx, toIdx);
+  }
+  _queueDragIdx = -1;
+}
+async function sendQueue() {
+  const sessionId = getQueueSessionId();
+  if (!sessionId) {
+    toast('Select an active session first', { type: 'warning' });
+    return;
+  }
+  if (queueItems.length === 0) {
+    toast('Add at least one prompt to the queue', { type: 'warning' });
+    return;
+  }
+  const idleTimeoutMs = parseInt(document.getElementById('queue-idle-timeout').value || '10', 10) * 1000;
+  const btn = document.getElementById('queue-send-btn');
+  btn.disabled = true;
+  btn.textContent = 'Sending...';
+  try {
+    // Create and start queue on server
+    const res = await fetch(API('/queues'), {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        sessionId,
+        mode: queueMode,
+        items: queueItems,
+        idleTimeoutMs,
+        autoStart: true,
+      }),
+    });
+    const data = await res.json();
+    if (!res.ok || data.error) throw new Error(data.error || `Server error ${res.status}`);
+    // Navigate to session in main page
+    const mainUrl = `/#session=${sessionId}`;
+    window.open(mainUrl, '_blank');
+    // Clear queue
+    queueItems = [];
+    saveQueueToStorage();
+    renderQueueBuilderList();
+    showStatusMessage('Queue sent and started');
+  } catch (e) {
+    toast('Failed to send queue: ' + e.message, { type: 'error' });
+  } finally {
+    btn.disabled = false;
+    btn.textContent = 'Send Queue';
+  }
+}
+function showStatusMessage(msg) {
+  const el = document.getElementById('status-saved');
+  if (el) { el.textContent = msg; setTimeout(() => { el.textContent = ''; }, 3000); }
+}
+// ============================================================
+// Autocomplete Engine
+// ============================================================
+let acTimeout = null;
+let acSelectedIdx = -1;
+function onSearchInput() {
+  const input = document.getElementById('prompt-search');
+  const q = input.value.trim();
+  // Standard search with debounce
+  clearTimeout(state.searchTimeout);
+  state.searchTimeout = setTimeout(() => loadPrompts(), 300);
+  // Autocomplete
+  clearTimeout(acTimeout);
+  if (q.length < 3) { hideAutocomplete(); return; }
+  acTimeout = setTimeout(() => fetchAutocomplete(q), 200);
+}
+async function fetchAutocomplete(q) {
+  try {
+    const res = await fetch(API(`/autocomplete?q=${encodeURIComponent(q)}`));
+    const data = await res.json();
+    renderAutocomplete(data.results || []);
+  } catch {}
+}
+function renderAutocomplete(items) {
+  const dd = document.getElementById('ac-dropdown');
+  if (!items.length) { hideAutocomplete(); return; }
+  acSelectedIdx = -1;
+  dd.innerHTML = items.map((item, i) => `
+    <div class="ac-item" data-idx="${i}" onmousedown="selectAutocomplete(${i})" onmouseover="acSelectedIdx=${i};highlightAc()">
+      <span class="ac-type ${item.type}">${item.type === 'history' ? 'hist' : item.type === 'library' ? 'lib' : 'tool'}</span>
+      <div class="ac-text">
+        ${escHtml(item.text)}
+        ${item.fullText && item.fullText !== item.text ? `<span class="full">${escHtml(item.fullText.slice(0, 120))}</span>` : ''}
+      </div>
+    </div>
+  `).join('');
+  dd.classList.add('visible');
+}
+function selectAutocomplete(idx) {
+  const dd = document.getElementById('ac-dropdown');
+  const items = dd.querySelectorAll('.ac-item');
+  if (idx < 0 || idx >= items.length) return;
+  const text = items[idx].querySelector('.ac-text')?.textContent?.trim() || '';
+  const firstLine = text.split('\n')[0].trim();
+  document.getElementById('prompt-search').value = firstLine;
+  hideAutocomplete();
+  loadPrompts();
+}
+function highlightAc() {
+  const dd = document.getElementById('ac-dropdown');
+  dd.querySelectorAll('.ac-item').forEach((el, i) => {
+    el.classList.toggle('selected', i === acSelectedIdx);
+  });
+}
+function hideAutocomplete() {
+  document.getElementById('ac-dropdown').classList.remove('visible');
+  acSelectedIdx = -1;
+}
+function onSearchKeydown(event) {
+  const dd = document.getElementById('ac-dropdown');
+  if (dd.classList.contains('visible')) {
+    const items = dd.querySelectorAll('.ac-item');
+    if (event.key === 'ArrowDown') { event.preventDefault(); acSelectedIdx = Math.min(acSelectedIdx + 1, items.length - 1); highlightAc(); return; }
+    if (event.key === 'ArrowUp') { event.preventDefault(); acSelectedIdx = Math.max(acSelectedIdx - 1, 0); highlightAc(); return; }
+    if (event.key === 'Enter' && acSelectedIdx >= 0) { event.preventDefault(); selectAutocomplete(acSelectedIdx); return; }
+    if (event.key === 'Escape') { hideAutocomplete(); return; }
+  }
+  if (event.key === 'Enter' && aiSearchMode) { event.preventDefault(); runAiSearch(); }
+}
+// Close autocomplete on click outside
+document.addEventListener('click', (e) => {
+  if (!e.target.closest('.autocomplete-wrap')) hideAutocomplete();
+});
+// ============================================================
+// Harvest Modal
+// ============================================================
+async function openHarvestModal() {
+  document.getElementById('harvest-modal').classList.add('visible');
+  document.getElementById('harvest-result').style.display = 'none';
+  try {
+    const res = await fetch(API('/harvest/preview'));
+    const data = await res.json();
+    const el = document.getElementById('harvest-stats');
+    el.innerHTML = `
+      <div class="harvest-stat"><span class="label">Total Sessions</span><span class="value">${data.totalSessions}</span></div>
+      <div class="harvest-stat"><span class="label">Total Size</span><span class="value">${data.totalSizeMB} MB</span></div>
+      <div class="harvest-stat"><span class="label">Modified Since Last Scan</span><span class="value">${data.modifiedSinceLastScan}</span></div>
+      <div class="harvest-stat"><span class="label">Already Harvested</span><span class="value">${data.totalHarvested} messages</span></div>
+      <div class="harvest-stat"><span class="label">Last Scan</span><span class="value">${data.lastScan ? timeAgo(data.lastScan) : 'Never'}</span></div>
+      <div class="harvest-stat"><span class="label">Date Range</span><span class="value">${data.dateRange.oldest ? new Date(data.dateRange.oldest).toLocaleDateString() : '?'} - ${data.dateRange.newest ? new Date(data.dateRange.newest).toLocaleDateString() : '?'}</span></div>
+      <div style="margin-top:8px;font-size:12px;font-weight:600;">Top Projects</div>
+      <div class="harvest-projects">${(data.projects || []).slice(0, 8).map(p => `<div><span>${escHtml(p.name)}</span><span>${p.count} sessions</span></div>`).join('')}</div>
+    `;
+  } catch (e) {
+    document.getElementById('harvest-stats').innerHTML = `<div style="color:var(--red);font-size:12px;">Error loading preview: ${escHtml(e.message)}</div>`;
+  }
+}
+function closeHarvestModal() {
+  document.getElementById('harvest-modal').classList.remove('visible');
+}
+async function runHarvest(scope) {
+  const btnId = scope === 'incremental' ? 'harvest-inc-btn' : 'harvest-all-btn';
+  const btn = document.getElementById(btnId);
+  const origText = btn.textContent;
+  btn.disabled = true;
+  btn.textContent = 'Harvesting...';
+  const resultEl = document.getElementById('harvest-result');
+  try {
+    const maxDays = document.getElementById('harvest-days').value || undefined;
+    const res = await fetch(API('/harvest'), {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ scope, maxDays: maxDays ? parseInt(maxDays) : undefined }),
+    });
+    const data = await res.json();
+    resultEl.style.display = 'block';
+    resultEl.innerHTML = `
+      <div style="color:var(--green);font-weight:600;margin-bottom:4px;">Harvest Complete</div>
+      <div>Files scanned: ${data.filesScanned} / ${data.totalFiles}</div>
+      <div>Messages harvested: ${data.messagesHarvested}</div>
+    `;
+    toast(`Harvested ${data.messagesHarvested} messages from ${data.filesScanned} sessions`, { type: 'success' });
+  } catch (e) {
+    resultEl.style.display = 'block';
+    resultEl.innerHTML = `<div style="color:var(--red);">Error: ${escHtml(e.message)}</div>`;
+  } finally {
+    btn.disabled = false;
+    btn.textContent = origText;
+  }
+}
+// ============================================================
+// Copilot Panel
+// ============================================================
+let copilotTab = 'similar';
+let copilotHistory = [];
+function toggleCopilotPanel() {
+  const panel = document.getElementById('copilot-panel');
+  const isActive = panel.classList.toggle('active');
+  document.getElementById('copilot-toggle').classList.toggle('active', isActive);
+  if (isActive && state.currentPromptId) {
+    loadSimilarPrompts();
+    loadPromptSessions();
+  }
+}
+function switchCopilotTab(tab) {
+  copilotTab = tab;
+  document.querySelectorAll('.copilot-tab').forEach(t => t.classList.toggle('active', t.textContent.toLowerCase().includes(tab)));
+  document.querySelectorAll('.copilot-tab-content').forEach(c => c.style.display = 'none');
+  document.getElementById(`copilot-${tab}`).style.display = '';
+  if (tab === 'frequent') loadFrequentQuestions();
+}
+async function loadSimilarPrompts() {
+  const el = document.getElementById('copilot-similar');
+  if (!state.currentPromptId) { el.innerHTML = '<div style="padding:12px;text-align:center;color:var(--fg-dim);font-size:12px;">Open a prompt to see similar prompts.</div>'; return; }
+  const prompt = state.prompts.find(p => p.id === state.currentPromptId);
+  const text = prompt?.content || prompt?.title || '';
+  if (text.length < 20) { el.innerHTML = '<div style="padding:12px;text-align:center;color:var(--fg-dim);font-size:12px;">Prompt too short for similarity matching.</div>'; return; }
+  el.innerHTML = '<div style="padding:12px;text-align:center;color:var(--fg-dim);font-size:12px;">Searching...</div>';
+  try {
+    const res = await fetch(API(`/similar?text=${encodeURIComponent(text.slice(0, 500))}`));
+    const data = await res.json();
+    if (!data.results?.length) { el.innerHTML = '<div style="padding:12px;text-align:center;color:var(--fg-dim);font-size:12px;">No similar prompts found. Try harvesting more sessions.</div>'; return; }
+    el.innerHTML = data.results.map(r => `
+      <div class="similar-item" onclick="${r.promptId ? `openPrompt(${r.promptId})` : ''}">
+        <span class="si-match">${Math.round((r.matchRatio || 0) * 100)}% match</span>
+        <div class="si-title">${escHtml(r.text)}</div>
+        <div class="si-meta">${r.type === 'library' ? 'Library prompt' : r.sessionId ? 'Session ' + r.sessionId.slice(0, 8) : ''} ${r.at ? '· ' + timeAgo(r.at) : ''}</div>
+      </div>
+    `).join('');
+  } catch (e) {
+    el.innerHTML = `<div style="padding:12px;color:var(--red);font-size:12px;">Error: ${escHtml(e.message)}</div>`;
+  }
+}
+async function loadPromptSessions() {
+  const el = document.getElementById('copilot-sessions');
+  if (!state.currentPromptId) { el.innerHTML = '<div style="padding:12px;text-align:center;color:var(--fg-dim);font-size:12px;">Open a prompt to see sessions.</div>'; return; }
+  try {
+    const res = await fetch(API(`/prompts/${state.currentPromptId}/sessions`));
+    const data = await res.json();
+    if (!data.sessions?.length) { el.innerHTML = '<div style="padding:12px;text-align:center;color:var(--fg-dim);font-size:12px;">This prompt hasn\'t been sent to any sessions yet.</div>'; return; }
+    el.innerHTML = data.sessions.map(s => `
+      <div class="similar-item">
+        <div class="si-title" style="cursor:pointer;" onclick="window.open('/#session=${s.session_id}','_blank')">Session ${s.session_id.slice(0, 8)}...</div>
+        <div class="si-meta">${s.source} · ${timeAgo(s.at)}</div>
+        <div style="display:flex;gap:4px;margin-top:4px;">
+          <button class="btn small" style="font-size:9px;padding:1px 6px;${s.outcome === 'success' ? 'background:var(--green);color:#1a1b26;' : ''}" onclick="event.stopPropagation();setOutcomeForSession('${s.session_id}','success')">Success</button>
+          <button class="btn small" style="font-size:9px;padding:1px 6px;${s.outcome === 'partial' ? 'background:var(--yellow);color:#1a1b26;' : ''}" onclick="event.stopPropagation();setOutcomeForSession('${s.session_id}','partial')">Partial</button>
+          <button class="btn small" style="font-size:9px;padding:1px 6px;${s.outcome === 'failed' ? 'background:var(--red);color:#1a1b26;' : ''}" onclick="event.stopPropagation();setOutcomeForSession('${s.session_id}','failed')">Failed</button>
+        </div>
+      </div>
+    `).join('');
+  } catch (e) {
+    el.innerHTML = `<div style="padding:12px;color:var(--red);font-size:12px;">Error: ${escHtml(e.message)}</div>`;
+  }
+}
+async function setOutcomeForSession(sessionId, outcome) {
+  try {
+    // Find the execution ID for this session's user messages
+    const res = await fetch(API(`/prompt-executions/session/${sessionId}`));
+    const data = await res.json();
+    const userExecs = (data.executions || []).filter(e => e.role === 'user');
+    if (userExecs.length > 0) {
+      await fetch(API(`/prompt-executions/${userExecs[0].id}/outcome`), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ outcome }),
+      });
+      toast(`Outcome set to "${outcome}"`, { type: 'success' });
+      loadPromptSessions(); // Refresh
+    }
+  } catch (e) {
+    toast('Failed to set outcome: ' + e.message, { type: 'error' });
+  }
+}
+async function sendCopilotMsg() {
+  const input = document.getElementById('copilot-input');
+  const msg = input.value.trim();
+  if (!msg) return;
+  input.value = '';
+  const messagesEl = document.getElementById('copilot-messages');
+  messagesEl.innerHTML += `<div class="copilot-msg user">${escHtml(msg)}</div>`;
+  messagesEl.scrollTop = messagesEl.scrollHeight;
+  copilotHistory.push({ role: 'user', content: msg });
+  try {
+    const res = await fetch(API('/copilot/chat'), {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ message: msg, history: copilotHistory.slice(-10) }),
+    });
+    const data = await res.json();
+    const reply = data.reply || 'No response';
+    messagesEl.innerHTML += `<div class="copilot-msg assistant">${escHtml(reply)}</div>`;
+    messagesEl.scrollTop = messagesEl.scrollHeight;
+    copilotHistory.push({ role: 'assistant', content: reply });
+  } catch (e) {
+    messagesEl.innerHTML += `<div class="copilot-msg assistant" style="color:var(--red);">Error: ${escHtml(e.message)}</div>`;
+  }
+}
+// ============================================================
+// Frequent Questions (Multi-session surfacing)
+// ============================================================
+async function loadFrequentQuestions() {
+  const el = document.getElementById('copilot-frequent');
+  el.innerHTML = '<div style="padding:12px;text-align:center;color:var(--fg-dim);font-size:12px;">Loading...</div>';
+  try {
+    const res = await fetch(API('/frequent-questions?limit=15'));
+    const data = await res.json();
+    if (!data.questions?.length) {
+      el.innerHTML = '<div style="padding:12px;text-align:center;color:var(--fg-dim);font-size:12px;">No frequently asked questions found. Try harvesting more sessions first.</div>';
+      return;
+    }
+    el.innerHTML = data.questions.map(q => `
+      <div class="similar-item" onclick="useFrequentQuestion(this)" data-text="${escAttr(q.text)}">
+        <span class="si-match">${q.sessionCount} sessions</span>
+        <div class="si-title">${escHtml(q.text)}</div>
+        <div class="si-meta">${q.type === 'exact' ? 'Exact match' : 'Similar wording'} · Last: ${timeAgo(q.lastUsed)}</div>
+      </div>
+    `).join('');
+  } catch (e) {
+    el.innerHTML = `<div style="padding:12px;color:var(--red);font-size:12px;">Error: ${escHtml(e.message)}</div>`;
+  }
+}
+function useFrequentQuestion(el) {
+  const text = el.dataset.text;
+  if (text) {
+    document.getElementById('queue-inline-input').value = text;
+    toast('Question copied to queue input', { type: 'info' });
+  }
+}
+function escAttr(s) { return (s || '').replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
+// ============================================================
+// Copilot Auto-Suggestion (3s pause + 80 chars gate)
+// ============================================================
+let copilotSuggestTimeout = null;
+let copilotLastSuggestion = null;
+function triggerCopilotSuggestion() {
+  clearTimeout(copilotSuggestTimeout);
+  const text = getPromptPlainText().trim();
+  if (text.length < 80) return; // 80 char gate
+  copilotSuggestTimeout = setTimeout(async () => {
+    try {
+      const res = await fetch(API('/copilot/suggest'), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ text: text.slice(0, 1000) }),
+      });
+      const data = await res.json();
+      if (data && data.suggestion) {
+        copilotLastSuggestion = data;
+        showCopilotSuggestion(data);
+      }
+    } catch {}
+  }, 3000); // 3 second pause
+}
+function showCopilotSuggestion(data) {
+  const bar = document.getElementById('copilot-suggestion-bar');
+  const textEl = document.getElementById('copilot-suggestion-text');
+  const applyBtn = document.getElementById('copilot-apply-btn');
+  const qualityColors = { good: 'var(--green)', needs_work: 'var(--yellow)', vague: 'var(--red)' };
+  const qColor = qualityColors[data.quality] || 'var(--fg-dim)';
+  textEl.innerHTML = `<span style="color:${qColor};font-weight:600;">${escHtml(data.quality || '')}</span> ${escHtml(data.suggestion || '')}`;
+  applyBtn.style.display = data.improved ? '' : 'none';
+  bar.style.display = '';
+}
+function toggleCopilotPreview() {
+  const preview = document.getElementById('copilot-preview');
+  const btn = document.getElementById('copilot-preview-btn');
+  if (!preview) return;
+  const visible = preview.style.display !== 'none';
+  if (visible) {
+    preview.style.display = 'none';
+    if (btn) btn.textContent = 'Preview';
+  } else {
+    preview.textContent = copilotLastSuggestion?.improved || '(no improved text)';
+    preview.style.display = 'block';
+    if (btn) btn.textContent = 'Hide';
+  }
+}
+function applyCopilotSuggestion() {
+  if (copilotLastSuggestion?.improved) {
+    document.getElementById('editor').innerText = copilotLastSuggestion.improved;
+    dismissCopilotSuggestion();
+    toast('Applied improved version from Copilot', { type: 'success' });
+  }
+}
+function dismissCopilotSuggestion() {
+  document.getElementById('copilot-suggestion-bar').style.display = 'none';
+  const preview = document.getElementById('copilot-preview');
+  if (preview) preview.style.display = 'none';
+  copilotLastSuggestion = null;
+}
+// ============================================================
+// Patterns View
+// ============================================================
+async function loadPatterns() {
+  const list = document.getElementById('pattern-list');
+  try {
+    const res = await fetch(API('/patterns'));
+    const data = await res.json();
+    const patterns = data.patterns || [];
+    document.getElementById('pattern-count').textContent = `${patterns.length} patterns`;
+    if (!patterns.length) {
+      list.innerHTML = '<div style="padding:16px;text-align:center;color:var(--fg-dim);font-size:12px;">No patterns detected yet. Click "Detect Patterns" to scan your harvested prompts.</div>';
+      return;
+    }
+    list.innerHTML = patterns.map(p => `
+      <div class="pattern-item">
+        <span class="pi-freq">${p.frequency}x</span>
+        <div class="pi-text">${escHtml(p.example_text || p.normalized_text)}</div>
+        <div class="pi-meta">
+          ${p.projects ? JSON.parse(p.projects).slice(0, 2).map(pr => escHtml(pr.replace(/^\/Users\/[^/]+\//, '~/'))).join(', ') : ''}
+          ${p.last_used_at ? ' · Last: ' + timeAgo(p.last_used_at) : ''}
+        </div>
+      </div>
+    `).join('');
+  } catch (e) {
+    list.innerHTML = `<div style="padding:12px;color:var(--red);font-size:12px;">Error: ${escHtml(e.message)}</div>`;
+  }
+}
+async function detectPatterns() {
+  const btn = document.querySelector('#view-patterns .btn.primary');
+  btn.disabled = true;
+  btn.textContent = 'Detecting...';
+  try {
+    const res = await fetch(API('/patterns/detect'), { method: 'POST' });
+    const data = await res.json();
+    toast(`Detected ${data.count} patterns`, { type: 'success' });
+    loadPatterns();
+  } catch (e) {
+    toast('Pattern detection failed: ' + e.message, { type: 'error' });
+  } finally {
+    btn.disabled = false;
+    btn.textContent = 'Detect Patterns';
+  }
+}
+// ============================================================
+// Queue Inline Autocomplete
+// ============================================================
+let queueAcTimeout = null;
+let queueAcIdx = -1;
+function onQueueInputChange() {
+  const q = document.getElementById('queue-inline-input').value.trim();
+  clearTimeout(queueAcTimeout);
+  if (q.length < 3) { hideQueueAc(); return; }
+  queueAcTimeout = setTimeout(async () => {
+    try {
+      const res = await fetch(API(`/autocomplete?q=${encodeURIComponent(q)}`));
+      const data = await res.json();
+      renderQueueAc(data.results || []);
+    } catch {}
+  }, 200);
+}
+function renderQueueAc(items) {
+  const dd = document.getElementById('queue-ac-dropdown');
+  if (!items.length) { hideQueueAc(); return; }
+  queueAcIdx = -1;
+  dd.innerHTML = items.map((item, i) => `
+    <div class="ac-item" onmousedown="selectQueueAc(${i})">
+      <span class="ac-type ${item.type}">${item.type === 'history' ? 'hist' : item.type === 'library' ? 'lib' : 'tool'}</span>
+      <div class="ac-text">${escHtml(item.text)}</div>
+    </div>
+  `).join('');
+  dd.classList.add('visible');
+}
+function selectQueueAc(idx) {
+  const dd = document.getElementById('queue-ac-dropdown');
+  const items = dd.querySelectorAll('.ac-item');
+  if (idx < 0 || idx >= items.length) return;
+  const text = items[idx].querySelector('.ac-text')?.textContent?.trim() || '';
+  document.getElementById('queue-inline-input').value = text.split('\n')[0].trim();
+  hideQueueAc();
+}
+function hideQueueAc() { document.getElementById('queue-ac-dropdown').classList.remove('visible'); queueAcIdx = -1; }
+function onQueueInputKeydown(event) {
+  const dd = document.getElementById('queue-ac-dropdown');
+  if (dd.classList.contains('visible')) {
+    const items = dd.querySelectorAll('.ac-item');
+    if (event.key === 'ArrowDown') { event.preventDefault(); queueAcIdx = Math.min(queueAcIdx + 1, items.length - 1); items.forEach((el, i) => el.classList.toggle('selected', i === queueAcIdx)); return; }
+    if (event.key === 'ArrowUp') { event.preventDefault(); queueAcIdx = Math.max(queueAcIdx - 1, 0); items.forEach((el, i) => el.classList.toggle('selected', i === queueAcIdx)); return; }
+    if (event.key === 'Enter' && queueAcIdx >= 0) { event.preventDefault(); selectQueueAc(queueAcIdx); return; }
+    if (event.key === 'Escape') { hideQueueAc(); return; }
+  }
+  if (event.key === 'Enter') addInlineToQueue();
+}
+// ============================================================
+// Lifecycle Status
+// ============================================================
+async function onLifecycleChange() {
+  if (!state.currentPromptId) return;
+  const status = document.getElementById('lifecycle-status').value;
+  try {
+    await fetch(API(`/prompts/${state.currentPromptId}`), {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ lifecycle_status: status }),
+    });
+    // Update local state
+    const p = state.prompts.find(pp => pp.id === state.currentPromptId);
+    if (p) p.lifecycle_status = status;
+    renderPromptList();
+  } catch (e) {
+    toast('Failed to update lifecycle status: ' + e.message, { type: 'error' });
+  }
+}
+// ============================================================
+// Boot
+// ============================================================
+initEditor();
+connectWebSocket();
+(async () => {
+  await loadFolders();
+  await loadPrompts();
+  restoreFromHash();
+})();
+</script>
+</body>
+</html>