@furayoshi/dsh-widechat 0.7.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 FraYoshi
+
+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.md

@@ -0,0 +1,181 @@
+# @furayoshi/dsh-widechat
+
+A [DeepSeek Harness](https://github.com/deepseek-ai/deepseek-harness) plugin that widens the conversation column past the shipped 748px cap, right-aligns the session stats strip, and caps the composer card so long inputs do not hide the conversation above. Adds a settings row to the General page so all of these can be tuned without restarting DSH.
+
+![widechat ui](media/widechat-ui.webp)
+
+![widechat settings](media/widechat-settings.webp)
+
+## What it does
+
+The shipped DSH web UI caps the chat content at `--dsh-chat-content-width: 748px` and centers the column with `margin: 0 auto`. On any monitor wider than ~1024px this leaves large empty gutters on both sides and a narrow reading area. This plugin widens that cap to leave only the configured gutter, right-aligns the user-message bubble (the shipped default is narrow on wide viewports), and caps the composer card to a percentage of the viewport so long inputs do not eat the conversation above.
+
+A small row in the **General** settings page lets you tune four values:
+
+- **Chat column gutter** — a slider, 0–10% of the cell on each side. The shipped default is `1 %`. The column is sized to leave this much whitespace on each side.
+- **Session-stats alignment** — a three-way toggle (left / center / right). The shipped default is `right`. The session-stats line under the composer (token counts, duration, etc.) lines up accordingly.
+- **Your message bubble width** — a slider, 30–100% of the chat column. The shipped default is `75 %`. Your outgoing messages are right-aligned at this width; the assistant's messages fill the rest of the column.
+- **Composer max height** — a slider, 20–80% of the viewport. The shipped default is `50 %`. The composer card and its inner textarea are both capped at this height, so long inputs do not push the conversation off-screen.
+
+If a saved value is out of range or of the wrong type, the plugin falls back to the default and logs a `console.warn` with the offending field. The page never refuses to render.
+
+## Install
+
+DSH's `plugin` subcommand forwards pnpm commands into the profile directory and reconciles the profile's `dsh.profile.bundles` array against the installed packages. So `dsh plugin --profile web add <spec>` is the canonical install path: it runs `pnpm add <spec>`, then automatically appends the package to `bundles` if (and only if) the installed `package.json` declares a `dsh.bundle.patch` — which this package does.
+
+### From npm (after this repo is published)
+
+```sh
+dsh plugin --profile web add @furayoshi/dsh-widechat
+```
+
+The `dsh plugin add` command runs `pnpm add` to install the package into `~/.dsh/profiles/web/node_modules/`, then reconciles the `dsh.profile.bundles` array in `~/.dsh/profiles/web/package.json` to include the new bundle. The user does not need to edit `package.json` manually.
+
+### From a GitHub URL
+
+```sh
+dsh plugin --profile web add @furayoshi/dsh-widechat@github:FraYoshi/dsh-widechat
+```
+
+The `github:<owner>/<repo>` spec is pnpm's shorthand for `https://github.com/<owner>/<repo>.git`. To pin a specific version:
+
+```sh
+# A specific tag
+dsh plugin --profile web add @furayoshi/dsh-widechat@github:FraYoshi/dsh-widechat#v0.7.0
+
+# A branch (e.g. main)
+dsh plugin --profile web add @furayoshi/dsh-widechat@github:FraYoshi/dsh-widechat#main
+
+# A specific commit SHA (for reproducible installs)
+dsh plugin --profile web add @furayoshi/dsh-widechat@github:FraYoshi/dsh-widechat#a1b2c3d4
+```
+
+pnpm clones the repo, runs `npm pack` from the cloned `package.json` to build the tarball (so the `files: ["lib", "cordis.patch.yml", ...]` list matters), and installs it. As long as `cordis.patch.yml` is in `files`, DSH's bundle loader finds it on the next boot.
+
+### From a local path or clone
+
+If you have the source locally (or want to hack on it), install it directly:
+
+```sh
+dsh plugin --profile web add @furayoshi/dsh-widechat@file:/home/<you>/work/dsh-widechat
+```
+
+The `file:` spec is pnpm's way to install from a local path. pnpm links the package's `files` into the profile's `node_modules/@furayoshi/dsh-widechat/`. The profile's `pnpm-workspace.yaml` sets `nodeLinker: hoisted`, so the linked files are **copies**, not symlinks — this means a rebuild of the source does **not** automatically reflect in the installed copy. After editing `src/` and running `npm run build:client`, re-link the package:
+
+```sh
+# From inside the profile directory:
+rm -rf node_modules/@furayoshi && pnpm install
+```
+
+Then restart DSH to pick up the new bundle. (A future version of this plugin could provide a dev script that watches and rebuilds; for now the manual `rm` is the workflow.)
+
+### Updating, removing, verifying
+
+Because `dsh plugin` is just a pnpm forwarder, you can use any pnpm subcommand. From inside the profile directory:
+
+```sh
+# Update to the latest version
+pnpm update @furayoshi/dsh-widechat
+
+# Re-link after editing the source
+rm -rf node_modules/@furayoshi && pnpm install
+
+# Remove the plugin (also strips the entry from dsh.profile.bundles)
+dsh plugin --profile web remove @furayoshi/dsh-widechat
+```
+
+### Verifying the install
+
+Open the Web UI, click the settings cog, go to **General** — you should see a "Wide chat" row with the four controls. Drag the sliders, and the chat column / user bubble / composer update without a reload.
+
+To verify DSH actually loaded the bundle, from inside the profile directory:
+
+```sh
+dsh web --dump-config | grep -i "widechat\|furayoshi"
+```
+
+You should see the host row registered under the new package name.
+
+If you want to edit the source, the build is `npm run build` (which calls `tsc` for the host lib and `tsx scripts/build-client.ts` for the browser bundle). The `lib/` directory is shipped; the `src/` directory is the source.
+
+## How it works
+
+The plugin is two halves:
+
+- **Host** (`lib/index.js`) registers a settings namespace `dsh-widechat` with a `z.object` schema (`chatGutterPct`, `statsAlign`, `userBubblePct`, `composerMaxHeightPct`). The schema's bounds match the slider ranges exactly.
+- **Client** (`lib/client/index.js`) binds a `SettingsScope` to that namespace, re-injects a small CSS override on every scope change, and registers a row in the `settings.general.item` slot.
+
+The CSS override is intentionally minimal — it touches four things, one per setting:
+
+```css
+:root, .wSkVaW_root, [data-phase] {
+  --dsh-chat-content-width:        calc(100% - 2 × <chatGutterPct>%) !important;
+  --dsh-composer-card-max-width:   calc(100% - 2 × <chatGutterPct>%) !important;
+}
+.gdEzaW_userStack { max-width: <userBubblePct>% !important; }
+.uV2eYG_card     { max-height: <composerMaxHeightPct>vh !important; overflow: hidden !important; }
+.uV2eYG_scroll   { max-height: calc(<composerMaxHeightPct>vh - 64px) !important; }
+.FJxK0a_root     { text-align: <statsAlign> !important; }
+```
+
+`chatGutterPct` and `userBubblePct` are **percentages of the cell**; `composerMaxHeightPct` is a **percentage of the viewport**. The cell grows when the sidebar collapses to the rail (56px from 280px), so the column and the bubble grow with it — and the gutter stays at the same percentage. The composer cap, in contrast, is absolute to the viewport so the conversation above is always visible regardless of the sidebar state.
+
+The reason there are two rules for the composer (`uV2eYG_card` and `uV2eYG_scroll`) is that the shipped card has *no* max-height and the shipped inner scroll has `max-height: var(--dsh-composer-text-max-height)` (336px by default). Without overriding the inner scroll too, the user's `composerMaxHeightPct` slider would only take effect at values that allow the inner 336px cap to grow, which is values ≥ 19% on a 1914px viewport — the slider would feel broken above 20% on smaller viewports. The inner override (`- 64px` leaves room for the card's padding and accessory row) makes the slider's effect span the full 20–80 range.
+
+DSH's shipped rules are left untouched. The column is still `width: 100%`, `max-width: var(--dsh-chat-content-width)`, `margin: 0 auto`. Toggle, scroll, resize — all the DSH default behavior. The plugin only changes the values of variables (and a few hard caps on the composer) that DSH's CSS already reads.
+
+## Configuration
+
+The four settings live in the `dsh-widechat` settings namespace. They can also be edited directly in the user's settings document if the npm install flow is bypassed (the file-backed settings doc lives at `~/.dsh/settings.yaml`; see the host-side schema in `src/index.ts` for the canonical field names and bounds).
+
+| Field | Type | Default | Range / values | Reference |
+|---|---|---|---|---|
+| `chatGutterPct` | number | `1` | 0–10 (clamped; integers) | cell width |
+| `statsAlign` | string | `"right"` | `"left"`, `"center"`, `"right"` | — |
+| `userBubblePct` | number | `75` | 30–100 (clamped; integers) | chat column |
+| `composerMaxHeightPct` | number | `50` | 20–80 (clamped; integers) | viewport |
+
+The slider value is the percentage applied to the reference for that row. A value of `0` is allowed for `chatGutterPct` (no gutter at all), and `100` for `userBubblePct` (your bubble fills the column). `composerMaxHeightPct` at `0` would clip the composer entirely; the slider starts at `20` to keep it usable.
+
+Invalid values are dropped to the defaults and a `console.warn` is logged with the offending field name.
+
+## Caveats
+
+### This plugin overrides internal CSS-module class hashes
+
+`.wSkVaW_root`, `.Md3f7G_column`, `.uV2eYG_card`, `.uV2eYG_scroll`, `.gdEzaW_userStack`, `.FJxK0a_root` are CSS-Modules-generated class names from `@deepseek-ai/dsh-client-ui-conversation`. Their hashes (the part after the underscore) are recomputed every time that package is rebuilt. Any release of `dsh-client-ui-conversation` can therefore silently break this plugin — specifically, if the shipped rule that reads the variable or has the matching class name changes shape, our override no longer reaches it.
+
+After upgrading `@deepseek-ai/dsh-client-ui-conversation`, check whether the chat column widens, the user bubble stays right-aligned at the configured width, the composer is capped at the configured height, and the stats line still aligns. If any of those regress, the upstream CSS-module hashes changed; see "Updating" below.
+
+### The `chatGutterPct` is interpreted against the cell, not the viewport
+
+DSH's chat column is `width: 100%` of its cell. The plugin's cap is `100% - 2 × chatGutterPct%`, where the percentage is of the cell. So `chatGutterPct: 1` means "leave 1% of the cell on each side as a gutter", not 1% of the viewport. With the sidebar open the cell is small, so the gutter is small in absolute pixels. With the sidebar closed the cell is wider, so the gutter is wider in pixels but still the same percentage. This is the DSH default behavior — preserved on purpose so the column reflows smoothly when the sidebar toggles.
+
+### The `composerMaxHeightPct` is interpreted against the viewport, not the cell
+
+Unlike the other two percentages, the composer cap is `composerMaxHeightPct × 1vh`. The viewport is constant regardless of the sidebar state, so the cap doesn't change when the sidebar toggles. This is intentional: the cap exists to keep the conversation visible, which is a viewport-relative concern.
+
+### What `cordis.patch.yml` is for
+
+The package ships a `cordis.patch.yml` (in `files: ["lib", "cordis.patch.yml", "README.md", "LICENSE"]`) that inserts a single host row into DSH's host composition. The row's `apply()` is the function in `src/index.ts` that registers the `dsh-widechat` settings namespace. Without the patch, the host has no idea the plugin exists, the namespace is never registered, and the client side's `bind()` call would resolve a read-only scope. If you fork this plugin and rename the namespace, update the `id` in the patch to match.
+
+## Updating
+
+When the upstream hashes change, the fix is mechanical but unavoidable until DSH exposes a stable public API for layout overrides. The plugin targets six CSS-module class hashes:
+
+- `.wSkVaW_root` — the conversation root (defines the chat-content-width variable)
+- `.Md3f7G_column` — the chat column (reads the variable as max-width)
+- `.uV2eYG_card` — the composer card (we cap its max-height)
+- `.uV2eYG_scroll` — the composer's inner textarea scroll (we cap its max-height)
+- `.gdEzaW_userStack` — the user-message bubble stack (we set its max-width)
+- `.FJxK0a_root` — the session-stats line (we set its text-align)
+
+All six appear in `dsh-client-ui-conversation/lib/client.js`. A regex search for `_module_css_default\s*=\s*{` will land you near the manifests. To update:
+
+1. Open the new `dsh-client-ui-conversation/lib/client.js` in your editor and search for each of the six names above. If a name has changed (the part after the underscore), update the corresponding name in `src/client/css.ts`. If a name has been removed (e.g. DSH restructured the composer), comment out the matching rule and the matching slider in `src/client/WideChatRow.tsx`, and update the README's Caveats and "How it works" sections to match.
+2. `npm run build` to rebuild the host and client bundles.
+3. Bump the version in `package.json` (the user-facing change is a patch for a single-hash fix, minor for a class-set change, major for an API change).
+
+## License
+
+MIT — see [LICENSE](./LICENSE).

