dsh-agent-crew-desktop-ui 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Tushar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.i18n.yaml

@@ -0,0 +1,37 @@
+# Bilingual-pair consistency record for README.md (docs/i18n/README.md): per heading
+# section, a hash of its English and Chinese blocks outside code blocks and generated regions.
+# After editing either side, bring the other along and re-record with:
+#   pnpm run verify-translation-pairing --write packages/experimental/crew-desktop-ui/README.md
+/:
+  en: fd84da234a63d5ac
+  zh: 5bc3ca2b5adc0c9e
+/deepseek-ai-dsh-crew-desktop-ui:
+  en: d9282c8f0ed1e841
+  zh: 9fa2fad28e1494ba
+/deepseek-ai-dsh-crew-desktop-ui/summary:
+  en: bb704a49986ef54f
+  zh: 6fee0ba186f3a14a
+/deepseek-ai-dsh-crew-desktop-ui/table-of-contents:
+  en: d152484eb41ac6b4
+  zh: b00dddf4c88f0a45
+/deepseek-ai-dsh-crew-desktop-ui/use-this-package:
+  en: 22a5fe3d507185ba
+  zh: 1c697ad3fbd72143
+/deepseek-ai-dsh-crew-desktop-ui/understand-the-implementation:
+  en: b558c66fc9af80cc
+  zh: 3c6d1ca637bd0716
+/deepseek-ai-dsh-crew-desktop-ui/further-exploration:
+  en: 9ba2bb6048edd305
+  zh: 865d444094927932
+/deepseek-ai-dsh-crew-desktop-ui/model-experience:
+  en: 03c852ffd232fc8f
+  zh: 624575ba9df489ce
+/deepseek-ai-dsh-crew-desktop-ui/model-experience/kv-cache-effect:
+  en: ca75c51c89c2c9b0
+  zh: 477b768cc9dcda1a
+/deepseek-ai-dsh-crew-desktop-ui/known-limitations-and-deferred-work:
+  en: ff61a9db8e974b46
+  zh: d2359dfa404afa96
+/deepseek-ai-dsh-crew-desktop-ui/known-limitations-and-deferred-work/dev-note:
+  en: 1b1046904f84d318
+  zh: d2b3b084ce7576fa

package/README.md

