@jcy2387/dsh-conversation-ui 0.1.0-rc.12

package/lib/index.js

@@ -0,0 +1,302 @@
+import { settingsNamespace } from "@deepseek-ai/dsh-settings";
+import Schema from "@deepseek-ai/schemastery";
+import { readFileSync } from "node:fs";
+import { basename, dirname, isAbsolute, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { spawn } from "node:child_process";
+//#region src/config.ts
+/** Defaults shared by the Host schema and the client-side fallback. */
+const DEFAULT_CONVERSATION_CONFIG = {
+	mode: "teleprompter",
+	preset: "balanced",
+	revealCharsPerSec: 80,
+	scrollSpeedPxPerSec: 48,
+	maxScrollSpeedPxPerSec: 1e3
+};
+/**
+* Window global the Host writes into the served index HTML. The browser boot
+* graph carries no per-entry config, so this inline script is the only
+* Host-to-client configuration channel for a composed web plugin.
+*/
+const CONVERSATION_BOOT_GLOBAL = "__DSH_CONVERSATION_UI_CONFIG__";
+//#endregion
+//#region src/boot-config.ts
+/**
+* Host-rendered configuration bootstrap for the browser half: each index
+* response embeds the schema-validated plugin config as a window global the
+* client entry reads at apply time. Same pattern as ui-theme's boot theme.
+*/
+/** Build the inline script assigning the validated config to the boot global. */
+function bootConfigScript(config) {
+	return `<script>window[${JSON.stringify(CONVERSATION_BOOT_GLOBAL)}]=${JSON.stringify(config)}<\/script>`;
+}
+/**
+* Insert the config bootstrap immediately after the opening body tag, before
+* any plugin bundle runs. Body-less fragments receive it at the end, where
+* the HTML parser has already synthesized a body.
+* @param html - Raw application index HTML.
+* @param config - Schema-validated plugin configuration.
+* @returns HTML containing the config bootstrap.
+*/
+function injectConversationConfig(html, config) {
+	const script = bootConfigScript(config);
+	const body = /<body(?:\s[^>]*)?>/i.exec(html);
+	if (body === null) return `${html}${script}`;
+	const at = body.index + body[0].length;
+	return `${html.slice(0, at)}${script}${html.slice(at)}`;
+}
+//#endregion
+//#region src/package-meta.ts
+/** Host-only package metadata. The package manifest remains the source of truth. */
+function packageManifestPath() {
+	try {
+		return join(dirname(fileURLToPath(import.meta.url)), "..", "package.json");
+	} catch {}
+	return join(process.cwd(), "package.json");
+}
+const manifest = JSON.parse(readFileSync(packageManifestPath(), "utf8"));
+function readRequiredString(field) {
+	const value = manifest[field];
+	if (typeof value !== "string" || value.length === 0) throw new Error(`dsh-conversation-ui: package.json must contain a non-empty ${field}`);
+	return value;
+}
+/** npm package name, read from this plugin's manifest. */
+const CONVERSATION_PACKAGE_NAME = readRequiredString("name");
+/** Version of the code currently loaded by the Host, read from its manifest. */
+const CONVERSATION_PACKAGE_VERSION = readRequiredString("version");
+//#endregion
+//#region src/profile-installation.ts
+/** Host-only profile source inspection and fixed npm update runner. */
+function record(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value) ? value : void 0;
+}
+function profileDirectory(baseUrl) {
+	if (baseUrl === void 0) return void 0;
+	try {
+		const url = new URL(baseUrl);
+		return url.protocol === "file:" ? fileURLToPath(url) : void 0;
+	} catch {
+		return;
+	}
+}
+function hasBundle(manifest, packageName) {
+	const bundles = record(record(manifest.dsh)?.profile)?.bundles;
+	return Array.isArray(bundles) && bundles.includes(packageName);
+}
+function isLocalSpecifier(specifier) {
+	return specifier.startsWith("link:") || specifier.startsWith("file:") || specifier.startsWith(".") || isAbsolute(specifier) || /^[A-Za-z]:[\\/]/.test(specifier);
+}
+function isRegistrySpecifier(specifier) {
+	return specifier.length > 0 && !specifier.includes(":") && !/[\\/]/.test(specifier);
+}
+function isNpmSpecifier(specifier, packageName) {
+	if (!specifier.startsWith("npm:")) return isRegistrySpecifier(specifier);
+	const aliased = specifier.slice(4);
+	if (aliased === packageName) return true;
+	const prefix = `${packageName}@`;
+	return aliased.startsWith(prefix) && isRegistrySpecifier(aliased.slice(prefix.length));
+}
+/**
+* Read only the profile manifest anchored by the current Cordis config tree.
+* A malformed or unrelated tree never receives an update affordance.
+*/
+function inspectProfileInstallation(baseUrl, packageName) {
+	const profileDir = profileDirectory(baseUrl);
+	if (profileDir === void 0) return { kind: "unmanaged" };
+	let manifest;
+	try {
+		manifest = JSON.parse(readFileSync(join(profileDir, "package.json"), "utf8"));
+	} catch {
+		return { kind: "unmanaged" };
+	}
+	const specifier = record(manifest.dependencies)?.[packageName];
+	if (typeof specifier !== "string" || !hasBundle(manifest, packageName)) return { kind: "unmanaged" };
+	if (isLocalSpecifier(specifier)) return { kind: "development" };
+	if (!isNpmSpecifier(specifier, packageName)) return { kind: "unmanaged" };
+	return {
+		kind: "npm",
+		profileDir,
+		profileName: basename(profileDir)
+	};
+}
+/** Run the same fixed package update operation that a profile user would invoke. */
+function updateNpmProfilePackage(profileDir, packageName) {
+	const command = process.platform === "win32" ? "pnpm.cmd" : "pnpm";
+	return new Promise((resolve, reject) => {
+		const child = spawn(command, ["update", packageName], {
+			cwd: profileDir,
+			stdio: "ignore",
+			shell: false,
+			windowsHide: true
+		});
+		child.once("error", reject);
+		child.once("exit", (code, signal) => {
+			if (code === 0) resolve();
+			else reject(/* @__PURE__ */ new Error(`dsh-conversation-ui: pnpm update failed (${signal ?? String(code)})`));
+		});
+	});
+}
+//#endregion
+//#region src/settings-api.ts
+/** Shared wire vocabulary for the plugin-owned settings RPC channel. */
+/** Dedicated, loopback-only RPC channel registered by the Host half. */
+const CONVERSATION_SETTINGS_RPC_CHANNEL = "/conversation-ui";
+/** Endpoints accepted by {@link CONVERSATION_SETTINGS_RPC_CHANNEL}. */
+const CONVERSATION_SETTINGS_RPC = {
+	read: "settings.read",
+	write: "settings.write",
+	upgrade: "plugin.upgrade"
+};
+//#endregion
+//#region src/settings.ts
+/**
+* User-owned settings for the conversation-ui plugin, exposed to the Host
+* settings service and edited from the Web Settings "plugin configuration"
+* page. This is the runtime-editable complement to {@link ConversationConfig}: that
+* contract is composed at load and bridged once through the boot global, while
+* these preferences live in the durable user-settings document and take effect
+* live.
+*/
+/** Settings namespace registered by the Host and served through the plugin RPC. */
+const CONVERSATION_SETTINGS_NS = "conversation-ui";
+/** Defaults shared by the Host schema and the client-side fallback. */
+const DEFAULT_CONVERSATION_SETTINGS = { thinkAutoExpand: true };
+//#endregion
+//#region src/plugin.ts
+/** Display name shown by the Host loader while the plugin is mounted. */
+const name = "dsh-conversation-ui";
+const Config = Schema.object({
+	mode: Schema.union(["typewriter", "teleprompter"]).default(DEFAULT_CONVERSATION_CONFIG.mode),
+	preset: Schema.union([
+		"realtime",
+		"balanced",
+		"silky"
+	]).default(DEFAULT_CONVERSATION_CONFIG.preset),
+	revealCharsPerSec: Schema.number().min(5).max(200).default(DEFAULT_CONVERSATION_CONFIG.revealCharsPerSec),
+	scrollSpeedPxPerSec: Schema.number().min(1).max(200).default(DEFAULT_CONVERSATION_CONFIG.scrollSpeedPxPerSec),
+	maxScrollSpeedPxPerSec: Schema.number().min(1).max(2e3).default(DEFAULT_CONVERSATION_CONFIG.maxScrollSpeedPxPerSec)
+});
+/**
+* Schema of the user-owned settings section. The Host keeps it in the durable
+* settings provider while the browser edits it through the plugin RPC below.
+*/
+const ConversationSettingsSchema = Schema.object({ thinkAutoExpand: Schema.boolean().default(DEFAULT_CONVERSATION_SETTINGS.thinkAutoExpand) });
+/**
+* Host half: log the resolved configuration and bridge it to the browser
+* half. The web boot graph carries no per-entry config, so the validated
+* value is injected into every served index response as a boot global the
+* client entry reads at apply time.
+* @param ctx - Host context carrying the web server service when composed.
+* @param config - Schema-validated configuration with defaults filled.
+*/
+function apply(ctx, config) {
+	console.log(`[dsh-conversation-ui] plugin loaded! mode=${config.mode} preset=${config.preset} seed=${config.revealCharsPerSec}cps scroll=${config.scrollSpeedPxPerSec}px/s maxScroll=${config.maxScrollSpeedPxPerSec}px/s`);
+	ctx.inject(["webServer"], (httpCtx) => {
+		httpCtx.effect(() => httpCtx.webServer.tapIndex((html) => injectConversationConfig(html, config)), "dsh-conversation-ui: boot config bridge");
+	});
+	ctx.inject(["settings"], (settingsCtx) => {
+		const scope = settingsCtx.settings.register(settingsNamespace(CONVERSATION_SETTINGS_NS), ConversationSettingsSchema, { applies: "live" });
+		settingsCtx.inject(["connection"], (connectionCtx) => {
+			let upgrade;
+			const view = () => {
+				const installation = inspectProfileInstallation(connectionCtx.baseUrl, CONVERSATION_PACKAGE_NAME);
+				return {
+					version: CONVERSATION_PACKAGE_VERSION,
+					installation: installation.kind,
+					writable: connectionCtx.settings.writable,
+					thinkAutoExpand: scope.get().thinkAutoExpand,
+					canUpgrade: installation.kind === "npm"
+				};
+			};
+			const handle = async (endpoint, payload) => {
+				if (endpoint === CONVERSATION_SETTINGS_RPC.read) return {
+					ok: true,
+					value: view()
+				};
+				if (endpoint === CONVERSATION_SETTINGS_RPC.write) {
+					if (typeof payload !== "object" || payload === null || typeof payload.thinkAutoExpand !== "boolean") return {
+						ok: false,
+						error: {
+							code: "settings-rejected",
+							message: "thinkAutoExpand must be a boolean",
+							details: { ns: CONVERSATION_SETTINGS_NS }
+						}
+					};
+					if (!connectionCtx.settings.writable) return {
+						ok: false,
+						error: {
+							code: "settings-rejected",
+							message: "conversation-ui settings are read-only",
+							details: { ns: CONVERSATION_SETTINGS_NS }
+						}
+					};
+					try {
+						await scope.update({ thinkAutoExpand: payload.thinkAutoExpand });
+					} catch {
+						return {
+							ok: false,
+							error: {
+								code: "settings-rejected",
+								message: "conversation-ui settings update failed",
+								details: { ns: CONVERSATION_SETTINGS_NS }
+							}
+						};
+					}
+					return {
+						ok: true,
+						value: view()
+					};
+				}
+				if (endpoint === CONVERSATION_SETTINGS_RPC.upgrade) {
+					const installation = inspectProfileInstallation(connectionCtx.baseUrl, CONVERSATION_PACKAGE_NAME);
+					if (installation.kind !== "npm") return {
+						ok: false,
+						error: {
+							code: "internal",
+							message: "conversation-ui is not an npm profile dependency",
+							details: {}
+						}
+					};
+					if (upgrade !== void 0) return {
+						ok: false,
+						error: {
+							code: "internal",
+							message: "conversation-ui update is already running",
+							details: {}
+						}
+					};
+					upgrade = updateNpmProfilePackage(installation.profileDir, CONVERSATION_PACKAGE_NAME);
+					try {
+						await upgrade;
+					} catch {
+						return {
+							ok: false,
+							error: {
+								code: "internal",
+								message: "conversation-ui update failed",
+								details: {}
+							}
+						};
+					} finally {
+						upgrade = void 0;
+					}
+					return {
+						ok: true,
+						value: { restartRequired: true }
+					};
+				}
+				return {
+					ok: false,
+					error: {
+						code: "internal",
+						message: `unknown conversation-ui endpoint ${JSON.stringify(endpoint)}`,
+						details: {}
+					}
+				};
+			};
+			connectionCtx.effect(() => connectionCtx.connection.rpc.handle(CONVERSATION_SETTINGS_RPC_CHANNEL, handle, { authority: "loopback" }), "dsh-conversation-ui: settings RPC");
+		});
+	});
+}
+//#endregion
+export { Config, apply, name };

