clideck 1.26.0 → 1.26.2

package/plugins/autopilot/prompt.md

@@ -0,0 +1,68 @@
+You are an autonomous dispatcher for project: {{projectName}}.
+
+YOUR ROLE
+You control workflow routing between agents.
+You do not do the work yourself.
+You do not rewrite agent output.
+You do not send summaries, edits, or instructions of your own to agents.
+The system forwards existing agent output verbatim. Your job is to choose the best next handoff.
+
+IMPORTANT
+You are not a final judge of whether work is good or bad.
+But you must understand the project, the goals, the current state of the work, and what each agent is responsible for, so you can decide the best next routing move.
+
+This means:
+- You should understand what the project is trying to achieve.
+- You should understand what each agent just produced.
+- You should understand what kind of specialist should act next.
+- You may decide that the next step is not the most obvious direct handoff if another specialist should look first.
+- Example: if a creative output needs analytical grounding, the right next move may be to route it to an analyst before routing it back to the creative.
+- Your task is not to judge quality for the team. Your task is to route work to the agent best positioned to move the project forward.
+
+AGENTS
+{{agents}}
+
+For each agent, treat their role description as the source of truth for:
+- what they are responsible for
+- what they should not do
+- what kind of outputs they should receive
+
+STATE
+You will receive structured workflow state describing:
+- which agents are WORKING or IDLE
+- which outputs are new
+- which outputs were already routed, and to whom
+- what the last route was
+- which role Autopilot is currently waiting on
+- whether the workflow appears stale
+
+TOOLS
+- route(from, to): Forward one agent's existing output to another idle agent.
+- notify_user(reason): Stop autopilot and notify the user. Use light markdown: **bold** for key terms, `code` for file/function names, bullet lists for summaries. Keep it concise (2-5 sentences). Use ONLY when the work is naturally complete, truly blocked, or requires human input.
+
+RULES
+- Call exactly ONE tool per response.
+- Read the workflow state first, then read the agent outputs.
+- Prefer routing new output over previously routed output.
+- Use the project goal and current state to decide the best next specialist.
+- Use role responsibilities and restrictions when choosing the next receiver.
+- Do not route to an agent whose role makes the handoff inappropriate.
+- Do not invent new instructions for agents. You only choose who receives whose output.
+
+DO NOT USE notify_user UNLESS ABSOLUTELY NECESSARY
+- Do NOT ask the user if you should continue. Do NOT notify them with requests like "Please resume agent X" or "Should I keep going?" or "Is this a good stopping point?"
+- The user may be away from the computer and expects the agents to keep working until the task is naturally complete.
+- You are autonomous. If you are unsure how to proceed, re-read the workflow state and the latest agent outputs, think differently, and route again.
+- Repeat agents with the same output if needed, unless the routing state shows that the same handoff is being repeated without progress.
+- You steer between agents until the task is complete or the user interrupts you, period.
+
+HOW TO THINK
+For each decision, reason in this order:
+1. What is the project trying to achieve right now?
+2. What changed most recently?
+3. Which specialist is best suited for the next step?
+4. Has this output already been consumed by that role?
+5. Is there a better intermediate handoff before sending it to the most obvious role?
+
+GOAL
+Keep the work moving until the task is complete or truly blocked, by routing each output to the most appropriate next agent.

package/public/index.html

@@ -22,16 +22,19 @@
       --color-session-icon-bg: #f7f5f3;
     }
     .session-row,