@@ -1,3 +1,93 @@
-# Temporary Holding Version
+---
+description: "Browser half of crew desktop: the right-panel Desktop tab with the latest tool-result screenshot, where computer use runs, and Pause, Take over and Resume."
+kind: "package-reference"
+---
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+# dsh-agent-crew-desktop-ui
+
+English | [中文](README.zh.md)
+
+## Summary
+
+This client plugin adds a **Desktop** tab to the right panel. It shows the newest screenshot any tool returned in the Session, labelled with the tool and time, where computer use runs, and whether the agent is working. **Pause** stops the current turn; **Take over** stops it and shows that you are in control until you resume or send a message. The screen updates after each agent action and is not a live stream.
+
+## Table of Contents
+
+- [Use this package](#use-this-package)
+- [Understand the implementation](#understand-the-implementation)
+- [Further Exploration](#further-exploration)
+- [Model Experience](#model-experience)
+- [Known Limitations and Deferred Work](#known-limitations-and-deferred-work)
+- [Dev Note](#dev-note)
+
+-----
+
+<a id="use-this-package"></a>
+## Use this package
+
+The [crew-desktop](../crew-desktop/README.md) bundle mounts this row. Open **Desktop** from the right panel's guide in any Session.
+
+| Control | Effect |
+|---|---|
+| **Pause** | Stops the agent's current turn through the Session's cancel; enabled while the agent works |
+| **Take over** | Stops a running turn, then shows **You're in control** |
+| **Resume** | Clears the in-control notice; the agent continues when you send it a message |
+
+A new turn, for example after you send a message, also ends the in-control notice. If stopping fails, the tab says so and the agent stays in control.
+
+-----
+
+<a id="understand-the-implementation"></a>
+## Understand the implementation
+
+<details>
+<summary>Implementation internals — click to expand</summary>
+
+The tab reads the Session's loaded event window. The frame is the last `image` block of the newest `tool/result`, named after the matching `tool/call`; offloaded images are skipped. Its bytes come from the Session's `readAttachment` and are shown as a data URL. The model keeps one Desktop state per Session binding, follows its sources only while the tab is open, and reads the location from `crewDesktop.where()` once.
+
+| Source | Contents |
+|---|---|
+| [`src/client/frame.ts`](src/client/frame.ts) | Frame selection and image encoding |
+| [`src/client/desktop-model.ts`](src/client/desktop-model.ts) | Per-Session state, Pause, Take over and Resume |
+| [`src/client/DesktopTab.tsx`](src/client/DesktopTab.tsx) | Tab body |
+| [`src/client/index.ts`](src/client/index.ts) | Tab type, Remote and slot registration |
+| [`src/client/locales.ts`](src/client/locales.ts) | Copy |
+| [`tests/`](tests/) | Frame selection, states, labels and stopping |
+
+</details>
+
+-----
+
+<a id="further-exploration"></a>
+## Further Exploration
+
+- [crew-desktop](../crew-desktop/README.md) — the bundle and its Remote.
+- [ui-sidebar-right](../../client/ui-sidebar-right/README.md) — right-panel tabs.
+- [session-controller](../../api/session-controller/README.md) — cancel and attachments.
+
+<a id="model-experience"></a>
+## Model Experience
+
+None, as the package is a browser tab that registers nothing model-facing.
+
+#### KV Cache effect
+
+None; this package neither assembles nor sends a provider request.
+
+## Known Limitations and Deferred Work
+
+<a id="known-limitations-and-deferred-work"></a>
+
+- Frames come only from images tools return, so the tab shows nothing until an agent takes a screenshot; a continuous stream (for example over VNC) is deferred.
+- Only the loaded part of the Session is searched; an older screenshot beyond it is not shown.
+- Take over does not lock the computer; it stops the agent and marks that you are in control.
+
+<a id="dev-note"></a>
+### Dev Note
+
+<details>
+<summary>Working context for maintainers — click to expand</summary>
+
+Tests drive the tab with a hand-built event window and Session.
+
+</details>

package/README.zh.md

@@ -0,0 +1,93 @@
+---
+description: "crew 桌面的浏览器端：右侧面板的桌面标签页，显示最新的工具结果截图、电脑使用的运行位置，以及暂停、接管和恢复。"
+kind: "package-reference"
+---
+
+# dsh-agent-crew-desktop-ui
+
+[English](README.md) | 中文
+
+## 概述
+
+本客户端插件在右侧面板添加 **桌面** 标签页。它显示 Session 中任意工具返回的最新截图，并标注工具和时间，同时显示电脑使用的运行位置以及智能体是否在工作。**暂停** 停止当前轮次；**接管** 停止它并显示由你控制，直到你恢复或发送消息。画面在每次智能体操作后更新，不是实时画面。
+
+## 目录
+
+- [使用本包](#use-this-package)
+- [实现原理](#understand-the-implementation)
+- [延伸阅读](#further-exploration)
+- [模型体验](#model-experience)
+- [已知限制与后续工作](#known-limitations-and-deferred-work)
+- [开发备注](#dev-note)
+
+-----
+
+<a id="use-this-package"></a>
+## 使用本包
+
+[crew-desktop](../crew-desktop/README.zh.md) bundle 挂载此行。在任意 Session 中从右侧面板的引导页打开 **桌面**。
+
+| 控件 | 作用 |
+|---|---|
+| **暂停** | 通过 Session 的取消停止智能体当前轮次；智能体工作时可用 |
+| **接管** | 停止正在运行的轮次，然后显示 **由你控制** |
+| **恢复** | 清除由你控制的提示；你发送消息后智能体继续 |
+
+新的轮次（例如你发送消息后）也会结束由你控制的提示。如果停止失败，标签页会说明，智能体继续控制。
+
+-----
+
+<a id="understand-the-implementation"></a>
+## 实现原理
+
+<details>
+<summary>实现细节——点击展开</summary>
+
+标签页读取 Session 已加载的事件窗口。画面是最新 `tool/result` 中最后一个 `image` 块，以对应的 `tool/call` 命名；已卸载的图片会被跳过。图片字节来自 Session 的 `readAttachment`，以 data URL 显示。模型为每个 Session 绑定保留一份桌面状态，只在标签页打开时跟随其来源，并只读取一次 `crewDesktop.where()` 的位置。
+
+| 源文件 | 内容 |
+|---|---|
+| [`src/client/frame.ts`](src/client/frame.ts) | 画面选择与图片编码 |
+| [`src/client/desktop-model.ts`](src/client/desktop-model.ts) | 每个 Session 的状态、暂停、接管与恢复 |
+| [`src/client/DesktopTab.tsx`](src/client/DesktopTab.tsx) | 标签页内容 |
+| [`src/client/index.ts`](src/client/index.ts) | 标签页类型、Remote 与插槽注册 |
+| [`src/client/locales.ts`](src/client/locales.ts) | 文案 |
+| [`tests/`](tests/) | 画面选择、状态、标签与停止 |
+
+</details>
+
+-----
+
+<a id="further-exploration"></a>
+## 延伸阅读
+
+- [crew-desktop](../crew-desktop/README.zh.md) — bundle 及其 Remote。
+- [ui-sidebar-right](../../client/ui-sidebar-right/README.zh.md) — 右侧面板标签页。
+- [session-controller](../../api/session-controller/README.zh.md) — 取消与附件。
+
+<a id="model-experience"></a>
+## 模型体验
+
+无，本包是浏览器标签页，不注册任何面向模型的内容。
+
+#### KV Cache 影响
+
+无；本包既不组装也不发送模型提供方请求。
+
+## 已知限制与后续工作
+
+<a id="known-limitations-and-deferred-work"></a>
+
+- 画面只来自工具返回的图片，因此在智能体截图之前标签页没有内容；连续画面（例如通过 VNC）留待以后。
+- 只搜索 Session 已加载的部分；更早的截图不会显示。
+- 接管不会锁定电脑；它停止智能体并标明由你控制。
+
+<a id="dev-note"></a>
+### 开发备注
+
+<details>
+<summary>维护者工作背景——点击展开</summary>
+
+测试用手工构造的事件窗口和 Session 驱动标签页。
+
+</details>

package/lib/client.js

@@ -0,0 +1,743 @@
+window.__ModuleLoader__.load({
+	id: "dsh-agent-crew-desktop-ui",
+	factory: (require) => {
+		var module = { exports: {} };
+		var exports = module.exports;
+		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+		let zod = require("zod");
+		let react_jsx_runtime = require("react/jsx-runtime");
+		let react = require("react");
+		let _deepseek_ai_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
+		//#region ../../util/brand/src/index.ts
+		/**
+		* Apply a compile-time string brand without changing the value.
+		* @param value - string admitted by the domain that owns the target brand.
+		* @returns the same string with the requested compile-time brand.
+		*/
+		function brandString(value) {
+			return value;
+		}
+		//#endregion
+		//#region ../../core/session/src/types.ts
+		/**
+		* Brand a string as a {@link SessionId}.
+		* @param id - the raw session id string.
+		* @returns the same string with the session-id brand.
+		*/
+		function SessionId(id) {
+			return brandString(id);
+		}
+		//#endregion
+		//#region ../../typert/protocol/src/remote-info.ts
+		/**
+		* Retain one generated definition per endpoint without constructing parsers or projections.
+		* The class instance builds its shared descriptor/method index on first access;
+		* input schemas and JSON Schema projections are cached only when requested.
+		* @param spec - compiler-produced method facts and Zod factories.
+		* @param zod - the generated artifact's Zod runtime for named-input parsers.
+		* @returns a lazy, mountable info instance with no registration or transport effects.
+		*/
+		function createTypertRemoteInfo(spec, zod) {
+			return new RemoteInfo(spec, zod);
+		}
+		var RemoteInfo = class {
+			spec;
+			zod;
+			index;
+			constructor(spec, zod) {
+				this.spec = spec;
+				this.zod = zod;
+			}
+			get package() {
+				return this.spec.package;
+			}
+			get descriptors() {
+				return this.resolve().descriptors;
+			}
+			get methods() {
+				return this.resolve().methods;
+			}
+			resolve() {
+				if (this.index !== void 0) return this.index;
+				const zod = this.zod;
+				const descriptors = [];
+				const methods = Object.create(null);
+				for (const [endpoint, definition] of Object.entries(this.spec.methods)) {
+					const separator = endpoint.indexOf("/");
+					const namespace = endpoint.slice(0, separator);
+					const method = endpoint.slice(separator + 1);
+					const parameters = definition.parameters.map((parameter) => ({
+						...parameter,
+						wire: parameter.wire ?? parameter.name
+					}));
+					const descriptor = {
+						...definition,
+						id: `${this.spec.package}#${endpoint}`,
+						namespace,
+						method,
+						parameters,
+						result: definition.result.description === void 0 ? definition.result : new ResultValue(definition.result)
+					};
+					if (definition.invocation.kind === "direct") {
+						const inputs = [];
+						methods[endpoint] = Object.assign(descriptor, {
+							input(options) {
+								const strict = options?.strict === true;
+								return inputs[strict ? 1 : 0] ??= new NamedInput(parameters, strict, zod);
+							},
+							invoke(remote, input, signal) {
+								const named = input;
+								const values = parameters.map((parameter) => named[parameter.wire]);
+								if (definition.cancellation !== void 0) values.push(signal);
+								const receiver = Reflect.get(remote, namespace);
+								return Reflect.get(receiver, method).apply(receiver, values);
+							}
+						});
+					}
+					descriptors.push(descriptor);
+				}
+				return this.index = {
+					descriptors,
+					methods
+				};
+			}
+		};
+		function optional(parameter) {
+			return parameter.source === "json" && parameter.acceptsUndefined === true;
+		}
+		var NamedInput = class {
+			parameters;
+			strict;
+			zod;
+			schema;
+			projection;
+			constructor(parameters, strict, zod) {
+				this.parameters = parameters;
+				this.strict = strict;
+				this.zod = zod;
+			}
+			codec(parameter) {
+				return this.strict ? parameter.strictCodec : parameter.codec;
+			}
+			create = () => this.schema ??= this.zod.strictObject(Object.fromEntries(this.parameters.map((parameter) => {
+				const value = this.codec(parameter).create();
+				return [parameter.wire, optional(parameter) ? value.optional() : value.nonoptional()];
+			})));
+			get jsonSchema() {
+				return this.project().jsonSchema;
+			}
+			get jsonSchemaError() {
+				return this.project().jsonSchemaError;
+			}
+			project() {
+				if (this.projection !== void 0) return this.projection;
+				const unavailable = this.parameters.find((parameter) => this.codec(parameter).jsonSchema === void 0);
+				if (unavailable !== void 0) return this.projection = { jsonSchemaError: this.codec(unavailable).jsonSchemaError ?? `No JSON Schema for parameter ${unavailable.wire}` };
+				return this.projection = { jsonSchema: {
+					type: "object",
+					properties: Object.fromEntries(this.parameters.map((parameter) => [parameter.wire, {
+						...this.codec(parameter).jsonSchema,
+						...parameter.description === void 0 ? {} : { description: parameter.description }
+					}])),
+					required: this.parameters.filter((parameter) => !optional(parameter)).map((parameter) => parameter.wire),
+					additionalProperties: false
+				} };
+			}
+		};
+		var ResultValue = class {
+			spec;
+			projection;
+			constructor(spec) {
+				this.spec = spec;
+			}
+			get mode() {
+				return this.spec.mode;
+			}
+			get typeSymbol() {
+				return this.spec.typeSymbol;
+			}
+			get create() {
+				return this.spec.create;
+			}
+			get decode() {
+				return this.spec.decode;
+			}
+			get encode() {
+				return this.spec.encode;
+			}
+			get description() {
+				return this.spec.description;
+			}
+			get jsonSchemaError() {
+				return this.spec.jsonSchemaError;
+			}
+			get jsonSchema() {
+				if (this.projection === void 0) {
+					const schema = this.spec.jsonSchema;
+					this.projection = { value: schema === void 0 ? void 0 : {
+						...schema,
+						description: this.spec.description
+					} };
+				}
+				return this.projection.value;
+			}
+		};
+		//#endregion
+		//#region ../crew-desktop/lib/typert.remote-client.js
+		let _deepseek_ai_dsh_crew_desktop_crewDesktop_where_result$schema$value;
+		const _deepseek_ai_dsh_crew_desktop_crewDesktop_where_result$schema = () => _deepseek_ai_dsh_crew_desktop_crewDesktop_where_result$schema$value ??= zod.z.object({
+			"provider": zod.z.string().readonly().optional().describe("Registered computer-use provider, absent while none is mounted."),
+			"host": zod.z.string().readonly().describe("Host machine name."),
+			"platform": zod.z.string().readonly().describe("Host operating system, as Node reports it.")
+		});
+		const TYPERT_REMOTE = createTypertRemoteInfo({
+			package: "dsh-agent-crew-desktop",
+			methods: { "crewDesktop/where": {
+				service: "crewDesktop",
+				description: "Where computer use runs.",
+				invocation: { kind: "direct" },
+				parameters: [],
+				result: {
+					mode: "strict",
+					typeSymbol: "dsh-agent-crew-desktop/types#DesktopLocation",
+					create: _deepseek_ai_dsh_crew_desktop_crewDesktop_where_result$schema,
+					description: "the provider name, when one is registered, and the host machine.",
+					jsonSchema: {
+						"type": "object",
+						"properties": {
+							"provider": {
+								"type": "string",
+								"description": "Registered computer-use provider, absent while none is mounted."
+							},
+							"host": {
+								"type": "string",
+								"description": "Host machine name."
+							},
+							"platform": {
+								"type": "string",
+								"description": "Host operating system, as Node reports it."
+							}
+						},
+						"required": ["host", "platform"],
+						"additionalProperties": true
+					}
+				},
+				sourceLocation: {
+					"file": "packages/experimental/crew-desktop/src/index.ts",
+					"line": 42,
+					"column": 3
+				}
+			} }
+		}, zod.z);
+		//#endregion
+		//#region lib/types/client/frame.js
+		/**
+		* Find the newest tool-result image.
+		* @param entries - the Session's loaded event window.
+		* @returns the latest frame, or undefined when no tool has returned an image.
+		*/
+		function latestFrame(entries) {
+			const tools = /* @__PURE__ */ new Map();
+			let latest;
+			for (const entry of entries) {
+				if (entry.type !== "event") continue;
+				const event = entry.event;
+				if (event.type === "tool/call") tools.set(event.data.callId, event.data.name);
+				else if (event.type === "tool/result") {
+					const image = event.data.message.content.findLast((block) => block.type === "image");
+					if (image?.type === "image" && image.offloaded !== true) latest = {
+						attachment: image.attachment,
+						tool: tools.get(event.data.message.toolCallId) ?? "tool",
+						time: event.time,
+						seq: event.seq
+					};
+				}
+			}
+			return latest;
+		}
+		/**
+		* Encode image bytes as a data URL the tab can show without another request.
+		* @param bytes - encoded image.
+		* @param mediaType - its verified media type.
+		* @returns a `data:` URL.
+		*/
+		function dataUrl(bytes, mediaType) {
+			let binary = "";
+			for (let index = 0; index < bytes.length; index += 32768) binary += String.fromCharCode(...bytes.subarray(index, index + 32768));
+			return `data:${mediaType};base64,${btoa(binary)}`;
+		}
+		//#endregion
+		//#region lib/types/client/desktop-model.js
+		/** Observable Desktop state for one Session; it follows its sources only while the tab is open. */
+		var DesktopModel = class {
+			events;
+			session;
+			where;
+			state = {
+				frame: void 0,
+				image: void 0,
+				imageFailed: false,
+				running: false,
+				takenOver: false,
+				location: void 0,
+				locationFailed: false,
+				stopFailed: false
+			};
+			listeners = /* @__PURE__ */ new Set();
+			detach;
+			revision = -1;
+			locating = false;
+			/** Current state. */
+			source = {
+				getSnapshot: () => this.state,
+				subscribe: (listener) => {
+					this.listeners.add(listener);
+					if (this.listeners.size === 1) this.attach();
+					return () => {
+						this.listeners.delete(listener);
+						if (this.listeners.size === 0) {
+							this.detach?.();
+							this.detach = void 0;
+						}
+					};
+				}
+			};
+			/**
+			* @param events - the Session's event window.
+			* @param session - the Session, for running state, images and stopping.
+			* @param where - reads where computer use runs; undefined when the reply was lost.
+			*/
+			constructor(events, session, where) {
+				this.events = events;
+				this.session = session;
+				this.where = where;
+			}
+			publish(next) {
+				this.state = {
+					...this.state,
+					...next
+				};
+				for (const listener of [...this.listeners]) listener();
+			}
+			attach() {
+				const offEvents = this.events.subscribe(() => {
+					this.readFrame();
+				});
+				const offSession = this.session.subscribe(() => {
+					this.readRunning();
+				});
+				this.detach = () => {
+					offEvents();
+					offSession();
+				};
+				this.readFrame();
+				this.readRunning();
+				if (this.locating) return;
+				this.locating = true;
+				this.where().then((location) => {
+					this.publish({
+						location,
+						locationFailed: location === void 0
+					});
+				});
+			}
+			readRunning() {
+				const running = this.session.getSnapshot().running;
+				if (running === this.state.running) return;
+				this.publish(running ? {
+					running,
+					takenOver: false
+				} : { running });
+			}
+			readFrame() {
+				const window = this.events.getSnapshot();
+				if (window.revision === this.revision) return;
+				this.revision = window.revision;
+				const frame = latestFrame(window.entries);
+				if (frame?.seq === this.state.frame?.seq) return;
+				this.publish({
+					frame,
+					image: void 0,
+					imageFailed: false
+				});
+				if (frame === void 0) return;
+				this.session.readAttachment(frame.attachment).then((result) => {
+					if (this.state.frame?.seq !== frame.seq) return;
+					this.publish(result.ok ? { image: dataUrl(result.value.data, frame.attachment.mediaType) } : { imageFailed: true });
+				}, () => {
+					if (this.state.frame?.seq === frame.seq) this.publish({ imageFailed: true });
+				});
+			}
+			async stop() {
+				const ok = (await this.session.cancel().catch(() => void 0))?.ok === true;
+				this.publish({ stopFailed: !ok });
+				return ok;
+			}
+			/**
+			* Stop the agent's current turn.
+			* @returns whether the Host accepted the stop.
+			*/
+			pause() {
+				return this.stop();
+			}
+			/**
+			* Stop the agent and mark that the user is in control.
+			* @returns whether the agent was stopped.
+			*/
+			async takeOver() {
+				if (this.state.running && !await this.stop()) return false;
+				this.publish({
+					takenOver: true,
+					stopFailed: false
+				});
+				return true;
+			}
+			/** Hand control back; the agent continues when the user sends it a message. */
+			resume() {
+				this.publish({ takenOver: false });
+			}
+		};
+		//#endregion
+		//#region \0dsh-css:/Users/tushar/Developer/deepseek-harness-fork/packages/experimental/crew-desktop-ui/src/client/DesktopTab.module.css.mjs
+		const css = "[data-mode]{--c:var(--dsw-alias-state-idle-primary)}[data-mode=working]{--c:var(--dsw-alias-state-business-primary)}[data-mode=taken]{--c:var(--dsw-alias-state-warn-primary)}.zK5j4a_tab{background:var(--dsw-alias-bg-base);height:100%;color:var(--dsw-alias-label-primary);flex-direction:column;gap:12px;padding:16px;font-size:13px;display:flex;overflow-y:auto}.zK5j4a_head{align-items:flex-start;gap:12px;display:flex}.zK5j4a_headText{flex:1;min-width:0}.zK5j4a_title{letter-spacing:-.01em;margin:0;font-size:17px;font-weight:650;line-height:1.2}.zK5j4a_status{color:var(--dsw-alias-label-tertiary);margin:2px 0 0;font-size:12px}.zK5j4a_pill{background:color-mix(in srgb, var(--c) 14%, transparent);white-space:nowrap;border-radius:999px;flex:none;align-items:center;gap:6px;padding:2px 8px;font-size:11px;font-weight:550;display:inline-flex}.zK5j4a_pill:before{content:\"\";background:var(--c);border-radius:50%;width:6px;height:6px}.zK5j4a_pill[data-mode=working]:before{animation:1.6s ease-in-out infinite zK5j4a_pulse}@keyframes zK5j4a_pulse{50%{opacity:.35}}.zK5j4a_where{border-radius:var(--dsw-radius-md);background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-secondary);align-items:flex-start;gap:8px;margin:0;padding:8px 10px;font-size:12px;display:flex}.zK5j4a_where[data-off]{color:var(--dsw-alias-label-tertiary)}.zK5j4a_whereIcon{color:var(--dsw-alias-label-tertiary);flex:none;margin-top:1px}.zK5j4a_banner{border-radius:var(--dsw-radius-md);background:color-mix(in srgb, var(--dsw-alias-state-warn-primary) 14%, transparent);color:var(--dsw-alias-label-primary);margin:0;padding:10px 12px;font-size:12px}.zK5j4a_error{color:var(--dsw-alias-state-error-primary);margin:0;font-size:12px}.zK5j4a_screen{border:1px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-md);background:var(--dsw-alias-bg-layer-1);justify-content:center;align-items:center;min-height:180px;margin:0;padding:6px;transition:border-color .2s,box-shadow .2s;display:flex;position:relative}.zK5j4a_screen[data-mode=taken]{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent)}.zK5j4a_screen img{border-radius:6px;max-width:100%;height:auto;display:block}.zK5j4a_badge{color:#fff;max-width:calc(100% - 28px);font-family:var(--dsw-font-mono,ui-monospace, monospace);text-overflow:ellipsis;white-space:nowrap;backdrop-filter:blur(6px);background:#14161ab8;border-radius:999px;padding:3px 8px;font-size:11px;position:absolute;bottom:14px;right:14px;overflow:hidden}.zK5j4a_empty{max-width:30ch;color:var(--dsw-alias-label-tertiary);text-align:center;flex-direction:column;align-items:center;gap:8px;margin:0;padding:16px;font-size:12px;display:flex}.zK5j4a_caption,.zK5j4a_hint{color:var(--dsw-alias-label-tertiary);margin:0;font-size:11px}.zK5j4a_caption{margin-top:-6px}.zK5j4a_hint{text-align:center}.zK5j4a_actions{grid-template-columns:1fr 1fr;gap:8px;margin-top:auto;display:grid}.zK5j4a_wide{grid-column:1/-1}@media (prefers-reduced-motion:reduce){.zK5j4a_pill:before{animation:none!important}.zK5j4a_screen{transition:none}}";
+		const tagId = "dsh-agent-crew-desktop-ui/DesktopTab.module.css";
+		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId) + "]") === null) {
+			const tag = document.createElement("style");
+			tag.dataset.plugin = "dsh-agent-crew-desktop-ui";
+			tag.dataset.pluginCss = tagId;
+			tag.textContent = css;
+			document.head.appendChild(tag);
+		}
+		var DesktopTab_module_css_default = {
+			"actions": "zK5j4a_actions",
+			"badge": "zK5j4a_badge",
+			"banner": "zK5j4a_banner",
+			"caption": "zK5j4a_caption",
+			"empty": "zK5j4a_empty",
+			"error": "zK5j4a_error",
+			"head": "zK5j4a_head",
+			"headText": "zK5j4a_headText",
+			"hint": "zK5j4a_hint",
+			"pill": "zK5j4a_pill",
+			"pulse": "zK5j4a_pulse",
+			"screen": "zK5j4a_screen",
+			"status": "zK5j4a_status",
+			"tab": "zK5j4a_tab",
+			"title": "zK5j4a_title",
+			"where": "zK5j4a_where",
+			"whereIcon": "zK5j4a_whereIcon",
+			"wide": "zK5j4a_wide"
+		};
+		//#endregion
+		//#region lib/types/client/DesktopTab.js
+		/** Right-panel Desktop tab: the latest screen an agent saw, where computer use runs, and Pause, Take over and Resume. */
+		function when(time) {
+			return new Date(time).toLocaleString(void 0, {
+				month: "short",
+				day: "numeric",
+				hour: "numeric",
+				minute: "2-digit",
+				second: "2-digit"
+			});
+		}
+		function Monitor() {
+			return (0, react_jsx_runtime.jsxs)("svg", {
+				width: "16",
+				height: "16",
+				viewBox: "0 0 16 16",
+				"aria-hidden": "true",
+				className: DesktopTab_module_css_default.whereIcon,
+				children: [(0, react_jsx_runtime.jsx)("rect", {
+					x: "1.5",
+					y: "2.5",
+					width: "13",
+					height: "9",
+					rx: "1.5",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "1.4"
+				}), (0, react_jsx_runtime.jsx)("path", {
+					d: "M5.5 14h5M8 11.5V14",
+					stroke: "currentColor",
+					strokeWidth: "1.4",
+					strokeLinecap: "round"
+				})]
+			});
+		}
+		/**
+		* Render the Desktop tab. Nothing stops the agent without a click.
+		* @param props - Desktop state, actions and copy.
+		* @returns the tab body.
+		*/
+		function DesktopTab({ useDesktop, pause, takeOver, resume, t }) {
+			const state = useDesktop((value) => value);
+			const [busy, setBusy] = (0, react.useState)(false);
+			const run = (action) => {
+				setBusy(true);
+				action().finally(() => {
+					setBusy(false);
+				});
+			};
+			const { frame, location } = state;
+			const where = state.locationFailed ? t("where.failed") : location === void 0 ? t("where.loading") : location.provider === void 0 ? t("where.none", { host: location.host }) : t("where.provider", {
+				provider: location.provider,
+				host: location.host
+			});
+			const mode = state.takenOver ? "taken" : state.running ? "working" : "idle";
+			return (0, react_jsx_runtime.jsxs)("section", {
+				className: DesktopTab_module_css_default.tab,
+				"aria-label": t("tab.title"),
+				children: [
+					(0, react_jsx_runtime.jsxs)("header", {
+						className: DesktopTab_module_css_default.head,
+						children: [(0, react_jsx_runtime.jsxs)("div", {
+							className: DesktopTab_module_css_default.headText,
+							children: [(0, react_jsx_runtime.jsx)("h2", {
+								className: DesktopTab_module_css_default.title,
+								children: t("tab.title")
+							}), !state.takenOver && (0, react_jsx_runtime.jsx)("p", {
+								className: DesktopTab_module_css_default.status,
+								role: "status",
+								children: state.running ? t("status.running") : t("status.idle")
+							})]
+						}), (0, react_jsx_runtime.jsx)("span", {
+							className: DesktopTab_module_css_default.pill,
+							"data-mode": mode,
+							"aria-hidden": "true",
+							children: t(`pill.${mode}`)
+						})]
+					}),
+					(0, react_jsx_runtime.jsxs)("p", {
+						className: DesktopTab_module_css_default.where,
+						"data-off": state.locationFailed || location?.provider === void 0 || void 0,
+						children: [(0, react_jsx_runtime.jsx)(Monitor, {}), where]
+					}),
+					state.takenOver && (0, react_jsx_runtime.jsx)("p", {
+						className: DesktopTab_module_css_default.banner,
+						role: "status",
+						children: t("status.takenOver")
+					}),
+					state.stopFailed && (0, react_jsx_runtime.jsx)("p", {
+						className: DesktopTab_module_css_default.error,
+						role: "alert",
+						children: t("action.failed")
+					}),
+					(0, react_jsx_runtime.jsx)("figure", {
+						className: DesktopTab_module_css_default.screen,
+						"data-mode": mode,
+						children: frame === void 0 ? (0, react_jsx_runtime.jsxs)("p", {
+							className: DesktopTab_module_css_default.empty,
+							children: [(0, react_jsx_runtime.jsx)(Monitor, {}), t("frame.empty")]
+						}) : state.image !== void 0 ? (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsx)("img", {
+							src: state.image,
+							alt: t("frame.alt", {
+								tool: frame.tool,
+								time: when(frame.time)
+							}),
+							width: frame.attachment.width,
+							height: frame.attachment.height
+						}), (0, react_jsx_runtime.jsxs)("figcaption", {
+							className: DesktopTab_module_css_default.badge,
+							"aria-hidden": "true",
+							children: [
+								frame.tool,
+								" · ",
+								when(frame.time)
+							]
+						})] }) : (0, react_jsx_runtime.jsx)("p", {
+							className: state.imageFailed ? DesktopTab_module_css_default.error : DesktopTab_module_css_default.empty,
+							children: t(state.imageFailed ? "frame.failed" : "frame.loading")
+						})
+					}),
+					frame !== void 0 && (0, react_jsx_runtime.jsx)("p", {
+						className: DesktopTab_module_css_default.caption,
+						children: t("frame.note")
+					}),
+					(0, react_jsx_runtime.jsx)("div", {
+						className: DesktopTab_module_css_default.actions,
+						children: state.takenOver ? (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+							variant: "primary",
+							className: DesktopTab_module_css_default.wide,
+							icon: (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconPlayOutlineRegular, { size: 14 }),
+							"aria-label": t("action.resumeLabel"),
+							onClick: resume,
+							children: t("action.resume")
+						}) : (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+							variant: "outline",
+							icon: (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconPauseOutlineRegular, { size: 14 }),
+							disabled: busy || !state.running,
+							"aria-label": t("action.pauseLabel"),
+							onClick: () => {
+								run(pause);
+							},
+							children: t("action.pause")
+						}), (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+							variant: "primary",
+							disabled: busy,
+							"aria-label": t("action.takeOverLabel"),
+							onClick: () => {
+								run(takeOver);
+							},
+							children: t("action.takeOver")
+						})] })
+					}),
+					(0, react_jsx_runtime.jsx)("p", {
+						className: DesktopTab_module_css_default.hint,
+						children: t(state.takenOver ? "hint.resume" : "hint.stop")
+					})
+				]
+			});
+		}
+		//#endregion
+		//#region lib/types/client/locales.js
+		/** Desktop tab copy. */
+		const en = {
+			"tab.title": "Desktop",
+			"tab.description": "See the screen an agent is using, and pause it or take over",
+			"where.provider": "Computer use: {provider} on {host}",
+			"where.loading": "Checking where computer use runs…",
+			"where.none": "No computer-use provider is on, so agents can’t use this computer ({host}). Turn on Computer Use from Plugins to allow it.",
+			"where.failed": "Couldn’t reach dsh to check where computer use runs.",
+			"status.running": "The agent is working",
+			"status.idle": "The agent is not running",
+			"status.takenOver": "You’re in control. The agent stays stopped until you resume or send it a message.",
+			"frame.alt": "Screen from {tool} at {time}",
+			"frame.note": "Updates after each agent action. It is not a live stream.",
+			"pill.working": "Working",
+			"pill.idle": "Idle",
+			"pill.taken": "You’re in control",
+			"hint.stop": "Pause stops the current turn. Take over also keeps the agent stopped.",
+			"hint.resume": "Resume hands control back. The agent continues on your next message.",
+			"frame.empty": "No screen yet. When an agent takes a screenshot while using the computer, it appears here.",
+			"frame.loading": "Loading the latest screen…",
+			"frame.failed": "Couldn’t load the latest screen.",
+			"action.pause": "Pause",
+			"action.pauseLabel": "Pause the agent’s current turn",
+			"action.takeOver": "Take over",
+			"action.takeOverLabel": "Stop the agent and take control of the computer",
+			"action.resume": "Resume",
+			"action.resumeLabel": "Hand control back to the agent",
+			"action.failed": "Couldn’t stop the agent. Try again."
+		};
+		/** Chinese copy. */
+		const zh = {
+			"tab.title": "桌面",
+			"tab.description": "查看智能体正在使用的屏幕，并暂停或接管",
+			"where.provider": "电脑使用：{provider}，运行于 {host}",
+			"where.loading": "正在检查电脑使用的运行位置…",
+			"where.none": "没有开启电脑使用提供方，智能体无法使用这台电脑（{host}）。可在插件中开启电脑使用。",
+			"where.failed": "无法连接 dsh 检查电脑使用的运行位置。",
+			"status.running": "智能体正在工作",
+			"status.idle": "智能体未运行",
+			"status.takenOver": "由你控制。在你恢复或给它发送消息之前，智能体保持停止。",
+			"frame.alt": "来自 {tool} 的屏幕，{time}",
+			"frame.note": "每次智能体操作后更新，不是实时画面。",
+			"pill.working": "工作中",
+			"pill.idle": "空闲",
+			"pill.taken": "由你控制",
+			"hint.stop": "暂停会停止当前轮次。接管还会让智能体保持停止。",
+			"hint.resume": "恢复即交还控制权。智能体会在你下一条消息时继续。",
+			"frame.empty": "还没有屏幕画面。智能体使用电脑时截取的屏幕会显示在这里。",
+			"frame.loading": "正在加载最新屏幕…",
+			"frame.failed": "无法加载最新屏幕。",
+			"action.pause": "暂停",
+			"action.pauseLabel": "暂停智能体当前的轮次",
+			"action.takeOver": "接管",
+			"action.takeOverLabel": "停止智能体并接管电脑",
+			"action.resume": "恢复",
+			"action.resumeLabel": "把控制权交还给智能体",
+			"action.failed": "无法停止智能体，请重试。"
+		};
+		//#endregion
+		//#region lib/types/client/index.js
+		/** Registries the tab and the Remote need. */
+		const inject = [
+			"locale",
+			"sessions",
+			"slots",
+			"sidebarRightTabs",
+			"remote"
+		];
+		/** Desktop tab implementation identity and keyed Slot dispatch key. */
+		const DESKTOP_TAB_ID = "dsh-agent-crew-desktop-ui";
+		/**
+		* Register the tab type, mount the Remote, then the tab body for the same lifetime.
+		* @param ctx - Client plugin context.
+		* @returns disposer removing the tab before the Remote.
+		*/
+		async function apply(ctx) {
+			ctx.effect(() => ctx.locale.register("crewDesktop", {
+				en,
+				zh
+			}), "crew-desktop-ui: locale");
+			const t = ctx.locale.bind("crewDesktop");
+			ctx.effect(() => ctx.sidebarRightTabs.register({
+				id: DESKTOP_TAB_ID,
+				kind: "crew-desktop",
+				title: () => t("tab.title"),
+				guide: [{
+					id: "desktop",
+					order: 62,
+					title: () => t("tab.title"),
+					description: () => t("tab.description")
+				}]
+			}), "crew-desktop-ui: tab type");
+			const unmount = await ctx.remote.$mount(TYPERT_REMOTE);
+			const ui = ctx.inject(["remote.crewDesktop"], (inner) => {
+				const where = async () => {
+					try {
+						const result = await inner.remote.crewDesktop.where();
+						return result.ok ? result.value : void 0;
+					} catch (_error) {
+						return;
+					}
+				};
+				const models = /* @__PURE__ */ new WeakMap();
+				inner.slots.inject("sidebar.right.pane.tab", () => inner.slots.register({
+					name: "sidebar.right.pane.tab",
+					key: DESKTOP_TAB_ID,
+					locale: "crewDesktop",
+					inject: (key) => {
+						const sessionId = SessionId(key);
+						const binding = inner.sessions.binding(sessionId);
+						if (binding === void 0) throw new Error(`crew-desktop-ui: unknown Session ${sessionId}`);
+						let model = models.get(binding);
+						if (model === void 0) {
+							model = new DesktopModel(binding.eventSource, binding.session, where);
+							models.set(binding, model);
+						}
+						const current = model;
+						return {
+							hooks: { desktop: current.source },
+							pause: () => current.pause(),
+							takeOver: () => current.takeOver(),
+							resume: () => {
+								current.resume();
+							}
+						};
+					}
+				}, DesktopTab));
+			});
+			try {
+				await ui;
+			} catch (error) {
+				await ui.dispose();
+				await unmount();
+				throw error;
+			}
+			return async () => {
+				await ui.dispose();
+				await unmount();
+			};
+		}
+		//#endregion
+		exports.DESKTOP_TAB_ID = DESKTOP_TAB_ID;
+		exports.DesktopModel = DesktopModel;
+		exports.apply = apply;
+		exports.inject = inject;
+		exports.latestFrame = latestFrame;
+		return module.exports;
+	}
+});
+
+//# sourceMappingURL=client.js.map

