clideck 1.26.0 → 1.26.3

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">
@@ -453,7 +461,17 @@
     <!-- Folder picker -->
     <div id="folder-picker" class="absolute inset-0 z-[300] bg-black/60 backdrop-blur-sm hidden items-center justify-center">
       <div class="bg-slate-800 border border-slate-600 rounded-xl shadow-2xl shadow-black/50 w-[420px] max-h-[460px] flex flex-col">
-        <div class="px-4 py-3 border-b border-slate-700 text-sm font-semibold">Choose Directory</div>
+        <div class="px-4 py-3 border-b border-slate-700 flex items-center justify-between">
+          <span class="text-sm font-semibold">Choose Directory</span>
+          <div class="flex items-center gap-2">
+            <button id="fp-new-folder" class="p-1 rounded hover:bg-slate-700 text-slate-400 hover:text-slate-200 transition-colors" title="New folder">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
+            </button>
+            <button id="fp-toggle-hidden" class="p-1 rounded hover:bg-slate-700 text-slate-500 transition-colors" title="Show hidden files">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
+            </button>
+          </div>
+        </div>
         <div id="fp-path" class="px-4 py-2 text-xs text-slate-400 border-b border-slate-700 break-all"></div>
         <div id="fp-listing" class="flex-1 overflow-y-auto py-1 min-h-[200px]"></div>
         <div class="px-4 py-3 border-t border-slate-700 flex justify-end gap-2">

package/public/js/app.js

@@ -1,9 +1,9 @@
 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';
+import { handleDirsResponse, handleMkdirResponse, openFolderPicker } from './folder-picker.js';
 import { confirmClose } from './confirm.js';
 import { applyTheme } from './profiles.js';
 import { toggleMode, applyMode } from './color-mode.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':
