@eclipse-docks/extension-ai-system 0.8.0 → 0.8.2

package/dist/{cognitive-extension-CG_d39K5.js → cognitive-extension-BKGxwLYj.js}

@@ -1,20 +1,69 @@
-import { _ as AI_SETTINGS_KEY, a as formatContextPercent, b as TOPIC, c as readPromptAttachmentFromFile, d as defaultProvidersSettings, g as AI_SETTINGS_EDITOR_ID, i as formatBucketDetail, m as detectEffortCapability, n as cognitiveRuntime, o as formatTokenCount, p as parseModelIds, r as estimateSessionContextUsage, s as ATTACHMENT_FILE_ACCEPT, u as fetchOpenAICompatibleModels, v as AI_VIEW_NAME, y as OPEN_AI_SETTINGS_COMMAND } from "./runtime-DfNGzEjU.js";
-import { DocksPart, SIDEBAR_AUXILIARY, confirmDialog, contributionRegistry, editorRegistry, registerAll, rootContext, toastError, toastInfo } from "@eclipse-docks/core";
-import { css, customElement, html, nothing, property, query, state } from "@eclipse-docks/core/externals/lit";
+import { C as detectEffortCapability, D as AI_VIEW_NAME, E as AI_SETTINGS_KEY, O as OPEN_AI_SETTINGS_COMMAND, S as parseModelIds, T as AI_SETTINGS_EDITOR_ID, _ as readPromptAttachmentFromFile, b as defaultProvidersSettings, f as estimateSessionContextUsage, g as ATTACHMENT_FILE_ACCEPT, h as formatTokenCount, k as TOPIC, m as formatContextPercent, p as formatBucketDetail, r as cognitiveRuntime, t as registerSkillCommands, y as fetchOpenAICompatibleModels } from "./runtime-B0IHjzQO.js";
+import { DocksPart, File as File$1, FileContentType, SIDEBAR_AUXILIARY, confirmDialog, contributionRegistry, editorRegistry, filebrowserDialog, parseMarkdownHtml, registerAll, rootContext, toastError, toastInfo, workspaceService } from "@eclipse-docks/core";
+import { css, customElement, html, nothing, property, query, state, unsafeHTML } from "@eclipse-docks/core/externals/lit";
 import "@eclipse-docks/core/externals/webawesome";
 import _decorate from "@oxc-project/runtime/helpers/decorate";