package/cordis.patch.yml

@@ -0,0 +1,6 @@
+# Patch layer for `@furayoshi/dsh-widechat`. Inserted into the host composition
+# by `dsh.bundle.patch` (declared in this package's package.json), so the
+# settings-namespace registration in `src/index.ts` actually runs.
+- insert:
+    - id: '@furayoshi/dsh-widechat'
+      name: '@furayoshi/dsh-widechat'

package/lib/client/index.js

@@ -0,0 +1,651 @@
+window.__ModuleLoader__.load({
+	id: "@furayoshi/dsh-widechat",
+	factory: (require) => {
+		var module = { exports: {} };
+		var exports = module.exports;
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/settings.ts
+/**
+* Settings-namespace constants, defaults, and pure utilities shared by both
+* the host and client halves. This file deliberately imports nothing from
+* `@deepseek-ai/dsh-settings` or `@deepseek-ai/schemastery` — those are
+* host-side concerns, and the client half bundles to a closure where
+* runtime `require()` of any package not in the loader's table fails the
+* whole Web UI.
+*
+* @module dsh-widechat/settings
+*/
+/** Settings namespace owned by this plugin. */
+const WIDE_CHAT_SETTINGS_NAMESPACE = "dsh-widechat";
+/** Field key for the chat column horizontal gutter, in percent of the cell. */
+const CHAT_GUTTER_PCT_FIELD = "chatGutterPct";
+/** Field key for the session-stats alignment. */
+const STATS_ALIGN_FIELD = "statsAlign";
+/** Field key for the user-bubble width, in percent of the chat column. */
+const USER_BUBBLE_PCT_FIELD = "userBubblePct";
+/** Field key for the composer-card max height, in percent of the viewport. */
+const COMPOSER_MAX_HEIGHT_PCT_FIELD = "composerMaxHeightPct";
+/** Allowed values for `statsAlign`. */
+const STATS_ALIGN_VALUES = [
+	"left",
+	"center",
+	"right"
+];
+/** Defaults applied when a field is unset. */
+const DEFAULTS = {
+	[CHAT_GUTTER_PCT_FIELD]: 1,
+	[STATS_ALIGN_FIELD]: "right",
+	[USER_BUBBLE_PCT_FIELD]: 75,
+	[COMPOSER_MAX_HEIGHT_PCT_FIELD]: 50
+};
+
+//#endregion
+//#region src/client/WideChatRow.tsx
+/**
+* The `dsh-widechat` row in the General settings page. Renders four
+* controls:
+*   • a slider + number input for `chatGutterPct`
+*   • a 3-segment toggle for `statsAlign` (left / center / right)
+*   • a slider + number input for `userBubblePct`
+*   • a slider + number input for `composerMaxHeightPct`
+*
+* The row subscribes to its SettingsScope so the controls reflect the
+* current value on every change — without the subscription, React would
+* only re-render the row when its own state changes, and the slider
+* thumb would stay where it was after the user dragged it.
+*
+* The scope object's runtime type is `SettingsScope<any>` from
+* `@deepseek-ai/dsh-client-runtime/client`; we keep this file free of
+* runtime imports of that package so the bundle's external list stays
+* tight (and a type-only import is erased at build time).
+*/
+/** Read a field from a snapshot value, falling back to the default. */
+function readField(section, field, fallback) {
+	if (!section || typeof section !== "object") return fallback;
+	const value = section[field];
+	return value === void 0 ? fallback : value;
+}
+function clampNumber(value, min, max, fallback) {
+	if (typeof value !== "number" || !Number.isFinite(value)) return fallback;
+	const rounded = Math.round(value);
+	if (rounded < min) return min;
+	if (rounded > max) return max;
+	return rounded;
+}
+function readValues(scope) {
+	const section = scope.getSnapshot().value;
+	const gutterPct = clampNumber(readField(section, CHAT_GUTTER_PCT_FIELD, DEFAULTS[CHAT_GUTTER_PCT_FIELD]), 0, 10, DEFAULTS[CHAT_GUTTER_PCT_FIELD]);
+	const statsAlignRaw = readField(section, STATS_ALIGN_FIELD, DEFAULTS[STATS_ALIGN_FIELD]);
+	return {
+		gutterPct,
+		statsAlign: STATS_ALIGN_VALUES.includes(statsAlignRaw) ? statsAlignRaw : DEFAULTS[STATS_ALIGN_FIELD],
+		userBubblePct: clampNumber(readField(section, USER_BUBBLE_PCT_FIELD, DEFAULTS[USER_BUBBLE_PCT_FIELD]), 30, 100, DEFAULTS[USER_BUBBLE_PCT_FIELD]),
+		composerMaxHeightPct: clampNumber(readField(section, COMPOSER_MAX_HEIGHT_PCT_FIELD, DEFAULTS[COMPOSER_MAX_HEIGHT_PCT_FIELD]), 20, 80, DEFAULTS[COMPOSER_MAX_HEIGHT_PCT_FIELD])
+	};
+}
+function WideChatRow({ scope, t }) {
+	const [tick, setTick] = (0, react.useState)(0);
+	(0, react.useEffect)(() => {
+		const unsubscribe = scope.subscribe(() => {
+			setTick((n) => n + 1);
+		});
+		return () => {
+			unsubscribe();
+		};
+	}, [scope]);
+	const { gutterPct, statsAlign, userBubblePct, composerMaxHeightPct } = readValues(scope);
+	const setGutter = (0, react.useCallback)((next) => {
+		const clamped = clampNumber(next, 0, 10, DEFAULTS[CHAT_GUTTER_PCT_FIELD]);
+		scope.set(CHAT_GUTTER_PCT_FIELD, clamped);
+	}, [scope]);
+	const setAlign = (0, react.useCallback)((next) => {
+		if (STATS_ALIGN_VALUES.includes(next)) scope.set(STATS_ALIGN_FIELD, next);
+	}, [scope]);
+	const setUserBubble = (0, react.useCallback)((next) => {
+		const clamped = clampNumber(next, 30, 100, DEFAULTS[USER_BUBBLE_PCT_FIELD]);
+		scope.set(USER_BUBBLE_PCT_FIELD, clamped);
+	}, [scope]);
+	const setComposerMaxHeight = (0, react.useCallback)((next) => {
+		const clamped = clampNumber(next, 20, 80, DEFAULTS[COMPOSER_MAX_HEIGHT_PCT_FIELD]);
+		scope.set(COMPOSER_MAX_HEIGHT_PCT_FIELD, clamped);
+	}, [scope]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "dswc-row",
+		"data-plugin": "dsh-widechat",
+		"data-tick": tick,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dswc-row__head",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "dswc-row__title",
+					children: t("row.title")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "dswc-row__desc",
+					children: t("row.description")
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dswc-row__field",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+						htmlFor: "dswc-gutter",
+						children: t("gutter.label")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "dswc-row__slider",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+								id: "dswc-gutter",
+								type: "range",
+								min: 0,
+								max: 10,
+								step: 1,
+								value: gutterPct,
+								onChange: (event) => setGutter(Number(event.target.value))
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+								className: "dswc-row__number",
+								type: "number",
+								min: 0,
+								max: 10,
+								step: 1,
+								value: gutterPct,
+								"aria-label": t("gutter.label"),
+								onChange: (event) => {
+									const value = Number(event.target.value);
+									if (Number.isFinite(value)) setGutter(value);
+								}
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "dswc-row__unit",
+								children: "%"
+							})
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "dswc-help",
+						children: t("gutter.help")
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dswc-row__field",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", { children: t("align.label") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "dswc-row__seg",
+					role: "group",
+					children: STATS_ALIGN_VALUES.map((value) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						"aria-pressed": statsAlign === value,
+						onClick: () => setAlign(value),
+						children: t(`align.${value}`)
+					}, value))
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dswc-row__field",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+						htmlFor: "dswc-user-bubble",
+						children: t("userBubble.label")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "dswc-row__slider",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+								id: "dswc-user-bubble",
+								type: "range",
+								min: 30,
+								max: 100,
+								step: 1,
+								value: userBubblePct,
+								onChange: (event) => setUserBubble(Number(event.target.value))
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+								className: "dswc-row__number",
+								type: "number",
+								min: 30,
+								max: 100,
+								step: 1,
+								value: userBubblePct,
+								"aria-label": t("userBubble.label"),
+								onChange: (event) => {
+									const value = Number(event.target.value);
+									if (Number.isFinite(value)) setUserBubble(value);
+								}
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "dswc-row__unit",
+								children: "%"
+							})
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "dswc-help",
+						children: t("userBubble.help")
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dswc-row__field",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+						htmlFor: "dswc-composer-max-height",
+						children: t("composerMaxHeight.label")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "dswc-row__slider",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+								id: "dswc-composer-max-height",
+								type: "range",
+								min: 20,
+								max: 80,
+								step: 1,
+								value: composerMaxHeightPct,
+								onChange: (event) => setComposerMaxHeight(Number(event.target.value))
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+								className: "dswc-row__number",
+								type: "number",
+								min: 20,
+								max: 80,
+								step: 1,
+								value: composerMaxHeightPct,
+								"aria-label": t("composerMaxHeight.label"),
+								onChange: (event) => {
+									const value = Number(event.target.value);
+									if (Number.isFinite(value)) setComposerMaxHeight(value);
+								}
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "dswc-row__unit",
+								children: "vh"
+							})
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "dswc-help",
+						children: t("composerMaxHeight.help")
+					})
+				]
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/client/locales.ts
+/**
+* Settings row dictionaries for the `dsh-widechat` General page entry.
+* The shell ships zh and en; a key missing from one falls back to the
+* other, so both are kept complete.
+*
+* @module dsh-widechat/client/locales
+*/
+const WIDE_CHAT_LOCALE_NS = "settings.widechat";
+/** Simplified Chinese dictionary (the key-set source of truth). */
+const zh = {
+	"row.title": "宽屏对话",
+	"row.description": "调整聊天列宽度、用户消息气泡宽度、底部统计对齐方式以及输入框最大高度。",
+	"gutter.label": "左右留白",
+	"gutter.help": "聊天列两侧留白占视口宽度的百分比。0 为贴边，2 为适中的默认留白。",
+	"align.label": "统计对齐",
+	"align.left": "左",
+	"align.center": "居中",
+	"align.right": "右",
+	"userBubble.label": "用户消息宽度",
+	"userBubble.help": "用户消息气泡占聊天列宽度的百分比。75 为默认。",
+	"composerMaxHeight.label": "输入框最大高度",
+	"composerMaxHeight.help": "输入框最大高度占视口高度的百分比，避免长输入时遮挡对话。50 为默认。"
+};
+const en = {
+	"row.title": "Wide chat",
+	"row.description": "Adjust the chat column width, your message bubble width, the bottom-stats alignment, and the composer max height.",
+	"gutter.label": "Side gutter",
+	"gutter.help": "Chat column gutter as a percent of viewport width. 0 = edge-to-edge, 2 = a comfortable default.",
+	"align.label": "Stats alignment",
+	"align.left": "Left",
+	"align.center": "Center",
+	"align.right": "Right",
+	"userBubble.label": "Your message width",
+	"userBubble.help": "Your message bubble width as a percent of the chat column. 75 is the default.",
+	"composerMaxHeight.label": "Composer max height",
+	"composerMaxHeight.help": "Composer card max height as a percent of the viewport, so long inputs do not hide the conversation. 50 is the default."
+};
+const dictionaries = {
+	zh,
+	en
+};
+
+//#endregion
+//#region src/client/css.ts
+/**
+* Build the CSS override string for the `dsh-widechat` plugin from a
+* settings snapshot. The configurable knobs are `chatGutterPct`
+* (a percentage of the cell width on each side), `statsAlign`
+* (where the session-stats strip lines up under the composer),
+* `userBubblePct` (a percentage of the chat column for the user-bubble
+* width), and `composerMaxHeightPct` (a percentage of the viewport for
+* the composer's max height, to keep the conversation visible).
+*
+* The override is intentionally minimal: it changes custom properties and
+* a few well-known CSS-module selectors, and lets DSH's shipped CSS keep
+* doing everything else. That means the column reflows on sidebar
+* toggle and window resize, exactly the way the user already knows.
+*
+* Class hashes are the CSS-modules-generated ones from
+* `@deepseek-ai/dsh-client-ui-conversation` and
+* `@deepseek-ai/dsh-client-ui-layout`. They are recomputed on every
+* upstream rebuild; when they change this file is what needs updating.
+*/
+/** Validate and clamp a single field. Returns `fallback` on any deviation. */
+function clampInt(value, min, max, fallback) {
+	if (typeof value !== "number" || !Number.isFinite(value)) return fallback;
+	const rounded = Math.round(value);
+	if (rounded < min || rounded > max) return fallback;
+	return rounded;
+}
+function asAlign(value, fallback) {
+	if (value === "left" || value === "center" || value === "right") return value;
+	return fallback;
+}
+function resolveConfig(raw, defaults) {
+	const fallbacks = [];
+	let section = {};
+	if (raw && typeof raw === "object" && !Array.isArray(raw)) section = raw;
+	else if (raw !== void 0 && raw !== null) fallbacks.push("section-not-object");
+	const chatGutterPctInput = section["chatGutterPct"] ?? defaults.chatGutterPct;
+	const statsAlignInput = section["statsAlign"] ?? defaults.statsAlign;
+	const userBubblePctInput = section["userBubblePct"] ?? defaults.userBubblePct;
+	const composerMaxHeightPctInput = section["composerMaxHeightPct"] ?? defaults.composerMaxHeightPct;
+	const chatGutterPctRaw = clampInt(chatGutterPctInput, 0, 10, defaults.chatGutterPct);
+	if (chatGutterPctRaw !== chatGutterPctInput) fallbacks.push(`${CHAT_GUTTER_PCT_FIELD}=${JSON.stringify(chatGutterPctInput)}`);
+	const statsAlignRaw = asAlign(statsAlignInput, defaults.statsAlign);
+	if (statsAlignRaw !== statsAlignInput) fallbacks.push(`${STATS_ALIGN_FIELD}=${JSON.stringify(statsAlignInput)}`);
+	const userBubblePctRaw = clampInt(userBubblePctInput, 30, 100, defaults.userBubblePct);
+	if (userBubblePctRaw !== userBubblePctInput) fallbacks.push(`${USER_BUBBLE_PCT_FIELD}=${JSON.stringify(userBubblePctInput)}`);
+	const composerMaxHeightPctRaw = clampInt(composerMaxHeightPctInput, 20, 80, defaults.composerMaxHeightPct);
+	if (composerMaxHeightPctRaw !== composerMaxHeightPctInput) fallbacks.push(`${COMPOSER_MAX_HEIGHT_PCT_FIELD}=${JSON.stringify(composerMaxHeightPctInput)}`);
+	return {
+		chatGutterPct: chatGutterPctRaw,
+		statsAlign: statsAlignRaw,
+		userBubblePct: userBubblePctRaw,
+		composerMaxHeightPct: composerMaxHeightPctRaw,
+		fellBack: fallbacks.length > 0,
+		fallbacks
+	};
+}
+/**
+* Build the override stylesheet for one resolved config.
+*
+* The chat column cap is widened from the shipped 748px to
+* `100% - 2*chatGutterPct%` of the conversation root. The column
+* itself keeps the shipped `width: 100%` and `margin: 0 auto`, so it
+* still reflows on sidebar toggle and window resize, exactly the way
+* the user already knows — the only change is that the column is no
+* longer capped at 748px and now leaves a configurable gutter on each
+* side.
+*
+* The composer card inherits the same cap through
+* `--dsh-composer-card-max-width`, which the shipped composer CSS
+* already reads. The stats line aligns to the user's choice via
+* `.FJxK0a_root { text-align: ... }`.
+*/
+function buildStylesheet(config) {
+	const cap = `calc(100% - ${config.chatGutterPct * 2}%)`;
+	const ub = `${config.userBubblePct}%`;
+	const cmh = `${config.composerMaxHeightPct}vh`;
+	return `
+:root,
+.wSkVaW_root,
+[data-phase] {
+  --dsh-chat-content-width: ${cap} !important;
+  --dsh-composer-card-max-width: ${cap} !important;
+}
+
+/* User-message bubble width. The shipped cap is
+ * max-width: min(525px, 82%), which keeps user bubbles narrow on wide
+ * columns. We replace the cap with the configured userBubblePct of
+ * the chat column, so the bubble scales with the column. The shipped
+ * align-items: flex-end on .gdEzaW_userRow keeps the bubble pinned
+ * to the right edge. */
+.gdEzaW_userStack {
+  max-width: ${ub} !important;
+}
+
+/* Composer card max height. The shipped card has no max-height, so on
+ * long inputs the textarea + accessory row can grow to eat most of
+ * the screen and hide the conversation above. We cap the card at the
+ * configured percentage of the viewport; the inner scroll keeps the
+ * textarea usable, and the user always sees the rest of the conversation.
+ *
+ * The shipped .uV2eYG_scroll inside the card has its own
+ * max-height (--dsh-composer-text-max-height, 336px by default) that
+ * silently limits the textarea. We override that too so the user's
+ * outer cap actually takes effect: the inner scroll gets the card's
+ * cap minus the card's chrome (padding, accessory row, border —
+ * roughly 64px) so the textarea can grow with the rest of the card. */
+.uV2eYG_card {
+  max-height: ${cmh} !important;
+  overflow: hidden !important;
+}
+.uV2eYG_scroll {
+  max-height: calc(${cmh} - 64px) !important;
+}
+.uV2eYG_hero .uV2eYG_scroll {
+  max-height: calc(${cmh} - 132px) !important;
+}
+
+.FJxK0a_root {
+  text-align: ${config.statsAlign} !important;
+}
+`;
+}
+/**
+* Create a `<style>` tag owned by this plugin, return a disposer that removes
+* it. Mirrors the pattern shipped by `dsh-client-ui-*` packages: each plugin
+* tags its sheets with `data-plugin` so `claimStyles()` can attribute them
+* during boot, and `data-plugin-css` for the source map.
+*/
+function injectStylesheet(css, pluginId) {
+	const tag = document.createElement("style");
+	tag.dataset.plugin = pluginId;
+	tag.dataset.pluginCss = `${pluginId}/styles.css`;
+	tag.textContent = css;
+	document.head.appendChild(tag);
+	return () => {
+		tag.remove();
+	};
+}
+
+//#endregion
+//#region src/client/styles.ts
+/**
+* Self-drawn styles for the `dsh-widechat` settings row. The shipped
+* `settings.general.item` outlet does not project a `className`; the row
+* owns its internals. Class names are scoped with the `dswc-` prefix to
+* avoid collisions with any other plugin that ships its own row CSS.
+*
+* Color tokens come from the DSH theme (`--dsw-alias-*`), so the row
+* automatically tracks light and dark mode without per-theme overrides.
+*/
+const STYLES = `
+.dswc-row { display: flex; flex-direction: column; gap: 12px; width: 100%; }
+.dswc-row__head { display: flex; flex-direction: column; gap: 2px; }
+.dswc-row__title { font-size: 14px; font-weight: 600; line-height: 20px; color: var(--dsw-alias-label-primary); }
+.dswc-row__desc { font-size: 12px; line-height: 16px; color: var(--dsw-alias-label-secondary); }
+.dswc-row__field { display: flex; flex-direction: column; gap: 4px; }
+.dswc-row__field > label { font-size: 12px; line-height: 16px; color: var(--dsw-alias-label-secondary); }
+.dswc-row__field > .dswc-help { font-size: 11px; line-height: 14px; color: var(--dsw-alias-label-tertiary); }
+.dswc-row__slider { display: flex; align-items: center; gap: 8px; }
+.dswc-row__slider > input[type="range"] { flex: 1; min-width: 0; }
+.dswc-row__slider > .dswc-row__number {
+  width: 56px;
+  flex: none;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-input-bg, transparent);
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 4px;
+  padding: 2px 6px;
+  font-size: 12px;
+  line-height: 18px;
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+.dswc-row__slider > .dswc-row__number::-webkit-outer-spin-button,
+.dswc-row__slider > .dswc-row__number::-webkit-inner-spin-button {
+  appearance: none;
+  -webkit-appearance: none;
+  margin: 0;
+}
+.dswc-row__slider > .dswc-row__unit { color: var(--dsw-alias-label-secondary); font-size: 12px; }
+.dswc-row__seg { display: inline-flex; border: 1px solid var(--dsw-alias-border-l2); border-radius: 6px; overflow: hidden; }
+.dswc-row__seg button { appearance: none; background: transparent; border: 0; padding: 4px 12px; font-size: 12px; cursor: pointer; color: var(--dsw-alias-label-secondary); border-right: 1px solid var(--dsw-alias-border-l2); }
+.dswc-row__seg button:last-child { border-right: 0; }
+.dswc-row__seg button[aria-pressed="true"] { background: var(--dsw-alias-interactive-bg-hover); color: var(--dsw-alias-label-primary); font-weight: 600; }
+.dswc-row__toggle { display: flex; align-items: center; gap: 8px; }
+.dswc-row__toggle > input[type="checkbox"] { width: 16px; height: 16px; }
+`;
+
+//#endregion
+//#region src/client/index.ts
+/**
+* Browser half: registers the `dsh-widechat` row into the General settings
+* page (`settings.general.item`) and keeps the CSS override sheet in sync
+* with the user's settings on the bound scope.
+*
+* The row reads through a SettingsScope bound to the same namespace the host
+* half registered under (`WIDE_CHAT_SETTINGS_NAMESPACE`); writes go through
+* `scope.set` / `scope.unset`. The CSS apply subscribes to the same scope
+* via `scope.subscribe(...)` and re-injects the stylesheet on every change.
+*
+* On every config read the values go through `resolveConfig`, which clamps
+* to bounds and substitutes defaults on any out-of-range or wrong-typed
+* field. A soft `console.warn` is logged when any fallback fires so the
+* user can see what their input was rejected for without the page refusing
+* to render.
+*/
+/** Plugin id we tag our `<style>` tags with. */
+const PLUGIN_ID = "dsh-widechat";
+/**
+* Required client services. `settingsScope` provides the per-namespace scope
+* we bind to; `slots` / `locale` declare the row and the dictionaries.
+* `connection` is required by SettingsScope to write through the wire.
+*/
+const inject = [
+	"slots",
+	"locale",
+	"connection",
+	"settingsScope"
+];
+/** Owning row slot id (drives the order in the General section). */
+const ROW_ID = "wide-chat";
+/** Position in the General section. Lower numbers render first. */
+const ROW_ORDER = 50;
+/**
+* Install the row's own self-drawn CSS once. The row's class names match
+* nothing until this lands; without it the row still renders, just with
+* browser defaults, which reads as a broken UI.
+*/
+function installRowStyles() {
+	if (typeof document === "undefined") return () => {};
+	const tag = document.createElement("style");
+	tag.dataset.plugin = PLUGIN_ID;
+	tag.dataset.pluginCss = `${PLUGIN_ID}/row.css`;
+	tag.textContent = STYLES;
+	document.head.appendChild(tag);
+	return () => {
+		tag.remove();
+	};
+}
+/**
+* Compute the stylesheet for the current scope value (or the defaults if the
+* scope has no value yet) and inject it. Returns the disposer the caller
+* hands to `ctx.effect` so the tag is removed on plugin unload.
+*/
+function applyForScope(scopeValue) {
+	const resolved = resolveConfig(scopeValue, {
+		chatGutterPct: DEFAULTS[CHAT_GUTTER_PCT_FIELD],
+		statsAlign: DEFAULTS[STATS_ALIGN_FIELD],
+		userBubblePct: DEFAULTS[USER_BUBBLE_PCT_FIELD],
+		composerMaxHeightPct: DEFAULTS[COMPOSER_MAX_HEIGHT_PCT_FIELD]
+	});
+	if (resolved.fellBack) console.warn(`[${PLUGIN_ID}] config fell back to defaults for: ${resolved.fallbacks.join(", ")}`);
+	return injectStylesheet(buildStylesheet(resolved), PLUGIN_ID);
+}
+/** Read the current section value out of a scope snapshot. */
+function readSection(snapshot) {
+	if (snapshot === null || snapshot === void 0) return void 0;
+	return snapshot.value;
+}
+/**
+* Client plugin body: register dictionaries, install the row's own styles,
+* bind the settings scope, and keep the override sheet synced on changes.
+*
+* The CSS sheet is re-injected (old tag removed, new tag appended) on every
+* scope change. That keeps the override simple — a single `<style>` tag
+* whose text is the current resolved stylesheet — at the cost of one
+* document mutation per change. The user changes these settings rarely
+* (slider drag, align toggle, gutter toggle) so the cost is negligible.
+*
+* @param ctx - client cordis context.
+*/
+function apply(ctx) {
+	ctx.effect(() => installRowStyles(), "dsh-widechat: row styles");
+	ctx.effect(() => ctx.locale.register(WIDE_CHAT_LOCALE_NS, dictionaries), "dsh-widechat: dictionaries");
+	let scope = null;
+	try {
+		scope = ctx.settingsScope.bind({ namespace: WIDE_CHAT_SETTINGS_NAMESPACE });
+	} catch (error) {
+		console.warn(`[${PLUGIN_ID}] settingsScope.bind failed:`, error);
+	}
+	if (scope !== null) ctx.effect(() => {
+		let disposeSheet = () => {};
+		try {
+			const reapply = () => {
+				disposeSheet();
+				try {
+					disposeSheet = applyForScope(readSection(scope.getSnapshot()));
+				} catch (error) {
+					console.warn(`[${PLUGIN_ID}] reapply failed:`, error);
+					disposeSheet = () => {};
+				}
+			};
+			reapply();
+			const unsubscribe = scope.subscribe(reapply);
+			return () => {
+				unsubscribe();
+				disposeSheet();
+			};
+		} catch (error) {
+			console.warn(`[${PLUGIN_ID}] initial stylesheet inject failed:`, error);
+			return () => {};
+		}
+	}, "dsh-widechat: settings-driven stylesheet");
+	else ctx.effect(() => {
+		const disposeSheet = applyForScope(void 0);
+		return () => disposeSheet();
+	}, "dsh-widechat: settings-driven stylesheet (no scope)");
+	const injected = () => ({ scope });
+	ctx.slots.inject("settings.general.item", function* () {
+		yield ctx.slots.register({
+			name: "settings.general.item",
+			id: ROW_ID,
+			order: ROW_ORDER,
+			locale: WIDE_CHAT_LOCALE_NS,
+			inject: injected
+		}, WideChatRow);
+	});
+}
+
+//#endregion
+exports.apply = apply;
+exports.inject = inject;
+		return module.exports;
+	}
+});