package/lib/index.js

@@ -0,0 +1,6 @@
+//#region lib/types/index.js
+/** Browser registration is discovered through the package client declaration; the Host half is crew-desktop. */
+/** Register the browser-only contribution without Host state. */
+function apply() {}
+//#endregion
+export { apply };

package/lib/types/client/DesktopTab.d.ts

@@ -0,0 +1,20 @@
+import type { HostObservable, InjectFace, PropsLocale } from '@deepseek-ai/dsh-client-ui-slots';
+import type { DesktopState } from './desktop-model.ts';
+/** What the tab reads and does. */
+export interface DesktopTabInjected {
+    hooks: {
+        desktop: HostObservable<DesktopState>;
+    };
+    readonly pause: () => Promise<boolean>;
+    readonly takeOver: () => Promise<boolean>;
+    readonly resume: () => void;
+}
+type Props = InjectFace<DesktopTabInjected> & PropsLocale<'crewDesktop'>;
+/**
+ * Render the Desktop tab. Nothing stops the agent without a click.
+ * @param props - Desktop state, actions and copy.
+ * @returns the tab body.
+ */
+export declare function DesktopTab({ useDesktop, pause, takeOver, resume, t }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=DesktopTab.d.ts.map

package/lib/types/client/desktop-model.d.ts

@@ -0,0 +1,59 @@
+/** Per-Session Desktop state: the latest frame and its image, whether the agent runs, and whether the user took over. */
+import type { HostObservable } from '@deepseek-ai/dsh-client-ui-slots';
+import type { SessionEventSource, SessionFace } from '@deepseek-ai/dsh-api-session-controller/client';
+import type { DesktopLocation } from 'dsh-agent-crew-desktop/types';
+import { type DesktopFrame } from './frame.ts';
+/** What the Desktop tab shows. */
+export interface DesktopState {
+    readonly frame: DesktopFrame | undefined;
+    /** Loaded image of `frame`, as a data URL. */
+    readonly image: string | undefined;
+    readonly imageFailed: boolean;
+    readonly running: boolean;
+    /** The user took over: the agent was stopped and stays stopped until they resume. */
+    readonly takenOver: boolean;
+    readonly location: DesktopLocation | undefined;
+    /** Whether reading the location failed. */
+    readonly locationFailed: boolean;
+    /** The last Pause or Take over could not stop the agent. */
+    readonly stopFailed: boolean;
+}
+/** The Session calls the model needs. */
+export type DesktopSession = Pick<SessionFace, 'getSnapshot' | 'subscribe' | 'cancel' | 'readAttachment'>;
+/** Observable Desktop state for one Session; it follows its sources only while the tab is open. */
+export declare class DesktopModel {
+    private readonly events;
+    private readonly session;
+    private readonly where;
+    private state;
+    private readonly listeners;
+    private detach;
+    private revision;
+    private locating;
+    /** Current state. */
+    readonly source: HostObservable<DesktopState>;
+    /**
+     * @param events - the Session's event window.
+     * @param session - the Session, for running state, images and stopping.
+     * @param where - reads where computer use runs; undefined when the reply was lost.
+     */
+    constructor(events: SessionEventSource, session: DesktopSession, where: () => Promise<DesktopLocation | undefined>);
+    private publish;
+    private attach;
+    private readRunning;
+    private readFrame;
+    private stop;
+    /**
+     * Stop the agent's current turn.
+     * @returns whether the Host accepted the stop.
+     */
+    pause(): Promise<boolean>;
+    /**
+     * Stop the agent and mark that the user is in control.
+     * @returns whether the agent was stopped.
+     */
+    takeOver(): Promise<boolean>;
+    /** Hand control back; the agent continues when the user sends it a message. */
+    resume(): void;
+}
+//# sourceMappingURL=desktop-model.d.ts.map

package/lib/types/client/frame.d.ts

@@ -0,0 +1,28 @@
+/** Pick the screen an agent saw last: the newest image any tool returned in the loaded part of the Session. */
+import type { SessionEventLikeEntry } from '@deepseek-ai/dsh-api-session-controller/client';
+import type { ImageBlock } from '@deepseek-ai/dsh-llm';
+/** One screenshot frame and where it came from. */
+export interface DesktopFrame {
+    /** Stored image to load. */
+    readonly attachment: ImageBlock['attachment'];
+    /** Tool that returned it, such as a computer-use tool or `run_code`. */
+    readonly tool: string;
+    /** When the result was recorded, in epoch milliseconds. */
+    readonly time: number;
+    /** Session sequence of the result. */
+    readonly seq: number;
+}
+/**
+ * Find the newest tool-result image.
+ * @param entries - the Session's loaded event window.
+ * @returns the latest frame, or undefined when no tool has returned an image.
+ */
+export declare function latestFrame(entries: readonly SessionEventLikeEntry[]): DesktopFrame | undefined;
+/**
+ * Encode image bytes as a data URL the tab can show without another request.
+ * @param bytes - encoded image.
+ * @param mediaType - its verified media type.
+ * @returns a `data:` URL.
+ */
+export declare function dataUrl(bytes: Uint8Array, mediaType: string): string;
+//# sourceMappingURL=frame.d.ts.map

package/lib/types/client/index.d.ts

@@ -0,0 +1,21 @@
+/** Mount the crew desktop Remote and register the right-panel Desktop tab. */
+import type { Context } from '@deepseek-ai/cordis';
+import { type DesktopKey } from './locales.ts';
+export { latestFrame, type DesktopFrame } from './frame.ts';
+export { DesktopModel, type DesktopState } from './desktop-model.ts';
+declare module '@deepseek-ai/dsh-client-ui-slots' {
+    interface LocaleNamespaceMap {
+        crewDesktop: DesktopKey;
+    }
+}
+/** Registries the tab and the Remote need. */
+export declare const inject: string[];
+/** Desktop tab implementation identity and keyed Slot dispatch key. */
+export declare const DESKTOP_TAB_ID = "dsh-agent-crew-desktop-ui";
+/**
+ * Register the tab type, mount the Remote, then the tab body for the same lifetime.
+ * @param ctx - Client plugin context.
+ * @returns disposer removing the tab before the Remote.
+ */
+export declare function apply(ctx: Context): Promise<() => Promise<void>>;
+//# sourceMappingURL=index.d.ts.map

package/lib/types/client/locales.d.ts

@@ -0,0 +1,34 @@
+/** Desktop tab copy. */
+export declare const en: {
+    'tab.title': string;
+    'tab.description': string;
+    'where.provider': string;
+    'where.loading': string;
+    'where.none': string;
+    'where.failed': string;
+    'status.running': string;
+    'status.idle': string;
+    'status.takenOver': string;
+    'frame.alt': string;
+    'frame.note': string;
+    'pill.working': string;
+    'pill.idle': string;
+    'pill.taken': string;
+    'hint.stop': string;
+    'hint.resume': string;
+    'frame.empty': string;
+    'frame.loading': string;
+    'frame.failed': string;
+    'action.pause': string;
+    'action.pauseLabel': string;
+    'action.takeOver': string;
+    'action.takeOverLabel': string;
+    'action.resume': string;
+    'action.resumeLabel': string;
+    'action.failed': string;
+};
+/** Keys shared by every dictionary. */
+export type DesktopKey = keyof typeof en;
+/** Chinese copy. */
+export declare const zh: Record<DesktopKey, string>;
+//# sourceMappingURL=locales.d.ts.map

package/lib/types/index.d.ts

@@ -0,0 +1,4 @@
+/** Browser registration is discovered through the package client declaration; the Host half is crew-desktop. */
+/** Register the browser-only contribution without Host state. */
+export declare function apply(): void;
+//# sourceMappingURL=index.d.ts.map

package/locale/de.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "Crew-Desktop",
+    "description": "Der Desktop-Tab: der letzte Bildschirm, den ein Agent bei der Computernutzung gesehen hat, mit Pausieren und Übernehmen."
+  }
+}