+//#region src/view/busy-status.ts
+/** Shown immediately when waiting on a model turn. */
+var INITIAL_BUSY_STATUS = "Thinking…";
+/**
+* Rotating wait copy (Cursor / Copilot style). Picked at random after the initial message.
+* Keep these light and short — they appear in the composer while busy.
+*/
+var BUSY_STATUS_MESSAGES = [
+	"Bribing the hamster…",
+	"Consulting the rubber duck…",
+	"Untangling the spaghetti…",
+	"Herding tokens…",
+	"Warming up the crystals…",
+	"Counting electric sheep…",
+	"Negotiating with the compiler…",
+	"Teaching frogs to code…",
+	"Aligning the bits…",
+	"Feeding the GPU snacks…",
+	"Looking under the couch…",
+	"Summoning a specialist…",
+	"Checking the manual twice…",
+	"Reticulating splines…",
+	"Sharpening pencils…",
+	"Pedaling harder…",
+	"Buffering brilliance…",
+	"Reversing the polarity…",
+	"Convincing the bits to cooperate…",
+	"Dusting off the playbook…",
+	"Whispering to the model…",
+	"Calibrating optimism…",
+	"Unfolding the roadmap…",
+	"Polishing ones and zeros…",
+	"Asking politely…"
+];
+var ROTATE_MS_MIN = 3e3;
+/** Random delay until the next busy-status line (3–12s). */
+function busyStatusRotateMs() {
+	return ROTATE_MS_MIN + Math.floor(Math.random() * 9001);
+}
+/** Next status, avoiding an immediate repeat of `current`. */
+function nextBusyStatus(current) {
+	const pool = BUSY_STATUS_MESSAGES.filter((m) => m !== current);
+	if (!pool.length) return INITIAL_BUSY_STATUS;
+	return pool[Math.floor(Math.random() * pool.length)];
+}
+//#endregion
 //#region src/view/cognitive-view.ts
 var DocksCognitiveView = class DocksCognitiveView extends DocksPart {
 	constructor(..._args) {
 		super(..._args);
 		this.scrollMode = "none";
+		this.composerPasteBound = false;
 		this.sessions = [];
 		this.focusedId = null;
 		this.draft = "";
 		this.pendingAttachmentIds = [];
 		this.dragOver = false;
 		this.previewAttachmentId = null;
+		this.toolDetail = null;
 		this.busy = false;
+		this.busyStatus = INITIAL_BUSY_STATUS;
 		this.pendingPermission = null;
 		this.policyMode = "auto";
 		this.optimizeFor = "balance";
@@ -26,6 +75,13 @@ var DocksCognitiveView = class DocksCognitiveView extends DocksPart {
 		this.historyOpen = false;
 		this.historyQuery = "";
 		this.unsubs = [];
+		this.promptController = null;
+		this.nativePasteHandler = (e) => void this.onComposerPaste(e);
+		this.cancelKeyHandler = (e) => {
+			if (!this.busy || e.key !== "Escape") return;
+			e.preventDefault();
+			this.cancelTurn();
+		};
 	}
 	static {
 		this.styles = css`
@@ -124,11 +180,21 @@ var DocksCognitiveView = class DocksCognitiveView extends DocksPart {
       display: flex;
       flex-direction: column;
       gap: var(--wa-space-2xs);
-      max-width: 100%;
+      width: 90%;
+      min-width: 90%;
+      max-width: 90%;
+      align-self: flex-start;
+      align-items: stretch;
     }
 
     .msg.user {
-      align-items: flex-end;
+      align-self: flex-end;
+    }
+
+    .msg .bubble,
+    .msg wa-details.msg-details {
+      width: 100%;
+      box-sizing: border-box;
     }
 
     .msg-meta {
@@ -166,6 +232,39 @@ var DocksCognitiveView = class DocksCognitiveView extends DocksPart {
       white-space: pre-wrap;
       line-height: var(--wa-line-height-normal);
       max-width: 100%;
+      overflow-wrap: anywhere;
+    }
+
+    .bubble.markdown {
+      white-space: normal;
+    }
+
+    .bubble.markdown > :first-child {
+      margin-block-start: 0;
+    }
+
+    .bubble.markdown > :last-child {
+      margin-block-end: 0;
+    }
+
+    .bubble.markdown pre {
+      overflow-x: auto;
+      padding: var(--wa-space-s);
+      border-radius: var(--wa-border-radius-m);
+      background: color-mix(in srgb, var(--wa-color-neutral-fill-quiet) 55%, transparent);
+    }
+
+    .bubble.markdown code {
+      font-family: var(--wa-font-family-code, ui-monospace, monospace);
+      font-size: 0.92em;
+    }
+
+    .bubble.markdown pre code {
+      font-size: inherit;
+    }
+
+    .bubble.markdown a {
+      color: var(--wa-color-brand-on-normal);
     }
 
     .msg.user .bubble {
@@ -262,6 +361,34 @@ var DocksCognitiveView = class DocksCognitiveView extends DocksPart {
       background: var(--bucket-color, var(--wa-color-brand-fill-normal));
     }
 
+    .context-io {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: var(--wa-space-2xs);
+      padding-top: var(--wa-space-s);
+      border-top: var(--wa-border-width-s) solid var(--wa-color-border-normal);
+      font-size: var(--wa-font-size-xs);
+    }
+
+    .context-io-heading {
+      grid-column: 1 / -1;
+      font-weight: var(--wa-font-weight-semibold, 600);
+    }
+
+    .context-io-item {
+      display: flex;
+      flex-direction: column;
+      gap: 0.1rem;
+    }
+
+    .context-io-item span {
+      color: var(--wa-color-text-quiet);
+    }
+
+    .context-io-item strong {
+      font-variant-numeric: tabular-nums;
+    }
+
     .context-footer {
       display: flex;
       flex-direction: column;
@@ -490,8 +617,44 @@ var DocksCognitiveView = class DocksCognitiveView extends DocksPart {
       color: var(--wa-color-text-quiet);
       margin-bottom: var(--wa-space-2xs);
     }
+
+    .tool-row {
+      display: flex;
+      align-items: center;
+      gap: var(--wa-space-2xs);
+      flex-wrap: wrap;
+    }
+
+    .tool-row .tool-heading {
+      margin-bottom: 0;
+      flex: 1;
+      min-width: 0;
+    }
+
+    .tool-detail-body {
+      max-height: min(70vh, 36rem);
+      overflow: auto;
+    }
+
+    .tool-detail-body pre {
+      margin: 0;
+      font-family: var(--wa-font-family-code, var(--wa-font-mono));
+      font-size: var(--wa-font-size-xs);
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
   `;
 	}
+	updated() {
+		this.bindComposerPaste();
+	}
+	bindComposerPaste() {
+		if (this.composerPasteBound) return;
+		const native = this.textarea?.shadowRoot?.querySelector("textarea");
+		if (!native) return;
+		native.addEventListener("paste", this.nativePasteHandler);
+		this.composerPasteBound = true;
+	}
 	doBeforeUI() {
 		cognitiveRuntime.start();
 		this.syncSessions();
@@ -499,14 +662,13 @@ var DocksCognitiveView = class DocksCognitiveView extends DocksPart {
 		this.approvalMode = cognitiveRuntime.getApprovalMode();
 		cognitiveRuntime.whenReady().then(() => {
 			this.syncSessions();
-			this.syncModels();
-			this.approvalMode = cognitiveRuntime.getApprovalMode();
+			this.restoreRoutingFromRuntime();
 			this.scheduleScrollToBottom();
 		});
 		this.unsubs.push(cognitiveRuntime.events.subscribe(TOPIC.sessionChanged, () => {
 			this.syncSessions();
 			this.scheduleScrollToBottom();
-		}), cognitiveRuntime.events.subscribe(TOPIC.providersChanged, () => this.syncModels()), cognitiveRuntime.events.subscribe(TOPIC.approvalModeChanged, (mode) => {
+		}), cognitiveRuntime.events.subscribe(TOPIC.providersChanged, () => this.onProvidersChanged()), cognitiveRuntime.events.subscribe(TOPIC.approvalModeChanged, (mode) => {
 			this.approvalMode = mode;
 		}), cognitiveRuntime.events.subscribe(TOPIC.permissionAsked, (payload) => {
 			this.pendingPermission = payload;
@@ -525,9 +687,33 @@ var DocksCognitiveView = class DocksCognitiveView extends DocksPart {
 	doClose() {
 		if (this.scrollDebounceTimer) clearTimeout(this.scrollDebounceTimer);
 		this.scrollDebounceTimer = void 0;
+		this.cancelTurn();
+		this.stopBusyStatus();
+		(this.textarea?.shadowRoot?.querySelector("textarea"))?.removeEventListener("paste", this.nativePasteHandler);
+		this.composerPasteBound = false;
 		for (const u of this.unsubs) u();
 		this.unsubs = [];
 	}
+	startBusyStatus() {
+		this.stopBusyStatus();
+		this.busyStatus = INITIAL_BUSY_STATUS;
+		this.setComposerText(this.busyStatus);
+		window.addEventListener("keydown", this.cancelKeyHandler);
+		const schedule = () => {
+			this.busyStatusTimer = setTimeout(() => {
+				this.busyStatus = nextBusyStatus(this.busyStatus);
+				this.setComposerText(this.busyStatus);
+				schedule();
+			}, busyStatusRotateMs());
+		};
+		schedule();
+	}
+	stopBusyStatus() {
+		if (this.busyStatusTimer) clearTimeout(this.busyStatusTimer);
+		this.busyStatusTimer = void 0;
+		this.busyStatus = INITIAL_BUSY_STATUS;
+		window.removeEventListener("keydown", this.cancelKeyHandler);
+	}
 	syncSessions() {
 		const byRecency = cognitiveRuntime.sessions.list();
 		this.sessions = [...byRecency].sort((a, b) => a.createdAt - b.createdAt);
@@ -558,11 +744,10 @@ var DocksCognitiveView = class DocksCognitiveView extends DocksPart {
 	deleteSession(sessionId) {
 		if (this.sessions.length <= 1) {
 			cognitiveRuntime.sessions.createSession({ title: "Chat" });
-			cognitiveRuntime.sessions.remove(sessionId);
-		} else cognitiveRuntime.sessions.remove(sessionId);
+			cognitiveRuntime.removeSession(sessionId);
+		} else cognitiveRuntime.removeSession(sessionId);
 		this.streamingParts = [];
 		this.syncSessions();
-		cognitiveRuntime.commitSessions();
 	}
 	openSession(sessionId) {
 		if (!cognitiveRuntime.sessions.focus(sessionId)) return;
@@ -598,6 +783,31 @@ var DocksCognitiveView = class DocksCognitiveView extends DocksPart {
 		this.modelIds = cognitiveRuntime.listConfiguredModels();
 		if (!this.manualModel || !this.modelIds.includes(this.manualModel)) this.manualModel = this.modelIds[0] ?? cognitiveRuntime.defaultModelId();
 	}
+	/** Mirror persisted runtime policy into the gear menu after hydrate. */
+	restoreRoutingFromRuntime() {
+		this.syncModels();
+		const policy = cognitiveRuntime.getModelPolicy();
+		if (policy.mode === "auto") {
+			this.policyMode = "auto";
+			this.optimizeFor = policy.optimizeFor;
+		} else {
+			this.policyMode = "manual";
+			this.manualModel = policy.model;
+			this.manualEffort = policy.effort ?? "auto";
+			if (!this.manualModel || !this.modelIds.includes(this.manualModel)) {
+				this.manualModel = this.modelIds[0] ?? cognitiveRuntime.defaultModelId();
+				this.applyPolicy();
+			}
+		}
+		this.approvalMode = cognitiveRuntime.getApprovalMode();
+	}
+	onProvidersChanged() {
+		this.syncModels();
+		if (this.policyMode !== "manual") return;
+		if (this.manualModel && this.modelIds.includes(this.manualModel)) return;
+		this.manualModel = this.modelIds[0] ?? cognitiveRuntime.defaultModelId();
+		this.applyPolicy();
+	}
 	effortChoices() {
 		const cap = detectEffortCapability(this.manualModel || cognitiveRuntime.defaultModelId());
 		if (!cap.supported) return ["auto", "none"];
@@ -631,6 +841,7 @@ var DocksCognitiveView = class DocksCognitiveView extends DocksPart {
 			if (optimize === "cost" || optimize === "balance" || optimize === "intelligence") {
 				this.policyMode = "auto";
 				this.optimizeFor = optimize;
+				this.applyPolicy();
 			}
 			return;
 		}
@@ -639,6 +850,7 @@ var DocksCognitiveView = class DocksCognitiveView extends DocksPart {
 			if (!model) return;
 			this.policyMode = "manual";
 			this.manualModel = model;
+			this.applyPolicy();
 		}
 	}
 	applyPolicy() {
@@ -652,12 +864,15 @@ var DocksCognitiveView = class DocksCognitiveView extends DocksPart {
 		};
 		cognitiveRuntime.setModelPolicy(policy);
 	}
+	async setComposerText(value) {
+		this.draft = value;
+		await this.updateComplete;
+		if (this.textarea) this.textarea.value = value;
+	}
 	async clearComposer() {
-		this.draft = "";
 		this.pendingAttachmentIds = [];
-		await this.updateComplete;
-		if (this.textarea) this.textarea.value = "";
 		if (this.fileInput) this.fileInput.value = "";
+		await this.setComposerText("");
 	}
 	sessionAttachments() {
 		return this.focusedSession()?.attachments ?? [];
@@ -679,6 +894,40 @@ var DocksCognitiveView = class DocksCognitiveView extends DocksPart {
 		if (this.previewAttachmentId === attachmentId) this.previewAttachmentId = null;
 		this.syncSessions();
 	}
+	async saveAttachmentToWorkspace(attachmentId) {
+		const attachment = this.sessionAttachments().find((a) => a.id === attachmentId);
+		if (!attachment) return;
+		const preferredName = attachmentSaveFileName(attachment);
+		const parent = await filebrowserDialog("directory");
+		if (!parent) return;
+		try {
+			const workspace = await workspaceService.getWorkspace();
+			if (!workspace) {
+				toastError("No workspace connected");
+				return;
+			}
+			const parentPath = parent.replace(/\/$/, "");
+			const fileName = await uniqueWorkspaceFileName(workspace, parentPath, preferredName);
+			const path = `${parentPath}/${fileName}`;
+			const resource = await workspace.getResource(path, { create: true });
+			if (!(resource instanceof File$1)) {
+				toastError("Could not create file in the selected folder");
+				return;
+			}
+			if (attachment.dataUrl) {
+				const blob = await (await fetch(attachment.dataUrl)).blob();
+				const named = new globalThis.File([blob], fileName, { type: blob.type || attachment.mime || "" });
+				await resource.saveContents(named, { contentType: FileContentType.BINARY });
+			} else if (attachment.text != null) await resource.saveContents(attachment.text);
+			else {
+				toastError("Attachment has no payload to save");
+				return;
+			}
+			toastInfo(`Saved ${fileName}`);
+		} catch (err) {
+			toastError(err instanceof Error ? err.message : String(err));
+		}
+	}
 	async addFiles(fileList) {
 		const files = [...fileList];
 		if (!files.length) return;
@@ -699,7 +948,7 @@ var DocksCognitiveView = class DocksCognitiveView extends DocksPart {
 			}
 			accepted.push(result.attachment);
 		}
-		const stored = cognitiveRuntime.addAttachments(sessionId, accepted);
+		const stored = await cognitiveRuntime.addAttachments(sessionId, accepted);
 		if (stored.length) this.pendingAttachmentIds = [...this.pendingAttachmentIds, ...stored.map((a) => a.id).filter((id) => !this.pendingAttachmentIds.includes(id))];
 		this.syncSessions();
 	}
@@ -724,22 +973,47 @@ var DocksCognitiveView = class DocksCognitiveView extends DocksPart {
 		this.dragOver = false;
 		if (e.dataTransfer?.files?.length) await this.addFiles(e.dataTransfer.files);
 	}
+	/** Attach clipboard files/images (e.g. Ctrl+V screenshot) when focused in the prompt. */
+	async onComposerPaste(e) {
+		if (this.busy) {
+			e.preventDefault();
+			return;
+		}
+		const files = filesFromClipboard(e.clipboardData);
+		if (!files.length) return;
+		e.preventDefault();
+		await this.addFiles(files);
+	}
+	cancelTurn() {
+		if (!this.busy && !this.promptController) return;
+		this.promptController?.abort();
+		if (this.pendingPermission) this.resolvePermission("deny");
+	}
 	async send() {
 		const text = this.draft.trim();
 		const attachmentIds = [...this.pendingAttachmentIds];
 		if (!text && !attachmentIds.length || this.busy) return;
 		this.applyPolicy();
-		await this.clearComposer();
+		this.pendingAttachmentIds = [];
+		if (this.fileInput) this.fileInput.value = "";
+		const controller = new AbortController();
+		this.promptController = controller;
 		this.busy = true;
 		this.streamingParts = [];
+		this.startBusyStatus();
 		try {
 			await cognitiveRuntime.prompt({
 				sessionId: this.focusedId ?? void 0,
 				text,
-				attachmentIds
+				attachmentIds,
+				signal: controller.signal
 			});
 		} finally {
+			if (this.promptController === controller) this.promptController = null;
+			this.stopBusyStatus();
 			this.busy = false;
+			this.streamingParts = [];
+			await this.clearComposer();
 			this.syncSessions();
 			this.scheduleScrollToBottom();
 			this.textarea?.focus();
@@ -786,6 +1060,15 @@ var DocksCognitiveView = class DocksCognitiveView extends DocksPart {
                               `}
                           <span class="attach-name">${file.name}</span>
                         </button>
+                        <wa-button
+                          size="s"
+                          appearance="plain"
+                          title=${`Save ${file.name} to workspace folder`}
+                          ?disabled=${this.busy}
+                          @click=${() => void this.saveAttachmentToWorkspace(file.id)}
+                        >
+                          <wa-icon name="floppy-disk" label=${`Save ${file.name}`}></wa-icon>
+                        </wa-button>
                         <wa-button
                           size="s"
                           appearance="plain"
@@ -839,6 +1122,38 @@ var DocksCognitiveView = class DocksCognitiveView extends DocksPart {
           <wa-button variant="brand" @click=${() => this.closeAttachmentPreview()}>Close</wa-button>
         </div>
       </wa-dialog>
+    `;
+	}
+	openToolDetail(part) {
+		this.toolDetail = part;
+	}
+	closeToolDetail() {
+		this.toolDetail = null;
+	}
+	renderToolDetailDialog() {
+		const tool = this.toolDetail;
+		if (!tool) return nothing;
+		const label = `${tool.name} · ${tool.status}${tool.durationMs != null ? ` · ${tool.durationMs}ms` : ""}`;
+		const body = JSON.stringify({
+			args: tool.args ?? {},
+			result: tool.result ?? null
+		}, null, 2);
+		return html`
+      <wa-dialog
+        label=${label}
+        open
+        light-dismiss
+        with-footer
+        style="--width: min(44rem, 96vw)"
+        @wa-after-hide=${() => this.closeToolDetail()}
+      >
+        <div class="tool-detail-body">
+          <pre>${body}</pre>
+        </div>
+        <div slot="footer">
+          <wa-button variant="brand" @click=${() => this.closeToolDetail()}>Close</wa-button>
+        </div>
+      </wa-dialog>
     `;
 	}
 	resolvePermission(action) {
@@ -878,7 +1193,7 @@ var DocksCognitiveView = class DocksCognitiveView extends DocksPart {
 		const usage = this.contextUsage();
 		const canCompact = (this.focusedSession()?.history.length ?? 0) > 12;
 		const percentLabel = formatContextPercent(usage.percent);
-		const title = `Context ${percentLabel} · ${formatTokenCount(usage.used)} / ${formatTokenCount(usage.limit)} tokens`;
+		const title = `Context window ${percentLabel} · ~${formatTokenCount(usage.used)} / ${formatTokenCount(usage.limit)}`;
 		const ringValue = Math.min(100, Math.max(usage.percent, usage.used > 0 ? 1 : 0));
 		return html`
       <wa-dropdown
@@ -907,7 +1222,7 @@ var DocksCognitiveView = class DocksCognitiveView extends DocksPart {
           @keydown=${(e) => e.stopPropagation()}
         >
           <div class="context-header">
-            <strong>Context tokens</strong>
+            <strong>Context window</strong>
             <span>${percentLabel}</span>
           </div>
           <div class="context-bars">
@@ -928,10 +1243,26 @@ var DocksCognitiveView = class DocksCognitiveView extends DocksPart {
           </div>
           <div class="context-footer">
             <span class="context-remaining">
-              ~${formatTokenCount(usage.used)} used · ${formatTokenCount(usage.remaining)} free of
+              ~${formatTokenCount(usage.used)} in window · ${formatTokenCount(usage.remaining)} free of
               ${formatTokenCount(usage.limit)}
               · ${shortModelLabel(usage.modelRef)}
             </span>
+          </div>
+          <div
+            class="context-io"
+            title="Sum of provider-reported tokens across every model request in this chat. Each tool-loop call re-sends the prompt, so API input grows much faster than the context window fill."
+          >
+            <div class="context-io-heading">API usage (this chat)</div>
+            <div class="context-io-item">
+              <span>Input</span>
+              <strong>${usage.inputTokens ? formatTokenCount(usage.inputTokens) : "—"}</strong>
+            </div>
+            <div class="context-io-item">
+              <span>Output</span>
+              <strong>${usage.outputTokens ? formatTokenCount(usage.outputTokens) : "—"}</strong>
+            </div>
+          </div>
+          <div class="context-footer">
             <wa-button
               size="s"
               variant=${usage.level === "critical" ? "danger" : "neutral"}
@@ -975,16 +1306,27 @@ var DocksCognitiveView = class DocksCognitiveView extends DocksPart {
           <div class="composer">
             <div class="composer-row">
               <wa-textarea
-                placeholder="Enter your message here..."
+                placeholder=${this.busy ? this.busyStatus : "Enter your message here…"}
                 size="s"
                 resize="auto"
                 rows="1"
-                .value=${this.draft}
+                .value=${this.busy ? this.busyStatus : this.draft}
                 ?disabled=${this.busy}
+                ?readonly=${this.busy}
                 @input=${(e) => {
+			if (this.busy) return;
 			this.draft = e.target.value;
 		}}
                 @keydown=${(e) => {
+			if (this.busy) {
+				if (e.key === "Escape") {
+					e.preventDefault();
+					this.cancelTurn();
+					return;
+				}
+				e.preventDefault();
+				return;
+			}
 			if (e.key === "Enter" && !e.shiftKey) {
 				e.preventDefault();
 				this.send();
@@ -992,6 +1334,17 @@ var DocksCognitiveView = class DocksCognitiveView extends DocksPart {
 		}}
               ></wa-textarea>
               <div class="composer-actions">
+                ${this.busy ? html`
+                      <wa-button
+                        size="s"
+                        appearance="plain"
+                        variant="danger"
+                        title="Stop (Esc)"
+                        @click=${() => this.cancelTurn()}
+                      >
+                        <wa-icon name="stop" label="Stop"></wa-icon>
+                      </wa-button>
+                    ` : nothing}
                 ${this.renderAttachmentDropdown()}
                 ${this.renderContextDropdown()}
               </div>
@@ -999,6 +1352,7 @@ var DocksCognitiveView = class DocksCognitiveView extends DocksPart {
           </div>
         </div>
         ${this.renderAttachmentDialog()}
+        ${this.renderToolDetailDialog()}
       </div>
     `;
 	}
@@ -1130,6 +1484,7 @@ var DocksCognitiveView = class DocksCognitiveView extends DocksPart {
 		}
 		if (value.startsWith("effort:")) {
 			this.manualEffort = value.slice(7) || "auto";
+			this.applyPolicy();
 			return;
 		}
 		this.onRouterSelect(value);
@@ -1177,7 +1532,7 @@ var DocksCognitiveView = class DocksCognitiveView extends DocksPart {
             <wa-dropdown-item
               value=${option.value}
               type="checkbox"
-              ?checked=${option.value === selected}
+              .checked=${option.value === selected}
             >
               ${option.label}
             </wa-dropdown-item>
@@ -1189,7 +1544,7 @@ var DocksCognitiveView = class DocksCognitiveView extends DocksPart {
                 <wa-dropdown-item
                   value=${`model:${id}`}
                   type="checkbox"
-                  ?checked=${selected === `model:${id}`}
+                  .checked=${selected === `model:${id}`}
                 >
                   ${id}
                 </wa-dropdown-item>
@@ -1202,7 +1557,7 @@ var DocksCognitiveView = class DocksCognitiveView extends DocksPart {
                   <wa-dropdown-item
                     value=${`effort:${level}`}
                     type="checkbox"
-                    ?checked=${this.manualEffort === level}
+                    .checked=${this.manualEffort === level}
                   >
                     ${level}
                   </wa-dropdown-item>
@@ -1215,7 +1570,7 @@ var DocksCognitiveView = class DocksCognitiveView extends DocksPart {
             <wa-dropdown-item
               value=${`approval:${option.value}`}
               type="checkbox"
-              ?checked=${this.approvalMode === option.value}
+              .checked=${this.approvalMode === option.value}
             >
               ${option.label}
             </wa-dropdown-item>
@@ -1268,18 +1623,18 @@ var DocksCognitiveView = class DocksCognitiveView extends DocksPart {
 		return this.renderAssistantMessage(message);
 	}
 	renderAssistantMessage(message, opts = {}) {
-		const textParts = message.parts.filter((p) => p.type === "text");
-		const techParts = message.parts.filter((p) => p.type !== "text");
+		const { summaryText, techParts } = splitAssistantPresentation(message.parts);
 		const open = opts.streaming === true || techParts.some((p) => (p.type === "reasoning" || p.type === "tool") && p.status === "streaming");
+		const summaryBubble = summaryText.length ? summaryText.map((p) => this.renderTextPart(p, { markdown: true })) : opts.streaming ? nothing : html`<div class="bubble">${technicalSummary(techParts)}</div>`;
 		const summary = html`
       <div slot="summary" class="msg-summary">
         ${opts.streaming ? html`
               <div class="streaming-meta">
                 <wa-spinner style="font-size: 0.85rem"></wa-spinner>
-                <span>streaming…</span>
+                <span>${this.busy ? this.busyStatus : "streaming…"}</span>
               </div>
             ` : nothing}
-        ${textParts.length ? textParts.map((p) => this.renderTextPart(p)) : html`<div class="bubble">${technicalSummary(techParts)}</div>`}
+        ${summaryBubble}
       </div>
     `;
 		if (!techParts.length) return html`
@@ -1287,10 +1642,10 @@ var DocksCognitiveView = class DocksCognitiveView extends DocksPart {
           ${opts.streaming ? html`
                 <div class="streaming-meta">
                   <wa-spinner style="font-size: 0.85rem"></wa-spinner>
-                  <span>streaming…</span>
+                  <span>${this.busy ? this.busyStatus : "streaming…"}</span>
                 </div>
               ` : nothing}
-          ${textParts.map((p) => this.renderTextPart(p))}
+          ${summaryBubble}
           ${message.id !== "streaming" ? this.renderMessageMeta(message) : nothing}
         </div>
       `;
@@ -1316,9 +1671,10 @@ var DocksCognitiveView = class DocksCognitiveView extends DocksPart {
       </div>
     `;
 	}
-	renderTextPart(part) {
-		if (part.type === "text") return html`<div class="bubble">${part.text}</div>`;
-		return nothing;
+	renderTextPart(part, opts = {}) {
+		if (part.type !== "text") return nothing;
+		if (opts.markdown) return html`<div class="bubble markdown">${unsafeHTML(parseMarkdownHtml(part.text))}</div>`;
+		return html`<div class="bubble">${part.text}</div>`;
 	}
 	renderTechnicalPart(part) {
 		if (part.type === "reasoning") return html`
@@ -1329,13 +1685,20 @@ var DocksCognitiveView = class DocksCognitiveView extends DocksPart {
       `;
 		if (part.type === "tool") {
 			const heading = `${part.name} · ${part.status}${part.durationMs != null ? ` · ${part.durationMs}ms` : ""}`;
+			const hasDetail = part.args != null || part.result != null || part.status === "error";
 			return html`
-        <div>
+        <div class="tool-row">
           <div class="tool-heading">${heading}</div>
-          <pre class="args">${JSON.stringify({
-				args: part.args,
-				result: part.result
-			}, null, 2)}</pre>
+          ${hasDetail ? html`
+                <wa-button
+                  size="s"
+                  appearance="plain"
+                  variant="neutral"
+                  @click=${() => this.openToolDetail(part)}
+                >
+                  Details
+                </wa-button>
+              ` : nothing}
         </div>
       `;
 		}
@@ -1351,7 +1714,9 @@ _decorate([state()], DocksCognitiveView.prototype, "draft", void 0);
 _decorate([state()], DocksCognitiveView.prototype, "pendingAttachmentIds", void 0);
 _decorate([state()], DocksCognitiveView.prototype, "dragOver", void 0);
 _decorate([state()], DocksCognitiveView.prototype, "previewAttachmentId", void 0);
+_decorate([state()], DocksCognitiveView.prototype, "toolDetail", void 0);
 _decorate([state()], DocksCognitiveView.prototype, "busy", void 0);
+_decorate([state()], DocksCognitiveView.prototype, "busyStatus", void 0);
 _decorate([state()], DocksCognitiveView.prototype, "pendingPermission", void 0);
 _decorate([state()], DocksCognitiveView.prototype, "policyMode", void 0);
 _decorate([state()], DocksCognitiveView.prototype, "optimizeFor", void 0);
@@ -1364,14 +1729,14 @@ _decorate([state()], DocksCognitiveView.prototype, "historyOpen", void 0);
 _decorate([state()], DocksCognitiveView.prototype, "historyQuery", void 0);
 DocksCognitiveView = _decorate([customElement("docks-cognitive-view")], DocksCognitiveView);
 var APPROVAL_OPTIONS$1 = [
-	{
-		value: "manual",
-		label: "Manual"
-	},
 	{
 		value: "auto_safe",
 		label: "Auto-approve non-critical"
 	},
+	{
+		value: "manual",
+		label: "Manual"
+	},
 	{
 		value: "auto_all",
 		label: "Approve all"
@@ -1380,15 +1745,64 @@ var APPROVAL_OPTIONS$1 = [
 function capitalize(value) {
 	return value ? value[0].toUpperCase() + value.slice(1) : value;
 }
+/** Basename used when saving an attachment into a workspace folder. */
+function attachmentSaveFileName(attachment) {
+	const fromName = attachment.name.trim().split(/[/\\]/).pop()?.trim();
+	if (fromName) return fromName;
+	const fromPath = attachment.path?.split(/[/\\]/).pop()?.trim();
+	if (fromPath) return fromPath;
+	if (attachment.kind === "image") return attachment.mime === "image/jpeg" ? "attachment.jpg" : "attachment.png";
+	return "attachment.txt";
+}
+/** `photo.png` → `photo (1).png`, `photo (2).png`, … when the path is taken. */
+function withNumericSuffix(fileName, n) {
+	const dot = fileName.lastIndexOf(".");
+	if (dot > 0) return `${fileName.slice(0, dot)} (${n})${fileName.slice(dot)}`;
+	return `${fileName} (${n})`;
+}
+async function uniqueWorkspaceFileName(workspace, parentPath, fileName) {
+	const candidatePath = (name) => `${parentPath}/${name}`;
+	if (!await workspace.getResource(candidatePath(fileName))) return fileName;
+	for (let n = 1; n < 1e4; n++) {
+		const next = withNumericSuffix(fileName, n);
+		if (!await workspace.getResource(candidatePath(next))) return next;
+	}
+	return withNumericSuffix(fileName, Date.now());
+}
+/**
+* Prefer text after the last tool/reasoning as the visible reply.
+* Interim narration stays out of the bubble — tool details cover the execution trail.
+*/
+function splitAssistantPresentation(parts) {
+	const techParts = parts.filter((p) => p.type !== "text");
+	let lastTechIndex = -1;
+	for (let i = 0; i < parts.length; i++) if (parts[i].type !== "text") lastTechIndex = i;
+	if (lastTechIndex < 0) return {
+		summaryText: parts.filter((p) => p.type === "text"),
+		techParts
+	};
+	const afterTools = parts.slice(lastTechIndex + 1).filter((p) => p.type === "text").filter((p) => p.text.trim());
+	if (afterTools.length) return {
+		summaryText: afterTools,
+		techParts
+	};
+	return {
+		summaryText: [],
+		techParts
+	};
+}
 function technicalSummary(parts) {
 	const tools = parts.filter((p) => p.type === "tool");
-	const reasoning = parts.some((p) => p.type === "reasoning");
-	const steps = parts.filter((p) => p.type === "step");
-	const bits = [];
-	if (tools.length) bits.push(tools.map((t) => `${t.name} · ${t.status}${t.durationMs != null ? ` · ${t.durationMs}ms` : ""}`).join(", "));
-	if (reasoning) bits.push("Thinking");
-	if (steps.length) bits.push(`${steps.length} step${steps.length === 1 ? "" : "s"}`);
-	return bits.join(" · ") || "Details";
+	const done = tools.filter((t) => t.status === "done").length;
+	const errors = tools.filter((t) => t.status === "error").length;
+	if (!tools.length) {
+		if (parts.some((p) => p.type === "reasoning")) return "Thinking…";
+		return "Details";
+	}
+	if (errors && done) return `Finished with ${errors} issue${errors === 1 ? "" : "s"} (${done} ok).`;
+	if (errors) return `Couldn't complete ${errors} step${errors === 1 ? "" : "s"}.`;
+	if (tools.some((t) => t.status === "running" || t.status === "preparing")) return "Working…";
+	return done === 1 ? "Done." : `Done · ${done} steps.`;
 }
 function startOfDay(ts) {
 	const d = new Date(ts);
@@ -1463,6 +1877,29 @@ function shortModelLabel(modelRef) {
 	const slash = modelRef.indexOf("/");
 	return slash === -1 ? modelRef : modelRef.slice(slash + 1);
 }
+function filesFromClipboard(data) {
+	if (!data) return [];
+	const fromFiles = [...data.files ?? []].filter((f) => f && f.size > 0);
+	if (fromFiles.length) return fromFiles;
+	const fromItems = [];
+	for (const item of data.items ?? []) {
+		if (item.kind !== "file") continue;
+		const file = item.getAsFile();
+		if (!file || file.size <= 0) continue;
+		fromItems.push(nameClipboardFile(file, item.type));
+	}
+	return fromItems;
+}
+function nameClipboardFile(file, mimeHint) {
+	const mime = (file.type || mimeHint || "application/octet-stream").toLowerCase();
+	if (file.name && file.name !== "image.png" && file.name !== "blob") return file;
+	const ext = mime === "image/jpeg" || mime === "image/jpg" ? "jpg" : mime === "image/png" ? "png" : mime === "image/gif" ? "gif" : mime === "image/webp" ? "webp" : mime === "image/svg+xml" ? "svg" : mime.startsWith("image/") ? "png" : "bin";
+	const name = `clipboard-${Date.now()}.${ext}`;
+	return new File([file], name, {
+		type: mime || file.type,
+		lastModified: file.lastModified
+	});
+}
 function mergePart(parts, part) {
 	const next = [...parts];
 	const last = next[next.length - 1];
@@ -1491,16 +1928,16 @@ function mergePart(parts, part) {
 //#endregion
 //#region src/view/cognitive-settings-editor.ts
 var APPROVAL_OPTIONS = [
-	{
-		value: "manual",
-		label: "Manual",
-		hint: "Confirm every tool before it runs"
-	},
 	{
 		value: "auto_safe",
 		label: "Auto-approve non-critical",
 		hint: "The agent classifies each tool as safe or critical; only critical ones ask for approval"
 	},
+	{
+		value: "manual",
+		label: "Manual",
+		hint: "Confirm every tool before it runs"
+	},
 	{
 		value: "auto_all",
 		label: "Approve all",
@@ -1711,59 +2148,15 @@ var DocksCognitiveSettingsEditor = class DocksCognitiveSettingsEditor extends Do
 			toastError(err instanceof Error ? err.message : String(err));
 		}
 	}
-	renderToolbar() {
-		return html`
-      <wa-button size="s" appearance="plain" title="Add provider" @click=${() => this.addProvider()}>
-        <wa-icon name="plus" label="Add provider"></wa-icon>
-      </wa-button>
-      <wa-button
-        size="s"
-        variant="brand"
-        ?disabled=${!this.isDirty()}
-        @click=${() => void this.save()}
-      >
-        <wa-icon slot="start" name="floppy-disk"></wa-icon>
-        Save
-      </wa-button>
-    `;
-	}
 	renderContent() {
 		const rows = this.settings.providers;
 		return html`
       <div class="editor">
-        <section class="section">
-          <header class="header">
-            <div>
-              <h2>Tool approvals</h2>
-              <p class="hint">How the agent handles tool confirmation — same options as GitHub Copilot.</p>
-            </div>
-          </header>
-          <wa-radio-group
-            name="approval-mode"
-            label="Approval mode"
-            orientation="vertical"
-            .value=${this.approvalMode}
-            @change=${(e) => {
-			const value = e.target.value;
-			if (value === "manual" || value === "auto_safe" || value === "auto_all") this.setApprovalMode(value);
-		}}
-          >
-            ${APPROVAL_OPTIONS.map((option) => html`
-                <wa-radio value=${option.value}>
-                  <span class="approval-option">
-                    <span class="approval-label">${option.label}</span>
-                    <span class="approval-hint">${option.hint}</span>
-                  </span>
-                </wa-radio>
-              `)}
-          </wa-radio-group>
-        </section>
-
         <section class="section">
           <header class="header">
             <div>
               <h2>AI Providers</h2>
-              <p class="hint">OpenAI-compatible endpoints. Edit cells in place, then Save.</p>
+              <p class="hint">OpenAI-compatible endpoints. Edit cells in place, then save from the toolbar.</p>
             </div>
             <wa-button size="s" variant="brand" appearance="filled" @click=${() => this.addProvider()}>
               <wa-icon slot="start" name="plus"></wa-icon>
@@ -1798,6 +2191,34 @@ var DocksCognitiveSettingsEditor = class DocksCognitiveSettingsEditor extends Do
             <code>providerId/modelId</code> for Auto routing.
           </wa-callout>
         </section>
+
+        <section class="section">
+          <header class="header">
+            <div>
+              <h2>Tool approvals</h2>
+              <p class="hint">How the agent handles tool confirmation — same options as GitHub Copilot.</p>
+            </div>
+          </header>
+          <wa-radio-group
+            name="approval-mode"
+            label="Approval mode"
+            orientation="vertical"
+            .value=${this.approvalMode}
+            @change=${(e) => {
+			const value = e.target.value;
+			if (value === "manual" || value === "auto_safe" || value === "auto_all") this.setApprovalMode(value);
+		}}
+          >
+            ${APPROVAL_OPTIONS.map((option) => html`
+                <wa-radio value=${option.value}>
+                  <span class="approval-option">
+                    <span class="approval-label">${option.label}</span>
+                    <span class="approval-hint">${option.hint}</span>
+                  </span>
+                </wa-radio>
+              `)}
+          </wa-radio-group>
+        </section>
       </div>
     `;
 	}
@@ -2088,6 +2509,7 @@ function uniqueProviderId(existing) {
 //#endregion
 //#region src/cognitive-extension.ts
 cognitiveRuntime.start();
+registerSkillCommands();
 rootContext.put("cognitiveRuntime", cognitiveRuntime);
 contributionRegistry.registerContribution(SIDEBAR_AUXILIARY, {
 	name: AI_VIEW_NAME,
@@ -2126,4 +2548,4 @@ registerAll({
 });
 //#endregion
 
-//# sourceMappingURL=cognitive-extension-CG_d39K5.js.map
+//# sourceMappingURL=cognitive-extension-BKGxwLYj.js.map