dsh-side-chat-plus 0.4.0-alpha.2 → 0.4.1

package/lib/index.js

@@ -6,15 +6,6 @@ import { dshHomePath } from "@deepseek-ai/dsh-home-paths";
 import { SettingsConflictError } from "@deepseek-ai/dsh-settings";
 import z from "schemastery";
 //#region src/settings-shared.ts
-/**
-* Shared side-chat preference vocabulary (types + constants), consumed by
-* BOTH halves: the host registers the schemastery schema over these values
-* (index.ts) and the client reads/writes them through the plugin's own
-* fenced /sidechat settings routes. Kept free of schemastery so the browser
-* bundle never pulls the schema runtime in.
-*/
-/** The user-settings namespace holding the side-chat preferences. */
-const SUBCHAT_PREFS_NS = "dsh-side-chat";
 /** Fallback prefs used whenever the settings document is unreachable or malformed. */
 const SUBCHAT_PREFS_DEFAULTS = {
 	lookupDefault: false,
@@ -154,11 +145,18 @@ function optionalBoolean(payload, key) {
 /**
 * dsh-side-chat host half: the /sidechat JSON API. Every side chat is an
 * ORDINARY session (no `origin: 'subagent'`) whose `meta.parentSession` points
-* at the conversation that launched it, archived immediately so it appears in
-* neither the main session list nor the subagent catalog, and driven directly
-* through the live agent (followup). Model / reasoning-effort / permission are
+* at the conversation that launched it, kept archived so it appears in neither
+* the main session list nor the subagent catalog, and driven directly through
+* the live agent (followup). Model / reasoning-effort / permission are
 * inherited from the launching conversation at creation and adjustable later.
 *
+* DSH 0.1.7 admits archived sessions to no model step: its archived-session
+* gate answers `{ kind: 'reject' }` on `agent/pre-step` for a session in the
+* registry archive set, so a turn ends `blocked` before the first request. The
+* archive is therefore lifted (unarchived) for exactly as long as a side chat
+* has work queued and restored as soon as its agent settles — see
+* `deliver`/`settleTurn` below.
+*
 * All routes pass the same browser-trust fence as the /api gateway (loopback
 * or trusted authority; cross-site markers refuse).
 */
@@ -286,14 +284,13 @@ function openTurnStart(events) {
 	if (lastEnd !== void 0 && lastEnd >= lastStart) return void 0;
 	return lastStart;
 }
-/** Schemastery schema for the user-facing preferences (validated by the settings service). */
-const PrefsSchema = z.object({
+const Config = z.object({
 	lookupDefault: z.boolean().default(SUBCHAT_PREFS_DEFAULTS.lookupDefault),
 	sendImmediately: z.boolean().default(SUBCHAT_PREFS_DEFAULTS.sendImmediately),
 	defaultPrompt: z.string().default(SUBCHAT_PREFS_DEFAULTS.defaultPrompt),
 	bringMode: z.union(["draft", "context"]).default(SUBCHAT_PREFS_DEFAULTS.bringMode),
 	panelHome: z.union(["floating", "sidebar-right"]).default(SUBCHAT_PREFS_DEFAULTS.panelHome)
-});
+}).volatile();
 /** The API method table bound to the plugin context and the live side-chat map. */
 function buildApi(ctx, sideChats, getSettings) {
 	/** Persist the current live records (best-effort; never blocks the API). */
@@ -451,7 +448,65 @@ function buildApi(ctx, sideChats, getSettings) {
 			goal
 		};
 	};
-	/** Create one side chat: inherit, archive, record, deliver the first prompt. */
+	/**
+	* Serialize one side chat's archive/unarchive writes. Both registry calls go
+	* through the host registry's own operation queue, so enqueueing them in call
+	* order is what decides the final state; this chain keeps that order stable
+	* when a settling turn and a new delivery overlap.
+	*/
+	const visibilityQueue = /* @__PURE__ */ new Map();
+	const queueVisibility = (childId, op) => {
+		const next = (visibilityQueue.get(childId) ?? Promise.resolve()).then(op, op);
+		visibilityQueue.set(childId, next.then(() => {}, () => {}));
+		return next;
+	};
+	/**
+	* Restore one side chat's session before a turn. Registries older than the
+	* 0.1.7 gate have no `unarchiveSession` (and need none): there the archive
+	* simply stays in place for the whole turn. A failed restore propagates: the
+	* caller must not deliver a prompt the gate will answer with `blocked`.
+	*/
+	const unarchiveChild = (childId) => {
+		const unarchive = ctx.workspaceRegistry.unarchiveSession;
+		if (unarchive === void 0) return archiveChild(childId);
+		return queueVisibility(childId, () => unarchive.call(ctx.workspaceRegistry, childId));
+	};
+	/**
+	* Hide one side chat's session again once its agent has settled. Best-effort:
+	* a registry that reports the session active (or refuses the write) only
+	* leaves it visible until the next settle, never breaks a turn.
+	*/
+	const archiveChild = (childId) => {
+		return queueVisibility(childId, () => ctx.workspaceRegistry.archiveSession(childId)).catch(() => {});
+	};
+	/** Count one settled turn and re-archive the session when the last one ends. */
+	const settleTurn = (record) => {
+		if (record.pendingTurns > 0) record.pendingTurns -= 1;
+		if (record.pendingTurns > 0) return;
+		archiveChild(record.childId);
+	};
+	/**
+	* Hand one prompt to a side chat: lift the archive, deliver, and let the
+	* agent's own idle boundary put the session back out of every list. `followup`
+	* opens the driver synchronously (the phase turns `running` before it
+	* returns), so observing `whenIdle` right after it can never miss the turn.
+	*/
+	const deliver = async (record, message) => {
+		record.pendingTurns += 1;
+		try {
+			await unarchiveChild(record.childId);
+			record.handle.agent.followup(message);
+		} catch (error) {
+			settleTurn(record);
+			throw error;
+		}
+		record.handle.agent.whenIdle().then(() => {
+			settleTurn(record);
+		}, () => {
+			settleTurn(record);
+		});
+	};
+	/** Create one side chat: inherit, record, deliver the first prompt (hidden while idle). */
 	const start = async (payload) => {
 		const parentSessionId = requireString(payload, "parentSessionId");
 		const content = requireContent(payload);
@@ -515,16 +570,17 @@ function buildApi(ctx, sideChats, getSettings) {
 		} catch (error) {
 			console.warn("[dsh-side-chat] permission inherit failed:", error instanceof Error ? error.message : String(error));
 		}
-		await ctx.workspaceRegistry.archiveSession(childId);
-		sideChats.set(childId, {
+		const child = {
 			childId,
 			parentSessionId,
 			handle,
 			selection,
-			createdAt: Date.now()
-		});
+			createdAt: Date.now(),
+			pendingTurns: 0
+		};
+		sideChats.set(childId, child);
 		persist();
-		handle.agent.followup(userMessage(await durableContent(content, lookupEnabled)));
+		await deliver(child, userMessage(await durableContent(content, lookupEnabled)));
 		return {
 			childId,
 			provider,
@@ -537,7 +593,20 @@ function buildApi(ctx, sideChats, getSettings) {
 		const childId = requireString(payload, "childId");
 		const content = requireContent(payload);
 		const lookupEnabled = optionalBoolean(payload, "lookupEnabled");
-		childOf(childId).followup(userMessage(await durableContent(content, lookupEnabled)));
+		const child = childOf(childId);
+		const record = sideChats.get(childId);
+		const message = userMessage(await durableContent(content, lookupEnabled));
+		if (record === void 0) {
+			await unarchiveChild(childId);
+			child.followup(message);
+			child.whenIdle().then(() => {
+				archiveChild(childId);
+			}, () => {
+				archiveChild(childId);
+			});
+			return { accepted: true };
+		}
+		await deliver(record, message);
 		return { accepted: true };
 	};
 	/** List the side chats launched by one parent conversation. */
@@ -681,8 +750,7 @@ function buildApi(ctx, sideChats, getSettings) {
 				text
 			}],
 			source: {
-				kind: "plugin",
-				plugin: "dsh-side-chat",
+				kind: "plugin:dsh-side-chat",
 				form: "notice",
 				summary
 			}
@@ -797,8 +865,9 @@ function apply(ctx) {
 	const sideChats = /* @__PURE__ */ new Map();
 	let settingsFace;
 	ctx.inject(["settings"], (sctx) => {
-		const ns = SUBCHAT_PREFS_NS;
-		sctx.settings.register(ns, PrefsSchema);
+		const ns = ctx.entry?.id;
+		if (ns === void 0) return;
+		sctx.effect(() => sctx.settings.configure({ auto: false }, ctx.fiber));
 		const viewOf = () => {
 			const descriptor = sctx.settings.describe({ redactSecrets: true }).find((c) => c.ns === ns);
 			return descriptor === void 0 ? {
@@ -816,12 +885,25 @@ function apply(ctx) {
 				return viewOf();
 			}
 		};
+		sctx.effect(() => () => {
+			settingsFace = void 0;
+		});
 	});
 	const api = buildApi(ctx, sideChats, () => settingsFace);
 	ctx.effect(() => {
 		return () => {
-			for (const record of sideChats.values()) record.handle.dispose().catch(() => {});
+			const records = [...sideChats.values()];
 			sideChats.clear();
+			(async () => {
+				for (const record of records) {
+					try {
+						await record.handle.dispose();
+					} catch {}
+					try {
+						await ctx.workspaceRegistry.archiveSession(record.childId);
+					} catch {}
+				}
+			})();
 		};
 	}, "dsh-side-chat: dispose side chats");
 	ctx.effect(() => {
@@ -887,4 +969,4 @@ function apply(ctx) {
 	}), "dsh-side-chat: /sidechat/api routes");
 }
 //#endregion
-export { apply, inject, name };
+export { Config, apply, inject, name };

package/lib/types/context-types.d.ts

@@ -219,9 +219,19 @@ export interface SideModelSelectionRef {
  * instance, so the upstream export is reached through a loose signature.
  */
 export type SideInstallModelSelection = (agentCtx: Context, selection: SideModelSelectionRef) => () => void;
-/** The workspace registry face (archive a session durably). */
+/**
+ * The workspace registry face. `archiveSession` hides a session from every
+ * grouping surface; `unarchiveSession` (0.1.6+) restores it. Both are writable
+ * through the registry's serialized operation queue.
+ */
 export interface SideWorkspaceRegistry {
     archiveSession(sessionId: string): Promise<void>;
+    /**
+     * Restore one archived session. The plugin lifts the archive for exactly as
+     * long as a side-chat turn has to run: DSH 0.1.7 rejects `agent/pre-step` for
+     * an archived session, so an archived side chat can never answer.
+     */
+    unarchiveSession?(sessionId: string): Promise<void>;
 }
 /** `sessionQuery.readSession` snapshot. */
 export interface SideSessionLogSnapshot {
@@ -323,12 +333,11 @@ export interface SideLocaleService {
     subscribe(fn: () => void): () => void;
     register(ns: string, locale: string, dict: Record<string, string>): () => void;
 }
-/** The host settings service face (namespace registration + read/write). */
+/** DSH 0.1.7 profile-entry settings forms. */
 export interface SideSettingsService {
-    register(ns: unknown, schema: unknown): {
-        get(): unknown;
-        watch(cb: (next: unknown, prev: unknown) => void): () => void;
-    };
+    configure(presentation: {
+        auto?: boolean;
+    }, owner?: Context['fiber']): () => void;
     describe(opts: {
         redactSecrets?: boolean;
     }): Array<{

package/lib/types/index.d.ts

@@ -1,7 +1,10 @@
+import z from 'schemastery';
 import type { Context } from './context-types.ts';
+import { type SubchatPrefs } from './settings-shared.ts';
 /** Plugin identity for cordis.yml rows. */
 export declare const name = "dsh-side-chat-plus";
 /** Services required before mounting. */
 export declare const inject: string[];
+export declare const Config: z<NoInfer<SubchatPrefs>, NoInfer<SubchatPrefs>, "volatile">;
 /** Host plugin body: register the /sidechat JSON API routes. */
 export declare function apply(ctx: Context): void;

package/lib/types/settings-shared.d.ts

@@ -1,12 +1,10 @@
 /**
  * Shared side-chat preference vocabulary (types + constants), consumed by
- * BOTH halves: the host registers the schemastery schema over these values
+ * BOTH halves: the host exports a live Config schema over these values
  * (index.ts) and the client reads/writes them through the plugin's own
  * fenced /sidechat settings routes. Kept free of schemastery so the browser
  * bundle never pulls the schema runtime in.
  */
-/** The user-settings namespace holding the side-chat preferences. */
-export declare const SUBCHAT_PREFS_NS = "dsh-side-chat";
 /** How a brought-back reply lands in the main conversation. */
 export type BringMode = 'draft' | 'context';
 /** Where the side-chat panel lives when a side chat is open. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-side-chat-plus",
-  "version": "0.4.0-alpha.2",
+  "version": "0.4.1",
   "description": "侧边聊天 Plus (Side chat Plus) — DSH web plugin: select text in a conversation and ask it in a per-session side chat (hidden ordinary session, own right-side panel, inherits model/effort/permissions, lookup toggle).",
   "private": false,
   "type": "module",
@@ -60,64 +60,67 @@
     "lib/types/**/*.d.ts",
     "cordis.patch.yml",
     "dsh.plugin.json",
-    "src"
+    "src",
+    "CHANGELOG.md",
+    "docs/official-sidebar-assessment.md"
   ],
   "license": "MIT",
   "dependencies": {
-    "schemastery": "^3.18.0"
+    "schemastery": "npm:@deepseek-ai/schemastery@3.18.3"
   },
   "peerDependencies": {
-    "@deepseek-ai/dsh-agent": "^0.1.0-rc.6 || ^0.1.1-0 || ^0.1.2-0 || ^0.1.5-alpha.1 || ^0.1.6-0",
-    "@deepseek-ai/dsh-attachment": "^0.1.0-rc.6 || ^0.1.1-0 || ^0.1.2-0 || ^0.1.5-alpha.1 || ^0.1.6-0",
-    "@deepseek-ai/dsh-client-locale": "^0.1.0-rc.6 || ^0.1.1-0 || ^0.1.2-0 || ^0.1.5-alpha.1 || ^0.1.6-0",
-    "@deepseek-ai/dsh-client-ui-conversation": "^0.1.0-rc.6 || ^0.1.1-0 || ^0.1.2-0 || ^0.1.5-alpha.1 || ^0.1.6-0",
-    "@deepseek-ai/dsh-client-ui-renderer": "^0.1.0-rc.6 || ^0.1.1-0 || ^0.1.2-0 || ^0.1.5-alpha.1 || ^0.1.6-0",
-    "@deepseek-ai/dsh-client-ui-slots": "^0.1.0-rc.6 || ^0.1.1-0 || ^0.1.2-0 || ^0.1.5-alpha.1 || ^0.1.6-0",
-    "@deepseek-ai/dsh-client-ui-settings": "^0.1.0-rc.6 || ^0.1.1-0 || ^0.1.2-0 || ^0.1.5-alpha.1 || ^0.1.6-0",
-    "@deepseek-ai/dsh-client-ui-primitives": "^0.1.0-rc.6 || ^0.1.1-0 || ^0.1.2-0 || ^0.1.5-alpha.1 || ^0.1.6-0",
-    "@deepseek-ai/dsh-host-webserver": "^0.1.0-rc.6 || ^0.1.1-0 || ^0.1.2-0 || ^0.1.5-alpha.1 || ^0.1.6-0",
-    "@deepseek-ai/dsh-llm": "^0.1.0-rc.6 || ^0.1.1-0 || ^0.1.2-0 || ^0.1.5-alpha.1 || ^0.1.6-0",
-    "@deepseek-ai/dsh-session": "^0.1.0-rc.6 || ^0.1.1-0 || ^0.1.2-0 || ^0.1.5-alpha.1 || ^0.1.6-0",
-    "@deepseek-ai/dsh-session-query": "^0.1.0-rc.6 || ^0.1.1-0 || ^0.1.2-0 || ^0.1.5-alpha.1 || ^0.1.6-0",
-    "@deepseek-ai/dsh-workspace": "^0.1.0-rc.6 || ^0.1.1-0 || ^0.1.2-0 || ^0.1.5-alpha.1 || ^0.1.6-0",
-    "@deepseek-ai/dsh-permission-presets": "^0.1.0-rc.6 || ^0.1.1-0 || ^0.1.2-0 || ^0.1.5-alpha.1 || ^0.1.6-0",
-    "@deepseek-ai/dsh-sandbox-policy": "^0.1.0-rc.6 || ^0.1.1-0 || ^0.1.2-0 || ^0.1.5-alpha.1 || ^0.1.6-0",
-    "@deepseek-ai/dsh-agent-presets": "^0.1.0-rc.6 || ^0.1.1-0 || ^0.1.2-0 || ^0.1.5-alpha.1 || ^0.1.6-0",
-    "@deepseek-ai/dsh-settings": "^0.1.0-rc.6 || ^0.1.1-0 || ^0.1.2-0 || ^0.1.5-alpha.1 || ^0.1.6-0",
-    "@deepseek-ai/dsh-home-paths": "^0.1.0-rc.6 || ^0.1.1-0 || ^0.1.2-0 || ^0.1.5-alpha.1 || ^0.1.6-0",
+    "@deepseek-ai/dsh-agent": "^0.1.7-0",
+    "@deepseek-ai/dsh-attachment": "^0.1.7-0",
+    "@deepseek-ai/dsh-client-locale": "^0.1.7-0",
+    "@deepseek-ai/dsh-client-ui-conversation": "^0.1.7-0",
+    "@deepseek-ai/dsh-client-ui-renderer": "^0.1.7-0",
+    "@deepseek-ai/dsh-client-ui-slots": "^0.1.7-0",
+    "@deepseek-ai/dsh-client-ui-settings": "^0.1.7-0",
+    "@deepseek-ai/dsh-client-ui-primitives": "^0.1.7-0",
+    "@deepseek-ai/dsh-host-webserver": "^0.1.7-0",
+    "@deepseek-ai/dsh-llm": "^0.1.7-0",
+    "@deepseek-ai/dsh-session": "^0.1.7-0",
+    "@deepseek-ai/dsh-session-query": "^0.1.7-0",
+    "@deepseek-ai/dsh-workspace": "^0.1.7-0",
+    "@deepseek-ai/dsh-permission-presets": "^0.1.7-0",
+    "@deepseek-ai/dsh-sandbox-policy": "^0.1.7-0",
+    "@deepseek-ai/dsh-settings": "^0.1.7-0",
+    "@deepseek-ai/dsh-home-paths": "^0.1.7-0",
     "cordis": "^4.0.0-rc.7",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "@deepseek-ai/dsh-agent-preset-registry": "^0.1.7-0"
   },
   "devDependencies": {
-    "@deepseek-ai/dsh-agent": "^0.1.5-alpha.2 || ^0.1.6-0",
-    "@deepseek-ai/dsh-attachment": "^0.1.5-alpha.2 || ^0.1.6-0",
-    "@deepseek-ai/dsh-client-locale": "^0.1.5-alpha.2 || ^0.1.6-0",
-    "@deepseek-ai/dsh-client-ui-conversation": "^0.1.5-alpha.2 || ^0.1.6-0",
-    "@deepseek-ai/dsh-client-ui-renderer": "^0.1.5-alpha.2 || ^0.1.6-0",
-    "@deepseek-ai/dsh-client-ui-slots": "^0.1.5-alpha.2 || ^0.1.6-0",
-    "@deepseek-ai/dsh-client-ui-settings": "^0.1.5-alpha.2 || ^0.1.6-0",
-    "@deepseek-ai/dsh-client-ui-primitives": "^0.1.5-alpha.2 || ^0.1.6-0",
-    "@deepseek-ai/dsh-host-webserver": "^0.1.5-alpha.2 || ^0.1.6-0",
-    "@deepseek-ai/dsh-llm": "^0.1.5-alpha.2 || ^0.1.6-0",
-    "@deepseek-ai/dsh-session": "^0.1.5-alpha.2 || ^0.1.6-0",
-    "@deepseek-ai/dsh-session-query": "^0.1.5-alpha.2 || ^0.1.6-0",
-    "@deepseek-ai/dsh-workspace": "^0.1.5-alpha.2 || ^0.1.6-0",
-    "@deepseek-ai/dsh-permission-presets": "^0.1.5-alpha.2 || ^0.1.6-0",
-    "@deepseek-ai/dsh-sandbox-policy": "^0.1.5-alpha.2 || ^0.1.6-0",
-    "@deepseek-ai/dsh-agent-presets": "^0.1.5-alpha.2 || ^0.1.6-0",
-    "@deepseek-ai/dsh-settings": "^0.1.5-alpha.2 || ^0.1.6-0",
-    "@deepseek-ai/dsh-home-paths": "^0.1.5-alpha.2 || ^0.1.6-0",
+    "@deepseek-ai/dsh-agent": "0.1.7-alpha.1",
+    "@deepseek-ai/dsh-attachment": "0.1.7-alpha.1",
+    "@deepseek-ai/dsh-client-locale": "0.1.7-alpha.1",
+    "@deepseek-ai/dsh-client-ui-conversation": "0.1.7-alpha.1",
+    "@deepseek-ai/dsh-client-ui-renderer": "0.1.7-alpha.1",
+    "@deepseek-ai/dsh-client-ui-slots": "0.1.7-alpha.1",
+    "@deepseek-ai/dsh-client-ui-settings": "0.1.7-alpha.1",
+    "@deepseek-ai/dsh-client-ui-primitives": "0.1.7-alpha.1",
+    "@deepseek-ai/dsh-host-webserver": "0.1.7-alpha.1",
+    "@deepseek-ai/dsh-llm": "0.1.7-alpha.1",
+    "@deepseek-ai/dsh-session": "0.1.7-alpha.1",
+    "@deepseek-ai/dsh-session-query": "0.1.7-alpha.1",
+    "@deepseek-ai/dsh-workspace": "0.1.7-alpha.1",
+    "@deepseek-ai/dsh-permission-presets": "0.1.7-alpha.1",
+    "@deepseek-ai/dsh-sandbox-policy": "0.1.7-alpha.1",
+    "@deepseek-ai/dsh-settings": "0.1.7-alpha.1",
+    "@deepseek-ai/dsh-home-paths": "0.1.7-alpha.1",
     "@types/node": "^24.0.0",
     "@types/react": "~18.3.1",
     "@types/react-dom": "~18.3.1",
-    "cordis": "^4.0.0-rc.7",
+    "cordis": "npm:@deepseek-ai/cordis@4.0.3",
     "lightningcss": "^1.32.0",
     "react": "^18.2.0",
     "react-dom": "18.2.0",
     "tsdown": "^0.22.2",
     "typescript": "^5.6.0",
-    "vitest": "^4.1.8"
+    "vitest": "^4.1.8",
+    "@deepseek-ai/dsh-agent-preset-registry": "0.1.7-alpha.1",
+    "@deepseek-ai/dsh-session-format-catalog": "0.1.7-alpha.1"
   },
   "scripts": {
     "build": "node -e \"require('node:fs').rmSync('lib',{recursive:true,force:true})\" && tsc -p tsconfig.build.json && tsdown && node scripts/check-seed-exports.mjs",

package/src/client/attachments/AttachmentRail.module.css

@@ -1,89 +1,89 @@
-.root {
-  position: relative;
-  display: flex;
-  align-items: center;
-  min-width: 0;
-}
-
-.rail {
-  display: flex;
-  gap: 8px;
-  overflow-x: auto;
-  scrollbar-width: none;
-  padding: 2px;
-}
-
-.rail::-webkit-scrollbar {
-  display: none;
-}
-
-.item {
-  position: relative;
-  flex: none;
-}
-
-.thumbnail {
-  display: block;
-  width: 56px;
-  height: 56px;
-  padding: 0;
-  overflow: hidden;
-  border: 1px solid var(--dsw-color-border, rgba(0, 0, 0, 0.1));
-  border-radius: 8px;
-  background: none;
-  cursor: pointer;
-}
-
-.thumbnail img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.remove {
-  position: absolute;
-  top: -6px;
-  right: -6px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  padding: 0;
-  border: none;
-  border-radius: 50%;
-  background: var(--dsw-color-surface-raised, #fff);
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
-  color: var(--dsw-color-text-secondary, #646a73);
-  cursor: pointer;
-  opacity: 0;
-}
-
-.item:hover .remove,
-.remove:focus-visible {
-  opacity: 1;
-}
-
-.arrow {
-  position: absolute;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  padding: 0;
-  border: 1px solid var(--dsw-color-border, rgba(0, 0, 0, 0.1));
-  border-radius: 50%;
-  background: var(--dsw-color-surface-raised, #fff);
-  color: var(--dsw-color-text-secondary, #646a73);
-  cursor: pointer;
-}
-
-.arrowLeft {
-  left: -10px;
-}
-
-.arrowRight {
-  right: -10px;
-}
+.root {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.rail {
+  display: flex;
+  gap: 8px;
+  overflow-x: auto;
+  scrollbar-width: none;
+  padding: 2px;
+}
+
+.rail::-webkit-scrollbar {
+  display: none;
+}
+
+.item {
+  position: relative;
+  flex: none;
+}
+
+.thumbnail {
+  display: block;
+  width: 56px;
+  height: 56px;
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid var(--dsw-color-border, rgba(0, 0, 0, 0.1));
+  border-radius: 8px;
+  background: none;
+  cursor: pointer;
+}
+
+.thumbnail img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.remove {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: var(--dsw-color-surface-raised, #fff);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+  color: var(--dsw-color-text-secondary, #646a73);
+  cursor: pointer;
+  opacity: 0;
+}
+
+.item:hover .remove,
+.remove:focus-visible {
+  opacity: 1;
+}
+
+.arrow {
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 1px solid var(--dsw-color-border, rgba(0, 0, 0, 0.1));
+  border-radius: 50%;
+  background: var(--dsw-color-surface-raised, #fff);
+  color: var(--dsw-color-text-secondary, #646a73);
+  cursor: pointer;
+}
+
+.arrowLeft {
+  left: -10px;
+}
+
+.arrowRight {
+  right: -10px;
+}