cli-jaw 2.1.1 → 2.1.3

package/public/js/constants.ts

@@ -26,21 +26,22 @@ const FALLBACK_CLI_REGISTRY: CliRegistry = {
     'ai-e': {
         label: 'AI-E',
         defaultProvider: 'claude',
-        providers: ['claude', 'codex', 'gemini', 'grok', 'copilot'],
+        providers: ['claude', 'codex', 'gemini', 'grok', 'copilot', 'kiro'],
         efforts: ['low', 'medium', 'high', 'xhigh', 'max'],
         models: [
             'opus', 'sonnet', 'haiku',
-            'gpt-5.4', 'gpt-5.4-mini',
+            'gpt-5.5', 'gpt-5.4', 'gpt-5.4-mini',
             'gemini-3-flash-preview',
-            'grok-build',
+            'grok-build', 'grok-composer-2.5-fast',
             'gpt-5-mini',
         ],
         modelsByProvider: {
-            claude: ['opus', 'sonnet', 'haiku'],
-            codex: ['gpt-5.4', 'gpt-5.4-mini'],
+            claude: ['claude-opus-4-8', 'opus', 'sonnet', 'haiku'],
+            codex: ['gpt-5.5', 'gpt-5.4', 'gpt-5.4-mini'],
             gemini: ['gemini-3-flash-preview'],
-            grok: ['grok-build'],
+            grok: ['grok-build', 'grok-composer-2.5-fast'],
             copilot: ['gpt-5-mini'],
+            kiro: ['auto', 'claude-sonnet-4.6', 'deepseek-3.2', 'minimax-m2.5', 'glm-5', 'qwen3-coder-next'],
         },
         effortsByProvider: {
             claude: ['low', 'medium', 'high', 'xhigh', 'max'],
@@ -48,6 +49,7 @@ const FALLBACK_CLI_REGISTRY: CliRegistry = {
             gemini: [],
             grok: [],
             copilot: ['low', 'medium', 'high'],
+            kiro: [],
         },
     },
     claude: {
@@ -55,8 +57,8 @@ const FALLBACK_CLI_REGISTRY: CliRegistry = {
         efforts: ['low', 'medium', 'high', 'xhigh', 'max'],
         // Mirrors getDefaultClaudeChoices() in src/cli/claude-models.ts —
         // aliases first, then verified pinned full IDs (hyphen form). The
-        // [1m] suffix activates Claude Code's 1M-context window (Opus 4.7,
-        // Opus 4.6, Sonnet 4.6 only).
+        // [1m] suffix activates Claude Code's 1M-context window (Opus 4.8,
+        // Opus 4.7, Opus 4.6, Sonnet 4.6).
         models: [
             'opus',
             'sonnet',
@@ -113,6 +115,27 @@ const FALLBACK_CLI_REGISTRY: CliRegistry = {
             'grok-4.3', 'grok-build-0.1', 'gpt-5-mini', 'kimi-k2.5',
         ],
     },
+    'kiro-code': {
+        label: 'Kiro',
+        efforts: [],
+        effortNote: 'Kiro CLI has no separate effort flag',
+        models: [
+            'auto',
+            'claude-opus-4.8',
+            'claude-opus-4.7',
+            'claude-opus-4.6',
+            'claude-sonnet-4.6',
+            'claude-opus-4.5',
+            'claude-sonnet-4.5',
+            'claude-sonnet-4',
+            'claude-haiku-4.5',
+            'deepseek-3.2',
+            'minimax-m2.5',
+            'minimax-m2.1',
+            'glm-5',
+            'qwen3-coder-next',
+        ],
+    },
     gemini: {
         label: 'Gemini',
         efforts: [],
@@ -121,8 +144,8 @@ const FALLBACK_CLI_REGISTRY: CliRegistry = {
     grok: {
         label: 'Grok',
         efforts: [],
-        effortNote: 'unsupported by grok-build; do not pass --effort',
-        models: ['grok-build'],
+        effortNote: 'unsupported by grok-build/composer; do not pass --effort',
+        models: ['grok-build', 'grok-composer-2.5-fast'],
     },
     opencode: {
         label: 'OpenCode',
@@ -237,7 +260,7 @@ export function getCliMeta(cli: string): CliEntry | null {
     return CLI_REGISTRY[cli] || null;
 }
 
-export const PRIMARY_CLIS: readonly string[] = ['claude', 'claude-e', 'agy', 'codex', 'cursor', 'gemini'];
+export const PRIMARY_CLIS: readonly string[] = ['claude', 'claude-e', 'agy', 'codex', 'cursor', 'kiro-code', 'gemini'];
 
 export interface RolePreset {
     value: string;

package/public/js/features/chat-messages.ts

@@ -8,6 +8,7 @@ import { getAppName } from './appname.js';
 import { getAgentAvatarMarkup, getUserAvatarMarkup } from './avatar.js';
 import { t } from './i18n.js';
 import { renderMessageActionsHtml } from './message-actions.js';
+import { API_BASE } from '../api.js';
 import { normalizeAgentToolBlocks } from './process-block-dom.js';
 import { scrollToBottom } from './chat-scroll.js';
 
@@ -67,13 +68,23 @@ export function formatUserPrompt(text: string): string {
         const userMsg = userMsgMatch ? ' ' + userMsgMatch[1].trim() : '';
         return `📎 [${count} files]${userMsg}`;
     }
-    const fileMatch = text.match(/^\[(?:사용자가 파일을 보냈습니다|User sent a file): ([^\]]+)\]/);
+    const fileMatch = text.match(/^\[(?:사용자가 파일을 보냈습니다|사용자가 이미지를 보냈습니다|사용자가 동영상을 보냈습니다|User sent a file|User sent an image|User sent a video): ([^\]]+)\]/);
     if (fileMatch) {
-        const fileName = fileMatch[1].split('/').pop() || fileMatch[1];
+        const fullPath = fileMatch[1];
+        const fileName = fullPath.split('/').pop() || fullPath;
         const voiceMatch = text.match(/🎤\s*(.{0,80})/);
         const voicePart = voiceMatch ? `${t('chat.voice.label')} ` : '';
         const userMsgMatch = text.match(/(?:사용자 메시지|User message): (.+)$/s);
         const userMsg = userMsgMatch ? ' ' + userMsgMatch[1].trim() : '';
+        // Inline media rendering
+        const ext = (fileName.split('.').pop() || '').toLowerCase();
+        const mediaUrl = `${API_BASE}/media/${encodeURIComponent(fileName)}`;
+        if (['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg'].includes(ext)) {
+            return `${voicePart}<img src="${mediaUrl}" alt="${fileName}" class="chat-inline-img" loading="lazy" />${userMsg ? `<br>${userMsg}` : ''}`;
+        }
+        if (['mp4', 'webm', 'mov', 'ogg'].includes(ext)) {
+            return `${voicePart}<video src="${mediaUrl}" controls class="chat-inline-video" preload="metadata"></video>${userMsg ? `<br>${userMsg}` : ''}`;
+        }
         return `${voicePart}📎 [${fileName}]${userMsg}`;
     }
     return text;

package/public/js/features/chat-search.ts

@@ -1,6 +1,7 @@
 import { api } from '../api.js';
 import { getVirtualScroll } from '../virtual-scroll.js';
 import { escapeHtml } from '../render.js';
+import { bootMessageQuery } from './message-history.js';
 
 const IS_IFRAME = window.parent !== window;
 
@@ -94,7 +95,10 @@ export function closeChatSearch(): void {
 
 function buildMessageIndexMap(): void {
     messageIdToVsIndex = new Map();
-    api<{ id: number }[]>('/api/messages').then(msgs => {
+    // Must mirror the rendered boot window so id→virtual-scroll index stays
+    // aligned with what loadMessages() actually rendered (embedded: recent-N;
+    // standalone: full history).
+    api<{ id: number }[]>(`/api/messages${bootMessageQuery()}`).then(msgs => {
         if (!msgs) return;
         messageIdToVsIndex = new Map();
         msgs.forEach((m, i) => messageIdToVsIndex!.set(m.id, i));

package/public/js/features/chat.ts

@@ -49,6 +49,16 @@ function getCommandTimeoutMs(text: string): number {
     return /^\/compact(?:\s|$)/i.test(String(text || '').trim()) ? 5 * 60 * 1000 : 10_000;
 }
 
+function buildAttachmentPrompt(paths: string[], text = ''): string {
+    const prompt = paths.map(p => t('chat.file.sent', { path: p })).join('\n');
+    return text ? `${prompt}${t('chat.file.sentWithMsg', { text })}` : prompt;
+}
+
+function buildSlashCommandAttachmentText(text: string, paths: string[]): string {
+    const fileContext = paths.map(p => t('chat.file.sent', { path: p })).join('\n');
+    return fileContext ? `${text}\n\n${fileContext}` : text;
+}
+
 function sendPreviewMessageViaParent(prompt: string): Promise<MessagePostResult | null> {
     const targetOrigin = previewParentOrigin();
     if (!targetOrigin) return Promise.resolve(null);
@@ -102,6 +112,63 @@ async function postChatMessage(prompt: string): Promise<MessagePostResult> {
     }
 }
 
+async function postSlashCommand(text: string): Promise<{ ok: boolean; status: number; result: CommandResult }> {
+    let signal: AbortSignal; let timer: ReturnType<typeof setTimeout> | undefined;
+    const timeoutMs = getCommandTimeoutMs(text);
+    if (typeof AbortSignal?.timeout === 'function') {
+        signal = AbortSignal.timeout(timeoutMs);
+    } else {
+        const ac = new AbortController();
+        signal = ac.signal;
+        timer = setTimeout(() => ac.abort(), timeoutMs);
+    }
+    const locale = getPreferredLocale();
+    const token = await getAuthToken();
+    const res = await fetch(`${API_BASE}/api/command`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'Accept-Language': locale,
+            ...(token ? { 'Authorization': `Bearer ${token}` } : {}),
+        },
+        body: JSON.stringify({ text, locale }),
+        signal,
+    });
+    if (timer) clearTimeout(timer);
+    const result: CommandResult = await res.json().catch(() => ({}));
+    return { ok: res.ok, status: res.status, result };
+}
+
+async function handleSlashCommandResponse(
+    originalText: string,
+    response: { ok: boolean; status: number; result: CommandResult },
+    fallbackToMessage?: () => Promise<void>,
+): Promise<void> {
+    const result = response.result;
+    // not_command → fall through to normal chat
+    if (result?.code === 'not_command') {
+        if (fallbackToMessage) {
+            await fallbackToMessage();
+            return;
+        }
+        addMessage('user', originalText);
+        upsertMessage({ role: 'user', content: originalText, timestamp: Date.now() });
+        await apiJson('/api/message', 'POST', { prompt: originalText });
+        return;
+    }
+    if (!response.ok && !result?.text) throw new Error(`HTTP ${response.status}`);
+    if (result?.code === 'clear_screen') {
+        cancelPostRender();
+        getVirtualScroll().clear();
+        const chatEl = document.getElementById('chatMessages');
+        if (chatEl) chatEl.innerHTML = '';
+    }
+    if (result?.text || result?.recovery) addSystemMsg(renderCommandRecovery(result), '', result.type);
+    if (result?.steerPrompt) {
+        await apiJson('/api/message', 'POST', { prompt: result.steerPrompt });
+    }
+}
+
 
 function renderCommandRecovery(result: CommandResult): string {
     const recovery = result.recovery;
@@ -194,53 +261,14 @@ export async function sendMessage(source: SendSource = 'enter'): Promise<void> {
         const afterSlash = text.slice(1).trim();
         const firstToken = afterSlash.split(/\s+/)[0] || '';
         const isFilePath = firstToken.includes('/') || firstToken.includes('\\');
+        const isSlashCommand = text.startsWith('/') && !isFilePath;
 
-        if (text.startsWith('/') && !state.attachedFiles.length && !isFilePath) {
+        if (isSlashCommand && !state.attachedFiles.length) {
             input.value = '';
             resetInputHeight();
             slashCmd.close();
             try {
-                let signal: AbortSignal; let timer: ReturnType<typeof setTimeout> | undefined;
-                const timeoutMs = getCommandTimeoutMs(text);
-                if (typeof AbortSignal?.timeout === 'function') {
-                    signal = AbortSignal.timeout(timeoutMs);
-                } else {
-                    const ac = new AbortController();
-                    signal = ac.signal;
-                    timer = setTimeout(() => ac.abort(), timeoutMs);
-                }
-                const locale = getPreferredLocale();
-                const token = await getAuthToken();
-                const res = await fetch(`${API_BASE}/api/command`, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'Accept-Language': locale,
-                        ...(token ? { 'Authorization': `Bearer ${token}` } : {}),
-                    },
-                    body: JSON.stringify({ text, locale }),
-                    signal,
-                });
-                if (timer) clearTimeout(timer);
-                const result: CommandResult = await res.json().catch(() => ({}));
-                // not_command → fall through to normal chat
-                if (result?.code === 'not_command') {
-                    addMessage('user', text);
-                    upsertMessage({ role: 'user', content: text, timestamp: Date.now() });
-                    await apiJson('/api/message', 'POST', { prompt: text });
-                    return;
-                }
-                if (!res.ok && !result?.text) throw new Error(`HTTP ${res.status}`);
-                if (result?.code === 'clear_screen') {
-                    cancelPostRender();
-                    getVirtualScroll().clear();
-                    const chatEl = document.getElementById('chatMessages');
-                    if (chatEl) chatEl.innerHTML = '';
-                }
-                if (result?.text || result?.recovery) addSystemMsg(renderCommandRecovery(result), '', result.type);
-                if (result?.steerPrompt) {
-                    await apiJson('/api/message', 'POST', { prompt: result.steerPrompt });
-                }
+                await handleSlashCommandResponse(text, await postSlashCommand(text));
             } catch (err) {
                 addSystemMsg(t('chat.cmd.fail', { msg: (err as Error).message }), '', 'error');
             } finally {
@@ -259,9 +287,23 @@ export async function sendMessage(source: SendSource = 'enter'): Promise<void> {
             try {
                 // Upload all files in parallel
                 const paths = await Promise.all(state.attachedFiles.map((f: File) => uploadFile(f)));
-                let prompt = paths.map(p => t('chat.file.sent', { path: p })).join('\n');
-                if (text) prompt += t('chat.file.sentWithMsg', { text });
+                const prompt = buildAttachmentPrompt(paths, text);
                 clearAttachedFiles();
+                if (isSlashCommand) {
+                    slashCmd.close();
+                    try {
+                        const commandText = buildSlashCommandAttachmentText(text, paths);
+                        const commandResponse = await postSlashCommand(commandText);
+                        await handleSlashCommandResponse(commandText, commandResponse, async () => {
+                            await apiJson('/api/message', 'POST', { prompt });
+                        });
+                    } catch (err) {
+                        addSystemMsg(t('chat.cmd.fail', { msg: (err as Error).message }), '', 'error');
+                    } finally {
+                        syncOrchestrateSnapshot('command').catch(() => {});
+                    }
+                    return;
+                }
                 await apiJson('/api/message', 'POST', { prompt });
             } catch (err) {
                 addSystemMsg(t('chat.file.uploadFail', { msg: (err as Error).message }));

package/public/js/features/employees.ts

@@ -53,8 +53,13 @@ function normalizeEmployeeModel(_cli: string, model?: string): string {
 }
 
 function getDefaultEmployeeModel(cli: string, models: string[]): string {
-    if (cli !== 'claude') return 'default';
-    if (models.includes('sonnet')) return 'sonnet';
+    if (cli === 'claude' || cli === 'claude-e') {
+        if (models.includes('claude-opus-4-8')) return 'claude-opus-4-8';
+        if (models.includes('opus')) return 'opus';
+    }
+    if (cli === 'codex' || cli === 'codex-app') {
+        if (models.includes('gpt-5.5')) return 'gpt-5.5';
+    }
     return models[0] || 'default';
 }
 

package/public/js/features/idb-cache.ts

@@ -14,6 +14,10 @@ export function setMessageScope(scope: string): void {
     localStorage.setItem(SCOPE_KEY, currentScope);
 }
 
+export function getMessageScope(): string {
+    return currentScope;
+}
+
 export interface CachedMessage {
     id?: number;
     role: string;

package/public/js/features/media-lightbox.ts

@@ -0,0 +1,40 @@
+// ── Media Lightbox — click inline image → modal popup, dblclick/button → open in browser ──
+
+export function initMediaLightbox(): void {
+    const overlay = document.createElement('div');
+    overlay.id = 'mediaLightbox';
+    overlay.className = 'media-lightbox hidden';
+    overlay.innerHTML = `<div class="media-lightbox-backdrop"></div>
+<div class="media-lightbox-content">
+<img class="media-lightbox-img" alt="" />
+<div class="media-lightbox-controls">
+<button class="media-lightbox-open" aria-label="Open in browser">↗ Open</button>
+<button class="media-lightbox-close" aria-label="Close">✕</button>
+</div></div>`;
+    document.body.appendChild(overlay);
+
+    let currentSrc = '';
+
+    const close = () => overlay.classList.add('hidden');
+    const openInBrowser = () => { if (currentSrc) window.open(currentSrc, '_blank'); };
+
+    overlay.querySelector('.media-lightbox-backdrop')!.addEventListener('click', close);
+    overlay.querySelector('.media-lightbox-close')!.addEventListener('click', close);
+    overlay.querySelector('.media-lightbox-open')!.addEventListener('click', openInBrowser);
+    overlay.querySelector('.media-lightbox-img')!.addEventListener('dblclick', openInBrowser);
+
+    // Escape key closes
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && !overlay.classList.contains('hidden')) close();
+    });
+
+    // Delegate click on all inline images (chat + file preview)
+    document.addEventListener('click', (e) => {
+        const target = e.target as HTMLElement;
+        if (target.classList.contains('chat-inline-img') || (target.closest('.file-preview-list') && target.tagName === 'IMG')) {
+            currentSrc = (target as HTMLImageElement).src;
+            (overlay.querySelector('.media-lightbox-img') as HTMLImageElement).src = currentSrc;
+            overlay.classList.remove('hidden');
+        }
+    });
+}

package/public/js/features/message-history.ts

@@ -6,7 +6,7 @@ import { bootstrapVirtualHistory, type VirtualHistoryBootstrapDeps } from '../vi
 import { activateWidgets } from '../diagram/iframe-renderer.js';
 import { ICONS } from '../icons.js';
 import { t } from './i18n.js';
-import { cacheMessages, getScopedMessages, setMessageScope } from './idb-cache.js';
+import { cacheMessages, getMessageScope, getScopedMessages, setMessageScope } from './idb-cache.js';
 import { addMessage, addSystemMsg, showEmptyState } from './chat-messages.js';
 import { buildLazyVirtualMessageItem } from './message-item-html.js';
 import { addStep, buildProcessBlockHtml, collapseBlock, createProcessBlock } from './process-block.js';
@@ -19,6 +19,47 @@ export function buildVirtualHistoryItems(msgs: MessageItem[]): VirtualItem[] {
     return msgs.map((m, index) => buildLazyVirtualMessageItem(normalizeMessageToolLog(m), index));
 }
 
+// Only the embedded dashboard preview frame remounts on every instance switch,
+// so it fetches a bounded recent-N window to keep the per-remount payload small
+// (the full all-time history was ~tens of MB). The standalone chat tab loads
+// once and never remounts, so it keeps the full scrollable history — bounding it
+// would silently drop access to older messages (no load-older mechanism exists).
+export const BOOT_MESSAGE_LIMIT = 300;
+
+export function bootMessageQuery(): string {
+    let embedded = true;
+    try { embedded = window.parent !== window; } catch { embedded = true; }
+    return embedded ? `?limit=${BOOT_MESSAGE_LIMIT}` : '';
+}
+
+function normalizeMessageScopePart(value: string | null | undefined): string {
+    return String(value || '').trim() || 'unknown';
+}
+
+export function buildMessageLocationKey(input: { origin?: string; pathname?: string | null }): string {
+    const origin = normalizeMessageScopePart(input.origin);
+    const pathname = normalizeMessageScopePart(input.pathname || '/');
+    return `${origin}${pathname.startsWith('/') ? pathname : `/${pathname}`}`;
+}
+
+export function buildMessageScopeIdentity(input: { locationKey?: string; workingDir?: string | null }): string {
+    return `${normalizeMessageScopePart(input.locationKey)}::${normalizeMessageScopePart(input.workingDir)}`;
+}
+
+function readCurrentMessageLocationKey(): string {
+    if (typeof window === 'undefined') return buildMessageLocationKey({});
+    return buildMessageLocationKey({
+        origin: window.location.origin,
+        pathname: window.location.pathname,
+    });
+}
+
+function readWorkingDirFromScope(scope: string): string | null {
+    if (!scope || scope === 'default') return null;
+    const markerIndex = scope.indexOf('::');
+    return markerIndex >= 0 ? scope.slice(markerIndex + 2) : scope;
+}
+
 export function registerVirtualScrollCallbacks(vs: ReturnType<typeof getVirtualScroll>): void {
     vs.onLazyRender = (targets: HTMLElement[]) => {
         for (const el of targets) {
@@ -89,25 +130,32 @@ function hydrateSmallHistory(messages: MessageItem[]): void {
 export async function loadMessages(): Promise<void> {
     const vs = getVirtualScroll();
     const chatEl = document.getElementById('chatMessages');
+    const previousScope = getMessageScope();
+    const locationKey = readCurrentMessageLocationKey();
+    let workingDir = readWorkingDirFromScope(previousScope);
     try {
         const settings = await api<{ workingDir?: string }>('/api/settings');
-        if (settings?.workingDir) setMessageScope(settings.workingDir);
+        if (settings?.workingDir) workingDir = settings.workingDir;
     } catch { /* localStorage fallback already initialized currentScope */ }
-    const msgs = await api<MessageItem[]>('/api/messages');
+    const nextScope = buildMessageScopeIdentity({ locationKey, workingDir });
+    setMessageScope(nextScope);
+    const scopeChanged = nextScope !== previousScope;
+    const msgs = await api<MessageItem[]>(`/api/messages${bootMessageQuery()}`);
     if (msgs !== null) {
         const safeMsgs = msgs.map(normalizeMessageToolLog);
         const hadRenderedHistory = Boolean(chatEl?.querySelector('.msg')) || vs.active;
-        const savedIndex = vs.active ? vs.firstVisibleIndex() : null;
+        const shouldForceBottom = scopeChanged || !hadRenderedHistory;
+        const savedIndex = !shouldForceBottom && vs.active ? vs.firstVisibleIndex() : null;
         vs.clear();
         if (chatEl) chatEl.innerHTML = '';
         if (safeMsgs.length >= VS_THRESHOLD) {
             bootstrapVirtualHistory(buildVirtualHistoryItems(safeMsgs), makeBootstrapDeps(vs, {
-                forceInitialBottom: !hadRenderedHistory,
-                restoreIndex: hadRenderedHistory ? savedIndex : null,
+                forceInitialBottom: shouldForceBottom,
+                restoreIndex: shouldForceBottom ? null : savedIndex,
             }));
         } else {
             hydrateSmallHistory(safeMsgs);
-            if (!hadRenderedHistory) settleChatBottomAfterInitialLoad();
+            if (shouldForceBottom) settleChatBottomAfterInitialLoad();
         }
         cacheMessages(safeMsgs.map(m => ({
             role: m.role, content: m.content, cli: m.cli ?? null, tool_log: m.tool_log ?? null, timestamp: Date.now(),

package/public/js/features/pending-queue.ts

@@ -11,6 +11,8 @@ import { ICONS } from '../icons.js';
 import { apiJson } from '../api.js';
 import { t } from './i18n.js';
 import { setStatus } from './ui-status.js';
+import { syncOrchestrateSnapshot } from '../ws.js';
+import { copyText } from './copy-text.js';
 
 export interface PendingItem {
     id: string;
@@ -56,11 +58,13 @@ function renderRow(item: PendingItem): string {
     const preview = (item.prompt || '').replace(/\s+/g, ' ').trim();
     const truncated = preview.length > 140 ? preview.slice(0, 140) + '…' : preview;
     const source = item.source ? `<span class="pending-row-source">${escapeHtml(item.source)}</span>` : '';
+    const copyLabel = escapeHtml(t('queue.copy'));
     const steerLabel = escapeHtml(t('queue.steer'));
     const deleteLabel = escapeHtml(t('queue.delete'));
     return `<div class="pending-row" data-pending-id="${escapeHtml(item.id)}" title="${escapeHtml(preview)}">
         <span class="pending-row-text">${escapeHtml(truncated)}</span>
         ${source}
+        <button class="pending-row-btn pending-row-copy" data-pending-action="copy" title="${copyLabel}" aria-label="${copyLabel}"><span class="pending-btn-content">${ICONS.copy}</span></button>
         <button class="pending-row-btn pending-row-steer" data-pending-action="steer" data-i18n-title="queue.steer" title="${steerLabel}" aria-label="${steerLabel}"><span class="pending-arm-fill" aria-hidden="true"></span><span class="pending-btn-content"><span class="pending-steer-arrow" aria-hidden="true">↳</span><span class="pending-steer-label">${steerLabel}</span></span></button>
         <button class="pending-row-btn pending-row-delete" data-pending-action="delete" data-i18n-title="queue.delete" title="${deleteLabel}" aria-label="${deleteLabel}"><span class="pending-arm-fill" aria-hidden="true"></span><span class="pending-btn-content">${ICONS.trash}</span></button>
     </div>`;
@@ -144,8 +148,13 @@ async function fire(id: string, action: Action): Promise<void> {
     if (action === 'steer') setStatus('running');
     const result = await apiJson<{ pending: number }>(path, method, {});
     if (result == null) {
-        unpaintArmed(id, action);
-        if (action === 'steer') setStatus('idle');
+        // Item may have been processed by processQueue while arm was pending.
+        // Remove from UI regardless — snapshot sync will reconcile.
+        lastItems = lastItems.filter(it => it.id !== id);
+        renderPendingQueue(lastItems);
+        if (action === 'steer') {
+            syncOrchestrateSnapshot('steer-fire-miss').catch(() => {});
+        }
         return;
     }
     lastItems = lastItems.filter(it => it.id !== id);
@@ -163,13 +172,28 @@ function handleClick(id: string, action: Action): void {
 export function initPendingQueue(): void {
     const host = document.getElementById('pendingQueue');
     if (!host) return;
-    host.addEventListener('click', (e) => {
+    host.addEventListener('click', async (e) => {
         const btn = (e.target as HTMLElement)?.closest('[data-pending-action]') as HTMLElement | null;
         if (!btn) return;
         const row = btn.closest('.pending-row') as HTMLElement | null;
         const id = row?.dataset['pendingId'];
         if (!id) return;
-        const action: Action = btn.dataset['pendingAction'] === 'steer' ? 'steer' : 'delete';
+        const actionStr = btn.dataset['pendingAction'];
+        if (actionStr === 'copy') {
+            const item = lastItems.find(it => it.id === id);
+            if (item?.prompt) {
+                const result = await copyText(item.prompt);
+                if (result.ok) {
+                    const content = btn.querySelector('.pending-btn-content');
+                    if (content) {
+                        content.innerHTML = ICONS.checkSimple;
+                        setTimeout(() => { content.innerHTML = ICONS.copy; }, 600);
+                    }
+                }
+            }
+            return;
+        }
+        const action: Action = actionStr === 'steer' ? 'steer' : 'delete';
         handleClick(id, action);
     });
 }

package/public/js/features/process-block.ts

@@ -1,5 +1,9 @@
 import { escapeHtml } from '../render.js';
 import { ICONS } from '../icons.js';
+import {
+    displayShellCommand,
+    displayShellCommandDetail,
+} from '../../../src/shared/shell-command-display.js';
 
 declare global {
     interface Window {
@@ -107,36 +111,47 @@ export function getStoredProcessStepDetail(stepId: string): string {
     return processDetailStore.get(stepId)?.detail || '';
 }
 
+function normalizeProcessStepForDisplay(step: ProcessStep): ProcessStep {
+    if (step.type !== 'tool') return step;
+    return {
+        ...step,
+        label: displayShellCommand(step.label || ''),
+        detail: displayShellCommandDetail(step.detail || ''),
+        detailPreview: step.detailPreview ? displayShellCommandDetail(step.detailPreview) : step.detailPreview,
+    };
+}
+
 export function compactProcessStepForStorage(step: ProcessStep): ProcessStep {
-    const storedDetail = getStoredProcessStepDetail(step.id);
-    const fullDetail = storedDetail || step.detail || '';
+    const displayStep = normalizeProcessStepForDisplay(step);
+    const storedDetail = displayShellCommandDetail(getStoredProcessStepDetail(displayStep.id));
+    const fullDetail = storedDetail || displayStep.detail || '';
     const retained = retainedDetail(fullDetail);
-    const preview = step.detailPreview || previewText(fullDetail, PROCESS_DETAIL_PREVIEW_CHARS);
+    const preview = displayStep.detailPreview || previewText(fullDetail, PROCESS_DETAIL_PREVIEW_CHARS);
     if (fullDetail) {
-        processDetailStore.set(step.id, {
+        processDetailStore.set(displayStep.id, {
             detail: retained.detail,
             originalLength: fullDetail.length,
             truncated: retained.truncated,
         });
     }
-    processStepMetaStore.set(step.id, {
-        id: step.id,
-        type: step.type,
-        icon: step.icon,
-        rawIcon: step.rawIcon,
-        label: step.label,
-        isEmployee: step.isEmployee,
-        stepRef: step.stepRef,
-        traceRunId: step.traceRunId, traceSeq: step.traceSeq, detailAvailable: step.detailAvailable,
-        detailBytes: step.detailBytes, rawRetentionStatus: step.rawRetentionStatus,
-        status: step.status,
-        startTime: step.startTime,
+    processStepMetaStore.set(displayStep.id, {
+        id: displayStep.id,
+        type: displayStep.type,
+        icon: displayStep.icon,
+        rawIcon: displayStep.rawIcon,
+        label: displayStep.label,
+        isEmployee: displayStep.isEmployee,
+        stepRef: displayStep.stepRef,
+        traceRunId: displayStep.traceRunId, traceSeq: displayStep.traceSeq, detailAvailable: displayStep.detailAvailable,
+        detailBytes: displayStep.detailBytes, rawRetentionStatus: displayStep.rawRetentionStatus,
+        status: displayStep.status,
+        startTime: displayStep.startTime,
         preview,
         detailLength: fullDetail.length,
         detailTruncated: retained.truncated,
     });
     return {
-        ...step,
+        ...displayStep,
         detail: preview,
         detailPreview: preview,
         detailLength: fullDetail.length,