package/package.json

@@ -0,0 +1,182 @@
+{
+  "name": "@jcy2387/dsh-conversation-ui",
+  "version": "0.1.0-rc.12",
+  "description": "DeepSeek Harness (dsh) plugin: Codex-style progress, tool activity, and final answers.",
+  "license": "MIT",
+  "type": "module",
+  "engines": {
+    "node": "^22.19.0 || >=24.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/DamonBao/dsh-codex-suite.git"
+  },
+  "bugs": {
+    "url": "https://github.com/DamonBao/dsh-codex-suite/issues"
+  },
+  "homepage": "https://github.com/DamonBao/dsh-codex-suite#readme",
+  "keywords": [
+    "dsh-plugin",
+    "deepseek-harness",
+    "deepseek",
+    "dsh",
+    "cordis",
+    "streaming",
+    "conversation-ui",
+    "typewriter",
+    "typewriter-effect",
+    "markdown",
+    "chat-ui",
+    "web-ui",
+    "plugin",
+    "react"
+  ],
+  "main": "lib/index.js",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./lib/index.js"
+    },
+    "./client": {
+      "types": "./src/client/index.ts",
+      "default": "./lib/client.js"
+    },
+    "./src/*": "./src/*",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "lib/**/*.js",
+    "lib/**/*.js.map",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.css",
+    "cordis.patch.yml",
+    "conversation-ui-off.yml",
+    "README.md",
+    "README.en.md",
+    "LICENSE"
+  ],
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "platform": "web",
+      "inject": [
+        "@deepseek-ai/dsh-client-runtime",
+        "@deepseek-ai/dsh-client-ui-conversation",
+        "@deepseek-ai/dsh-client-locale",
+        "@deepseek-ai/dsh-client-connection",
+        "@deepseek-ai/dsh-client-ui-settings",
+        "@deepseek-ai/dsh-client-ui-settings-plugins"
+      ]
+    }
+  },
+  "dependencies": {
+    "@deepseek-ai/dsh-settings": "0.1.0-rc.8",
+    "react-icons": "5.5.0"
+  },
+  "peerDependencies": {
+    "@deepseek-ai/cordis": "^4.0.1",
+    "@deepseek-ai/dsh-client-connection": "*",
+    "@deepseek-ai/dsh-client-locale": "*",
+    "@deepseek-ai/dsh-client-runtime": "*",
+    "@deepseek-ai/dsh-client-ui-attachment": "*",
+    "@deepseek-ai/dsh-client-ui-conversation": "*",
+    "@deepseek-ai/dsh-client-ui-primitives": "*",
+    "@deepseek-ai/dsh-client-ui-settings": "*",
+    "@deepseek-ai/dsh-client-ui-settings-plugins": "*",
+    "@deepseek-ai/dsh-client-ui-slots": "*",
+    "@deepseek-ai/dsh-host-webserver": "*",
+    "@deepseek-ai/schemastery": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "peerDependenciesMeta": {
+    "@deepseek-ai/dsh-client-locale": {
+      "optional": true
+    },
+    "@deepseek-ai/dsh-client-runtime": {
+      "optional": true
+    },
+    "@deepseek-ai/dsh-client-ui-attachment": {
+      "optional": true
+    },
+    "@deepseek-ai/dsh-client-connection": {
+      "optional": true
+    },
+    "@deepseek-ai/dsh-client-ui-conversation": {
+      "optional": true
+    },
+    "@deepseek-ai/dsh-client-ui-primitives": {
+      "optional": true
+    },
+    "@deepseek-ai/dsh-client-ui-settings": {
+      "optional": true
+    },
+    "@deepseek-ai/dsh-client-ui-settings-plugins": {
+      "optional": true
+    },
+    "@deepseek-ai/dsh-client-ui-slots": {
+      "optional": true
+    },
+    "@deepseek-ai/dsh-host-webserver": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@deepseek-ai/cordis": "4.0.1",
+    "@deepseek-ai/dsh-client-connection": "0.1.0-rc.8",
+    "@deepseek-ai/dsh-client-locale": "0.1.0-rc.8",
+    "@deepseek-ai/dsh-client-runtime": "0.1.0-rc.8",
+    "@deepseek-ai/dsh-client-ui-attachment": "0.1.0-rc.8",
+    "@deepseek-ai/dsh-client-ui-conversation": "0.1.0-rc.8",
+    "@deepseek-ai/dsh-client-ui-primitives": "0.1.0-rc.8",
+    "@deepseek-ai/dsh-client-ui-settings": "0.1.0-rc.8",
+    "@deepseek-ai/dsh-client-ui-settings-plugins": "0.1.0-rc.8",
+    "@deepseek-ai/dsh-client-ui-slots": "0.1.0-rc.8",
+    "@deepseek-ai/dsh-host-webserver": "0.1.0-rc.8",
+    "@deepseek-ai/dsh-settings": "0.1.0-rc.8",
+    "@deepseek-ai/schemastery": "3.18.1",
+    "@shikijs/langs": "^4.4.3",
+    "@testing-library/react": "^16.3.0",
+    "@types/node": "^22.20.0",
+    "@types/react": "~18.3.1",
+    "@types/react-dom": "~18.3.0",
+    "anser": "^2.3.5",
+    "clsx": "^2.1.1",
+    "immer": "^10.1.1",
+    "jsdom": "^26.1.0",
+    "katex": "^0.16.47",
+    "lightningcss": "^1.30.1",
+    "mdast-util-from-markdown": "^2.0.3",
+    "mdast-util-gfm": "^3.1.0",
+    "mdast-util-math": "^3.0.0",
+    "micromark-core-commonmark": "^2.0.3",
+    "micromark-extension-gfm": "^3.0.0",
+    "micromark-extension-math": "^3.1.0",
+    "micromark-factory-space": "^2.0.1",
+    "micromark-util-character": "^2.1.1",
+    "micromark-util-classify-character": "^2.0.1",
+    "micromark-util-sanitize-uri": "^2.0.1",
+    "micromark-util-symbol": "^2.0.1",
+    "micromark-util-types": "^2.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "shiki": "^4.4.3",
+    "tsdown": "^0.22.2",
+    "typescript": "^5.9.2",
+    "vitest": "^4.1.8",
+    "zod": "^4.4.3",
+    "zustand": "~4.4.7"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "test": "vitest run",
+    "typecheck": "tsc -p tsconfig.json --pretty false"
+  }
+}