package/lib/index.d.ts

@@ -0,0 +1,21 @@
+import z from "@deepseek-ai/schemastery";
+/**
+ * Durable settings schema. The browser half binds a scope to this same
+ * namespace, reads these fields, and writes them through `scope.set` /
+ * `scope.unset`. Defaults live in `./settings.ts`; the schema declares
+ * shape and bounds, not defaults.
+ */
+export declare const WideChatSettingsSchema: z<Schemastery.ObjectS<{
+    chatGutterPct: z<number, number>;
+    statsAlign: z<string, string>;
+    userBubblePct: z<number, number>;
+    composerMaxHeightPct: z<number, number>;
+}>, Schemastery.ObjectT<{
+    chatGutterPct: z<number, number>;
+    statsAlign: z<string, string>;
+    userBubblePct: z<number, number>;
+    composerMaxHeightPct: z<number, number>;
+}>>;
+/** Host plugin body. Registers the namespace with the host settings service. */
+export declare function apply(ctx: any): void;
+export { WIDE_CHAT_SETTINGS_NAMESPACE, CHAT_GUTTER_PCT_FIELD, STATS_ALIGN_FIELD, STATS_ALIGN_VALUES, CHAT_GUTTER_PCT_MIN, CHAT_GUTTER_PCT_MAX, USER_BUBBLE_PCT_FIELD, USER_BUBBLE_PCT_MIN, USER_BUBBLE_PCT_MAX, COMPOSER_MAX_HEIGHT_PCT_FIELD, COMPOSER_MAX_HEIGHT_PCT_MIN, COMPOSER_MAX_HEIGHT_PCT_MAX, DEFAULTS, } from "./settings.js";

