cli-jaw 2.1.2 → 2.1.3

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

@@ -12,6 +12,7 @@ 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;
@@ -57,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>`;
@@ -169,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/settings-cli-status-render.ts

@@ -31,12 +31,10 @@ export const QUOTA_SETUP_HINTS: Record<string, QuotaSetupHint> = {
         ],
     },
     grok: {
-        title: 'Grok Build auth (plan quota not in grok CLI)',
+        title: 'Grok login',
         commands: [
-            'grok login --oauth',
-            'grok models   # verify auth',
+            'progrok login',
         ],
-        note: 'Subscription remaining quota: xAI console only. No official grok quota subcommand.',
     },
     opencode: {
         title: 'OpenCode auth + optional plan quota plugin',

package/public/js/features/settings-cli-status.ts

@@ -391,12 +391,16 @@ function renderCliStatus(data: { cliStatus: Record<string, { available: boolean
             ? renderSetupHelpMark(name, q)
             : '';
 
+        const billingLabel = q?.billing?.usedUsd != null && q?.billing?.limitUsd
+            ? `<span style="margin-left:auto;font-size:10px;color:var(--text-dim);white-space:nowrap">$${q.billing.usedUsd.toFixed(1)}/$${q.billing.limitUsd}</span>`
+            : '';
+
         html += `
             <div class="settings-group" style="margin-bottom:6px;padding:8px 10px">
-                <div class="cli-status-row">
+                <div class="cli-status-row" style="display:flex;align-items:center">
                     <span class="cli-dot ${dotClass}"></span>
                     <span class="cli-provider-icon" aria-hidden="true">${providerIcon(name) || ''}</span>
-                    <span class="cli-name" style="font-weight:600">${escapeHtml(providerLabel(name))}${quotaHelpMark}</span>${name === 'copilot' ? `<button id="copilotKeychainBtn" style="font-size:9px;margin-left:6px;padding:1px 5px;background:var(--border);color:var(--text-dim);border:1px solid var(--text-dim);border-radius:3px;cursor:pointer;vertical-align:middle;line-height:1" title="${t('copilot.keychainHint')}">${ICONS.key}</button>` : ''}
+                    <span class="cli-name" style="font-weight:600">${escapeHtml(providerLabel(name))}${quotaHelpMark}</span>${name === 'copilot' ? `<button id="copilotKeychainBtn" style="font-size:9px;margin-left:6px;padding:1px 5px;background:var(--border);color:var(--text-dim);border:1px solid var(--text-dim);border-radius:3px;cursor:pointer;vertical-align:middle;line-height:1" title="${t('copilot.keychainHint')}">${ICONS.key}</button>` : ''}${billingLabel}
                 </div>
                 ${accountLine}
                 ${authHint}

package/public/js/features/settings-types.ts