package/locale/en.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "Crew desktop",
+    "description": "The Desktop tab: the latest screen an agent saw while using the computer, with Pause and Take over."
+  }
+}

package/locale/es.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "Escritorio de la crew",
+    "description": "La pestaña Escritorio: la última pantalla que vio un agente al usar el ordenador, con Pausar y Tomar el control."
+  }
+}

package/locale/fr.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "Bureau de la crew",
+    "description": "L’onglet Bureau : le dernier écran vu par un agent pendant qu’il utilisait l’ordinateur, avec Pause et Prendre la main."
+  }
+}

package/locale/ja.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "クルーのデスクトップ",
+    "description": "デスクトップタブ：エージェントがコンピューター操作中に最後に見た画面を、一時停止と操作の引き継ぎとともに表示します。"
+  }
+}

package/locale/pt.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "Área de trabalho da crew",
+    "description": "A aba Área de trabalho: a última tela que um agente viu ao usar o computador, com Pausar e Assumir o controle."
+  }
+}

package/locale/ru.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "Рабочий стол команды",
+    "description": "Вкладка «Рабочий стол»: последний экран, который агент видел при работе с компьютером, с кнопками «Пауза» и «Взять управление»."
+  }
+}

package/locale/zh.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "Crew 桌面",
+    "description": "桌面标签页：智能体使用电脑时看到的最新画面，并提供暂停和接管。"
+  }
+}