package/lib/index.js

@@ -0,0 +1,51 @@
+/**
+ * Host half of `@furayoshi/dsh-widechat`. Registers a settings namespace
+ * under `dsh-widechat` whose schema the browser half binds to via
+ * `ctx.settingsScope.bind({ namespace: "dsh-widechat" })`. The browser
+ * writes here, this registration makes those writes durable, and the browser
+ * reads them back through the same scope on every settings change.
+ *
+ * Loaded by the DSH Cordis Loader on the host. The companion `cordis.patch.yml`
+ * inserts this row into the host composition so the registration actually
+ * runs; the npm install flow also needs the bundle-patch row for the same
+ * reason (`dsh.bundle.patch`).
+ *
+ * The constants, defaults, and field keys live in `./settings.ts` so the
+ * client half can import them without pulling `@deepseek-ai/dsh-settings`
+ * and `@deepseek-ai/schemastery` into the browser bundle (where the loader
+ * has no module table entry for them and would refuse to resolve).
+ */
+import { settingsNamespace } from "@deepseek-ai/dsh-settings";
+import z from "@deepseek-ai/schemastery";
+import { CHAT_GUTTER_PCT_FIELD, CHAT_GUTTER_PCT_MAX, CHAT_GUTTER_PCT_MIN, COMPOSER_MAX_HEIGHT_PCT_FIELD, COMPOSER_MAX_HEIGHT_PCT_MAX, COMPOSER_MAX_HEIGHT_PCT_MIN, STATS_ALIGN_FIELD, STATS_ALIGN_VALUES, USER_BUBBLE_PCT_FIELD, USER_BUBBLE_PCT_MAX, USER_BUBBLE_PCT_MIN, WIDE_CHAT_SETTINGS_NAMESPACE, } from "./settings.js";
+/**
+ * Durable settings schema. The browser half binds a scope to this same
+ * namespace, reads these fields, and writes them through `scope.set` /
+ * `scope.unset`. Defaults live in `./settings.ts`; the schema declares
+ * shape and bounds, not defaults.
+ */
+export const WideChatSettingsSchema = z.object({
+    [CHAT_GUTTER_PCT_FIELD]: z
+        .number()
+        .min(CHAT_GUTTER_PCT_MIN)
+        .max(CHAT_GUTTER_PCT_MAX)
+        .required(false),
+    [STATS_ALIGN_FIELD]: z.union(STATS_ALIGN_VALUES).required(false),
+    [USER_BUBBLE_PCT_FIELD]: z
+        .number()
+        .min(USER_BUBBLE_PCT_MIN)
+        .max(USER_BUBBLE_PCT_MAX)
+        .required(false),
+    [COMPOSER_MAX_HEIGHT_PCT_FIELD]: z
+        .number()
+        .min(COMPOSER_MAX_HEIGHT_PCT_MIN)
+        .max(COMPOSER_MAX_HEIGHT_PCT_MAX)
+        .required(false),
+});
+/** Host plugin body. Registers the namespace with the host settings service. */
+export function apply(ctx) {
+    ctx.inject(["settings"], (settingsCtx) => {
+        settingsCtx.settings.register(settingsNamespace(WIDE_CHAT_SETTINGS_NAMESPACE), WideChatSettingsSchema);
+    });
+}
+export { WIDE_CHAT_SETTINGS_NAMESPACE, CHAT_GUTTER_PCT_FIELD, STATS_ALIGN_FIELD, STATS_ALIGN_VALUES, CHAT_GUTTER_PCT_MIN, CHAT_GUTTER_PCT_MAX, USER_BUBBLE_PCT_FIELD, USER_BUBBLE_PCT_MIN, USER_BUBBLE_PCT_MAX, COMPOSER_MAX_HEIGHT_PCT_FIELD, COMPOSER_MAX_HEIGHT_PCT_MIN, COMPOSER_MAX_HEIGHT_PCT_MAX, DEFAULTS, } from "./settings.js";