@@ -140,6 +145,9 @@ function connect() {
       case 'dirs':
         handleDirsResponse(msg);
         break;
+      case 'dirs.mkdir':
+        handleMkdirResponse(msg);
+        break;
       case 'session.theme': {
         const entry = state.terms.get(msg.id);
         if (entry) {
@@ -202,6 +210,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 +274,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 +282,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 +308,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 +752,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 +788,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 +804,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 +854,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 +909,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 class="opacity-40">- optional</span></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 class="opacity-40">- optional</span></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.innerHTML = proj ? esc(proj.name) : 'Select project <span class="opacity-40">- optional</span>';
         // 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.innerHTML = roleName ? esc(roleName) : 'Select role <span class="opacity-40">- optional</span>';
+        // 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/folder-picker.js

@@ -19,9 +19,12 @@ const overlay = document.getElementById('folder-picker');
 const pathBar = document.getElementById('fp-path');
 const listing = document.getElementById('fp-listing');
 const selectBtn = document.getElementById('fp-select');
+const hiddenBtn = document.getElementById('fp-toggle-hidden');
+const newFolderBtn = document.getElementById('fp-new-folder');
 let currentPath = '';
 let pendingPath = '';
 let onSelect = null;
+let showHidden = false;
 
 export function openFolderPicker(startPath, callback) {
   currentPath = '';
@@ -35,6 +38,7 @@ export function closeFolderPicker() {
   overlay.classList.add('hidden');
   overlay.classList.remove('flex');
   onSelect = null;
+  closeNewFolderInput();
 }
 
 function navigate(path) {
@@ -42,7 +46,8 @@ function navigate(path) {
   pathBar.textContent = path;
   listing.innerHTML = '<div class="p-4 text-center text-slate-500 text-sm">Loading...</div>';
   selectBtn.disabled = true;
-  send({ type: 'dirs.list', path });
+  closeNewFolderInput();
+  send({ type: 'dirs.list', path, showHidden });
 }
 
 export function handleDirsResponse(msg) {
@@ -62,12 +67,90 @@ export function handleDirsResponse(msg) {
   if (msg.entries.length === 0 && !html) {
     html = '<div class="p-4 text-center text-slate-500 text-sm">Empty directory</div>';
   }
-  html += msg.entries.map(name =>
-    `<div class="fp-item px-4 py-1.5 cursor-pointer hover:bg-slate-700 text-sm text-slate-200 transition-colors" data-path="${esc(joinChild(currentPath, name))}">${esc(name)}</div>`
-  ).join('');
+  html += msg.entries.map(name => {
+    const dimClass = name.startsWith('.') ? ' text-slate-500' : ' text-slate-200';
+    return `<div class="fp-item px-4 py-1.5 cursor-pointer hover:bg-slate-700 text-sm${dimClass} transition-colors" data-path="${esc(joinChild(currentPath, name))}">${esc(name)}</div>`;
+  }).join('');
   listing.innerHTML = html;
 }
 
+// --- Hidden files toggle ---
+
+function updateHiddenBtn() {
+  hiddenBtn.classList.toggle('text-slate-200', showHidden);
+  hiddenBtn.classList.toggle('text-slate-500', !showHidden);
+  hiddenBtn.title = showHidden ? 'Hide hidden files' : 'Show hidden files';
+}
+
+hiddenBtn.addEventListener('click', () => {
+  showHidden = !showHidden;
+  updateHiddenBtn();
+  if (currentPath) navigate(currentPath);
+});
+
+// --- New folder inline input ---
+
+let newFolderActive = false;
+
+function closeNewFolderInput() {
+  if (!newFolderActive) return;
+  newFolderActive = false;
+  const row = listing.querySelector('.fp-new-folder-row');
+  if (row) row.remove();
+}
+
+function openNewFolderInput() {
+  if (newFolderActive || !currentPath) return;
+  newFolderActive = true;
+  const row = document.createElement('div');
+  row.className = 'fp-new-folder-row flex items-center gap-2 px-4 py-1.5';
+  row.innerHTML = `
+    <svg class="flex-shrink-0 text-slate-400" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
+    <input type="text" class="fp-new-folder-input flex-1 bg-slate-700 border border-slate-600 rounded px-2 py-0.5 text-sm text-slate-200 placeholder-slate-500 outline-none focus:border-blue-500 transition-colors" placeholder="Folder name" spellcheck="false" />
+    <button class="fp-new-folder-ok p-0.5 rounded hover:bg-slate-700 text-emerald-400 hover:text-emerald-300 transition-colors" title="Create">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+    </button>
+    <button class="fp-new-folder-no p-0.5 rounded hover:bg-slate-700 text-slate-400 hover:text-slate-300 transition-colors" title="Cancel">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+    </button>`;
+  listing.prepend(row);
+  const input = row.querySelector('.fp-new-folder-input');
+  input.focus();
+
+  function submit() {
+    const name = input.value.trim();
+    if (!name) { closeNewFolderInput(); return; }
+    input.disabled = true;
+    send({ type: 'dirs.mkdir', parent: currentPath, name });
+  }
+
+  input.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') { e.preventDefault(); submit(); }
+    if (e.key === 'Escape') { e.preventDefault(); closeNewFolderInput(); }
+  });
+  row.querySelector('.fp-new-folder-ok').addEventListener('click', submit);
+  row.querySelector('.fp-new-folder-no').addEventListener('click', closeNewFolderInput);
+}
+
+newFolderBtn.addEventListener('click', openNewFolderInput);
+
+export function handleMkdirResponse(msg) {
+  if (!newFolderActive) return;
+  closeNewFolderInput();
+  if (msg.success) {
+    navigate(msg.path);
+  } else {
+    // Show error inline briefly
+    const err = document.createElement('div');
+    err.className = 'px-4 py-1.5 text-xs text-red-400';
+    err.textContent = msg.error || 'Failed to create folder';
+    listing.prepend(err);
+    setTimeout(() => err.remove(), 3000);
+  }
+}
+
+// --- Navigation and select ---
+
 listing.addEventListener('click', (e) => {
   const item = e.target.closest('.fp-item');
   if (item) navigate(item.dataset.path);

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>