codymaster 4.3.0 → 4.4.2

package/public/dashboard/style.css

@@ -0,0 +1,440 @@
+/* CodyMaster Mission Control v4 — Light/Dark Theme */
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+
+/* ── Light Mode (default) ─────────── */
+:root, [data-theme="light"] {
+  color-scheme: light;
+  --bg-body:#f6f8fa;--bg-sidebar:#ffffff;--bg-card:#ffffff;--bg-card-hover:#f3f4f6;
+  --bg-column:#f0f2f5;--bg-input:#ffffff;--bg-modal:#ffffff;
+  --text-primary:#1f2328;--text-secondary:#656d76;--text-muted:#8b949e;
+  --border:#d0d7de;--border-light:#e8ebef;
+  --accent:#0969da;--accent-hover:#0550ae;
+  --col-backlog:#8b949e;--col-in-progress:#0969da;--col-review:#bf8700;--col-done:#1a7f37;
+  --danger:#cf222e;--danger-hover:#a40e26;
+  --radius:8px;--radius-sm:6px;
+  --shadow:0 1px 3px rgba(31,35,40,.12),0 1px 2px rgba(31,35,40,.06);
+  --font:'Inter',system-ui,-apple-system,sans-serif;
+  --deploy-success:#1a7f37;--deploy-failed:#cf222e;--deploy-pending:#bf8700;
+  --deploy-running:#0969da;--deploy-rollback:#8250df;
+  --btn-icon-hover-bg:rgba(31,35,40,.06);
+  --card-agent-bg:rgba(31,35,40,.04);
+  --modal-backdrop:rgba(31,35,40,.5);
+}
+
+/* ── Dark Mode (Mockup theme) ──────── */
+[data-theme="dark"]{
+  color-scheme: dark;
+  --bg-body:#000000;--bg-sidebar:#09090b;--bg-card:#18181b;--bg-card-hover:#27272a;
+  --bg-column:#141417;--bg-input:#09090b;--bg-modal:#18181b;
+  --text-primary:#f4f4f5;--text-secondary:#a1a1aa;--text-muted:#71717a;
+  --border:#27272a;--border-light:#27272a;
+  --accent:#3b82f6;--accent-hover:#60a5fa;
+  --col-backlog:#71717a;--col-in-progress:#3b82f6;--col-review:#eab308;--col-done:#22c55e;
+  --danger:#ef4444;--danger-hover:#f87171;
+  --shadow:0 10px 30px rgba(0,0,0,.5);
+  --deploy-success:#22c55e;--deploy-failed:#ef4444;--deploy-pending:#eab308;
+  --deploy-running:#3b82f6;--deploy-rollback:#8b5cf6;
+  --btn-icon-hover-bg:rgba(255,255,255,.06);
+  --card-agent-bg:rgba(255,255,255,.04);
+  --modal-backdrop:rgba(0,0,0,.6);
+}
+
+html,body{height:100%;font-family:var(--font);background:var(--bg-body);color:var(--text-primary);transition:background-color .2s ease,color .2s ease}
+body{display:flex;overflow:hidden}
+
+/* ── Sidebar ──────────────────────── */
+.sidebar{width:240px;min-width:240px;background:var(--bg-sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;transition:width .2s,min-width .2s;overflow:hidden}
+.sidebar.collapsed{width:0!important;min-width:0!important;border:none!important;visibility:hidden;pointer-events:none}
+.sidebar-header{display:flex;align-items:center;gap:8px;padding:16px 16px 12px;position:relative}
+.sidebar-title{font-size:16px;font-weight:700;white-space:nowrap;display:flex;align-items:center;gap:6px}
+.sidebar-subtitle{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--accent);opacity:.8;padding-top:2px}
+.sidebar-close{display:none;background:none;border:none;color:var(--text-muted);font-size:24px;line-height:1;padding:0 4px;margin-left:auto;cursor:pointer}
+.sidebar-close:hover{color:var(--text-primary)}
+.logo{font-size:22px}
+.sidebar-section{padding:0 12px 16px}
+.sidebar-section-header{display:flex;align-items:center;justify-content:space-between;padding:0 4px 8px}
+.sidebar-section-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--text-secondary)}
+.sidebar-action-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:4px;border-radius:4px}
+.sidebar-action-btn:hover{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
+.project-list{display:flex;flex-direction:column;gap:2px}
+.project-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--radius-sm);cursor:pointer;transition:background .15s;position:relative;white-space:nowrap}
+.project-item:hover{background:var(--bg-card)}
+.project-item.active{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
+.project-icon{font-size:14px}
+.project-name{flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis}
+.project-task-count{font-size:11px;background:var(--bg-card);padding:1px 6px;border-radius:10px;color:var(--text-secondary);min-width:20px;text-align:center}
+.project-delete-btn{display:none;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:12px;padding:2px 4px}
+.project-item:hover .project-delete-btn{display:block}
+.project-item:hover .project-task-count{display:none}
+.agent-list{display:flex;flex-direction:column;gap:6px;padding-top:8px}
+.agent-badge{display:flex;align-items:center;gap:8px;font-size:13px;padding:4px 10px}
+.agent-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
+.agent-task-count{margin-left:auto;font-size:11px;color:var(--text-secondary)}
+.agent-empty{font-size:12px;color:var(--text-muted);padding:8px 10px;font-style:italic}
+.sidebar-footer{margin-top:auto;padding:12px 16px;border-top:1px solid var(--border)}
+.sidebar-version{font-size:11px;color:var(--text-muted)}
+
+/* ── Main Wrapper ─────────────────── */
+.main-wrapper{flex:1;display:flex;flex-direction:column;overflow:hidden}
+
+/* ── Header ───────────────────────── */
+.header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--border);background:var(--bg-sidebar);gap:12px;flex-shrink:0}
+.header-left{display:flex;align-items:center;gap:8px}
+.header-project-name{font-size:16px;font-weight:600}
+.header-right{display:flex;align-items:center;gap:10px}
+.task-stats{display:flex;gap:12px;font-size:12px;color:var(--text-secondary)}
+.stat{display:flex;align-items:center;gap:4px}
+.stat-dot{width:6px;height:6px;border-radius:50%}
+
+/* ── Header Actions & Mobile Menu ─── */
+.hide-xs, .hide-sm { display: flex; align-items: center; }
+.header-actions-dropdown { position: relative; }
+button.btn-more-menu { display: none; }
+.header-actions { display: flex; align-items: center; gap: 8px; }
+
+/* Horizontal Tab rules removed since views are now in the sidebar */
+/* ── Agent Dispatch Modal ──────────────────────────── */
+.modal-lg { max-width: 800px; width: 95%; }
+.dispatch-content { display: flex; flex-direction: column; gap: 20px; padding: 10px 0; }
+.dispatch-intro { color: var(--text-muted); font-size: 14px; margin-bottom: 5px; }
+.dispatch-section { display: flex; flex-direction: column; gap: 8px; }
+.dispatch-section-header { display: flex; justify-content: space-between; align-items: center; }
+.dispatch-section-header label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
+.dispatch-code-block { 
+  background: rgba(0,0,0,0.2) !important; 
+  border: 1px solid var(--border); 
+  border-radius: var(--radius); 
+  padding: 16px; 
+  font-family: 'JetBrains Mono', 'Fira Code', monospace; 
+  font-size: 13px; 
+  line-height: 1.5; 
+  max-height: 300px; 
+  overflow-y: auto; 
+  white-space: pre-wrap; 
+  word-break: break-all;
+  color: var(--text-main);
+}
+.dispatch-cli-block {
+  background: var(--bg-input);
+  color: var(--col-in-progress);
+  padding: 12px 16px;
+  border-radius: var(--radius);
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 13px;
+  display: block;
+  border-left: 4px solid var(--accent);
+  overflow-x: auto;
+}
+
+/* ── Tab Panels ───────────────────── */
+.tab-panel{display:none;flex:1;overflow-y:auto}
+.tab-panel.active{display:flex;flex-direction:column}
+
+/* ── Kanban Board ─────────────────── */
+.board{display:flex;gap:16px;padding:20px;flex:1;overflow-x:auto;overflow-y:hidden;align-content:start}
+.column{background:var(--bg-column);border-radius:var(--radius);border:1px solid var(--border);display:flex;flex-direction:column;max-height:calc(100vh - 160px);min-width:300px;width:300px;flex-shrink:0;}
+.column.drag-over{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
+.column.drag-blocked{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger);opacity:.6}
+.column-header{display:flex;align-items:center;gap:8px;padding:14px 16px 10px;flex-shrink:0}
+.column-indicator{width:8px;height:8px;border-radius:50%}
+.column-indicator.backlog{background:var(--col-backlog)}
+.column-indicator.in-progress{background:var(--col-in-progress)}
+.column-indicator.review{background:var(--col-review)}
+.column-indicator.done{background:var(--col-done)}
+.column-title{font-size:13px;font-weight:600}
+.column-count{margin-left:auto;font-size:11px;background:var(--bg-card);border-radius:10px;padding:1px 7px;color:var(--text-secondary)}
+.card-list{flex:1;overflow-y:auto;padding:6px 10px 10px;display:flex;flex-direction:column;gap:8px;min-height:60px}
+
+/* ── Task Card ────────────────────── */
+.task-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:12px;cursor:grab;transition:all .15s}
+.task-card:hover{background:var(--bg-card-hover);border-color:var(--text-muted)}
+.task-card.dragging{opacity:.4;cursor:grabbing}
+.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
+.card-title{font-size:13px;font-weight:600;line-height:1.4;flex:1}
+.card-actions{display:none;gap:4px;flex-shrink:0}
+.task-card:hover .card-actions{display:flex}
+.card-action-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:3px;border-radius:4px}
+.card-action-btn:hover{color:var(--text-primary);background:var(--btn-icon-hover-bg)}
+.card-description{font-size:12px;color:var(--text-secondary);margin-top:6px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.card-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
+.card-agent-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--text-secondary);background:var(--card-agent-bg);padding:2px 8px;border-radius:10px}
+.card-agent-dot{width:6px;height:6px;border-radius:50%}
+.card-skill-badge{font-size:10px;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);padding:2px 8px;border-radius:10px}
+.card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
+.card-time{font-size:11px;color:var(--text-muted)}
+.priority-badge{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:4px}
+.priority-low{background:rgba(63,185,80,.15);color:#3fb950}
+.priority-medium{background:rgba(210,153,34,.15);color:#d29922}
+.priority-high{background:rgba(248,81,73,.15);color:#f85149}
+.priority-urgent{background:rgba(188,140,255,.2);color:#bc8cff}
+.drop-placeholder{height:40px;border:2px dashed var(--accent);border-radius:var(--radius);background:rgba(88,166,255,.06);margin:4px 0}
+.empty-state{display:flex;flex-direction:column;align-items:center;padding:24px 16px;color:var(--text-muted);font-style:italic;gap:6px}
+.empty-state-icon{font-size:24px;opacity:.5}
+.empty-state-text{font-size:12px}
+
+/* ── Dispatch Badge & Button ─────── */
+.dispatch-badge{font-size:10px;font-weight:600;padding:2px 8px;border-radius:10px;display:inline-flex;align-items:center;gap:3px}
+.dispatch-badge.dispatched{background:rgba(63,185,80,.15);color:#3fb950}
+.dispatch-badge.failed{background:rgba(248,81,73,.15);color:#f85149;cursor:help}
+.card-action-btn.dispatch{color:var(--col-done)}
+.card-action-btn.dispatch:hover{color:#3fb950;background:rgba(63,185,80,.12)}
+
+/* ── History Timeline ─────────────── */
+.timeline-container{padding:20px;max-width:800px;width:100%}
+.timeline-header,.deploys-header,.changelog-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
+.timeline-header h3,.deploys-header h3,.changelog-header h3{font-size:16px;font-weight:600}
+.timeline-count{font-size:12px;color:var(--text-secondary)}
+.timeline{display:flex;flex-direction:column;gap:0}
+.timeline-item{display:flex;gap:12px;padding:12px 0;border-left:2px solid var(--border);margin-left:12px;padding-left:16px;position:relative}
+.timeline-item::before{content:'';position:absolute;left:-5px;top:16px;width:8px;height:8px;border-radius:50%;background:var(--border)}
+.timeline-item.type-task_created::before{background:var(--col-done)}
+.timeline-item.type-task_moved::before{background:var(--col-in-progress)}
+.timeline-item.type-task_done::before{background:var(--col-done)}
+.timeline-item.type-task_deleted::before{background:var(--danger)}
+.timeline-item.type-deploy_staging::before{background:var(--deploy-pending)}
+.timeline-item.type-deploy_production::before{background:var(--deploy-success)}
+.timeline-item.type-rollback::before{background:var(--deploy-rollback)}
+.timeline-item.type-project_created::before{background:var(--accent)}
+.timeline-item.type-task_dispatched::before{background:var(--col-done)}
+.timeline-item.type-changelog_added::before{background:var(--col-review)}
+.timeline-icon{font-size:16px;flex-shrink:0;width:24px;text-align:center}
+.timeline-content{flex:1}
+.timeline-message{font-size:13px;line-height:1.5}
+.timeline-meta{font-size:11px;color:var(--text-muted);margin-top:4px;display:flex;gap:10px;align-items:center}
+.timeline-agent{display:inline-flex;align-items:center;gap:4px}
+.timeline-agent-dot{width:6px;height:6px;border-radius:50%;display:inline-block}
+.timeline-empty{text-align:center;padding:40px;color:var(--text-muted);font-size:13px}
+
+/* ── Deploy Cards ─────────────────── */
+.deploys-container{padding:20px;max-width:900px;width:100%}
+.deploy-list{display:flex;flex-direction:column;gap:10px}
+.deploy-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;align-items:center;gap:16px;transition:border-color .15s}
+.deploy-card:hover{border-color:var(--text-muted)}
+.deploy-status-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
+.deploy-status-dot.success{background:var(--deploy-success)}
+.deploy-status-dot.failed{background:var(--deploy-failed)}
+.deploy-status-dot.pending{background:var(--deploy-pending)}
+.deploy-status-dot.running{background:var(--deploy-running)}
+.deploy-status-dot.rolled_back{background:var(--deploy-rollback)}
+.deploy-info{flex:1;min-width:0}
+.deploy-message{font-size:13px;font-weight:600}
+.deploy-detail{font-size:12px;color:var(--text-secondary);margin-top:4px;display:flex;gap:12px;flex-wrap:wrap}
+.deploy-env-badge{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:4px}
+.deploy-env-badge.staging{background:rgba(210,153,34,.15);color:#d29922}
+.deploy-env-badge.production{background:rgba(63,185,80,.15);color:#3fb950}
+.deploy-status-badge{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:4px}
+.deploy-status-badge.success{background:rgba(63,185,80,.15);color:#3fb950}
+.deploy-status-badge.failed{background:rgba(248,81,73,.15);color:#f85149}
+.deploy-status-badge.pending{background:rgba(210,153,34,.15);color:#d29922}
+.deploy-status-badge.running{background:rgba(88,166,255,.15);color:#58a6ff}
+.deploy-status-badge.rolled_back{background:rgba(188,140,255,.15);color:#bc8cff}
+.deploy-actions{display:flex;gap:6px;flex-shrink:0}
+.deploy-empty{text-align:center;padding:40px;color:var(--text-muted);font-size:13px}
+.deploy-card.is-rollback{border-left:3px solid var(--deploy-rollback)}
+
+/* ── Changelog ────────────────────── */
+.changelog-container{padding:20px;max-width:800px;width:100%}
+.changelog-list{display:flex;flex-direction:column;gap:16px}
+.changelog-entry{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px}
+.changelog-version{display:flex;align-items:center;gap:10px;margin-bottom:8px}
+.changelog-version-badge{font-size:12px;font-weight:700;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);padding:3px 10px;border-radius:var(--radius-sm)}
+.changelog-title{font-size:14px;font-weight:600}
+.changelog-date{font-size:11px;color:var(--text-muted);margin-left:auto}
+.changelog-changes{list-style:none;padding:0;margin:0}
+.changelog-changes li{font-size:13px;color:var(--text-secondary);padding:4px 0 4px 16px;position:relative;line-height:1.5}
+.changelog-changes li::before{content:'•';position:absolute;left:0;color:var(--accent)}
+.changelog-empty{text-align:center;padding:40px;color:var(--text-muted);font-size:13px}
+
+/* ── Buttons ──────────────────────── */
+.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:none;border-radius:var(--radius-sm);font-family:var(--font);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s}
+.btn-primary{background:var(--accent);color:#fff}
+.btn-primary:hover{background:var(--accent-hover)}
+.btn-ghost{background:transparent;color:var(--text-secondary);border:1px solid var(--border)}
+.btn-ghost:hover{color:var(--text-primary);border-color:var(--text-muted)}
+.btn-danger{background:var(--danger);color:#fff}
+.btn-danger:hover{background:var(--danger-hover)}
+.btn-sm{padding:6px 12px;font-size:12px}
+.btn-icon{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:6px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center}
+.btn-icon:hover{color:var(--text-primary);background:var(--btn-icon-hover-bg)}
+.btn-rollback{padding:4px 10px;font-size:11px;border-radius:4px;font-family:var(--font);cursor:pointer;background:rgba(188,140,255,.1);color:#bc8cff;border:1px solid rgba(188,140,255,.3);font-weight:500}
+.btn-rollback:hover{background:rgba(188,140,255,.2)}
+
+/* ── Refresh spin ─────────────────── */
+@keyframes spin{to{transform:rotate(360deg)}}
+.refreshing svg{animation:spin .6s linear}
+
+/* ── Sync Status Indicator ────────── */
+.sync-status{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;background:color-mix(in srgb,var(--col-done) 8%,transparent);border:1px solid color-mix(in srgb,var(--col-done) 15%,transparent);transition:all .3s ease}
+.sync-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;transition:background .3s ease}
+.sync-dot.synced{background:var(--col-done);box-shadow:0 0 4px color-mix(in srgb,var(--col-done) 40%,transparent)}
+.sync-dot.syncing{background:var(--col-in-progress);animation:syncPulse 1s ease-in-out infinite}
+.sync-dot.error{background:var(--danger);box-shadow:0 0 4px color-mix(in srgb,var(--danger) 40%,transparent)}
+.sync-label{font-size:11px;font-weight:500;color:var(--text-secondary);white-space:nowrap}
+@keyframes syncPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
+
+/* ── Auto-Refresh Toggle ──────────── */
+.auto-refresh-toggle{position:relative;transition:all .2s ease}
+.auto-refresh-toggle.active{color:var(--col-done)!important;background:color-mix(in srgb,var(--col-done) 12%,transparent)}
+.auto-refresh-toggle.active:hover{background:color-mix(in srgb,var(--col-done) 20%,transparent)}
+.auto-refresh-toggle:not(.active){opacity:.5}
+
+/* ── Modal ────────────────────────── */
+.modal-overlay{display:none;position:fixed;inset:0;background:var(--modal-backdrop);backdrop-filter:blur(4px);z-index:100;align-items:center;justify-content:center}
+.modal-overlay.active{display:flex}
+.modal{background:var(--bg-modal);border:1px solid var(--border);border-radius:12px;width:480px;max-width:90vw;padding:24px;box-shadow:var(--shadow)}
+.modal-sm{width:400px}
+.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
+.modal-title{font-size:16px;font-weight:600}
+.modal-close{background:none;border:none;color:var(--text-muted);font-size:22px;cursor:pointer;padding:4px 8px}
+.modal-close:hover{color:var(--text-primary)}
+.form-group{margin-bottom:14px}
+.form-group label{display:block;font-size:12px;font-weight:500;color:var(--text-secondary);margin-bottom:6px}
+.form-group input,.form-group textarea,.form-group select{width:100%;padding:9px 12px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font);font-size:13px;outline:none;transition:border .15s}
+.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--accent)}
+.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
+.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
+.delete-message{font-size:14px;color:var(--text-secondary);padding:8px 0 4px}
+
+/* ── Toast ────────────────────────── */
+.toast-container{position:fixed;bottom:20px;right:20px;z-index:200;display:flex;flex-direction:column-reverse;gap:8px}
+.toast{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);font-size:13px;box-shadow:var(--shadow);animation:toastIn .3s}
+@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
+.toast-out{animation:toastOut .3s forwards}
+@keyframes toastOut{to{opacity:0;transform:translateY(10px)}}
+.toast-icon{font-size:14px}
+.toast-success{border-color:var(--col-done)}
+.toast-error{border-color:var(--danger)}
+.toast-info{border-color:var(--accent)}
+
+/* ── Responsive ───────────────────── */
+@media(max-width:900px){
+  .board{scroll-snap-type:x mandatory;padding-bottom:24px}
+  .column{min-width:85vw;width:85vw;max-width:320px;scroll-snap-align:center}
+  .sidebar{width:0;min-width:0;position:fixed;height:100%;z-index:50}
+  .sidebar:not(.collapsed){width:240px;min-width:240px;box-shadow:var(--shadow)}
+  .sidebar-close{display:block}
+  .btn-more-menu { display: flex; }
+  .header-actions { 
+    display: none; position: absolute; top: 100%; right: 0; margin-top: 8px;
+    background: var(--bg-card); border: 1px solid var(--border); 
+    border-radius: var(--radius); padding: 8px; flex-direction: column; 
+    box-shadow: var(--shadow); z-index: 100; align-items: stretch;
+  }
+  .header-actions.active { display: flex; }
+}
+
+@media(max-width:600px){
+  .hide-xs { display: none !important; }
+}
+@media(max-width:400px){
+  .hide-sm { display: none !important; }
+}
+
+/* ── Theme Toggle ─────────────────── */
+.theme-toggle{position:relative;background:none;border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;padding:5px 8px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;gap:4px;font-size:12px;font-family:var(--font);font-weight:500;transition:all .15s}
+.theme-toggle:hover{color:var(--text-primary);border-color:var(--text-muted);background:var(--btn-icon-hover-bg)}
+.theme-toggle svg{transition:transform .3s ease}
+.theme-toggle:active svg{transform:rotate(30deg)}
+
+/* Theme transitions for containers */
+.sidebar,.header,.tab-nav,.column,.task-card,.modal,.toast,.deploy-card,.changelog-entry,.timeline-item{transition:background-color .2s ease,border-color .2s ease,color .2s ease}
+
+/* ── Quick Transition Buttons ───── */
+.card-transitions{display:none;gap:4px;margin-top:8px;flex-wrap:wrap}
+.task-card:hover .card-transitions{display:flex}
+.transition-btn{font-size:10px;font-weight:600;padding:3px 8px;border-radius:4px;border:none;cursor:pointer;font-family:var(--font);transition:all .15s;display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
+.transition-btn.transition-forward{background:color-mix(in srgb,var(--col-in-progress) 12%,transparent);color:var(--col-in-progress);border:1px solid color-mix(in srgb,var(--col-in-progress) 25%,transparent)}
+.transition-btn.transition-forward:hover{background:color-mix(in srgb,var(--col-in-progress) 22%,transparent)}
+.transition-btn.transition-done{background:color-mix(in srgb,var(--col-done) 12%,transparent);color:var(--col-done);border:1px solid color-mix(in srgb,var(--col-done) 25%,transparent)}
+.transition-btn.transition-done:hover{background:color-mix(in srgb,var(--col-done) 22%,transparent)}
+.transition-btn.transition-back{background:color-mix(in srgb,var(--col-backlog) 12%,transparent);color:var(--text-secondary);border:1px solid color-mix(in srgb,var(--col-backlog) 25%,transparent)}
+.transition-btn.transition-back:hover{background:color-mix(in srgb,var(--col-backlog) 22%,transparent)}
+
+/* ── Stuck Task Indicator ────────── */
+@keyframes stuckPulse{0%,100%{border-color:rgba(210,153,34,.4)}50%{border-color:rgba(210,153,34,.8)}}
+.task-card.stuck{border-color:rgba(210,153,34,.5);animation:stuckPulse 2s ease-in-out infinite;background:color-mix(in srgb,var(--col-review) 5%,var(--bg-card))}
+
+/* ── Stuck Banner ────────────────── */
+#stuck-banner{margin:12px 20px 0;padding:12px 16px;background:color-mix(in srgb,var(--col-review) 10%,var(--bg-card));border:1px solid color-mix(in srgb,var(--col-review) 30%,var(--border));border-radius:var(--radius);border-left:4px solid var(--col-review)}
+.stuck-banner-content{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
+.stuck-banner-icon{font-size:16px;flex-shrink:0}
+.stuck-banner-text{font-size:12px;color:var(--text-secondary);flex:1;min-width:200px}
+.stuck-banner-text strong{color:var(--col-review)}
+.stuck-banner-actions{display:flex;gap:6px}
+.stuck-btn{font-size:11px;font-weight:600;padding:4px 10px;border-radius:4px;border:none;cursor:pointer;font-family:var(--font);transition:all .15s}
+.stuck-btn.review{background:color-mix(in srgb,var(--col-review) 15%,transparent);color:var(--col-review);border:1px solid color-mix(in srgb,var(--col-review) 30%,transparent)}
+.stuck-btn.review:hover{background:color-mix(in srgb,var(--col-review) 25%,transparent)}
+.stuck-btn.done{background:color-mix(in srgb,var(--col-done) 15%,transparent);color:var(--col-done);border:1px solid color-mix(in srgb,var(--col-done) 30%,transparent)}
+.stuck-btn.done:hover{background:color-mix(in srgb,var(--col-done) 25%,transparent)}
+.stuck-btn.backlog{background:color-mix(in srgb,var(--col-backlog) 15%,transparent);color:var(--text-secondary);border:1px solid color-mix(in srgb,var(--col-backlog) 30%,transparent)}
+.stuck-btn.backlog:hover{background:color-mix(in srgb,var(--col-backlog) 25%,transparent)}
+
+/* ── Timeline extension ──────────── */
+.timeline-item.type-task_transitioned::before{background:var(--col-review)}
+
+/* ── Brain Tab ───────────────────── */
+.brain-container{padding:20px;max-width:960px;width:100%;display:flex;flex-direction:column;gap:20px}
+.brain-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
+.brain-stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden;transition:border-color .15s,transform .15s}
+.brain-stat-card:hover{border-color:var(--accent);transform:translateY(-1px)}
+.brain-stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
+.brain-stat-card.stat-learnings::before{background:linear-gradient(90deg,#f85149,#ff9966)}
+.brain-stat-card.stat-decisions::before{background:linear-gradient(90deg,#58a6ff,#79c0ff)}
+.brain-stat-card.stat-phase::before{background:linear-gradient(90deg,#3fb950,#56d364)}
+.brain-stat-card.stat-updated::before{background:linear-gradient(90deg,#bc8cff,#d2a8ff)}
+.brain-stat-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--text-muted)}
+.brain-stat-value{font-size:28px;font-weight:700;line-height:1}
+.brain-stat-detail{font-size:11px;color:var(--text-secondary)}
+
+.brain-section{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
+.brain-section-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);gap:12px}
+.brain-section-header h3{font-size:14px;font-weight:600;white-space:nowrap}
+.brain-section-actions{display:flex;align-items:center;gap:8px}
+.brain-search{padding:6px 12px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font);font-size:12px;outline:none;width:220px;transition:border .15s}
+.brain-search:focus{border-color:var(--accent)}
+
+/* Learning cards */
+.brain-learnings-list,.brain-decisions-list{display:flex;flex-direction:column}
+.brain-learning-card,.brain-decision-card{padding:14px 16px;border-bottom:1px solid var(--border-light);display:flex;flex-direction:column;gap:6px;transition:background .15s;cursor:pointer}
+.brain-learning-card:last-child,.brain-decision-card:last-child{border-bottom:none}
+.brain-learning-card:hover,.brain-decision-card:hover{background:var(--bg-card-hover)}
+.brain-learning-header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
+.brain-learning-what{font-size:13px;font-weight:600;color:var(--danger);flex:1;line-height:1.4;display:flex;align-items:flex-start;gap:6px}
+.brain-learning-what::before{content:'❌';flex-shrink:0}
+.brain-learning-body{display:none;flex-direction:column;gap:6px;padding-left:22px;margin-top:4px}
+.brain-learning-card.expanded .brain-learning-body{display:flex}
+.brain-learning-why,.brain-learning-fix{font-size:12px;line-height:1.5;color:var(--text-secondary)}
+.brain-learning-why::before{content:'Why: ';font-weight:600;color:var(--text-muted)}
+.brain-learning-fix{color:var(--col-done)}
+.brain-learning-fix::before{content:'Fix: ';font-weight:600}
+.brain-learning-meta{font-size:11px;color:var(--text-muted);display:flex;gap:10px;align-items:center}
+.brain-delete-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:11px;padding:4px 8px;border-radius:4px;opacity:0;transition:all .15s;flex-shrink:0}
+.brain-learning-card:hover .brain-delete-btn,.brain-decision-card:hover .brain-delete-btn{opacity:1}
+.brain-delete-btn:hover{color:var(--danger);background:rgba(248,81,73,.1)}
+
+/* Decision cards */
+.brain-decision-header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
+.brain-decision-what{font-size:13px;font-weight:600;color:var(--text-primary);flex:1;line-height:1.4;display:flex;align-items:flex-start;gap:6px}
+.brain-decision-what::before{content:'📌';flex-shrink:0}
+.brain-decision-rationale{font-size:12px;color:var(--text-secondary);line-height:1.5;padding-left:22px}
+.brain-decision-meta{font-size:11px;color:var(--text-muted);display:flex;gap:10px;align-items:center;padding-left:22px}
+
+/* Continuity status */
+.brain-continuity-content{padding:16px}
+.brain-continuity-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
+.brain-continuity-item{display:flex;flex-direction:column;gap:2px}
+.brain-continuity-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted)}
+.brain-continuity-value{font-size:13px;color:var(--text-primary);line-height:1.4}
+
+/* Empty states */
+.brain-empty{text-align:center;padding:32px 16px;color:var(--text-muted);font-size:13px}
+.brain-empty-icon{font-size:32px;margin-bottom:8px;opacity:.5}
+.brain-init-btn{margin-top:12px;display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);font-family:var(--font);font-size:13px;font-weight:500;cursor:pointer;transition:background .15s}
+.brain-init-btn:hover{background:var(--accent-hover)}
+
+/* Phase colors */
+.phase-planning{color:#58a6ff}.phase-executing{color:#d29922}.phase-testing{color:#bc8cff}
+.phase-deploying{color:#3fb950}.phase-reviewing{color:#79c0ff}.phase-idle{color:var(--text-muted)}
+
+@media(max-width:900px){.brain-stats{grid-template-columns:repeat(2,1fr)}.brain-continuity-grid{grid-template-columns:1fr}}
+

package/skills/cm-brainstorm-idea/SKILL.md

@@ -338,25 +338,27 @@ User says "No" (Skip preview):
 
 > **Goal:** Create a clean handoff document that `cm-planning` can use immediately.
 
-#### Handoff Output: `brainstorm-output.md`
+#### Handoff Output: OpenSpec Proposal
 
-Save to `docs/brainstorm/` or project root:
+Save to `openspec/changes/[initiative-name]/proposal.md` (Fission-AI OpenSpec format):
 
 ```markdown
-# Brainstorm Output: [Initiative Name]
+# Proposal: [Initiative Name]
 Generated by: cm-brainstorm-idea
 Date: [date]
 
-## Qualified Problem
+## Why we're doing this
+### Qualified Problem
 [From Phase 2]
 
-## 9 Windows Analysis
+### 9 Windows Analysis
 [Summary table from Phase 2]
 
-## Options Evaluated
+## What's changing
+### Options Evaluated
 [Summary from Phase 3-4]
 
-## Recommendation
+### Recommendation
 [From Phase 4]
 
 ## Next Steps for cm-planning:

package/skills/cm-codeintell/SKILL.md

@@ -318,7 +318,7 @@ RE-GENERATE when:
 
 STORE at:
   → .cm/architecture.mmd (Mermaid source)
-  → Include in brainstorm-output.md when relevant
+  → Include in proposal.md when relevant
 ```
 
 ### Integration with Pencil MCP
@@ -436,7 +436,7 @@ NEW addition to Phase A:
     2. If total impact > 20 files:
        → Flag as HIGH RISK in plan
        → Recommend cm-tdd coverage for all impacted callers
-    3. Include impact summary in implementation_plan.md
+    3. Include impact summary in OpenSpec `design.md`
 ```
 
 ### cm-debugging (Trace Analysis — enhanced)

package/skills/cm-dashboard/SKILL.md

@@ -7,7 +7,7 @@ description: Open visual Dashboard to track work status (Simulated Kanban board)
 
 When this command is called, the AI Assistant should:
 
-1. **Check status:** Find and read the `task.md` (or `cm-tasks.json`) file in the current project directory (or artifacts directory).
+1. **Check status:** Find and read the OpenSpec `openspec/changes/[init]/tasks.md` (and synced `cm-tasks.json`) file in the current project directory (or artifacts directory).
 2. **Visual display:** Aggregate tasks and render them as a Kanban board (Markdown table) with 3 columns:
    - **🔴 TO DO** (Not started)
    - **🟡 IN PROGRESS** (In progress)

package/skills/cm-execution/SKILL.md

@@ -61,12 +61,13 @@ Have a plan with independent tasks?
 ## Mode A: Batch Execution
 
 ### Process
-1. **Load plan** → review critically → raise concerns
+1. **Load plan** from Fission-AI OpenSpec (`openspec/changes/[initiative-name]/tasks.md` and `design.md`) → review critically → raise concerns
 2. **Execute batch** (default: 3 tasks)
    - Mark in_progress → follow steps → verify → mark complete
 3. **Report** → show what was done + verification output
 4. **Continue** → apply feedback → next batch
 5. **Complete** → use `cm-code-review` to finish
+6. **Archive** → After all tasks complete, manually move the OpenSpec folder to `openspec/changes/archive/[date]-[name]/`
 
 ### Rules
 - Follow plan steps exactly
@@ -79,7 +80,7 @@ Have a plan with independent tasks?
 ## Mode B: Subagent-Driven Development
 
 ### Process
-1. **Read plan** → extract ALL tasks with full text
+1. **Read plan** from `openspec/changes/[initiative-name]/tasks.md` → extract ALL tasks with full text
 2. **Per task:**
    - Dispatch implementer subagent with full task text
    - Answer subagent questions if any
@@ -179,6 +180,7 @@ LOOP until backlog empty or user interrupts:
 
 After EVERY phase, you MUST:
 1. Read current `cm-tasks.json`
+2. Sync state from `openspec/changes/[initiative-name]/tasks.md` (Keep both human-readable MD and AI-executable JSON in parallel sync)
 2. Find the active task by `id`
 3. Update `status`, `logs[]`, timestamps
 4. Recalculate `stats` object:

package/skills/cm-how-it-work/SKILL.md

@@ -49,7 +49,7 @@ The **CodyMaster (CM)** kit transforms ideas into production code through 13 spe
     1. Scan codebase with **code intelligence** (AST graph + architecture diagram via `cm-codeintell`).
     2. Interview user and analyze with 9 Windows (TRIZ).
     3. Propose 2-3 options, evaluate multi-dimensionally, recommend the best option.
-- **Output:** `brainstorm-output.md` — qualified problem + recommended option → passes to `cm-planning`.
+- **Output:** OpenSpec `openspec/changes/[initiative]/proposal.md` — qualified problem + recommended option → passes to `cm-planning`.
 
 ---
 
@@ -60,8 +60,8 @@ The **CodyMaster (CM)** kit transforms ideas into production code through 13 spe
 - **Action:**
     1. Brainstorm requirements and analyze i18n.
     2. Propose architecture and tech stack.
-    3. Write detailed `implementation_plan.md`.
-- **Output:** Design documentation and execution plan approved by user.
+    3. Write detailed OpenSpec docs (`openspec/changes/[init]/design.md` and `tasks.md`).
+- **Output:** Design docs and execution plan (OpenSpec tasks) approved by user.
 
 ---
 
@@ -161,7 +161,7 @@ The **CodyMaster (CM)** kit transforms ideas into production code through 13 spe
 The kit supports autonomous mode by applying the **Reason → Act → Reflect → Verify (RARV)** loop.
 
 ### How to Use the Workflow:
-1. **`/cm-start [objective]`**: Start work. The system will automatically create `cm-tasks.json`, break down tasks, launch the tracking interface, and autonomously use CM skills to complete them.
+1. **`/cm-start [objective]`**: Start work. The system will automatically initialize the OpenSpec structure (`openspec/changes/[objective]/`), break down tasks into `tasks.md` and sync with `cm-tasks.json`, launch the tracking interface, and autonomously use CM skills to complete them.
 2. **`/cm-dashboard`**: Open the visual tracking Dashboard in browser (shows Kanban board, reasoning log, and progress).
 3. **`/cm-status`**: View quick progress summary in Terminal.
 

package/skills/cm-planning/SKILL.md

@@ -33,6 +33,7 @@ description: "You MUST use this before any creative work or multi-step task. Exp
    - Must-haves vs nice-to-haves
    - Edge cases to handle
    - Edge cases to explicitly NOT handle
+   - **Output to:** `openspec/changes/[initiative-name]/specs/`
 
 4. **Design** — How should it work?
    - Data flow
@@ -47,7 +48,10 @@ description: "You MUST use this before any creative work or multi-step task. Exp
 - Skipping scope definition
 - "It's simple, no need to plan"
 
-## Phase B: Write Implementation Plan
+## Phase B: Write Implementation Plan (OpenSpec Format)
+
+> **Standard:** Fission-AI OpenSpec (`https://github.com/Fission-AI/OpenSpec/`)
+> Output artifacts exactly to `openspec/changes/[initiative-name]/` to ensure human/AI alignment.
 
 ### When to Write a Plan
 
@@ -56,16 +60,16 @@ description: "You MUST use this before any creative work or multi-step task. Exp
 - Changes affect other components
 - User explicitly asks for a plan
 
-### Plan Structure
+### OpenSpec Artifacts to Generate
 
+**1. `openspec/changes/[initiative-name]/design.md`**
 ```markdown
-# [Goal]
+# Design: [Goal]
 
-## Context
-What and why.
+## Context & Technical Approach
+Why this approach and how it works.
 
 ## Proposed Changes
-
 ### [Component/File]
 - What changes
 - Why this approach
@@ -74,6 +78,15 @@ What and why.
 How to verify it works.
 ```
 
+**2. `openspec/changes/[initiative-name]/tasks.md`**
+```markdown
+# Implementation Checklist
+- [ ] 1.1 First component setup
+- [ ] 1.2 First component logic
+- [ ] 2.1 Next component integration
+- [ ] Verification testing
+```
+
 ### Plan Rules
 
 ```

package/skills/cm-project-bootstrap/SKILL.md

@@ -833,6 +833,7 @@ docs/plans/       — Implementation plans
 3. i18n extraction: MAX 30 strings per batch
 4. Run test:gate before every deploy
 5. Check `.project-identity.json` for deploy targets
+6. Use `qmd` (cm-deep-search) for semantic codebase search. Ensure `.qmd` index is fresh.
 ```
 
 ### Step 2: Git Safety Protocol

package/skills/cm-reactor/SKILL.md

@@ -196,7 +196,7 @@ For each migration step:
   5. If tests fail → STOP, diagnose, fix before next step
   
 Progress tracking:
-  → Update cm-tasks.json with each completed migration step
+  → Update OpenSpec `tasks.md` and `cm-tasks.json` with each completed migration step
   → Update CONTINUITY.md with migration status
 ```