-    .resumable-row {
+    .resumable-row,
+    .pill-row {
       margin: 2px 8px;
       border-radius: 10px;
       transition: background-color 0.18s ease;
     }
     .session-row:hover,
-    .resumable-row:hover {
+    .resumable-row:hover,
+    .pill-row:hover {
       background: var(--color-list-row-hover) !important;
     }
-    .session-row.active-session {
+    .session-row.active-session,
+    .pill-row.active-session {
       background: var(--color-list-row-active) !important;
     }
     .project-group {
@@ -144,6 +147,9 @@
     <button class="rail-btn w-9 h-9 flex items-center justify-center rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-800/50 transition-colors" data-panel="prompts" title="Prompt Library">
       <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/></svg>
     </button>
+    <button class="rail-btn w-9 h-9 flex items-center justify-center rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-800/50 transition-colors" data-panel="roles" title="Roles">
+      <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
+    </button>
     <button class="rail-btn w-9 h-9 flex items-center justify-center rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-800/50 transition-colors" data-panel="plugins" title="Plugins">
       <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v4m0 12v4M2 12h4m12 0h4"/><circle cx="12" cy="12" r="3"/><path d="M12 8V6m0 12v-2M8 12H6m12 0h-2"/></svg>
     </button>
@@ -194,6 +200,8 @@
     </div>
     <!-- Prompts panel (rendered by prompts.js) -->
     <div id="panel-prompts" class="hidden flex-col flex-1 min-h-0"></div>
+    <!-- Roles panel (rendered by roles.js) -->
+    <div id="panel-roles" class="hidden flex-col flex-1 min-h-0"></div>
     <!-- Plugins panel -->
     <div id="panel-plugins" class="hidden flex-col flex-1 min-h-0">
       <div class="flex items-center px-4 py-3 border-b border-slate-700/50">

package/public/js/app.js

@@ -1,6 +1,6 @@
 import { state, send } from './state.js';
 import { esc, binName } from './utils.js';
-import { addTerminal, removeTerminal, select, startRename, startProjectRename, setSessionTheme, openMenu, closeMenu, setStatus, updateMuteIndicator, updatePreview, markUnread, applyFilter, setTab, renderResumable, regroupSessions, toggleProjectCollapse, setSessionProject, estimateSize, restartComplete, positionMenu } from './terminals.js';
+import { addTerminal, removeTerminal, select, startRename, startProjectRename, setSessionTheme, openMenu, closeMenu, setStatus, updateMuteIndicator, updatePreview, markUnread, applyFilter, setTab, renderResumable, regroupSessions, toggleProjectCollapse, setSessionProject, estimateSize, restartComplete, positionMenu, addPill, updatePill, removePill, appendPillLog, setPillLogs, closePillLog } from './terminals.js';
 import { renderSettings, updateVersionFooter } from './settings.js';
 import { openCreator, closeCreator, refreshCreator } from './creator.js';
 import { handleDirsResponse, openFolderPicker } from './folder-picker.js';
@@ -12,6 +12,7 @@ import './nav.js';
 import { initDrag, wasDragging } from './drag.js';
 import { registerHotkey, unregisterHotkey, unregisterAllForPlugin } from './hotkeys.js';
 import { renderPrompts } from './prompts.js';
+import { renderRoles } from './roles.js';
 
 function connect() {
   state.ws = new WebSocket(`ws://${location.host}`);
@@ -19,7 +20,10 @@ function connect() {
   state.ws.onopen = () => {
     for (const [, e] of state.terms) { e.ro.disconnect(); e.term.dispose(); e.el.remove(); }
     state.terms.clear();
+    state.pills.clear();
+    state.activePill = null;
     document.getElementById('session-list').innerHTML = '';
+    document.getElementById('pill-log-panel')?.remove();
     state.active = null;
     document.getElementById('empty').style.display = 'flex';
     send({ type: 'remote.status' });
@@ -34,6 +38,7 @@ function connect() {
         regroupSessions();
         renderSettings();
         renderPrompts();
+        renderRoles();
         for (const [, entry] of state.terms) applyTheme(entry.term, entry.themeId);
         break;
       case 'themes':
@@ -202,6 +207,25 @@ function connect() {
       case 'plugins':
         loadPlugins(msg.list);
         break;
+      case 'pills':
+        state.pills.clear();
+        for (const p of msg.list) addPill(p);
+        break;
+      case 'pill.added':
+        addPill(msg.pill);
+        break;
+      case 'pill.updated':
+        updatePill(msg.pill);
+        break;
+      case 'pill.removed':
+        removePill(msg.id);
+        break;
+      case 'pill.log':
+        appendPillLog(msg.id, msg.entry);
+        break;
+      case 'pill.logs':
+        setPillLogs(msg.id, msg.logs);
+        break;
       case 'plugin.delete.error':
         showToast(`Failed to remove plugin: ${msg.error}`, { duration: 4000 });
         break;
@@ -247,6 +271,7 @@ mobileQuery.addEventListener('change', (e) => { if (!e.matches) closeMobileSideb
 
 // Sidebar events
 const sessionList = document.getElementById('session-list');
+sessionList.addEventListener('projects-rendered', () => renderProjectActions());
 
 sessionList.addEventListener('click', (e) => {
   closeCreator();
@@ -254,6 +279,7 @@ sessionList.addEventListener('click', (e) => {
 
   // Project header click — toggle collapse (skip if just finished a drag)
   const projHeader = e.target.closest('.project-header');
+  if (e.target.closest('.plugin-project-btn')) return; // handled by btn's own click listener
   if (projHeader && !e.target.closest('.project-menu-btn') && !wasDragging()) {
     toggleProjectCollapse(projHeader.dataset.projectId);
     return;
@@ -279,6 +305,9 @@ sessionList.addEventListener('click', (e) => {
     return;
   }
 
+  // Pill row click — handled by pill's own listener
+  if (e.target.closest('.pill-row')) return;
+
   const item = e.target.closest('.group');
   if (!item) return;
 
@@ -720,7 +749,7 @@ function renderPluginsPanel(list) {
       </div>
       <div class="plugin-body ${open ? '' : 'hidden'}">
         <div class="px-4 pb-3">
-          ${(p.settings || []).map(s => renderSettingField(p.id, s, p.settingValues[s.key] ?? s.default)).join('')}
+          ${(p.settings || []).map(s => renderSettingField(p.id, s, p.settingValues[s.key] ?? s.default, p.dynamicOptions)).join('')}
         </div>
       </div>
     </div>`;
@@ -756,11 +785,11 @@ function renderPluginsPanel(list) {
     if (el.type === 'checkbox') el.addEventListener('change', () => onChange(el.checked));
     else if (el.tagName === 'SELECT') el.addEventListener('change', () => onChange(el.value));
     else if (el.type === 'number') el.addEventListener('change', () => onChange(Number(el.value)));
-    else el.addEventListener('input', () => onChange(el.value));
+    else el.addEventListener('change', () => onChange(el.value));
   });
 }
 
-function renderSettingField(pluginId, setting, value) {
+function renderSettingField(pluginId, setting, value, dynamicOptions) {
   const id = `ps-${pluginId}-${setting.key}`;
   const attrs = `data-plugin="${esc(pluginId)}" data-setting="${esc(setting.key)}"`;
   const label = esc(setting.label || setting.key);
@@ -772,12 +801,17 @@ function renderSettingField(pluginId, setting, value) {
       <span class="text-xs text-slate-400">${label}</span>
     </label>${desc}`;
   }
-  if (setting.type === 'select') {
-    const opts = (setting.options || []).map(o => {
+  if (setting.type === 'select' || setting.type === 'dynamic-select') {
+    const source = setting.type === 'dynamic-select' ? (dynamicOptions?.[setting.key] || []) : (setting.options || []);
+    let opts = source.map(o => {
       const optVal = typeof o === 'object' ? o.value : o;
       const optLabel = typeof o === 'object' ? o.label : o;
       return `<option value="${esc(String(optVal))}" ${String(value) === String(optVal) ? 'selected' : ''}>${esc(String(optLabel))}</option>`;
     }).join('');
+    // Dynamic-select with no options yet: show the saved value so the control isn't blank
+    if (setting.type === 'dynamic-select' && !source.length && value) {
+      opts = `<option value="${esc(String(value))}" selected>${esc(String(value))}</option>`;
+    }
     return `<div class="mt-2">
       <label class="block text-xs text-slate-400 mb-1">${label}</label>
       <select id="${id}" ${attrs} class="w-full px-2 py-1.5 text-xs bg-slate-800 border border-slate-700 rounded-md text-slate-200 outline-none focus:border-blue-500 transition-colors">${opts}</select>
@@ -817,6 +851,15 @@ async function loadPlugins(list) {
 
   renderPluginsPanel(list);
 
+  // Store project-header actions from plugins (used by regroupSessions to render icons)
+  state.projectActions = [];
+  for (const plugin of list) {
+    for (const action of plugin.actions || []) {
+      if (action.slot === 'project-header') state.projectActions.push({ ...action, pluginId: plugin.id });
+    }
+  }
+  renderProjectActions();
+
   // Render server-registered toolbar actions — also clears stale client toolbar buttons
   const toolbar = document.getElementById('plugin-toolbar');
   toolbar.querySelectorAll('.plugin-btn').forEach(b => {
@@ -863,6 +906,30 @@ async function loadPlugins(list) {
   }
 }
 
+// Render plugin-registered project header action buttons into all project groups
+function renderProjectActions() {
+  const actions = state.projectActions || [];
+  for (const slot of document.querySelectorAll('.project-plugin-actions')) {
+    slot.innerHTML = '';
+    const projId = slot.closest('.project-header')?.dataset.projectId;
+    if (!projId) continue;
+    for (const action of actions) {
+      const btn = document.createElement('button');
+      btn.className = 'project-plugin-action plugin-project-btn opacity-0 group-hover:opacity-100 text-slate-600 hover:text-indigo-400 flex-shrink-0 transition-opacity p-0.5';
+      btn.title = action.title || '';
+      btn.innerHTML = action.icon || '';
+      btn.dataset.pluginId = action.pluginId;
+      btn.dataset.actionId = action.id;
+      btn.dataset.projectId = projId;
+      btn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        send({ type: `plugin.${action.pluginId}.${action.id}`, action: action.id, projectId: projId });
+      });
+      slot.appendChild(btn);
+    }
+  }
+}
+
 let saveTimer = null;
 function flashSaveIndicator() {
   const el = document.getElementById('save-indicator');

package/public/js/creator.js

@@ -74,7 +74,7 @@ function sortedPresets() {
   return [...agents, ...shell];
 }
 
-function createFromPreset(preset, sessionName, cwd, projectId) {
+function createFromPreset(preset, sessionName, cwd, projectId, roleId) {
   // Find existing command matching this preset
   let cmd = findCommandForPreset(preset);
   // Auto-create the command if it doesn't exist yet
@@ -99,7 +99,7 @@ function createFromPreset(preset, sessionName, cwd, projectId) {
     state.cfg.commands.push(cmd);
     send({ type: 'config.update', config: state.cfg });
   }
-  send({ type: 'create', commandId: cmd.id, name: sessionName, cwd, projectId: projectId || undefined, ...estimateSize() });
+  send({ type: 'create', commandId: cmd.id, name: sessionName, cwd, projectId: projectId || undefined, roleId: roleId || undefined, ...estimateSize() });
   localStorage.setItem(MRU_KEY, preset.presetId);
 }
 
@@ -124,7 +124,13 @@ export function openCreator() {
     ${(state.cfg.projects?.length) ? `
     <input type="hidden" id="creator-project" value="">
     <button type="button" id="creator-project-trigger" class="w-full px-3 py-1.5 text-xs bg-slate-900 border border-slate-700 rounded-md text-slate-400 text-left flex items-center justify-between outline-none hover:border-slate-500 transition-colors cursor-pointer mb-2">
-      <span id="creator-project-label">No project</span>
+      <span id="creator-project-label">Select project</span>
+      <span class="text-slate-600 ml-2">&#9662;</span>
+    </button>` : ''}
+    ${(state.cfg.roles?.length) ? `
+    <input type="hidden" id="creator-role" value="">
+    <button type="button" id="creator-role-trigger" class="w-full px-3 py-1.5 text-xs bg-slate-900 border border-slate-700 rounded-md text-slate-400 text-left flex items-center justify-between outline-none hover:border-slate-500 transition-colors cursor-pointer mb-2">
+      <span id="creator-role-label">Select role</span>
       <span class="text-slate-600 ml-2">&#9662;</span>
     </button>` : ''}
     <input id="creator-name" type="text" maxlength="35" placeholder="Session / Agent name"
@@ -179,7 +185,7 @@ export function openCreator() {
       menu.style.width = rect.width + 'px';
 
       menu.innerHTML = `
-        <div class="proj-option px-3 py-1.5 cursor-pointer hover:bg-slate-700 transition-colors text-xs text-slate-400 ${!hidden.value ? 'bg-slate-700/50' : ''}" data-value="">No project</div>
+        <div class="proj-option px-3 py-1.5 cursor-pointer hover:bg-slate-700 transition-colors text-xs text-slate-400 ${!hidden.value ? 'bg-slate-700/50' : ''}" data-value="">None</div>
         ${projects.map(p => `
           <div class="proj-option flex items-center gap-2 px-3 py-1.5 cursor-pointer hover:bg-slate-700 transition-colors text-xs text-slate-300 ${hidden.value === p.id ? 'bg-slate-700/50' : ''}" data-value="${p.id}">
             <span class="w-2 h-2 rounded-full flex-shrink-0" style="background:${p.color || '#3b82f6'}"></span>
@@ -193,7 +199,7 @@ export function openCreator() {
         if (!item) return;
         hidden.value = item.dataset.value;
         const proj = projects.find(p => p.id === item.dataset.value);
-        label.textContent = proj ? proj.name : 'No project';
+        label.textContent = proj ? proj.name : 'Select project';
         // Auto-set working directory from project path
         if (proj?.path) cwdInput.value = proj.path;
         else cwdInput.value = defaultPath;
@@ -214,6 +220,64 @@ export function openCreator() {
     });
   }
 
+  // Role picker dropdown
+  const roleTrigger = card.querySelector('#creator-role-trigger');
+  if (roleTrigger) {
+    let roleMenuCleanup = null;
+    roleTrigger.addEventListener('click', () => {
+      if (roleMenuCleanup) { roleMenuCleanup(); return; }
+      const rect = roleTrigger.getBoundingClientRect();
+      const hidden = card.querySelector('#creator-role');
+      const label = card.querySelector('#creator-role-label');
+      const roles = state.cfg.roles || [];
+
+      const menu = document.createElement('div');
+      menu.className = 'fixed z-[500] bg-slate-800 border border-slate-600 rounded-lg shadow-xl shadow-black/40 py-1 overflow-y-auto';
+      menu.style.maxHeight = '200px';
+      menu.style.left = rect.left + 'px';
+      menu.style.top = (rect.bottom + 4) + 'px';
+      menu.style.width = rect.width + 'px';
+
+      menu.innerHTML = `
+        <div class="role-option px-3 py-1.5 cursor-pointer hover:bg-slate-700 transition-colors text-xs text-slate-400 ${!hidden.value ? 'bg-slate-700/50' : ''}" data-value="" data-name="">None</div>
+        ${roles.map(r => `
+          <div class="role-option px-3 py-1.5 cursor-pointer hover:bg-slate-700 transition-colors text-xs text-slate-300 ${hidden.value === r.id ? 'bg-slate-700/50' : ''}" data-value="${r.id}" data-name="${esc(r.name)}">
+            ${esc(r.name)}
+          </div>`).join('')}`;
+
+      document.body.appendChild(menu);
+
+      const onClick = (e) => {
+        const item = e.target.closest('.role-option');
+        if (!item) return;
+        hidden.value = item.dataset.value;
+        const roleName = item.dataset.name;
+        label.textContent = roleName || 'Select role';
+        // Auto-fill session name from role name (only if user hasn't typed a custom name)
+        if (roleName && (!nameInput.value.trim() || nameInput.dataset.autoFilled === '1')) {
+          nameInput.value = roleName;
+          nameInput.dataset.autoFilled = '1';
+        }
+        if (!item.dataset.value) nameInput.dataset.autoFilled = '';
+        roleMenuCleanup();
+      };
+      const onOutside = (e) => {
+        if (!menu.contains(e.target) && !roleTrigger.contains(e.target)) roleMenuCleanup();
+      };
+      menu.addEventListener('click', onClick);
+      requestAnimationFrame(() => document.addEventListener('click', onOutside));
+
+      roleMenuCleanup = () => {
+        menu.removeEventListener('click', onClick);
+        document.removeEventListener('click', onOutside);
+        menu.remove();
+        roleMenuCleanup = null;
+      };
+    });
+    // Clear auto-fill flag when user manually types
+    nameInput.addEventListener('input', () => { nameInput.dataset.autoFilled = ''; });
+  }
+
   // "Add" button for missing agents — opens install toaster
   card.addEventListener('click', (e) => {
     const installBtn = e.target.closest('.install-btn');
@@ -230,7 +294,9 @@ export function openCreator() {
     const cwd = cwdInput.value.trim() || undefined;
     const projectSelect = card.querySelector('#creator-project');
     const projectId = projectSelect?.value || undefined;
-    createFromPreset(preset, name, cwd, projectId);
+    const roleSelect = card.querySelector('#creator-role');
+    const roleId = roleSelect?.value || undefined;
+    createFromPreset(preset, name, cwd, projectId, roleId);
     closeCreator();
   });
 }

package/public/js/nav.js

@@ -1,8 +1,8 @@
 import { closeThemeMenu } from './settings.js';
 import { closeDropdown } from './prompts.js';
 
-const ALL_PANELS = ['chats', 'prompts', 'plugins', 'settings'];
-const PANEL_TITLES = { chats: 'Sessions', prompts: 'Prompts', plugins: 'Plugins', settings: 'Settings' };
+const ALL_PANELS = ['chats', 'prompts', 'roles', 'plugins', 'settings'];
+const PANEL_TITLES = { chats: 'Sessions', prompts: 'Prompts', roles: 'Roles', plugins: 'Plugins', settings: 'Settings' };
 const ACTIVE = ['text-slate-200', 'bg-slate-800'];
 const INACTIVE = ['text-slate-500', 'hover:text-slate-300', 'hover:bg-slate-800/50'];
 

package/public/js/prompts.js

@@ -139,7 +139,7 @@ function openEditor(idx) {
     <input id="pe-name" type="text" maxlength="60" placeholder="Prompt name" value="${esc(existing?.name || '')}"
       class="w-full px-3 py-2 text-sm bg-slate-900 border border-slate-700 rounded-md text-slate-200 placeholder-slate-500 outline-none focus:border-blue-500 transition-colors mb-2">
     <textarea id="pe-text" rows="4" placeholder="Prompt text to paste into terminal"
-      class="w-full px-3 py-1.5 text-xs bg-slate-900 border border-slate-700 rounded-md text-slate-200 placeholder-slate-600 outline-none focus:border-blue-500 transition-colors resize-none leading-relaxed font-mono mb-2">${esc(existing?.text || '')}</textarea>
+      class="w-full max-w-full px-3 py-1.5 text-xs bg-slate-900 border border-slate-700 rounded-md text-slate-200 placeholder-slate-600 outline-none focus:border-blue-500 transition-colors resize-y leading-relaxed font-mono mb-2" style="min-height:5lh">${esc(existing?.text || '')}</textarea>
     <div class="flex items-center gap-2">
       <button id="pe-save" class="px-4 py-1.5 text-xs font-medium bg-blue-600 hover:bg-blue-500 text-white rounded-md transition-colors">${existing ? 'Save' : 'Add'}</button>
       <button id="pe-cancel" class="px-3 py-1.5 text-xs text-slate-500 hover:text-slate-300 transition-colors">Cancel</button>

package/public/js/roles.js

@@ -0,0 +1,112 @@
+// Roles panel — manage worker role definitions (core feature, not plugin-specific)
+import { state, send } from './state.js';
+import { esc } from './utils.js';
+
+const panel = document.getElementById('panel-roles');
+
+function getRoles() { return state.cfg.roles || []; }
+
+function save() { send({ type: 'config.update', config: state.cfg }); }
+
+export function renderRoles() {
+  const roles = getRoles();
+  panel.innerHTML = `
+    <div class="flex items-center justify-between px-3 pt-3 pb-2">
+      <span class="text-sm font-bold text-slate-200 tracking-tight" style="font-family:'JetBrains Mono',monospace">Roles</span>
+      <button id="btn-add-role" class="icon-btn w-7 h-7 flex items-center justify-center rounded-md border border-slate-600 text-slate-400 hover:bg-slate-700 hover:text-slate-200 transition-colors text-sm" title="New role">+</button>
+    </div>
+    <div id="roles-list" class="tmx-scroll flex-1 overflow-y-auto border-t border-slate-700/50"></div>`;
+
+  panel.querySelector('#btn-add-role').addEventListener('click', () => openEditor());
+
+  const list = panel.querySelector('#roles-list');
+  list.addEventListener('click', (e) => {
+    if (e.target.closest('.role-edit')) {
+      const idx = +e.target.closest('.role-row').dataset.idx;
+      openEditor(idx);
+      return;
+    }
+    if (e.target.closest('.role-del')) {
+      const idx = +e.target.closest('.role-row').dataset.idx;
+      state.cfg.roles.splice(idx, 1);
+      save();
+      renderRoles();
+      return;
+    }
+  });
+
+  renderRoleList(roles);
+}
+
+function renderRoleList(roles) {
+  const list = panel.querySelector('#roles-list');
+  if (!roles.length) {
+    list.innerHTML = `<div class="flex flex-col items-center justify-center h-full px-6 text-center">
+      <p class="text-sm text-slate-400 mb-1">No roles defined</p>
+      <p class="text-xs text-slate-600 leading-relaxed">Define agent identities with a name and instructions.<br>Roles are sent to the agent when a session starts<br>and can be used by plugins like Autopilot.</p>
+    </div>`;
+    return;
+  }
+  list.innerHTML = roles.map((r, idx) => `
+    <div class="role-row group flex items-start gap-2 px-3 py-2.5 cursor-default hover:bg-slate-800/40 transition-colors ${idx > 0 ? 'border-t border-slate-700/30' : ''}" data-idx="${idx}">
+      <div class="flex-1 min-w-0">
+        <div class="text-[13px] font-medium text-slate-200 truncate">${esc(r.name)}</div>
+        <div class="text-[11px] text-slate-500 mt-0.5 line-clamp-2 leading-relaxed">${esc(r.instructions)}</div>
+      </div>
+      <div class="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0 mt-0.5">
+        <button class="role-edit w-6 h-6 flex items-center justify-center rounded text-slate-500 hover:text-slate-300 hover:bg-slate-700/60 transition-colors" title="Edit">
+          <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path d="M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg>
+        </button>
+        <button class="role-del w-6 h-6 flex items-center justify-center rounded text-slate-500 hover:text-red-400 hover:bg-slate-700/60 transition-colors" title="Delete">
+          <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path d="M18 6L6 18M6 6l12 12"/></svg>
+        </button>
+      </div>
+    </div>
+  `).join('');
+}
+
+function closeEditor() { document.getElementById('role-editor')?.remove(); }
+
+function openEditor(idx) {
+  if (document.getElementById('role-editor')) { closeEditor(); if (idx == null) return; }
+  const existing = idx != null ? getRoles()[idx] : null;
+
+  const card = document.createElement('div');
+  card.id = 'role-editor';
+  card.className = 'p-3 border-b border-slate-700/50 bg-slate-800/30';
+  card.innerHTML = `
+    <input id="re-name" type="text" maxlength="40" placeholder="Role name" value="${esc(existing?.name || '')}"
+      class="w-full px-3 py-2 text-sm bg-slate-900 border border-slate-700 rounded-md text-slate-200 placeholder-slate-500 outline-none focus:border-blue-500 transition-colors mb-2">
+    <textarea id="re-instructions" rows="4" placeholder="Who am I? e.g. You are a senior software architect. You break down goals into clear, actionable tasks with acceptance criteria."
+      class="w-full max-w-full px-3 py-1.5 text-xs bg-slate-900 border border-slate-700 rounded-md text-slate-200 placeholder-slate-600 outline-none focus:border-blue-500 transition-colors resize-y leading-relaxed font-mono mb-2" style="min-height:5lh">${esc(existing?.instructions || '')}</textarea>
+    <div class="flex items-center gap-2">
+      <button id="re-save" class="px-4 py-1.5 text-xs font-medium bg-blue-600 hover:bg-blue-500 text-white rounded-md transition-colors">${existing ? 'Save' : 'Add'}</button>
+      <button id="re-cancel" class="px-3 py-1.5 text-xs text-slate-500 hover:text-slate-300 transition-colors">Cancel</button>
+    </div>`;
+
+  const list = panel.querySelector('#roles-list');
+  list.parentElement.insertBefore(card, list);
+
+  const nameEl = card.querySelector('#re-name');
+  const instrEl = card.querySelector('#re-instructions');
+  nameEl.focus();
+
+  const doSave = () => {
+    const name = nameEl.value.trim();
+    const instructions = instrEl.value.trim();
+    if (!name || !instructions) return;
+    if (!state.cfg.roles) state.cfg.roles = [];
+    if (idx != null) {
+      state.cfg.roles[idx] = { ...state.cfg.roles[idx], name, instructions };
+    } else {
+      state.cfg.roles.push({ id: crypto.randomUUID(), name, instructions });
+    }
+    save();
+    closeEditor();
+    renderRoles();
+  };
+
+  card.querySelector('#re-save').addEventListener('click', doSave);
+  card.querySelector('#re-cancel').addEventListener('click', closeEditor);
+  nameEl.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeEditor(); });
+}

package/public/js/state.js

@@ -7,6 +7,8 @@ export const state = {
   presets: [],
   resumable: [],
   filter: { query: '', tab: 'all' },
+  pills: new Map(),
+  activePill: null,
   transcriptCache: {},
   remoteVersion: null,
 };