package/package.json

@@ -1,6 +1,70 @@
 {
   "name": "dsh-agent-crew-desktop-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "description": "Browser half of crew desktop: the right-panel Desktop tab with the latest screenshot, Pause and Take over",
+  "version": "0.1.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tusharcora/dsh-agent-crew.git",
+    "directory": "packages/crew-desktop-ui"
+  },
+  "type": "module",
+  "main": "lib/index.js",
+  "types": "lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/types/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./src/*": "./src/*",
+    "./package.json": "./package.json",
+    "./client": {
+      "types": "./lib/types/client/index.d.ts",
+      "default": "./lib/client.js"
+    },
+    "./locale/*.json": "./locale/*.json"
+  },
+  "dsh": {
+    "client": {
+      "platform": "web",
+      "inject": [
+        "@deepseek-ai/dsh-api-remotes",
+        "@deepseek-ai/dsh-api-session-controller",
+        "@deepseek-ai/dsh-client-locale",
+        "@deepseek-ai/dsh-client-ui-renderer",
+        "@deepseek-ai/dsh-client-ui-sidebar-right"
+      ]
+    }
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "@deepseek-ai/cordis": "~4.1.0"
+  },
+  "files": [
+    "locale/*.json",
+    "lib/index.js",
+    "lib/client.js",
+    "lib/types/**/*.d.ts",
+    "LICENSE"
+  ],
+  "peerDependenciesMeta": {
+    "@deepseek-ai/cordis": {
+      "optional": true
+    }
+  },
+  "keywords": [
+    "dsh",
+    "dsh-plugin",
+    "deepseek-harness",
+    "deepseek-harness-plugin",
+    "deepseek",
+    "dsh-agent-crew"
+  ],
+  "author": "Tushar (https://github.com/tusharcora)",
+  "homepage": "https://github.com/tusharcora/dsh-agent-crew#readme",
+  "bugs": {
+    "url": "https://github.com/tusharcora/dsh-agent-crew/issues"
+  },
+  "engines": {
+    "dsh": ">=0.2.2-rc.1 <0.3.0"
+  }
+}