package/src/boot-config.ts

@@ -0,0 +1,28 @@
+/**
+ * Host-rendered configuration bootstrap for the browser half: each index
+ * response embeds the schema-validated plugin config as a window global the
+ * client entry reads at apply time. Same pattern as ui-theme's boot theme.
+ */
+
+import { CONVERSATION_BOOT_GLOBAL, type ConversationConfig } from './config.ts'
+
+/** Build the inline script assigning the validated config to the boot global. */
+function bootConfigScript(config: ConversationConfig): string {
+  return `<script>window[${JSON.stringify(CONVERSATION_BOOT_GLOBAL)}]=${JSON.stringify(config)}</script>`
+}
+
+/**
+ * Insert the config bootstrap immediately after the opening body tag, before
+ * any plugin bundle runs. Body-less fragments receive it at the end, where
+ * the HTML parser has already synthesized a body.
+ * @param html - Raw application index HTML.
+ * @param config - Schema-validated plugin configuration.
+ * @returns HTML containing the config bootstrap.
+ */
+export function injectConversationConfig(html: string, config: ConversationConfig): string {
+  const script = bootConfigScript(config)
+  const body = /<body(?:\s[^>]*)?>/i.exec(html)
+  if (body === null) return `${html}${script}`
+  const at = body.index + body[0].length
+  return `${html.slice(0, at)}${script}${html.slice(at)}`
+}