@@ -15,6 +15,7 @@ export interface QuotaEntry {
     sessionUsageCapable?: boolean;
     displayTier?: string;
     delegatedProvider?: string;
+    billing?: { usedUsd?: number; limitUsd?: number; percent?: number; periodEnd?: string };
     sessionUsage?: {
         contextTokensUsed?: number | null;
         contextWindowTokens?: number | null;

package/public/js/features/ui-status.ts

@@ -9,13 +9,17 @@ export function setStatus(s: string): void {
     const badge = document.getElementById('statusBadge');
     const btn = document.getElementById('btnSend');
     const label = document.getElementById('typingIndicator')?.querySelector('.label') as HTMLElement | null;
-    state.agentBusy = s === 'running';
+    state.agentBusy = s === 'running' || s === 'steering';
     document.getElementById('typingIndicator')?.classList.toggle('active', state.agentBusy);
     if (s === 'running') {
         if (badge) { badge.className = 'status-badge status-running'; badge.textContent = 'running'; }
         if (btn) { btn.innerHTML = ICONS.stop; btn.title = t('btn.stop'); btn.classList.add('stop-mode'); }
         if (label) label.textContent = t('status.responding');
         showSkeleton();
+    } else if (s === 'steering') {
+        if (badge) { badge.className = 'status-badge status-steering'; badge.textContent = 'steering'; }
+        if (btn) { btn.innerHTML = ICONS.stop; btn.title = 'Steering...'; btn.classList.add('stop-mode'); }
+        if (label) label.textContent = 'Steering...';
     } else {
         if (badge) { badge.className = 'status-badge status-idle'; badge.textContent = 'idle'; }
         if (btn) { btn.innerHTML = ICONS.send; btn.title = 'Send'; btn.classList.remove('stop-mode'); }

package/public/js/main.ts

@@ -90,6 +90,7 @@ import { initPendingQueue } from './features/pending-queue.js';
 import { initAttentionBadge } from './features/attention-badge.js';
 import { initHelpDialog } from './features/help-dialog.js';
 import { initChatSearch, toggleChatSearch, closeChatSearch } from './features/chat-search.js';
+import { initMediaLightbox } from './features/media-lightbox.js';
 
 function isLocalPreviewOrigin(origin: string): boolean {
     if (origin === window.location.origin) return true;
@@ -519,6 +520,7 @@ async function bootstrap(): Promise<void> {
     bindPerCliControlEvents();
     initHelpDialog();
     initChatSearch();
+    initMediaLightbox();
     document.getElementById('chatSearchTrigger')?.addEventListener('click', toggleChatSearch);
     initAttentionBadge();
     connect();

package/public/js/render/markdown.ts

@@ -10,6 +10,7 @@ import { unshieldSvgBlocks } from './svg-actions.js';
 import { highlightCode, ensureHighlightLanguages } from './highlight.js';
 import { schedulePostRender } from './post-render.js';
 import { ensureRenderDelegations } from './delegations.js';
+import { API_BASE } from '../api.js';
 
 // ── marked.js configuration (ES module — always available) ──
 let markedReady = false;
@@ -46,6 +47,21 @@ function ensureMarked(): boolean {
         return `<div class="code-block"><div class="code-header"><span class="code-lang">${langDisplay}</span><button class="code-copy-btn" type="button" aria-label="${escapeHtml(copyLabel)}">${escapeHtml(copyLabel)}</button></div><pre><code class="hljs${lang ? ` language-${escapeHtml(lang)}` : ''}">${highlighted}</code></pre></div>`;
     };
 
+    // Inline media: rewrite absolute paths to /media/ URL, detect video
+    renderer.image = function ({ href, title, text }: { href: string; title?: string | null; text: string }) {
+        if (!href) return '';
+        const src = (href.startsWith('/') || href.includes('/uploads/'))
+            ? `${API_BASE}/media/${encodeURIComponent(href.split('/').pop()!)}`
+            : escapeHtml(href);
+        const alt = escapeHtml(text || '');
+        const titleAttr = title ? ` title="${escapeHtml(title)}"` : '';
+        const ext = (src.split('.').pop() || '').toLowerCase().split('?')[0] || '';
+        if (['mp4', 'webm', 'mov', 'ogg'].includes(ext)) {
+            return `<video src="${src}" controls class="chat-inline-video" preload="metadata"${titleAttr}></video>`;
+        }
+        return `<img src="${src}" alt="${alt}" class="chat-inline-img" loading="lazy"${titleAttr} />`;
+    };
+
     renderer.link = function ({ href, title, text }: { href: string; title?: string | null; text: string }) {
         const safeHref = escapeHtml(href || '');
         const titleAttr = title ? ` title="${escapeHtml(title)}"` : '';

package/public/js/ui.ts

@@ -76,6 +76,12 @@ export function cleanupToolActivity(): void {
     currentStream = null;
 }
 
+/** Timestamp of last steer — used to suppress late agent_done after steer. */
+let lastSteerTs = 0;
+export function markSteered(): void { lastSteerTs = Date.now(); }
+export function clearSteer(): void { lastSteerTs = 0; }
+export function isRecentSteer(): boolean { return Date.now() - lastSteerTs < 8000; }
+
 export function showLiveToolActivity(label: string): void {
     removeSkeleton();
     if (!state.currentAgentDiv || !state.currentAgentDiv.isConnected) {
@@ -307,11 +313,9 @@ export function finalizeAgent(text: string, toolLog?: ToolLogEntry[]): void {
         }
         state.currentAgentDiv.removeAttribute(ACTIVE_RUN_HYDRATED_ATTR);
         const content = (state.currentAgentDiv as HTMLElement)?.querySelector('.msg-content');
-        // Live stream is preview-only; agent_done text stays authoritative unless stream is longer.
+        // Live stream is preview-only; agent_done text is always authoritative.
         const streamedText = currentStream ? finalizeStream(currentStream, true) : '';
-        const finalText = text && streamedText && streamedText.length > text.length
-            ? streamedText
-            : (text || streamedText);
+        const finalText = text || streamedText;
         currentStream = null;
         if (content) content.innerHTML = renderMarkdown(finalText);
         if (hasTools && state.currentAgentDiv && !hadProcessBlock && !hasAgentToolBlock(state.currentAgentDiv)) {

package/public/js/ws.ts

@@ -1,7 +1,7 @@
 // ── WebSocket Connection ──
 import { state } from './state.js';
 import { API_BASE } from './api.js';
-import { setStatus, updateQueueBadge, addSystemMsg, appendAgentText, finalizeAgent, addMessage, showProcessStep, cleanupToolActivity, showLiveToolActivity, applyQueuedOverlay, hydrateActiveRun, reconcileChatBottomAfterRestore, showChatRestoreIndicator } from './ui.js';
+import { setStatus, updateQueueBadge, addSystemMsg, appendAgentText, finalizeAgent, addMessage, showProcessStep, cleanupToolActivity, applyQueuedOverlay, hydrateActiveRun, reconcileChatBottomAfterRestore, showChatRestoreIndicator, markSteered, clearSteer, isRecentSteer } from './ui.js';
 import { renderPendingQueue } from './features/pending-queue.js';
 import { t, getLang } from './features/i18n.js';
 import { getVirtualScroll } from './virtual-scroll.js';
@@ -107,6 +107,8 @@ interface WsMessage {
     exitCode?: number;
     error?: string;
     message?: string;
+    steered?: boolean;
+    steerWaitMs?: number;
 }
 
 // Agent phase state (populated by agent_status events from orchestrator)
@@ -134,9 +136,10 @@ async function refreshRuntimeSnapshot(options: { hydrateRun?: boolean } = {}): P
     renderPendingQueue(snap.queued || []);
     if (options.hydrateRun) hydrateActiveRun(snap.activeRun);
     hydrateGoalState();
-    setStatus(snap.runtime.busy ? 'running' : 'idle');
-    if (snap.runtime.busy && (snap.activeRun?.cli === 'agy' || snap.activeRun?.cli === 'kiro-code')) {
-        showLiveToolActivity(`${providerLabel(snap.activeRun.cli)} working...`);
+    if (snap.runtime.busy) {
+        setStatus('running');
+    } else if (!isRecentSteer()) {
+        setStatus('idle');
     }
     import('./features/employees.js').then(m => {
         if (typeof m.renderEmployees === 'function') m.renderEmployees();
@@ -379,9 +382,9 @@ function renderInterviewPanel(interview: { known: (string | InterviewEvidenceVie
             <span class="iv-summary">Interview · <span class="iv-known-count">Known ${interview.known.length}</span> · <span class="iv-unknown-count">Unknown ${interview.unknown.length}</span>${interview.known.filter(k => typeof k === 'object' && k && 'source' in k && (k as InterviewEvidenceView).source === 'assumption').length > 0 ? ` · <span class="iv-assumption-count">⚠️ ${interview.known.filter(k => typeof k === 'object' && k && 'source' in k && (k as InterviewEvidenceView).source === 'assumption').length} assumptions</span>` : ''} · Round ${interview.round}</span>
         </button>
         <div class="iv-body" id="interviewBody">
-            ${interview.assessment ? renderDimensionBars(interview.assessment) : ''}
-            <div class="iv-section"><strong>Known (${interview.known.length})</strong><ul>${knownHtml}</ul></div>
-            <div class="iv-section"><strong>Unknown (${interview.unknown.length})</strong><ul>${unknownHtml}</ul></div>
+            ${interview.assessment ? `<div class="iv-section iv-section-ambiguity">${renderDimensionBars(interview.assessment)}</div>` : ''}
+            <div class="iv-section iv-section-known"><strong>Known (${interview.known.length})</strong><ul>${knownHtml}</ul></div>
+            <div class="iv-section iv-section-unknown"><strong>Unknown (${interview.unknown.length})</strong><ul>${unknownHtml}</ul></div>
         </div>
     `;
     if (!panel.dataset['toggleBound']) {
@@ -580,16 +583,12 @@ export function connect(): void {
             return;
         }
         if (msg.type === 'agent_status') {
+            if (!msg.running && isRecentSteer()) return;
+            if (msg.running && isRecentSteer()) clearSteer();
             if (msg.running !== undefined) {
                 setStatus(msg.running ? 'running' : 'idle');
-                if (msg.running && (msg.cli === 'agy' || msg.cli === 'kiro-code')) {
-                    showLiveToolActivity(`${providerLabel(msg.cli)} working...`);
-                }
             } else {
                 setStatus(msg.status || 'idle');
-                if (msg.status === 'running' && (msg.cli === 'agy' || msg.cli === 'kiro-code')) {
-                    showLiveToolActivity(`${providerLabel(msg.cli)} working...`);
-                }
             }
             // Track per-agent phase for badge rendering
             if (msg.agentId && msg.phase) {
@@ -617,6 +616,7 @@ export function connect(): void {
                 addSystemMsg(t('ws.roundRetry', { round: msg.round || 0 }));
             }
         } else if (msg.type === 'agent_tool') {
+            if (isRecentSteer()) return;
             const stepType = msg.toolType === 'thinking' ? 'thinking'
                 : msg.toolType === 'search' ? 'search'
                     : msg.toolType === 'subagent' ? 'subagent' : 'tool';
@@ -638,6 +638,7 @@ export function connect(): void {
                 startTime: Date.now(),
             });
         } else if (msg.type === 'agent_output' || msg.type === 'agent_chunk') {
+            if (isRecentSteer()) return;
             appendAgentText(msg.text || '');
         } else if (msg.type === 'agent_retry') {
             const retryDelay = Number(msg.delay ?? 0);
@@ -667,8 +668,13 @@ export function connect(): void {
             const evt = msg.event;
             if (evt) applyWorkflowEvent(evt);
         } else if (msg.type === 'agent_done') {
-            finalizeAgent(msg.text || '', msg.toolLog);
-            notifyUnreadResponse();
+            if (msg.steered || isRecentSteer()) {
+                // Suppress agent_done from steered (killed) process.
+                // Server sets steered:true; isRecentSteer is fallback for edge cases.
+            } else {
+                finalizeAgent(msg.text || '', msg.toolLog);
+                notifyUnreadResponse();
+            }
         } else if (msg.type === 'orchestrate_done') {
             finalizeAgent(msg.text || '');
             notifyUnreadResponse();
@@ -706,7 +712,9 @@ export function connect(): void {
         } else if (msg.type === 'memory_status') {
             import('./features/memory.js').then(m => m.refreshMemorySidebar());
         } else if (msg.type === 'steer_started') {
-            setStatus('running');
+            markSteered();
+            finalizeAgent('');
+            setStatus('steering');
         } else if (msg.type === 'new_message' && (msg.source === 'telegram' || msg.source === 'discord' || msg.fromQueue === true)) {
             addMessage(msg.role === 'assistant' ? 'agent' : (msg.role || 'user'), msg.content || '', msg.cli);
         } else if (msg.type === 'system_notice') {
@@ -725,6 +733,9 @@ export function connect(): void {
             addSystemMsg(`⚠️ Goal continuation failed: ${escapeHtml(msg.error || '')}`, 'tool-activity');
         } else if (msg.type === 'settings_change') {
             syncOrchestrateSnapshot('settings_change').catch(() => {});
+        } else if (msg.type === 'session_switched' || msg.type === 'session_created') {
+            // Reload messages for the new active session
+            window.location.reload();
         }
     };
     state.ws.onopen = () => {

package/public/locales/en.json

@@ -267,6 +267,7 @@
     "btn.attach": "Attach file",
     "input.placeholder": "Type a message...",
     "queue.pendingTitle": "Pending",
+    "queue.copy": "Copy prompt",
     "queue.delete": "Remove",
     "queue.steer": "Run now (steer)",
     "queue.cancelArm": "Click again to cancel",

package/public/locales/ja.json

@@ -256,6 +256,7 @@
     "btn.attach": "ファイルを添付",
     "input.placeholder": "メッセージを入力...",
     "queue.pendingTitle": "待機中",
+    "queue.copy": "コピー",
     "queue.delete": "削除",
     "queue.steer": "今すぐ実行（steer）",
     "queue.cancelArm": "もう一度クリックしてキャンセル",

package/public/locales/ko.json

@@ -267,6 +267,7 @@
     "btn.attach": "파일 첨부",
     "input.placeholder": "메시지 입력...",
     "queue.pendingTitle": "대기 중",
+    "queue.copy": "복사",
     "queue.delete": "삭제",
     "queue.steer": "지금 실행 (steer)",
     "queue.cancelArm": "취소 (3초 안에 한 번 더 누르면 취소)",

package/public/locales/zh.json

@@ -256,6 +256,7 @@
     "btn.attach": "附加文件",
     "input.placeholder": "输入消息...",
     "queue.pendingTitle": "待处理",
+    "queue.copy": "复制",
     "queue.delete": "移除",
     "queue.steer": "立即运行（steer）",
     "queue.cancelArm": "再次点击取消",

package/public/manager/src/InstancePreview.tsx

@@ -13,6 +13,7 @@ type InstancePreviewProps = {
     theme: PreviewTheme;
     onOpenNotesFromPreview?: (path: string) => void;
     onOpenDocFromPreview?: (absolutePath: string) => void;
+    onPreviewDroppedFiles?: (files: File[]) => void;
 };
 
 type PreviewOpenNotesMessage = {
@@ -26,6 +27,11 @@ type PreviewSendMessage = {
     prompt?: unknown;
 };
 
+type PreviewDroppedFilesMessage = {
+    type?: unknown;
+    files?: unknown;
+};
+
 function normalizeLoopbackHostname(hostname: string): string {
     return hostname.replace(/^\[|\]$/g, '').toLowerCase();
 }
@@ -144,6 +150,11 @@ function isPreviewSttShortcut(event: KeyboardEvent): boolean {
     return primarySpace || fallbackMic;
 }
 
+function extractDroppedFiles(data: PreviewDroppedFilesMessage | null): File[] {
+    if (!data || data.type !== 'jaw-preview-dropped-files' || !Array.isArray(data.files)) return [];
+    return data.files.filter((item): item is File => item instanceof File);
+}
+
 export function InstancePreview(props: InstancePreviewProps) {
     const iframeRef = useRef<HTMLIFrameElement | null>(null);
     const loadedSrcRef = useRef<string | null>(null);
@@ -224,12 +235,21 @@ export function InstancePreview(props: InstancePreviewProps) {
             props.onOpenDocFromPreview?.(path);
         }
         window.addEventListener('message', onPreviewOpenDoc);
+        function onPreviewDroppedFiles(event: MessageEvent): void {
+            if (event.source !== iframeRef.current?.contentWindow) return;
+            if (!state.src || !previewFrameOriginMatches(event.origin, state.src, iframeRef.current)) return;
+            const files = extractDroppedFiles(event.data as PreviewDroppedFilesMessage | null);
+            if (files.length === 0) return;
+            props.onPreviewDroppedFiles?.(files);
+        }
+        window.addEventListener('message', onPreviewDroppedFiles);
         return () => {
             window.removeEventListener('message', onPreviewSend);
             window.removeEventListener('message', onPreviewOpenNotes);
             window.removeEventListener('message', onPreviewOpenDoc);
+            window.removeEventListener('message', onPreviewDroppedFiles);
         };
-    }, [props.enabled, props.instance, props.onOpenNotesFromPreview, props.onOpenDocFromPreview, state.canPreview, state.src]);
+    }, [props.enabled, props.instance, props.onOpenNotesFromPreview, props.onOpenDocFromPreview, props.onPreviewDroppedFiles, state.canPreview, state.src]);
 
     useEffect(() => {
         if (!props.active || !props.enabled || !state.canPreview || !state.src) return undefined;

package/public/manager/src/SidebarRailRouter.tsx

@@ -1,4 +1,4 @@
-import { useState, type ReactNode, Suspense } from 'react';
+import { useCallback, useState, type ReactNode, Suspense } from 'react';
 import { ActivityDock } from './components/ActivityDock';
 import { InstanceDrawer } from './components/InstanceDrawer';
 import { InstanceNavigator } from './components/InstanceNavigator';
@@ -31,6 +31,12 @@ import { DashboardScheduleWorkspace } from './dashboard-schedule/DashboardSchedu
 import { DashboardRemindersSidebar, type RemindersView } from './dashboard-reminders/DashboardRemindersSidebar';
 import { DashboardRemindersWorkspace } from './dashboard-reminders/DashboardRemindersWorkspace';
 import { useRemindersFeed } from './dashboard-reminders/useRemindersFeed';
+import {
+    firstDirectory,
+    firstFile,
+    useElectronDroppedPaths,
+    type ElectronDroppedPathsEvent,
+} from './hooks/useElectronDroppedPaths';
 import type { HelpTopicId } from './help/helpContent';
 import { NotesCommandPalette } from './notes/NotesCommandPalette';
 import { NotesCommandProvider } from './notes/notes-command-registry';
@@ -140,6 +146,7 @@ type Props = {
 function renderRightPanelContent(
     mode: RightPanelMode,
     previewFilePath: string | null,
+    folderRootPath: string | null,
     onPreviewFile: (path: string) => void,
     selectedInstance: DashboardInstance | null,
     dashboardSettingsUi: DashboardRegistryUi,
@@ -149,7 +156,7 @@ function renderRightPanelContent(
     const fallback = <div style={{ padding: '12px', color: 'var(--text-dim)', fontSize: '12px' }}>Loading...</div>;
     switch (mode) {
         case 'diff': return <Suspense fallback={fallback}><DiffPanel selectedInstance={selectedInstance} settings={dashboardSettingsUi} onSettingsPatch={onDashboardSettingsPatch} /></Suspense>;
-        case 'folder': return <Suspense fallback={fallback}><FolderPanel selectedFilePath={previewFilePath} notesTree={notesModel.tree} notesRoot={notesModel.notesRoot} onPreviewFile={onPreviewFile} /></Suspense>;
+        case 'folder': return <Suspense fallback={fallback}><FolderPanel selectedFilePath={previewFilePath} externalRootPath={folderRootPath} notesTree={notesModel.tree} notesRoot={notesModel.notesRoot} onPreviewFile={onPreviewFile} /></Suspense>;
         case 'doc': return <Suspense fallback={fallback}><DocPanel filePath={previewFilePath ?? undefined} /></Suspense>;
         case 'browser': return <Suspense fallback={fallback}><BrowserPanel /></Suspense>;
         default: return null;
@@ -168,6 +175,8 @@ function renderBottomTabContent(tab: BottomPanelTab, controls: BottomPanelRender
 export function SidebarRailRouter(props: Props) {
     const panelLayout = usePanelLayout();
     const [rightPreviewFilePath, setRightPreviewFilePath] = useState<string | null>(null);
+    const [rightFolderRootPath, setRightFolderRootPath] = useState<string | null>(null);
+    const [, setRecentDroppedPaths] = useState<ElectronDroppedPathsEvent | null>(null);
     const [remindersView, setRemindersView] = useState<RemindersView>('matrix');
     const remindersFeed = useRemindersFeed({ active: props.sidebarMode === 'reminders' });
     const desktopPanelsAvailable = currentManagerSurface() === 'electron';
@@ -184,6 +193,25 @@ export function SidebarRailRouter(props: Props) {
         panelLayout.dispatch({ type: 'OPEN_RIGHT_PANEL', mode: 'doc', slot: 'bottom' });
     }
 
+    const handleDroppedPaths = useCallback((event: ElectronDroppedPathsEvent): void => {
+        setRecentDroppedPaths(event);
+        if (event.source === 'preview') return;
+        const directory = firstDirectory(event.entries);
+        if (directory) {
+            setRightFolderRootPath(directory.path);
+            panelLayout.dispatch({ type: 'OPEN_RIGHT_PANEL', mode: 'folder', slot: 'top' });
+            return;
+        }
+        const file = firstFile(event.entries);
+        if (file) handleRightPreviewFile(file.path);
+    }, [panelLayout]);
+
+    const electronDrop = useElectronDroppedPaths({ onDroppedPaths: handleDroppedPaths });
+
+    const handlePreviewDroppedFiles = useCallback((files: File[]): void => {
+        void electronDrop.resolveDroppedFiles(files, 'preview');
+    }, [electronDrop]);
+
     return (
         <NotesCommandProvider>
         {props.jawCeoVoiceOverlay}
@@ -195,7 +223,7 @@ export function SidebarRailRouter(props: Props) {
             onCloseDrawer={props.onCloseDrawer}
             rightPanelOpen={rightPanelOpen}
             rightPanelWidth={panelLayout.state.rightPanel.width}
-            rightPanelContent={rightPanelOpen ? <RightSidebar renderPanel={mode => renderRightPanelContent(mode, rightPreviewFilePath, handleRightPreviewFile, props.selectedInstance, props.dashboardSettingsUi, props.onDashboardSettingsPatch, props.notesModel)} /> : undefined}
+            rightPanelContent={rightPanelOpen ? <RightSidebar renderPanel={mode => renderRightPanelContent(mode, rightPreviewFilePath, rightFolderRootPath, handleRightPreviewFile, props.selectedInstance, props.dashboardSettingsUi, props.onDashboardSettingsPatch, props.notesModel)} /> : undefined}
             bottomPanelOpen={bottomPanelOpen}
             bottomPanelHeight={panelLayout.state.bottomPanel.height}
             bottomPanelContent={bottomPanelOpen && panelLayout.state.bottomPanel.tabs.length > 0 ? <BottomPanel renderTab={renderBottomTabContent} /> : undefined}
@@ -243,7 +271,7 @@ export function SidebarRailRouter(props: Props) {
                     <div className="workspace-surface-layer">
                         <WorkspaceSurface active={props.sidebarMode === 'instances'}>
                             <Workbench mode={props.activeDetailTab} onModeChange={props.onDetailTabChange} header={props.workbenchHeader} modeActions={props.jawCeoWorkbenchButton} overview={props.detailContent('overview')} preview={(
-                                <InstancePreview instance={props.selectedInstance} data={props.data} enabled={props.previewEnabled} active={props.sidebarMode === 'instances' && props.activeDetailTab === 'preview'} refreshKey={props.previewRefreshKey} theme={props.previewTheme} {...(props.onOpenNotesFromPreview ? { onOpenNotesFromPreview: props.onOpenNotesFromPreview } : {})} onOpenDocFromPreview={handleRightPreviewFile} />
+                                <InstancePreview instance={props.selectedInstance} data={props.data} enabled={props.previewEnabled} active={props.sidebarMode === 'instances' && props.activeDetailTab === 'preview'} refreshKey={props.previewRefreshKey} theme={props.previewTheme} {...(props.onOpenNotesFromPreview ? { onOpenNotesFromPreview: props.onOpenNotesFromPreview } : {})} onOpenDocFromPreview={handleRightPreviewFile} onPreviewDroppedFiles={handlePreviewDroppedFiles} />
                             )} logs={props.detailContent('logs')} settings={props.detailContent('settings')} />
                         </WorkspaceSurface>
                         <WorkspaceSurface active={props.sidebarMode === 'notes'}>

package/public/manager/src/components/InstanceRow.tsx

@@ -67,7 +67,6 @@ export function InstanceRow(props: InstanceRowProps) {
     const transitionLabel = props.transitioning ? TRANSITION_LABELS[props.transitioning] : null;
     const dotClass = `${statusClass(props.instance.status)}${transitionLabel ? ' is-transitioning' : ''}${props.agentBusy ? ' is-busy' : ''}`;
     const primaryLabel = props.instance.label || props.profile?.label || props.label;
-
     async function submitLabel(event: FormEvent<HTMLFormElement>): Promise<void> {
         event.preventDefault();
         event.stopPropagation();

package/public/manager/src/components/WorkbenchHeader.tsx

@@ -11,27 +11,37 @@ type WorkbenchHeaderProps = {
     onOpenHelpTopic?: (topic: HelpTopicId) => void;
 };
 
+function compactPath(path: string): string {
+    const parts = path.split(/[/\\]/).filter(Boolean);
+    if (parts.length <= 2) return path;
+    return `…/${parts.slice(-2).join('/')}`;
+}
+
 export function WorkbenchHeader(props: WorkbenchHeaderProps) {
     const instance = props.instance;
     const canPreview = Boolean(instance?.ok);
     const previewLabel = props.previewEnabled ? 'Preview on' : 'Preview off';
     const hasActions = Boolean(instance || props.onOpenHelpTopic);
+    const projectDirs = instance?.projectDirs?.filter(Boolean) ?? [];
 
     return (
         <div className="detail-header">
             <div>
                 <p className="eyebrow">Selected instance</p>
                 <h2>{instance ? instanceLabel(instance) : 'No instance selected'}</h2>
-                <span>{instance?.workingDir || instance?.url || 'Select an online instance to inspect it.'}</span>
-                {instance?.projectDirs && instance.projectDirs.length > 0 && (
-                    <div className="project-dirs">
-                        <span className="label">Projects:</span>
-                        {instance.projectDirs.map((dir, i) => (
+                {instance ? (
+                    <div className={`project-dirs${projectDirs.length ? '' : ' is-empty'}`}>
+                        <span className="label">Project</span>
+                        {projectDirs.length ? projectDirs.map((dir, i) => (
                             <span key={i} className="project-dir" title={dir}>
-                                {dir.split(/[/\\]/).slice(-2).join('/')}
+                                {compactPath(dir)}
                             </span>
-                        ))}
+                        )) : (
+                            <span className="project-dir">Not set</span>
+                        )}
                     </div>
+                ) : (
+                    <span>Select an online instance to inspect it.</span>
                 )}
             </div>
             {hasActions && (

package/public/manager/src/folder-panel/FolderPanel.tsx

@@ -10,6 +10,7 @@ function getFolderBridge(): FolderBridgeApi | null {
 
 type FolderPanelProps = {
     selectedFilePath?: string | null | undefined;
+    externalRootPath?: string | null | undefined;
     notesTree?: NotesTreeEntry[] | undefined;
     notesRoot?: string | null | undefined;
     onPreviewFile?: ((path: string) => void) | undefined;
@@ -73,7 +74,7 @@ export function FolderPanel(props: FolderPanelProps) {
     }, [loadDir, rootPath, source]);
 
     useEffect(() => {
-        if (rootPath !== null) return;
+        if (rootPath !== null || props.externalRootPath) return;
         let cancelled = false;
         void (async () => {
             const nextRoot = await source.getDefaultRoot();
@@ -82,7 +83,17 @@ export function FolderPanel(props: FolderPanelProps) {
             await loadDir(nextRoot);
         })();
         return () => { cancelled = true; };
-    }, [loadDir, rootPath, source]);
+    }, [loadDir, props.externalRootPath, rootPath, source]);
+
+    useEffect(() => {
+        const externalRoot = props.externalRootPath;
+        if (!externalRoot || externalRoot === rootPath) return;
+        if (rootPath && source.unwatchDir) void source.unwatchDir(rootPath);
+        setRootPath(externalRoot);
+        setExpanded(new Set());
+        setChildrenCache(new Map());
+        void loadDir(externalRoot);
+    }, [loadDir, props.externalRootPath, rootPath, source]);
 
     useEffect(() => {
         if (!source.watchDir || !source.onDirChange || rootPath === null) return;