package/lib/settings.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Settings-namespace constants, defaults, and pure utilities shared by both
+ * the host and client halves. This file deliberately imports nothing from
+ * `@deepseek-ai/dsh-settings` or `@deepseek-ai/schemastery` — those are
+ * host-side concerns, and the client half bundles to a closure where
+ * runtime `require()` of any package not in the loader's table fails the
+ * whole Web UI.
+ *
+ * @module dsh-widechat/settings
+ */
+/** Settings namespace owned by this plugin. */
+export declare const WIDE_CHAT_SETTINGS_NAMESPACE = "dsh-widechat";
+/** Field key for the chat column horizontal gutter, in percent of the cell. */
+export declare const CHAT_GUTTER_PCT_FIELD = "chatGutterPct";
+/** Field key for the session-stats alignment. */
+export declare const STATS_ALIGN_FIELD = "statsAlign";
+/** Field key for the user-bubble width, in percent of the chat column. */
+export declare const USER_BUBBLE_PCT_FIELD = "userBubblePct";
+/** Field key for the composer-card max height, in percent of the viewport. */
+export declare const COMPOSER_MAX_HEIGHT_PCT_FIELD = "composerMaxHeightPct";
+/** Allowed values for `statsAlign`. */
+export declare const STATS_ALIGN_VALUES: readonly ["left", "center", "right"];
+export type StatsAlign = (typeof STATS_ALIGN_VALUES)[number];
+/** Hard limits for the gutter percentage. */
+export declare const CHAT_GUTTER_PCT_MIN = 0;
+export declare const CHAT_GUTTER_PCT_MAX = 10;
+/** Hard limits for the user-bubble percentage. */
+export declare const USER_BUBBLE_PCT_MIN = 30;
+export declare const USER_BUBBLE_PCT_MAX = 100;
+/** Hard limits for the composer-card max-height percentage.
+ * The shipped composer card has an implicit natural-height cap of around
+ * 43vh (textarea inner scroll capped at 336px + accessory + padding).
+ * This plugin also overrides the inner scroll so the user's cap
+ * actually takes effect; the slider range is therefore the full
+ * 20–80 the user can use, capped by viewport height. */
+export declare const COMPOSER_MAX_HEIGHT_PCT_MIN = 20;
+export declare const COMPOSER_MAX_HEIGHT_PCT_MAX = 80;
+/** Defaults applied when a field is unset. */
+export declare const DEFAULTS: {
+    readonly chatGutterPct: 1;
+    readonly statsAlign: "right";
+    readonly userBubblePct: 75;
+    readonly composerMaxHeightPct: 50;
+};

