@eclipse-docks/extension-ai-system 0.7.140 → 0.7.141

package/dist/cognitive-extension-CG_d39K5.js

@@ -0,0 +1,2129 @@
+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 "@eclipse-docks/core/externals/webawesome";
+import _decorate from "@oxc-project/runtime/helpers/decorate";
+//#region src/view/cognitive-view.ts
+var DocksCognitiveView = class DocksCognitiveView extends DocksPart {
+	constructor(..._args) {
+		super(..._args);
+		this.scrollMode = "none";
+		this.sessions = [];
+		this.focusedId = null;
+		this.draft = "";
+		this.pendingAttachmentIds = [];
+		this.dragOver = false;
+		this.previewAttachmentId = null;
+		this.busy = false;
+		this.pendingPermission = null;
+		this.policyMode = "auto";
+		this.optimizeFor = "balance";
+		this.manualModel = "";
+		this.manualEffort = "auto";
+		this.approvalMode = "auto_safe";
+		this.modelIds = [];
+		this.streamingParts = [];
+		this.historyOpen = false;
+		this.historyQuery = "";
+		this.unsubs = [];
+	}
+	static {
+		this.styles = css`
+    :host {
+      height: 100%;
+      min-height: 0;
+      background: var(--wa-color-surface-default);
+      color: var(--wa-color-text-normal);
+      font-family: var(--wa-font-family-body);
+    }
+
+    .part-content,
+    .part-content-inner {
+      height: 100%;
+      min-height: 0;
+    }
+
+    .cognitive-shell {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      min-height: 0;
+      overflow: hidden;
+      /* Establish a definite containing block for wa-scroller's height: 100%. */
+      position: relative;
+    }
+
+    wa-dropdown.history-menu::part(menu) {
+      min-width: 18rem;
+      max-width: min(24rem, 92vw);
+      max-height: min(28rem, 70vh);
+      overflow-y: auto;
+      padding-top: 0;
+    }
+
+    .history-search {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+      display: block;
+      padding: var(--wa-space-s);
+      background: var(--wa-color-surface-raised);
+      border-bottom: var(--wa-border-width-s) solid var(--wa-color-border-normal);
+    }
+
+    .history-search wa-input {
+      width: 100%;
+    }
+
+    .history-item-title {
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .history-item-meta {
+      color: var(--wa-color-text-quiet);
+      font-size: var(--wa-font-size-xs);
+      flex-shrink: 0;
+    }
+
+    .history-empty {
+      padding: var(--wa-space-m);
+      color: var(--wa-color-text-quiet);
+      font-size: var(--wa-font-size-s);
+      text-align: center;
+    }
+
+    wa-scroller.transcript {
+      /* flex-basis 0 so the host gets a definite height; wa-scroller vertical uses height:100%. */
+      flex: 1 1 0;
+      min-height: 0;
+      height: 100%;
+      overflow: hidden;
+    }
+
+    .transcript-inner {
+      display: flex;
+      flex-direction: column;
+      gap: var(--wa-space-m);
+      padding: var(--wa-space-m);
+      min-height: 100%;
+      box-sizing: border-box;
+    }
+
+    /* Pushes short threads to the bottom without breaking overflow scroll. */
+    .transcript-spacer {
+      flex: 1 0 0;
+      min-height: 0;
+    }
+
+    .msg {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      gap: var(--wa-space-2xs);
+      max-width: 100%;
+    }
+
+    .msg.user {
+      align-items: flex-end;
+    }
+
+    .msg-meta {
+      position: absolute;
+      right: var(--wa-space-2xs);
+      bottom: var(--wa-space-2xs);
+      z-index: 1;
+      display: flex;
+      gap: var(--wa-space-2xs);
+      align-items: center;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+      max-width: calc(100% - var(--wa-space-s));
+      padding: var(--wa-space-3xs) var(--wa-space-2xs);
+      border-radius: var(--wa-border-radius-m);
+      background: color-mix(in srgb, var(--wa-color-surface-default) 88%, transparent);
+      font-size: var(--wa-font-size-xs);
+      color: var(--wa-color-text-quiet);
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity var(--wa-transition-fast, 120ms) ease;
+    }
+
+    .msg:hover .msg-meta,
+    .msg:focus-within .msg-meta {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    .bubble {
+      padding: var(--wa-space-s) var(--wa-space-m);
+      border-radius: var(--wa-border-radius-l);
+      background: var(--wa-color-surface-raised);
+      border: var(--wa-border-width-s) solid var(--wa-color-border-normal);
+      white-space: pre-wrap;
+      line-height: var(--wa-line-height-normal);
+      max-width: 100%;
+    }
+
+    .msg.user .bubble {
+      background: color-mix(in srgb, var(--wa-color-brand-fill-normal) 22%, transparent);
+      border-color: color-mix(in srgb, var(--wa-color-brand-fill-normal) 40%, transparent);
+    }
+
+    .streaming-meta {
+      display: flex;
+      gap: var(--wa-space-2xs);
+      align-items: center;
+      color: var(--wa-color-text-quiet);
+      font-size: var(--wa-font-size-s);
+    }
+
+    .composer-shell {
+      display: flex;
+      flex-direction: column;
+      gap: var(--wa-space-s);
+      padding: var(--wa-space-s) var(--wa-space-m) var(--wa-space-m);
+      border-top: var(--wa-border-width-s) solid var(--wa-color-border-normal);
+      flex-shrink: 0;
+    }
+
+    wa-dropdown.settings-menu::part(menu) {
+      min-width: 16rem;
+      max-width: min(28rem, 92vw);
+    }
+
+    wa-dropdown.context-menu::part(menu) {
+      min-width: 17rem;
+      max-width: min(22rem, 92vw);
+      padding: var(--wa-space-s);
+    }
+
+    .context-ring {
+      --size: 1.35rem;
+      --track-width: 2.5px;
+      --indicator-width: 2.5px;
+      font-size: 0;
+    }
+
+    .context-panel {
+      display: flex;
+      flex-direction: column;
+      gap: var(--wa-space-s);
+    }
+
+    .context-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+      gap: var(--wa-space-s);
+    }
+
+    .context-header strong {
+      font-size: var(--wa-font-size-s);
+    }
+
+    .context-header span {
+      color: var(--wa-color-text-quiet);
+      font-size: var(--wa-font-size-xs);
+    }
+
+    .context-bars {
+      display: flex;
+      flex-direction: column;
+      gap: var(--wa-space-2xs);
+    }
+
+    .context-row {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      gap: var(--wa-space-2xs);
+      font-size: var(--wa-font-size-xs);
+    }
+
+    .context-row-label {
+      color: var(--wa-color-text-quiet);
+    }
+
+    .context-meter {
+      grid-column: 1 / -1;
+      height: 0.35rem;
+      border-radius: var(--wa-border-radius-pill);
+      background: var(--wa-color-neutral-fill-quiet);
+      overflow: hidden;
+    }
+
+    .context-meter > span {
+      display: block;
+      height: 100%;
+      border-radius: inherit;
+      background: var(--bucket-color, var(--wa-color-brand-fill-normal));
+    }
+
+    .context-footer {
+      display: flex;
+      flex-direction: column;
+      gap: var(--wa-space-2xs);
+    }
+
+    .context-remaining {
+      color: var(--wa-color-text-quiet);
+      font-size: var(--wa-font-size-xs);
+    }
+
+    .composer {
+      display: flex;
+      flex-direction: column;
+      gap: var(--wa-space-2xs);
+      flex: 1;
+      min-width: 0;
+    }
+
+    .composer-row {
+      display: flex;
+      gap: var(--wa-space-s);
+      align-items: flex-end;
+    }
+
+    .composer wa-textarea {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .composer-actions {
+      display: flex;
+      align-items: center;
+      gap: var(--wa-space-2xs);
+      flex-shrink: 0;
+    }
+
+    .composer-shell.drag-over {
+      outline: 2px dashed var(--wa-color-brand-border-normal);
+      outline-offset: -2px;
+      background: color-mix(in srgb, var(--wa-color-brand-fill-quiet) 35%, transparent);
+    }
+
+    wa-dropdown.attach-menu::part(menu) {
+      min-width: 18rem;
+      max-width: min(24rem, 92vw);
+      padding: var(--wa-space-2xs);
+    }
+
+    .attach-panel {
+      display: flex;
+      flex-direction: column;
+      gap: var(--wa-space-2xs);
+      max-height: min(22rem, 50vh);
+    }
+
+    .attach-list {
+      display: flex;
+      flex-direction: column;
+      gap: var(--wa-space-2xs);
+      overflow: auto;
+      min-height: 0;
+    }
+
+    .attach-row {
+      display: flex;
+      align-items: center;
+      gap: var(--wa-space-2xs);
+      min-width: 0;
+    }
+
+    .attach-preview-btn {
+      display: flex;
+      align-items: center;
+      gap: var(--wa-space-s);
+      flex: 1;
+      min-width: 0;
+      margin: 0;
+      padding: var(--wa-space-2xs);
+      border: none;
+      border-radius: var(--wa-border-radius-s);
+      background: transparent;
+      color: inherit;
+      font: inherit;
+      text-align: start;
+      cursor: pointer;
+    }
+
+    .attach-preview-btn:hover {
+      background: var(--wa-color-neutral-fill-quiet);
+    }
+
+    .attach-thumb,
+    .msg-file-thumb {
+      width: 2.5rem;
+      height: 2.5rem;
+      object-fit: cover;
+      border-radius: var(--wa-border-radius-s);
+      border: var(--wa-border-width-s) solid var(--wa-color-border-normal);
+      flex-shrink: 0;
+    }
+
+    .attach-file-icon {
+      display: grid;
+      place-items: center;
+      width: 2.5rem;
+      height: 2.5rem;
+      border-radius: var(--wa-border-radius-s);
+      border: var(--wa-border-width-s) solid var(--wa-color-border-normal);
+      color: var(--wa-color-text-quiet);
+      flex-shrink: 0;
+    }
+
+    .attach-name {
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: var(--wa-font-size-s);
+    }
+
+    .attach-empty {
+      color: var(--wa-color-text-quiet);
+      font-size: var(--wa-font-size-xs);
+      padding: var(--wa-space-s);
+    }
+
+    .msg-file-thumb {
+      width: 4.5rem;
+      height: 4.5rem;
+    }
+
+    .attach-dialog-body {
+      display: flex;
+      flex-direction: column;
+      gap: var(--wa-space-s);
+      max-height: min(70vh, 40rem);
+      overflow: auto;
+    }
+
+    .attach-dialog-image {
+      max-width: 100%;
+      height: auto;
+      border-radius: var(--wa-border-radius-m);
+    }
+
+    .attach-dialog-text {
+      margin: 0;
+      white-space: pre-wrap;
+      word-break: break-word;
+      font-family: var(--wa-font-family-code, ui-monospace, monospace);
+      font-size: var(--wa-font-size-s);
+    }
+
+    .msg-files {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--wa-space-2xs);
+      margin-bottom: var(--wa-space-2xs);
+    }
+
+    .approval-actions {
+      display: flex;
+      gap: var(--wa-space-s);
+      margin-top: var(--wa-space-s);
+      flex-wrap: wrap;
+    }
+
+    pre.args {
+      margin: var(--wa-space-s) 0 0;
+      font-family: var(--wa-font-family-code, var(--wa-font-mono));
+      font-size: var(--wa-font-size-xs);
+      white-space: pre-wrap;
+      overflow-x: auto;
+    }
+
+    wa-details {
+      font-size: var(--wa-font-size-s);
+    }
+
+    wa-details.msg-details {
+      width: 100%;
+      font-size: var(--wa-font-size-s);
+    }
+
+    wa-details.msg-details::part(base),
+    wa-details.msg-details::part(details) {
+      border: none;
+      background: transparent;
+    }
+
+    wa-details.msg-details::part(header) {
+      align-items: flex-start;
+      gap: var(--wa-space-2xs);
+      padding: 0;
+    }
+
+    wa-details.msg-details::part(summary) {
+      flex: 1;
+      min-width: 0;
+    }
+
+    wa-details.msg-details::part(content) {
+      padding: var(--wa-space-s) 0 0;
+    }
+
+    .msg-summary {
+      display: flex;
+      flex-direction: column;
+      gap: var(--wa-space-2xs);
+      width: 100%;
+    }
+
+    .msg-tech {
+      display: flex;
+      flex-direction: column;
+      gap: var(--wa-space-s);
+      margin-inline-start: var(--wa-space-l);
+      padding-inline-start: var(--wa-space-m);
+      border-inline-start: var(--wa-border-width-s) solid var(--wa-color-border-normal);
+    }
+
+    .tool-heading {
+      font-size: var(--wa-font-size-xs);
+      color: var(--wa-color-text-quiet);
+      margin-bottom: var(--wa-space-2xs);
+    }
+  `;
+	}
+	doBeforeUI() {
+		cognitiveRuntime.start();
+		this.syncSessions();
+		this.syncModels();
+		this.approvalMode = cognitiveRuntime.getApprovalMode();
+		cognitiveRuntime.whenReady().then(() => {
+			this.syncSessions();
+			this.syncModels();
+			this.approvalMode = cognitiveRuntime.getApprovalMode();
+			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) => {
+			this.approvalMode = mode;
+		}), cognitiveRuntime.events.subscribe(TOPIC.permissionAsked, (payload) => {
+			this.pendingPermission = payload;
+			this.scheduleScrollToBottom();
+		}), cognitiveRuntime.events.subscribe(TOPIC.messagePart, (payload) => {
+			const { sessionId, part } = payload;
+			if (sessionId !== this.focusedId) return;
+			this.streamingParts = mergePart(this.streamingParts, part);
+			this.scheduleScrollToBottom();
+		}), cognitiveRuntime.events.subscribe(TOPIC.messageDone, () => {
+			this.streamingParts = [];
+			this.syncSessions();
+			this.scheduleScrollToBottom();
+		}));
+	}
+	doClose() {
+		if (this.scrollDebounceTimer) clearTimeout(this.scrollDebounceTimer);
+		this.scrollDebounceTimer = void 0;
+		for (const u of this.unsubs) u();
+		this.unsubs = [];
+	}
+	syncSessions() {
+		const byRecency = cognitiveRuntime.sessions.list();
+		this.sessions = [...byRecency].sort((a, b) => a.createdAt - b.createdAt);
+		const focused = cognitiveRuntime.sessions.focused();
+		const activeId = focused?.id ?? byRecency[0]?.id ?? null;
+		if (activeId && focused?.id !== activeId) cognitiveRuntime.sessions.focus(activeId);
+		this.focusedId = activeId;
+	}
+	scheduleScrollToBottom() {
+		if (this.scrollDebounceTimer) clearTimeout(this.scrollDebounceTimer);
+		this.scrollDebounceTimer = setTimeout(() => {
+			this.scrollDebounceTimer = void 0;
+			this.scrollToBottom();
+		}, 50);
+	}
+	async scrollToBottom() {
+		await this.updateComplete;
+		await new Promise((resolve) => requestAnimationFrame(() => resolve()));
+		const scroller = this.renderRoot.querySelector("wa-scroller.transcript");
+		if (!scroller?.shadowRoot) return;
+		const container = scroller.shadowRoot.querySelector("#content");
+		if (!(container instanceof HTMLElement)) return;
+		container.scrollTop = container.scrollHeight;
+	}
+	focusedSession() {
+		return this.sessions.find((s) => s.id === this.focusedId) ?? this.sessions[0];
+	}
+	deleteSession(sessionId) {
+		if (this.sessions.length <= 1) {
+			cognitiveRuntime.sessions.createSession({ title: "Chat" });
+			cognitiveRuntime.sessions.remove(sessionId);
+		} else cognitiveRuntime.sessions.remove(sessionId);
+		this.streamingParts = [];
+		this.syncSessions();
+		cognitiveRuntime.commitSessions();
+	}
+	openSession(sessionId) {
+		if (!cognitiveRuntime.sessions.focus(sessionId)) return;
+		this.streamingParts = [];
+		this.syncSessions();
+		this.historyOpen = false;
+		this.historyQuery = "";
+		cognitiveRuntime.commitSessions();
+		this.scheduleScrollToBottom();
+	}
+	newSession() {
+		cognitiveRuntime.sessions.createSession({ title: "Chat" });
+		this.streamingParts = [];
+		this.historyOpen = false;
+		this.historyQuery = "";
+		this.syncSessions();
+		cognitiveRuntime.commitSessions();
+	}
+	historySessions() {
+		const q = this.historyQuery.trim().toLowerCase();
+		const sorted = [...this.sessions].sort((a, b) => b.updatedAt - a.updatedAt);
+		if (!q) return sorted;
+		return sorted.filter((s) => {
+			if (s.title.toLowerCase().includes(q)) return true;
+			return s.history.some((m) => m.parts.some((p) => {
+				if (p.type === "text") return p.text.toLowerCase().includes(q);
+				if (p.type === "file") return p.name.toLowerCase().includes(q) || p.id.toLowerCase().includes(q) || (p.path?.toLowerCase().includes(q) ?? false);
+				return false;
+			}));
+		});
+	}
+	syncModels() {
+		this.modelIds = cognitiveRuntime.listConfiguredModels();
+		if (!this.manualModel || !this.modelIds.includes(this.manualModel)) this.manualModel = this.modelIds[0] ?? cognitiveRuntime.defaultModelId();
+	}
+	effortChoices() {
+		const cap = detectEffortCapability(this.manualModel || cognitiveRuntime.defaultModelId());
+		if (!cap.supported) return ["auto", "none"];
+		return ["auto", ...cap.levels];
+	}
+	routerValue() {
+		return this.policyMode === "auto" ? `auto:${this.optimizeFor}` : `model:${this.manualModel}`;
+	}
+	routerLabel() {
+		if (this.policyMode === "auto") return `Auto · ${capitalize(this.optimizeFor)}`;
+		if (!this.modelIds.length) return "No models";
+		return shortModelLabel(this.manualModel || this.modelIds[0]);
+	}
+	activeModelRef() {
+		const routed = [...this.focusedSession()?.history ?? []].reverse().find((m) => m.role === "assistant" && m.routedModel)?.routedModel;
+		if (routed) return routed;
+		if (this.policyMode === "manual") return this.manualModel || this.modelIds[0] || cognitiveRuntime.defaultModelId();
+		return this.modelIds[0] || cognitiveRuntime.defaultModelId();
+	}
+	contextUsage() {
+		return estimateSessionContextUsage(this.focusedSession(), this.activeModelRef());
+	}
+	async compactFocused() {
+		if (!this.focusedId) return;
+		await cognitiveRuntime.compactSession(this.focusedId);
+		this.syncSessions();
+	}
+	onRouterSelect(value) {
+		if (value.startsWith("auto:")) {
+			const optimize = value.slice(5);
+			if (optimize === "cost" || optimize === "balance" || optimize === "intelligence") {
+				this.policyMode = "auto";
+				this.optimizeFor = optimize;
+			}
+			return;
+		}
+		if (value.startsWith("model:")) {
+			const model = value.slice(6);
+			if (!model) return;
+			this.policyMode = "manual";
+			this.manualModel = model;
+		}
+	}
+	applyPolicy() {
+		const policy = this.policyMode === "manual" ? {
+			mode: "manual",
+			model: this.manualModel || cognitiveRuntime.defaultModelId(),
+			effort: this.manualEffort
+		} : {
+			mode: "auto",
+			optimizeFor: this.optimizeFor
+		};
+		cognitiveRuntime.setModelPolicy(policy);
+	}
+	async clearComposer() {
+		this.draft = "";
+		this.pendingAttachmentIds = [];
+		await this.updateComplete;
+		if (this.textarea) this.textarea.value = "";
+		if (this.fileInput) this.fileInput.value = "";
+	}
+	sessionAttachments() {
+		return this.focusedSession()?.attachments ?? [];
+	}
+	previewAttachment() {
+		if (!this.previewAttachmentId) return void 0;
+		return this.sessionAttachments().find((a) => a.id === this.previewAttachmentId);
+	}
+	openAttachmentPreview(attachmentId) {
+		this.previewAttachmentId = attachmentId;
+	}
+	closeAttachmentPreview() {
+		this.previewAttachmentId = null;
+	}
+	removeSessionAttachment(attachmentId) {
+		const sessionId = this.focusedId ?? cognitiveRuntime.ensureSessionId();
+		cognitiveRuntime.removeAttachment(sessionId, attachmentId);
+		this.pendingAttachmentIds = this.pendingAttachmentIds.filter((id) => id !== attachmentId);
+		if (this.previewAttachmentId === attachmentId) this.previewAttachmentId = null;
+		this.syncSessions();
+	}
+	async addFiles(fileList) {
+		const files = [...fileList];
+		if (!files.length) return;
+		const sessionId = cognitiveRuntime.ensureSessionId(this.focusedId ?? void 0);
+		this.focusedId = sessionId;
+		const existing = this.sessionAttachments();
+		const accepted = [];
+		for (const file of files) {
+			if (existing.length + accepted.length >= 8) {
+				toastError(`At most 8 files per session`);
+				break;
+			}
+			if (existing.some((a) => a.name === file.name && a.byteLength === file.size) || accepted.some((a) => a.name === file.name && a.byteLength === file.size)) continue;
+			const result = await readPromptAttachmentFromFile(file);
+			if (!result.ok) {
+				toastError(result.error);
+				continue;
+			}
+			accepted.push(result.attachment);
+		}
+		const stored = cognitiveRuntime.addAttachments(sessionId, accepted);
+		if (stored.length) this.pendingAttachmentIds = [...this.pendingAttachmentIds, ...stored.map((a) => a.id).filter((id) => !this.pendingAttachmentIds.includes(id))];
+		this.syncSessions();
+	}
+	openFilePicker() {
+		this.fileInput?.click();
+	}
+	async onFileInputChange(e) {
+		const input = e.target;
+		if (input.files?.length) await this.addFiles(input.files);
+		input.value = "";
+	}
+	onComposerDragOver(e) {
+		if (!e.dataTransfer?.types.includes("Files")) return;
+		e.preventDefault();
+		this.dragOver = true;
+	}
+	onComposerDragLeave(e) {
+		if (e.currentTarget === e.target) this.dragOver = false;
+	}
+	async onComposerDrop(e) {
+		e.preventDefault();
+		this.dragOver = false;
+		if (e.dataTransfer?.files?.length) await this.addFiles(e.dataTransfer.files);
+	}
+	async send() {
+		const text = this.draft.trim();
+		const attachmentIds = [...this.pendingAttachmentIds];
+		if (!text && !attachmentIds.length || this.busy) return;
+		this.applyPolicy();
+		await this.clearComposer();
+		this.busy = true;
+		this.streamingParts = [];
+		try {
+			await cognitiveRuntime.prompt({
+				sessionId: this.focusedId ?? void 0,
+				text,
+				attachmentIds
+			});
+		} finally {
+			this.busy = false;
+			this.syncSessions();
+			this.scheduleScrollToBottom();
+			this.textarea?.focus();
+		}
+	}
+	renderAttachmentDropdown() {
+		const attachments = this.sessionAttachments();
+		const count = attachments.length;
+		return html`
+      <wa-dropdown class="attach-menu" size="s" placement="top-end" distance="4">
+        <wa-button
+          slot="trigger"
+          size="s"
+          appearance="plain"
+          title=${count ? `${count} attachment${count === 1 ? "" : "s"}` : "Attachments"}
+          ?disabled=${this.busy}
+        >
+          <wa-icon name="paperclip" label="Attachments"></wa-icon>
+          ${count > 0 ? html`<wa-badge pill>${count}</wa-badge>` : nothing}
+        </wa-button>
+        <div
+          class="attach-panel"
+          @click=${(e) => e.stopPropagation()}
+          @keydown=${(e) => e.stopPropagation()}
+        >
+          ${count ? html`
+                <div class="attach-list">
+                  ${attachments.map((file) => html`
+                      <div class="attach-row">
+                        <button
+                          type="button"
+                          class="attach-preview-btn"
+                          title="Open ${file.name}"
+                          @click=${() => this.openAttachmentPreview(file.id)}
+                        >
+                          ${file.kind === "image" && file.dataUrl ? html`<img
+                                class="attach-thumb"
+                                src=${file.dataUrl}
+                                alt=${file.name}
+                              />` : html`
+                                <span class="attach-file-icon">
+                                  <wa-icon name="file" label=""></wa-icon>
+                                </span>
+                              `}
+                          <span class="attach-name">${file.name}</span>
+                        </button>
+                        <wa-button
+                          size="s"
+                          appearance="plain"
+                          title="Remove from session"
+                          ?disabled=${this.busy}
+                          @click=${() => this.removeSessionAttachment(file.id)}
+                        >
+                          <wa-icon name="xmark" label="Remove"></wa-icon>
+                        </wa-button>
+                      </div>
+                    `)}
+                </div>
+              ` : html`<div class="attach-empty">No attachments in this session</div>`}
+          <wa-button
+            size="s"
+            appearance="outlined"
+            ?disabled=${this.busy || count >= 8}
+            @click=${() => this.openFilePicker()}
+          >
+            <wa-icon slot="start" name="plus"></wa-icon>
+            Add files…
+          </wa-button>
+        </div>
+      </wa-dropdown>
+    `;
+	}
+	renderAttachmentDialog() {
+		const preview = this.previewAttachment();
+		if (!preview) return nothing;
+		return html`
+      <wa-dialog
+        label=${preview.name}
+        open
+        light-dismiss
+        with-footer
+        style="--width: min(40rem, 94vw)"
+        @wa-after-hide=${() => this.closeAttachmentPreview()}
+      >
+        <div class="attach-dialog-body">
+          ${preview.kind === "image" && preview.dataUrl ? html`<img class="attach-dialog-image" src=${preview.dataUrl} alt=${preview.name} />` : nothing}
+          ${preview.text ? html`<pre class="attach-dialog-text">${preview.text}</pre>` : preview.kind === "image" && preview.dataUrl ? nothing : html`<pre class="attach-dialog-text"></pre>`}
+        </div>
+        <div slot="footer">
+          <wa-button
+            variant="danger"
+            appearance="outlined"
+            @click=${() => this.removeSessionAttachment(preview.id)}
+          >
+            Remove
+          </wa-button>
+          <wa-button variant="brand" @click=${() => this.closeAttachmentPreview()}>Close</wa-button>
+        </div>
+      </wa-dialog>
+    `;
+	}
+	resolvePermission(action) {
+		if (!this.pendingPermission) return;
+		cognitiveRuntime.resolvePermission(this.pendingPermission.requestId, action);
+		this.pendingPermission = null;
+	}
+	renderToolbar() {
+		const title = this.focusedSession()?.title || "Chat";
+		return html`
+      <span class="toolbar-title" title=${title}>${title}</span>
+      <wa-button size="s" appearance="plain" title="New chat" @click=${() => this.newSession()}>
+        <wa-icon name="plus" label="New chat"></wa-icon>
+      </wa-button>
+      ${this.renderHistoryDropdown()}
+      <wa-button
+        size="s"
+        appearance="plain"
+        title="Checkpoint"
+        @click=${() => {
+			if (!this.focusedId) return;
+			cognitiveRuntime.sessions.checkpoint(this.focusedId);
+			this.syncSessions();
+			cognitiveRuntime.commitSessions();
+		}}
+      >
+        <wa-icon name="floppy-disk" label="Checkpoint"></wa-icon>
+      </wa-button>
+      ${this.renderSettingsDropdown()}
+    `;
+	}
+	contextRingStyle(level) {
+		const tone = level === "critical" ? "danger" : level === "warn" ? "warning" : "success";
+		return [`--track-color: var(--wa-color-${tone}-fill-quiet)`, `--indicator-color: var(--wa-color-${tone}-fill-loud)`].join(";");
+	}
+	renderContextDropdown() {
+		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 ringValue = Math.min(100, Math.max(usage.percent, usage.used > 0 ? 1 : 0));
+		return html`
+      <wa-dropdown
+        class="context-menu"
+        size="s"
+        placement="top-end"
+        distance="4"
+      >
+        <wa-button
+          slot="trigger"
+          appearance="plain"
+          size="s"
+          title=${title}
+        >
+          <wa-progress-ring
+            class="context-ring"
+            style=${this.contextRingStyle(usage.level)}
+            value=${ringValue}
+            label=${title}
+          ></wa-progress-ring>
+        </wa-button>
+
+        <div
+          class="context-panel"
+          @click=${(e) => e.stopPropagation()}
+          @keydown=${(e) => e.stopPropagation()}
+        >
+          <div class="context-header">
+            <strong>Context tokens</strong>
+            <span>${percentLabel}</span>
+          </div>
+          <div class="context-bars">
+            ${usage.buckets.map((bucket) => {
+			const share = usage.limit > 0 ? bucket.tokens / usage.limit * 100 : 0;
+			return html`
+                <div class="context-row">
+                  <span class="context-row-label">${bucket.label}</span>
+                  <span>${formatBucketDetail(bucket)}</span>
+                  <div class="context-meter">
+                    <span
+                      style="width:${Math.max(share, bucket.tokens > 0 ? .5 : 0)}%; --bucket-color: var(--wa-color-brand-fill-normal)"
+                    ></span>
+                  </div>
+                </div>
+              `;
+		})}
+          </div>
+          <div class="context-footer">
+            <span class="context-remaining">
+              ~${formatTokenCount(usage.used)} used · ${formatTokenCount(usage.remaining)} free of
+              ${formatTokenCount(usage.limit)}
+              · ${shortModelLabel(usage.modelRef)}
+            </span>
+            <wa-button
+              size="s"
+              variant=${usage.level === "critical" ? "danger" : "neutral"}
+              appearance=${canCompact ? "filled" : "outlined"}
+              ?disabled=${!canCompact || this.busy}
+              @click=${() => this.compactFocused()}
+            >
+              <wa-icon slot="start" name="arrows-down-to-line"></wa-icon>
+              Compact conversation
+            </wa-button>
+          </div>
+        </div>
+      </wa-dropdown>
+    `;
+	}
+	renderContent() {
+		const session = this.focusedSession();
+		return html`
+      <div class="cognitive-shell">
+        <wa-scroller class="transcript" orientation="vertical">
+          <div class="transcript-inner">
+            <div class="transcript-spacer" aria-hidden="true"></div>
+            ${session ? this.renderTranscript(session) : nothing}
+          </div>
+        </wa-scroller>
+
+        <div
+          class="composer-shell ${this.dragOver ? "drag-over" : ""}"
+          @dragover=${(e) => this.onComposerDragOver(e)}
+          @dragleave=${(e) => this.onComposerDragLeave(e)}
+          @drop=${(e) => void this.onComposerDrop(e)}
+        >
+          <input
+            id="attach-file-input"
+            type="file"
+            multiple
+            accept=${ATTACHMENT_FILE_ACCEPT}
+            hidden
+            @change=${(e) => void this.onFileInputChange(e)}
+          />
+          <div class="composer">
+            <div class="composer-row">
+              <wa-textarea
+                placeholder="Enter your message here..."
+                size="s"
+                resize="auto"
+                rows="1"
+                .value=${this.draft}
+                ?disabled=${this.busy}
+                @input=${(e) => {
+			this.draft = e.target.value;
+		}}
+                @keydown=${(e) => {
+			if (e.key === "Enter" && !e.shiftKey) {
+				e.preventDefault();
+				this.send();
+			}
+		}}
+              ></wa-textarea>
+              <div class="composer-actions">
+                ${this.renderAttachmentDropdown()}
+                ${this.renderContextDropdown()}
+              </div>
+            </div>
+          </div>
+        </div>
+        ${this.renderAttachmentDialog()}
+      </div>
+    `;
+	}
+	renderTranscript(session) {
+		const showStreaming = this.streamingParts.length > 0;
+		const showPermission = this.pendingPermission && this.pendingPermission.sessionId === session.id;
+		return html`
+      ${session.history.map((m) => this.renderMessage(m))}
+      ${showStreaming ? this.renderAssistantMessage({
+			id: "streaming",
+			role: "assistant",
+			parts: this.streamingParts,
+			createdAt: Date.now()
+		}, { streaming: true }) : nothing}
+      ${showPermission ? html`
+            <wa-callout variant="warning" appearance="outlined">
+              <wa-icon slot="icon" name="shield-halved"></wa-icon>
+              Allow tool <code>${this.pendingPermission.toolName}</code>?
+              <pre class="args">${JSON.stringify(this.pendingPermission.args, null, 2)}</pre>
+              <div class="approval-actions">
+                <wa-button size="s" variant="success" @click=${() => this.resolvePermission("allow")}>
+                  <wa-icon slot="start" name="check"></wa-icon>
+                  Allow
+                </wa-button>
+                <wa-button
+                  size="s"
+                  variant="neutral"
+                  appearance="outlined"
+                  @click=${() => this.resolvePermission("deny")}
+                >
+                  <wa-icon slot="start" name="xmark"></wa-icon>
+                  Deny
+                </wa-button>
+              </div>
+            </wa-callout>
+          ` : nothing}
+    `;
+	}
+	renderHistoryDropdown() {
+		const groups = groupSessionsByRecency(this.historySessions());
+		return html`
+      <wa-dropdown
+        class="history-menu"
+        size="s"
+        placement="bottom-end"
+        distance="4"
+        ?open=${this.historyOpen}
+        @wa-after-show=${() => {
+			this.historyOpen = true;
+		}}
+        @wa-after-hide=${() => {
+			this.historyOpen = false;
+			this.historyQuery = "";
+		}}
+      >
+        <wa-button
+          slot="trigger"
+          appearance="plain"
+          size="s"
+          with-caret
+          title="Chat history"
+          @click=${(e) => {
+			e.stopPropagation();
+			this.historyOpen = !this.historyOpen;
+		}}
+        >
+          <wa-icon name="clock-rotate-left" label="Chat history"></wa-icon>
+        </wa-button>
+
+        <div
+          class="history-search"
+          @click=${(e) => e.stopPropagation()}
+          @keydown=${(e) => e.stopPropagation()}
+        >
+          <wa-input
+            size="s"
+            clearable
+            placeholder="Search chats…"
+            .value=${this.historyQuery}
+            @input=${(e) => {
+			this.historyQuery = e.target.value;
+		}}
+          >
+            <wa-icon slot="start" name="magnifying-glass"></wa-icon>
+          </wa-input>
+        </div>
+
+        ${groups.length ? groups.map((group) => html`
+                <h3>${group.label}</h3>
+                ${group.sessions.map((s) => html`
+                    <wa-dropdown-item @click=${() => this.openSession(s.id)}>
+                      <wa-icon
+                        slot="icon"
+                        name=${s.id === this.focusedId ? "check" : "message"}
+                      ></wa-icon>
+                      <span class="history-item-title" title=${s.title}>${s.title}</span>
+                      <div slot="details" style="display:flex;align-items:center;gap:0.25rem">
+                        <span class="history-item-meta">${relativeTime(s.updatedAt)}</span>
+                        <wa-button
+                          appearance="plain"
+                          size="s"
+                          title="Delete chat"
+                          @click=${(e) => {
+			e.stopPropagation();
+			this.deleteSession(s.id);
+		}}
+                        >
+                          <wa-icon name="trash" label="Delete chat"></wa-icon>
+                        </wa-button>
+                      </div>
+                    </wa-dropdown-item>
+                  `)}
+              `) : html`<div class="history-empty">${this.historyQuery ? "No matching chats" : "No chats yet"}</div>`}
+      </wa-dropdown>
+    `;
+	}
+	onSettingsSelect(value) {
+		if (value === "settings") {
+			this.executeCommand(OPEN_AI_SETTINGS_COMMAND, {});
+			return;
+		}
+		if (value.startsWith("approval:")) {
+			const mode = value.slice(9);
+			if (mode === "manual" || mode === "auto_safe" || mode === "auto_all") {
+				this.approvalMode = mode;
+				cognitiveRuntime.setApprovalMode(mode);
+			}
+			return;
+		}
+		if (value.startsWith("effort:")) {
+			this.manualEffort = value.slice(7) || "auto";
+			return;
+		}
+		this.onRouterSelect(value);
+	}
+	renderSettingsDropdown() {
+		const selected = this.routerValue();
+		const autoOptions = [
+			{
+				value: "auto:cost",
+				label: "Auto · Cost"
+			},
+			{
+				value: "auto:balance",
+				label: "Auto · Balance"
+			},
+			{
+				value: "auto:intelligence",
+				label: "Auto · Intelligence"
+			}
+		];
+		const effortOptions = this.effortChoices();
+		return html`
+      <wa-dropdown
+        class="settings-menu"
+        size="s"
+        placement="bottom-end"
+        distance="4"
+        @wa-select=${(e) => {
+			const value = e.detail?.item?.value;
+			if (value != null) this.onSettingsSelect(value);
+		}}
+      >
+        <wa-button
+          slot="trigger"
+          appearance="plain"
+          size="s"
+          with-caret
+          title=${`AI · ${this.routerLabel()}`}
+        >
+          <wa-icon name="gear" label="AI settings"></wa-icon>
+        </wa-button>
+
+        <h3>Auto</h3>
+        ${autoOptions.map((option) => html`
+            <wa-dropdown-item
+              value=${option.value}
+              type="checkbox"
+              ?checked=${option.value === selected}
+            >
+              ${option.label}
+            </wa-dropdown-item>
+          `)}
+
+        <wa-divider></wa-divider>
+        <h3>Models</h3>
+        ${this.modelIds.length ? this.modelIds.map((id) => html`
+                <wa-dropdown-item
+                  value=${`model:${id}`}
+                  type="checkbox"
+                  ?checked=${selected === `model:${id}`}
+                >
+                  ${id}
+                </wa-dropdown-item>
+              `) : html`<wa-dropdown-item disabled>No models configured</wa-dropdown-item>`}
+
+        ${this.policyMode === "manual" ? html`
+              <wa-divider></wa-divider>
+              <h3>Effort</h3>
+              ${effortOptions.map((level) => html`
+                  <wa-dropdown-item
+                    value=${`effort:${level}`}
+                    type="checkbox"
+                    ?checked=${this.manualEffort === level}
+                  >
+                    ${level}
+                  </wa-dropdown-item>
+                `)}
+            ` : nothing}
+
+        <wa-divider></wa-divider>
+        <h3>Tool approvals</h3>
+        ${APPROVAL_OPTIONS$1.map((option) => html`
+            <wa-dropdown-item
+              value=${`approval:${option.value}`}
+              type="checkbox"
+              ?checked=${this.approvalMode === option.value}
+            >
+              ${option.label}
+            </wa-dropdown-item>
+          `)}
+
+        <wa-divider></wa-divider>
+        <wa-dropdown-item value="settings">
+          <wa-icon slot="icon" name="sliders"></wa-icon>
+          Settings…
+        </wa-dropdown-item>
+      </wa-dropdown>
+    `;
+	}
+	resolveAttachmentDataUrl(fileId) {
+		return this.focusedSession()?.attachments?.find((a) => a.id === fileId)?.dataUrl;
+	}
+	renderMessage(message) {
+		if (message.role === "user") {
+			const files = message.parts.filter((p) => p.type === "file");
+			const texts = message.parts.filter((p) => p.type === "text");
+			return html`
+        <div class="msg user">
+          ${files.length ? html`
+                <div class="msg-files">
+                  ${files.map((file) => {
+				const dataUrl = file.kind === "image" ? this.resolveAttachmentDataUrl(file.id) : void 0;
+				return dataUrl ? html`<img
+                          class="msg-file-thumb"
+                          src=${dataUrl}
+                          alt=${file.name}
+                          title=${`${file.name} (${file.id})`}
+                        />` : html`
+                          <wa-tag
+                            size="s"
+                            appearance="outlined"
+                            title=${`${file.path || file.name} (${file.id})`}
+                          >
+                            <wa-icon slot="start" name=${file.kind === "image" ? "image" : "file"}></wa-icon>
+                            ${file.name}
+                          </wa-tag>
+                        `;
+			})}
+                </div>
+              ` : nothing}
+          ${texts.map((p) => this.renderTextPart(p))}
+          ${this.renderMessageMeta(message)}
+        </div>
+      `;
+		}
+		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 open = opts.streaming === true || techParts.some((p) => (p.type === "reasoning" || p.type === "tool") && p.status === "streaming");
+		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>
+              </div>
+            ` : nothing}
+        ${textParts.length ? textParts.map((p) => this.renderTextPart(p)) : html`<div class="bubble">${technicalSummary(techParts)}</div>`}
+      </div>
+    `;
+		if (!techParts.length) return html`
+        <div class="msg assistant">
+          ${opts.streaming ? html`
+                <div class="streaming-meta">
+                  <wa-spinner style="font-size: 0.85rem"></wa-spinner>
+                  <span>streaming…</span>
+                </div>
+              ` : nothing}
+          ${textParts.map((p) => this.renderTextPart(p))}
+          ${message.id !== "streaming" ? this.renderMessageMeta(message) : nothing}
+        </div>
+      `;
+		return html`
+      <div class="msg assistant">
+        <wa-details class="msg-details" appearance="plain" ?open=${open}>
+          ${summary}
+          <div class="msg-tech">${techParts.map((p) => this.renderTechnicalPart(p))}</div>
+        </wa-details>
+        ${message.id !== "streaming" ? this.renderMessageMeta(message) : nothing}
+      </div>
+    `;
+	}
+	renderMessageMeta(message) {
+		const timeLabel = formatMessageTime(message.createdAt);
+		return html`
+      <div class="msg-meta">
+        <wa-tag size="s" appearance="outlined" title=${new Date(message.createdAt).toLocaleString()}>
+          ${timeLabel}
+        </wa-tag>
+        ${message.routedModel ? html`<wa-tag size="s" appearance="outlined">${message.routedModel}</wa-tag>` : nothing}
+        ${message.effort ? html`<wa-tag size="s" appearance="outlined">${message.effort}</wa-tag>` : nothing}
+      </div>
+    `;
+	}
+	renderTextPart(part) {
+		if (part.type === "text") return html`<div class="bubble">${part.text}</div>`;
+		return nothing;
+	}
+	renderTechnicalPart(part) {
+		if (part.type === "reasoning") return html`
+        <div>
+          <div class="tool-heading">Thinking</div>
+          <div class="bubble">${part.text}</div>
+        </div>
+      `;
+		if (part.type === "tool") {
+			const heading = `${part.name} · ${part.status}${part.durationMs != null ? ` · ${part.durationMs}ms` : ""}`;
+			return html`
+        <div>
+          <div class="tool-heading">${heading}</div>
+          <pre class="args">${JSON.stringify({
+				args: part.args,
+				result: part.result
+			}, null, 2)}</pre>
+        </div>
+      `;
+		}
+		if (part.type === "step") return html`<div class="tool-heading">Step: ${part.title} · ${part.status}</div>`;
+		return nothing;
+	}
+};
+_decorate([query("wa-textarea")], DocksCognitiveView.prototype, "textarea", void 0);
+_decorate([query("#attach-file-input")], DocksCognitiveView.prototype, "fileInput", void 0);
+_decorate([state()], DocksCognitiveView.prototype, "sessions", void 0);
+_decorate([state()], DocksCognitiveView.prototype, "focusedId", void 0);
+_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, "busy", void 0);
+_decorate([state()], DocksCognitiveView.prototype, "pendingPermission", void 0);
+_decorate([state()], DocksCognitiveView.prototype, "policyMode", void 0);
+_decorate([state()], DocksCognitiveView.prototype, "optimizeFor", void 0);
+_decorate([state()], DocksCognitiveView.prototype, "manualModel", void 0);
+_decorate([state()], DocksCognitiveView.prototype, "manualEffort", void 0);
+_decorate([state()], DocksCognitiveView.prototype, "approvalMode", void 0);
+_decorate([state()], DocksCognitiveView.prototype, "modelIds", void 0);
+_decorate([state()], DocksCognitiveView.prototype, "streamingParts", void 0);
+_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: "auto_all",
+		label: "Approve all"
+	}
+];
+function capitalize(value) {
+	return value ? value[0].toUpperCase() + value.slice(1) : value;
+}
+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";
+}
+function startOfDay(ts) {
+	const d = new Date(ts);
+	d.setHours(0, 0, 0, 0);
+	return d.getTime();
+}
+function groupSessionsByRecency(sessions) {
+	const today = startOfDay(Date.now());
+	const yesterday = today - 864e5;
+	const week = today - 6048e5;
+	const buckets = {
+		today: [],
+		yesterday: [],
+		week: [],
+		older: []
+	};
+	for (const s of sessions) {
+		const day = startOfDay(s.updatedAt);
+		if (day >= today) buckets.today.push(s);
+		else if (day >= yesterday) buckets.yesterday.push(s);
+		else if (day >= week) buckets.week.push(s);
+		else buckets.older.push(s);
+	}
+	return [
+		{
+			label: "Today",
+			sessions: buckets.today
+		},
+		{
+			label: "Yesterday",
+			sessions: buckets.yesterday
+		},
+		{
+			label: "Previous 7 Days",
+			sessions: buckets.week
+		},
+		{
+			label: "Older",
+			sessions: buckets.older
+		}
+	].filter((g) => g.sessions.length > 0);
+}
+function relativeTime(ts) {
+	const delta = Math.max(0, Date.now() - ts);
+	const mins = Math.floor(delta / 6e4);
+	if (mins < 1) return "now";
+	if (mins < 60) return `${mins}m`;
+	const hours = Math.floor(mins / 60);
+	if (hours < 24) return `${hours}h`;
+	const days = Math.floor(hours / 24);
+	if (days < 7) return `${days}d`;
+	return new Date(ts).toLocaleDateString(void 0, {
+		month: "short",
+		day: "numeric"
+	});
+}
+function formatMessageTime(ts) {
+	const date = new Date(ts);
+	const now = /* @__PURE__ */ new Date();
+	const sameDay = date.getFullYear() === now.getFullYear() && date.getMonth() === now.getMonth() && date.getDate() === now.getDate();
+	const time = date.toLocaleTimeString(void 0, {
+		hour: "numeric",
+		minute: "2-digit"
+	});
+	if (sameDay) return time;
+	return `${date.toLocaleDateString(void 0, {
+		month: "short",
+		day: "numeric"
+	})} ${time}`;
+}
+function shortModelLabel(modelRef) {
+	const slash = modelRef.indexOf("/");
+	return slash === -1 ? modelRef : modelRef.slice(slash + 1);
+}
+function mergePart(parts, part) {
+	const next = [...parts];
+	const last = next[next.length - 1];
+	if (part.type === "text" && last?.type === "text") {
+		next[next.length - 1] = {
+			...last,
+			text: last.text + part.text
+		};
+		return next;
+	}
+	if (part.type === "reasoning" && last?.type === "reasoning") {
+		next[next.length - 1] = {
+			...last,
+			text: last.text + part.text,
+			status: part.status
+		};
+		return next;
+	}
+	if (part.type === "tool" && last?.type === "tool" && last.id === part.id) {
+		next[next.length - 1] = part;
+		return next;
+	}
+	next.push(part);
+	return next;
+}
+//#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: "auto_all",
+		label: "Approve all",
+		hint: "Run every tool without asking"
+	}
+];
+var DocksCognitiveSettingsEditor = class DocksCognitiveSettingsEditor extends DocksPart {
+	constructor(..._args) {
+		super(..._args);
+		this.settings = defaultProvidersSettings();
+		this.approvalMode = "auto_safe";
+		this.availableModels = {};
+		this.loadingModels = {};
+		this.modelErrors = {};
+		this.unsubs = [];
+		this.fetchControllers = /* @__PURE__ */ new Map();
+		this.fetchTimers = /* @__PURE__ */ new Map();
+		this.autoFetchedKeys = /* @__PURE__ */ new Set();
+	}
+	doInitUI() {
+		cognitiveRuntime.start();
+		this.loadFromRuntime();
+		this.unsubs.push(cognitiveRuntime.events.subscribe(TOPIC.providersChanged, () => {
+			if (!this.isDirty()) this.loadFromRuntime();
+		}), cognitiveRuntime.events.subscribe(TOPIC.approvalModeChanged, (mode) => {
+			this.approvalMode = mode;
+		}));
+	}
+	disconnectedCallback() {
+		for (const unsub of this.unsubs) unsub();
+		this.unsubs = [];
+		for (const timer of this.fetchTimers.values()) clearTimeout(timer);
+		this.fetchTimers.clear();
+		for (const controller of this.fetchControllers.values()) controller.abort();
+		this.fetchControllers.clear();
+		super.disconnectedCallback();
+	}
+	loadFromRuntime() {
+		this.settings = cognitiveRuntime.getProvidersSettings();
+		this.approvalMode = cognitiveRuntime.getApprovalMode();
+		this.availableModels = {};
+		this.loadingModels = {};
+		this.modelErrors = {};
+		this.autoFetchedKeys.clear();
+		this.markDirty(false);
+		this.settings.providers.forEach((provider, index) => {
+			if (provider.apiKey.trim() && provider.baseUrl.trim()) this.fetchModels(index, { auto: true });
+		});
+	}
+	setApprovalMode(mode) {
+		this.approvalMode = mode;
+		cognitiveRuntime.setApprovalMode(mode);
+	}
+	touch(next) {
+		this.settings = next;
+		this.markDirty(true);
+	}
+	updateProvider(index, patch) {
+		const prev = this.settings.providers[index];
+		const providers = this.settings.providers.map((p, i) => i === index ? {
+			...p,
+			...patch
+		} : p);
+		let defaultProviderId = this.settings.defaultProviderId;
+		if (patch.id && prev?.id === defaultProviderId) defaultProviderId = patch.id;
+		this.touch({
+			...this.settings,
+			defaultProviderId,
+			providers
+		});
+		if (patch.apiKey !== void 0 || patch.baseUrl !== void 0) {
+			const next = providers[index];
+			if (next?.apiKey.trim() && next.baseUrl.trim()) this.scheduleFetchModels(index);
+			else if (!next?.apiKey.trim()) this.clearModels(index);
+		}
+	}
+	clearModels(index) {
+		this.fetchTimers.get(index) && clearTimeout(this.fetchTimers.get(index));
+		this.fetchTimers.delete(index);
+		this.fetchControllers.get(index)?.abort();
+		this.fetchControllers.delete(index);
+		const { [index]: _a, ...available } = this.availableModels;
+		const { [index]: _b, ...loading } = this.loadingModels;
+		const { [index]: _c, ...errors } = this.modelErrors;
+		this.availableModels = available;
+		this.loadingModels = loading;
+		this.modelErrors = errors;
+	}
+	scheduleFetchModels(index) {
+		const existing = this.fetchTimers.get(index);
+		if (existing) clearTimeout(existing);
+		this.fetchTimers.set(index, setTimeout(() => {
+			this.fetchTimers.delete(index);
+			this.fetchModels(index, { auto: true });
+		}, 400));
+	}
+	async fetchModels(index, opts = {}) {
+		const provider = this.settings.providers[index];
+		if (!provider?.baseUrl.trim()) {
+			toastError("Set a base URL before fetching models");
+			return;
+		}
+		if (opts.auto && !provider.apiKey.trim()) return;
+		const fingerprint = `${provider.baseUrl}|${provider.apiKey}`;
+		if (opts.auto && this.autoFetchedKeys.has(fingerprint) && this.availableModels[index]?.length) return;
+		this.fetchControllers.get(index)?.abort();
+		const controller = new AbortController();
+		this.fetchControllers.set(index, controller);
+		this.loadingModels = {
+			...this.loadingModels,
+			[index]: true
+		};
+		this.modelErrors = {
+			...this.modelErrors,
+			[index]: ""
+		};
+		try {
+			const models = await fetchOpenAICompatibleModels(provider.baseUrl, provider.apiKey || void 0, controller.signal);
+			if (controller.signal.aborted) return;
+			this.availableModels = {
+				...this.availableModels,
+				[index]: models
+			};
+			this.autoFetchedKeys.add(fingerprint);
+			if (!opts.auto) toastInfo(`Loaded ${models.length} models`);
+		} catch (err) {
+			if (controller.signal.aborted) return;
+			const message = err instanceof Error ? err.message : String(err);
+			this.modelErrors = {
+				...this.modelErrors,
+				[index]: message
+			};
+			this.availableModels = {
+				...this.availableModels,
+				[index]: []
+			};
+			if (!opts.auto) toastError(message);
+		} finally {
+			if (this.fetchControllers.get(index) === controller) {
+				this.fetchControllers.delete(index);
+				this.loadingModels = {
+					...this.loadingModels,
+					[index]: false
+				};
+			}
+		}
+	}
+	onModelsSelect(index, e) {
+		const value = e.target.value;
+		const selected = Array.isArray(value) ? value : value ? [value] : [];
+		this.updateProvider(index, { models: selected.join(",") });
+	}
+	addProvider() {
+		const id = uniqueProviderId(this.settings.providers);
+		this.touch({
+			...this.settings,
+			providers: [...this.settings.providers, {
+				id,
+				baseUrl: "",
+				apiKey: "",
+				models: "",
+				enabled: true
+			}],
+			defaultProviderId: this.settings.defaultProviderId || id
+		});
+	}
+	async deleteProvider(index) {
+		const provider = this.settings.providers[index];
+		if (!provider) return;
+		if (!await confirmDialog(`Delete provider "${provider.id || "(unnamed)"}"?`)) return;
+		this.clearModels(index);
+		const providers = this.settings.providers.filter((_, i) => i !== index);
+		const defaultProviderId = this.settings.defaultProviderId === provider.id ? providers.find((p) => p.enabled)?.id ?? "" : this.settings.defaultProviderId;
+		this.touch({
+			providers,
+			defaultProviderId
+		});
+		this.reindexModelState(index);
+	}
+	/** Shift per-row model fetch state after a row is removed. */
+	reindexModelState(removed) {
+		const remap = (src) => {
+			const next = {};
+			for (const [key, value] of Object.entries(src)) {
+				const i = Number(key);
+				if (Number.isNaN(i) || i === removed) continue;
+				next[i > removed ? i - 1 : i] = value;
+			}
+			return next;
+		};
+		this.availableModels = remap(this.availableModels);
+		this.loadingModels = remap(this.loadingModels);
+		this.modelErrors = remap(this.modelErrors);
+	}
+	setDefault(id) {
+		this.touch({
+			...this.settings,
+			defaultProviderId: id
+		});
+	}
+	async save() {
+		if (!this.isDirty()) return;
+		try {
+			await cognitiveRuntime.setProvidersSettings(this.settings);
+			this.loadFromRuntime();
+			toastInfo("AI providers saved");
+		} catch (err) {
+			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>
+            </div>
+            <wa-button size="s" variant="brand" appearance="filled" @click=${() => this.addProvider()}>
+              <wa-icon slot="start" name="plus"></wa-icon>
+              Add provider
+            </wa-button>
+          </header>
+
+          ${rows.length === 0 ? html`<wa-callout variant="neutral" appearance="outlined">No providers configured.</wa-callout>` : html`
+                <div class="table-wrap">
+                  <table class="providers">
+                    <thead>
+                      <tr>
+                        <th class="col-on">On</th>
+                        <th class="col-id">ID</th>
+                        <th class="col-url">Base URL</th>
+                        <th class="col-key">API Key</th>
+                        <th class="col-models">Models</th>
+                        <th class="col-default">Default</th>
+                        <th class="col-actions"></th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      ${rows.map((provider, index) => this.renderRow(provider, index))}
+                    </tbody>
+                  </table>
+                </div>
+              `}
+
+          <wa-callout variant="neutral" appearance="plain" size="s">
+            <wa-icon slot="icon" name="circle-info"></wa-icon>
+            Enter an API key to load available models. Catalog ids become
+            <code>providerId/modelId</code> for Auto routing.
+          </wa-callout>
+        </section>
+      </div>
+    `;
+	}
+	renderRow(provider, index) {
+		const isDefault = this.settings.defaultProviderId === provider.id;
+		return html`
+      <tr class=${isDefault ? "is-default" : ""}>
+        <td>
+          <wa-checkbox
+            ?checked=${provider.enabled}
+            @change=${(e) => this.updateProvider(index, { enabled: e.target.checked })}
+          ></wa-checkbox>
+        </td>
+        <td>
+          <wa-input
+            size="s"
+            .value=${provider.id}
+            placeholder="openai"
+            @input=${(e) => this.updateProvider(index, { id: e.target.value })}
+          ></wa-input>
+        </td>
+        <td>
+          <wa-input
+            size="s"
+            .value=${provider.baseUrl}
+            placeholder="https://api.openai.com/v1"
+            @input=${(e) => this.updateProvider(index, { baseUrl: e.target.value })}
+          ></wa-input>
+        </td>
+        <td>
+          <wa-input
+            size="s"
+            type="password"
+            password-toggle
+            .value=${provider.apiKey}
+            placeholder="optional"
+            @input=${(e) => this.updateProvider(index, { apiKey: e.target.value })}
+          ></wa-input>
+        </td>
+        <td>${this.renderModelsCell(provider, index)}</td>
+        <td class="col-default">
+          ${isDefault ? html`<wa-tag size="s" variant="brand" pill>Default</wa-tag>` : html`
+                <wa-button
+                  size="s"
+                  appearance="plain"
+                  ?disabled=${!provider.id}
+                  @click=${() => this.setDefault(provider.id)}
+                >
+                  Set
+                </wa-button>
+              `}
+        </td>
+        <td class="col-actions">
+          <wa-button
+            size="s"
+            appearance="plain"
+            variant="danger"
+            title="Delete"
+            @click=${() => void this.deleteProvider(index)}
+          >
+            <wa-icon name="trash" label="Delete"></wa-icon>
+          </wa-button>
+        </td>
+      </tr>
+    `;
+	}
+	renderModelsCell(provider, index) {
+		const hasKey = Boolean(provider.apiKey.trim());
+		const remote = this.availableModels[index] ?? [];
+		const loading = Boolean(this.loadingModels[index]);
+		const error = this.modelErrors[index];
+		const selected = parseModelIds(provider.models);
+		if (!(hasKey || remote.length > 0)) return html`
+        <div class="models-cell">
+          <wa-input
+            size="s"
+            .value=${provider.models}
+            placeholder="gpt-4o-mini,gpt-4o"
+            @input=${(e) => this.updateProvider(index, { models: e.target.value })}
+          ></wa-input>
+          <wa-button
+            size="s"
+            appearance="plain"
+            title="Fetch models"
+            ?disabled=${!provider.baseUrl.trim() || loading}
+            ?loading=${loading}
+            @click=${() => void this.fetchModels(index)}
+          >
+            <wa-icon name="arrows-rotate" label="Reload models"></wa-icon>
+          </wa-button>
+        </div>
+      `;
+		return html`
+      <div class="models-cell">
+        <wa-select
+          size="s"
+          multiple
+          with-clear
+          placeholder=${loading ? "Loading models…" : "Select models"}
+          .value=${selected}
+          ?disabled=${loading && remote.length === 0}
+          @change=${(e) => this.onModelsSelect(index, e)}
+        >
+          ${remote.map((m) => html`<wa-option value=${m.id}>${m.name === m.id ? m.id : `${m.name} (${m.id})`}</wa-option>`)}
+          ${selected.filter((id) => !remote.some((m) => m.id === id)).map((id) => html`<wa-option value=${id}>${id}</wa-option>`)}
+        </wa-select>
+        <wa-button
+          size="s"
+          appearance="plain"
+          title="Reload models"
+          ?disabled=${!provider.baseUrl.trim() || loading}
+          ?loading=${loading}
+          @click=${() => void this.fetchModels(index)}
+        >
+          <wa-icon name="arrows-rotate" label="Reload models"></wa-icon>
+        </wa-button>
+      </div>
+      ${error ? html`<div class="models-error">${error}</div>` : ""}
+    `;
+	}
+	static {
+		this.styles = css`
+    :host {
+      display: block;
+      height: 100%;
+    }
+
+    .editor {
+      display: flex;
+      flex-direction: column;
+      gap: var(--wa-space-2xl);
+      padding: var(--wa-space-l);
+      min-width: 0;
+    }
+
+    .section {
+      display: flex;
+      flex-direction: column;
+      gap: var(--wa-space-l);
+      min-width: 0;
+    }
+
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      gap: var(--wa-space-m);
+      flex-wrap: wrap;
+    }
+
+    .header h2 {
+      margin: 0;
+      font-size: var(--wa-font-size-l);
+    }
+
+    wa-radio-group {
+      max-width: 36rem;
+    }
+
+    .approval-option {
+      display: flex;
+      flex-direction: column;
+      gap: var(--wa-space-3xs);
+      padding-block: var(--wa-space-3xs);
+    }
+
+    .approval-label {
+      font-weight: 500;
+    }
+
+    .approval-hint {
+      color: var(--wa-color-text-quiet);
+      font-size: var(--wa-font-size-s);
+    }
+
+    .hint {
+      margin: var(--wa-space-2xs) 0 0;
+      color: var(--wa-color-text-quiet);
+      font-size: var(--wa-font-size-s);
+    }
+
+    .table-wrap {
+      overflow: auto;
+      border: var(--wa-border-width-s) solid var(--wa-color-border-normal);
+      border-radius: var(--wa-border-radius-m);
+    }
+
+    table.providers {
+      width: 100%;
+      border-collapse: collapse;
+      min-width: 56rem;
+    }
+
+    th,
+    td {
+      padding: var(--wa-space-2xs) var(--wa-space-s);
+      border-bottom: var(--wa-border-width-s) solid var(--wa-color-border-normal);
+      text-align: left;
+      vertical-align: middle;
+    }
+
+    th {
+      font-size: var(--wa-font-size-xs);
+      font-weight: 600;
+      color: var(--wa-color-text-quiet);
+      background: var(--wa-color-surface-lowered);
+      white-space: nowrap;
+    }
+
+    tr.is-default td {
+      background: color-mix(in srgb, var(--wa-color-brand-fill-normal) 8%, transparent);
+    }
+
+    tbody tr:last-child td {
+      border-bottom: none;
+    }
+
+    .col-on {
+      width: 2.5rem;
+    }
+
+    .col-id {
+      width: 8rem;
+    }
+
+    .col-key {
+      width: 11rem;
+    }
+
+    .col-models {
+      min-width: 16rem;
+    }
+
+    .col-default {
+      width: 5.5rem;
+      white-space: nowrap;
+    }
+
+    .col-actions {
+      width: 2.75rem;
+      text-align: end;
+    }
+
+    td wa-input {
+      width: 100%;
+    }
+
+    .models-cell {
+      display: flex;
+      gap: var(--wa-space-2xs);
+      align-items: flex-start;
+      min-width: 14rem;
+    }
+
+    .models-cell wa-input,
+    .models-cell wa-select {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .models-error {
+      margin-top: var(--wa-space-3xs);
+      color: var(--wa-color-danger-on-quiet);
+      font-size: var(--wa-font-size-xs);
+    }
+
+    code {
+      font-family: var(--wa-font-family-code, var(--wa-font-mono));
+      font-size: 0.9em;
+    }
+  `;
+	}
+};
+_decorate([property({ attribute: false })], DocksCognitiveSettingsEditor.prototype, "input", void 0);
+_decorate([state()], DocksCognitiveSettingsEditor.prototype, "settings", void 0);
+_decorate([state()], DocksCognitiveSettingsEditor.prototype, "approvalMode", void 0);
+_decorate([state()], DocksCognitiveSettingsEditor.prototype, "availableModels", void 0);
+_decorate([state()], DocksCognitiveSettingsEditor.prototype, "loadingModels", void 0);
+_decorate([state()], DocksCognitiveSettingsEditor.prototype, "modelErrors", void 0);
+DocksCognitiveSettingsEditor = _decorate([customElement("docks-cognitive-settings-editor")], DocksCognitiveSettingsEditor);
+function uniqueProviderId(existing) {
+	const used = new Set(existing.map((p) => p.id));
+	if (!used.has("provider")) return "provider";
+	let n = 2;
+	while (used.has(`provider-${n}`)) n += 1;
+	return `provider-${n}`;
+}
+//#endregion
+//#region src/cognitive-extension.ts
+cognitiveRuntime.start();
+rootContext.put("cognitiveRuntime", cognitiveRuntime);
+contributionRegistry.registerContribution(SIDEBAR_AUXILIARY, {
+	name: AI_VIEW_NAME,
+	label: "AI",
+	icon: "robot",
+	editorId: AI_VIEW_NAME,
+	component: (id) => html`<docks-cognitive-view id="${id}"></docks-cognitive-view>`
+});
+editorRegistry.registerEditorInputHandler({
+	editorId: AI_SETTINGS_EDITOR_ID,
+	label: "AI Settings",
+	ranking: 1e3,
+	canHandle: (input) => input.key === AI_SETTINGS_KEY,
+	handle: async (input) => {
+		input.component = (id) => html`<docks-cognitive-settings-editor id="${id}" .input=${input}></docks-cognitive-settings-editor>`;
+		return input;
+	}
+});
+registerAll({
+	command: {
+		id: OPEN_AI_SETTINGS_COMMAND,
+		name: "Open AI Settings",
+		description: "Configure AI model providers",
+		parameters: []
+	},
+	handler: { execute: () => {
+		const editorInput = {
+			title: "AI Settings",
+			data: {},
+			key: AI_SETTINGS_KEY,
+			icon: "gear",
+			state: {}
+		};
+		editorRegistry.loadEditor(editorInput);
+	} }
+});
+//#endregion
+
+//# sourceMappingURL=cognitive-extension-CG_d39K5.js.map