package/src/client/AnimatedDisclosure.tsx

@@ -0,0 +1,89 @@
+// AnimatedDisclosure: the harness DisclosureRow chrome (24px row, trailing
+// chevron, whole-row click/Enter/Space toggle) with one deliberate
+// difference - the expanded body stays mounted while collapsed and animates
+// between 0fr and 1fr grid tracks, so expand/collapse glides instead of
+// snapping. The harness primitive unmounts closed children (`{open &&
+// children}`) and a plugin cannot change that in place, so this fork mirrors
+// its DOM shape and `data-disclosure-row` contract: host styling keyed on the
+// row attribute and the Think chrome keep working unchanged.
+
+import { type KeyboardEvent, type ReactNode } from 'react'
+import {
+  IconChevronDownOutline14,
+  IconChevronRightOutline14,
+} from '@deepseek-ai/dsh-client-ui-primitives'
+import css from './TypewriterAssistantNodeView.module.css'
+
+/** Class-name join for optional overlay classes over the chrome defaults. */
+function cx(...parts: Array<string | undefined>): string {
+  return parts.filter(part => part !== undefined && part !== '').join(' ')
+}
+
+export interface AnimatedDisclosureProps {
+  icon: ReactNode
+  title: string
+  open: boolean
+  onToggle: () => void
+  collapsedContent?: ReactNode
+  children?: ReactNode
+  rowClassName?: string | undefined
+  leadingClassName?: string | undefined
+  titleClassName?: string | undefined
+  chevronClassName?: string | undefined
+}
+
+/**
+ * Render one disclosure header whose expanded body is height-animated.
+ * @param props - Visual content, controlled open state, and the toggle
+ * callback fired by row click and Enter/Space.
+ * @returns the animated disclosure row.
+ */
+export function AnimatedDisclosure({
+  icon,
+  title,
+  open,
+  onToggle,
+  collapsedContent,
+  children,
+  rowClassName,
+  leadingClassName,
+  titleClassName,
+  chevronClassName,
+}: AnimatedDisclosureProps) {
+  const toggleFromKeyboard = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key !== 'Enter' && event.key !== ' ') return
+    event.preventDefault()
+    onToggle()
+  }
+  return (
+    <div className={css.disclosureRoot} data-open={open || undefined}>
+      <div
+        className={cx(css.disclosureRow, rowClassName)}
+        data-disclosure-row
+        data-expandable=""
+        role="button"
+        tabIndex={0}
+        aria-expanded={open}
+        onClick={onToggle}
+        onKeyDown={toggleFromKeyboard}
+      >
+        <span className={cx(css.disclosureLeading, leadingClassName)} data-disclosure-icon>
+          {icon}
+        </span>
+        <span className={cx(css.disclosureTitle, titleClassName)}>{title}</span>
+        {!open && collapsedContent}
+        <span
+          className={cx(css.disclosureTrailing, chevronClassName)}
+          data-disclosure-chevron
+          data-state={open ? 'expanded' : 'collapsed'}
+          aria-hidden
+        >
+          {open ? <IconChevronDownOutline14 size={14} /> : <IconChevronRightOutline14 size={14} />}
+        </span>
+      </div>
+      <div className={css.disclosureContent} data-disclosure-content data-collapsed={open ? undefined : ''}>
+        {children}
+      </div>
+    </div>
+  )
+}