package/lib/settings.js

@@ -0,0 +1,43 @@
+/**
+ * Settings-namespace constants, defaults, and pure utilities shared by both
+ * the host and client halves. This file deliberately imports nothing from
+ * `@deepseek-ai/dsh-settings` or `@deepseek-ai/schemastery` — those are
+ * host-side concerns, and the client half bundles to a closure where
+ * runtime `require()` of any package not in the loader's table fails the
+ * whole Web UI.
+ *
+ * @module dsh-widechat/settings
+ */
+/** Settings namespace owned by this plugin. */
+export const WIDE_CHAT_SETTINGS_NAMESPACE = "dsh-widechat";
+/** Field key for the chat column horizontal gutter, in percent of the cell. */
+export const CHAT_GUTTER_PCT_FIELD = "chatGutterPct";
+/** Field key for the session-stats alignment. */
+export const STATS_ALIGN_FIELD = "statsAlign";
+/** Field key for the user-bubble width, in percent of the chat column. */
+export const USER_BUBBLE_PCT_FIELD = "userBubblePct";
+/** Field key for the composer-card max height, in percent of the viewport. */
+export const COMPOSER_MAX_HEIGHT_PCT_FIELD = "composerMaxHeightPct";
+/** Allowed values for `statsAlign`. */
+export const STATS_ALIGN_VALUES = ["left", "center", "right"];
+/** Hard limits for the gutter percentage. */
+export const CHAT_GUTTER_PCT_MIN = 0;
+export const CHAT_GUTTER_PCT_MAX = 10;
+/** Hard limits for the user-bubble percentage. */
+export const USER_BUBBLE_PCT_MIN = 30;
+export const USER_BUBBLE_PCT_MAX = 100;
+/** Hard limits for the composer-card max-height percentage.
+ * The shipped composer card has an implicit natural-height cap of around
+ * 43vh (textarea inner scroll capped at 336px + accessory + padding).
+ * This plugin also overrides the inner scroll so the user's cap
+ * actually takes effect; the slider range is therefore the full
+ * 20–80 the user can use, capped by viewport height. */
+export const COMPOSER_MAX_HEIGHT_PCT_MIN = 20;
+export const COMPOSER_MAX_HEIGHT_PCT_MAX = 80;
+/** Defaults applied when a field is unset. */
+export const DEFAULTS = {
+    [CHAT_GUTTER_PCT_FIELD]: 1,
+    [STATS_ALIGN_FIELD]: "right",
+    [USER_BUBBLE_PCT_FIELD]: 75,
+    [COMPOSER_MAX_HEIGHT_PCT_FIELD]: 50,
+};

package/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "@furayoshi/dsh-widechat",
+  "version": "0.7.0",
+  "description": "DeepSeek Harness plugin: widens the conversation column, sets the user-bubble width and composer max height, and right-aligns the session stats strip, with a settings-row UI to tune all four. Built for the DSH client plugin slot `settings.general.item`.",
+  "type": "module",
+  "main": "lib/index.js",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./client": {
+      "types": "./lib/client/index.d.ts",
+      "default": "./lib/client/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "lib",
+    "cordis.patch.yml",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "deepseek-harness",
+    "dsh",
+    "plugin",
+    "conversation",
+    "layout",
+    "css",
+    "settings"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/FraYoshi/dsh-widechat.git"
+  },
+  "bugs": {
+    "url": "https://github.com/FraYoshi/dsh-widechat/issues"
+  },
+  "homepage": "https://github.com/FraYoshi/dsh-widechat#readme",
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "platform": "web",
+      "inject": [
+        "@deepseek-ai/dsh-client-runtime",
+        "@deepseek-ai/dsh-client-ui-settings",
+        "@deepseek-ai/dsh-client-ui-settings-general",
+        "@deepseek-ai/dsh-client-locale"
+      ]
+    }
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json && tsx scripts/build-client.ts",
+    "build:client": "tsx scripts/build-client.ts",
+    "typecheck": "tsc -p tsconfig.typecheck.json",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "@deepseek-ai/cordis": ">=4.0.1",
+    "@deepseek-ai/dsh-settings": ">=0.1.0-rc.8"
+  },
+  "dependencies": {
+    "@deepseek-ai/schemastery": "^3.18.1"
+  },
+  "devDependencies": {
+    "@deepseek-ai/cordis": "4.0.1",
+    "@deepseek-ai/dsh-client-runtime": "0.1.0-rc.8",
+    "@deepseek-ai/dsh-client-ui-primitives": "0.1.0-rc.8",
+    "@deepseek-ai/dsh-client-ui-slots": "0.1.0-rc.8",
+    "@deepseek-ai/dsh-settings": "0.1.0-rc.8",
+    "@types/node": "^22.15.0",
+    "@types/react": "^19.2.18",
+    "react": "^18.3.1",
+    "tsdown": "^0.22.14",
+    "tsx": "^4.23.12",
+    "typescript": "^5.7.0"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}