@nomix-ai/nomix-harness 0.2.5 → 0.2.6

package/dist/kernel/client-ui-input-trigger/lib/types/types.d.ts

@@ -1,6 +1,6 @@
 /**
  * Frozen cross-package contract for the input trigger pipeline. Types only —
- * no runtime code. Sources (ui-commands / ui-skill / ui-subagent) and the
+ * no runtime code. Sources (ui-commands / ui-skill / ui-reference) and the
  * conversation input layer import from here; changes require main-thread
  * arbitration.
  *
@@ -30,6 +30,10 @@ export interface InputTriggerCandidate {
     readonly description?: string;
     readonly icon?: string;
     readonly hint?: string;
+    /** Optional visual heading shared by adjacent candidates; sectioned groups omit their source-title row. */
+    readonly section?: string;
+    /** Opaque source-owned pick payload. */
+    readonly value?: string;
 }
 /** Pick-moment snapshot of the trigger token span. CAS: stale draftRev ⇒ the whole action no-ops. */
 export interface TokenSpan {
@@ -37,6 +41,15 @@ export interface TokenSpan {
     readonly end: number;
     readonly draftRev: number;
 }
+/** Base64-encoded composer image accompanying one claimed submit transaction. */
+export interface SubmitImageAttachment {
+    /** Declared media type; the host verifies it against the decoded bytes. */
+    readonly mediaType: 'image/png' | 'image/jpeg' | 'image/webp' | 'image/gif';
+    /** Canonical base64 encoding of the image bytes. */
+    readonly data: string;
+    /** Optional display name; never interpreted as a path. */
+    readonly name?: string;
+}
 /**
  * Command-mode entry credential. Pure data + a closure method — no class, no
  * cross-package runtime value (client bundle purity).
@@ -46,19 +59,31 @@ export interface CommandClaim {
     readonly token: string;
     /** Ghost-text hint rendered while the claim's args are blank. */
     readonly hint?: string;
-    /** Enter transaction, supplied by the source as a closure. */
-    submit(args: string, actx: ClientContext): Promise<SubmitOutcome>;
+    /**
+     * Whether composer image attachments may accompany this command's submit.
+     * Absent = the composer refuses to submit while images are attached, keeping
+     * the draft and the images in place behind a visible notice.
+     */
+    readonly images?: boolean;
+    /**
+     * Enter transaction, supplied by the source as a closure.
+     * @param images - serialized composer images accompanying the submission;
+     *   the composer passes them only when {@link CommandClaim.images} is true.
+     */
+    submit(args: string, actx: ClientContext, images: readonly SubmitImageAttachment[]): Promise<SubmitOutcome>;
 }
 /**
- * Inline reference insertion. The draft holds one U+FFFC placeholder per
- * occurrence; the owner supplies both user-facing projections at insert time
+ * Inline reference insertion. The draft holds the complete display text while
+ * the occurrence retains its range; the owner supplies both user-facing projections at insert time
  * (the model representation is serialized on submit via the source codec).
  */
 export interface ReferenceInsert {
     readonly source: string;
     readonly ref: string;
-    /** Chip display label (fallback-cached on the occurrence). */
+    /** Inline display label (fallback-cached on the occurrence). */
     readonly label: string;
+    /** Optional domain glyph shown beside the label. */
+    readonly appearance?: 'session' | 'file' | 'folder';
     /** Clipboard / persistence projection, e.g. `/name` (never the model form). */
     readonly clipboardText: string;
 }
@@ -83,10 +108,22 @@ export type PickOutcome = {
     readonly insert: ReferenceInsert;
 } | {
     readonly text: string;
+    readonly continue?: boolean;
 } | 'handled' | undefined;
+/**
+ * Non-text composer submission state visible to enter adjudication. The
+ * composer owns the actual attachment payloads; adjudication only needs their
+ * presence to accept or refuse a whole submission.
+ */
+export interface SubmitEnvelope {
+    /** Number of image attachments accompanying the draft. */
+    readonly images: number;
+}
 /** Candidate request passed to a source. The signal is superseded on query change / menu close. */
 export interface CandidateRequest {
     readonly query: string;
+    /** Whether the active @file token is an open quoted path. */
+    readonly quoted?: boolean;
     readonly position: TriggerPosition;
     readonly signal: AbortSignal;
 }
@@ -128,6 +165,8 @@ export interface InputTriggerSource {
     readonly name: string;
     /** Menu group display order (lower = higher in the list; default 0). */
     readonly order?: number;
+    /** Whether the menu renders the source-title row; defaults to true. */
+    readonly showGroupTitle?: boolean;
     candidates(session: ClientSessionContext, req: CandidateRequest): Promise<readonly InputTriggerCandidate[]>;
     /** Every pick lands here; claim/insert outcomes are executed by the pipeline via the scoped input events. */
     onPick(pick: InputTriggerPick): PickOutcome;
@@ -138,9 +177,12 @@ export interface InputTriggerSource {
      * reject on warmup failure. `line` is the full trimmed draft: the source
      * parses it and applies its own kind policy — args-tolerant kinds claim
      * with trailing text present, bare-token-only kinds answer undefined
-     * unless the line is exactly the token.
+     * unless the line is exactly the token. `envelope` describes the rest of
+     * the composer submission; a source that would consume the line but cannot
+     * consume the whole envelope throws to surface the refusal and leave the
+     * submission intact.
      */
-    matchEnter?(session: ClientSessionContext, line: string, signal: AbortSignal): Promise<PickOutcome>;
+    matchEnter?(session: ClientSessionContext, line: string, signal: AbortSignal, envelope: SubmitEnvelope): Promise<PickOutcome>;
     /**
      * Scope-birth prewarm hook (fire-and-forget): the per-session controller
      * calls it once when the session scope comes alive so sources can fetch
@@ -202,6 +244,8 @@ export interface InsertTextRequest {
     /** Literal replacement for the trigger token span (e.g. `/name `). */
     readonly text: string;
     readonly span: TokenSpan;
+    /** Keep completion open after the splice (directory descent): the input re-tracks at the caret. */
+    readonly continue?: boolean;
 }
 declare module '@nomix-ai/cordis' {
     interface Events {

package/dist/kernel/client-ui-input-trigger/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nomix-ai/nomix-client-ui-input-trigger",
   "description": "Input trigger pipeline: '/' and '@' detection, candidate menu, pick routing to registered sources",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "publishConfig": {
     "access": "public"
   },
@@ -49,11 +49,9 @@
   "peerDependencies": {
     "@nomix-ai/nomix-client-locale": "workspace:^",
     "@nomix-ai/nomix-client-runtime": "workspace:^",
-    "@nomix-ai/nomix-client-ui-primitives": "workspace:^",
-    "@nomix-ai/nomix-client-ui-slots": "workspace:^",
     "@nomix-ai/nomix-invariants": "workspace:^",
     "@nomix-ai/cordis": "workspace:^",
-    "react": "^18.2.0"
+    "@nomix-ai/nomix-file-reference": "workspace:^"
   },
   "devDependencies": {
     "@nomix-ai/nomix-client-locale": "workspace:^",
@@ -64,7 +62,8 @@
     "@nomix-ai/nomix-invariants": "workspace:^",
     "@types/react": "~18.3.1",
     "@nomix-ai/cordis": "workspace:^",
-    "react": "^18.2.0"
+    "react": "^18.2.0",
+    "@nomix-ai/nomix-file-reference": "workspace:^"
   },
   "files": [
     "lib/index.js",

package/dist/kernel/client-ui-jobs/lib/client.js

@@ -18,19 +18,19 @@ window.__ModuleLoader__.load({
 			document.head.appendChild(tag);
 		}
 		var JobListAction_module_css_default = {
-			"menu": "or4myW_menu",
-			"status": "or4myW_status",
-			"triggerDot": "or4myW_triggerDot",
-			"trigger": "or4myW_trigger",
-			"rowSettled": "or4myW_rowSettled",
-			"kind": "or4myW_kind",
+			"count": "or4myW_count",
 			"duration": "or4myW_duration",
+			"kind": "or4myW_kind",
+			"label": "or4myW_label",
+			"menu": "or4myW_menu",
 			"root": "or4myW_root",
-			"triggerOpen": "or4myW_triggerOpen",
-			"count": "or4myW_count",
-			"rowDot": "or4myW_rowDot",
 			"row": "or4myW_row",
-			"label": "or4myW_label"
+			"rowDot": "or4myW_rowDot",
+			"rowSettled": "or4myW_rowSettled",
+			"status": "or4myW_status",
+			"trigger": "or4myW_trigger",
+			"triggerDot": "or4myW_triggerDot",
+			"triggerOpen": "or4myW_triggerOpen"
 		};
 		//#endregion
 		//#region lib/types/client/JobListAction.js

package/dist/kernel/client-ui-jobs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nomix-ai/nomix-client-ui-jobs",
   "description": "Session-header background-job list: live registry state mirrored from session/jobs frames",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "type": "module",
   "main": "lib/index.js",
   "types": "lib/types/index.d.ts",
@@ -45,15 +45,10 @@
   "publishConfig": {
     "access": "public"
   },
-  "dependencies": {
-    "react": "^18.2.0"
-  },
   "peerDependencies": {
     "@nomix-ai/nomix-client-locale": "workspace:^",
     "@nomix-ai/nomix-client-runtime": "workspace:^",
     "@nomix-ai/nomix-client-ui-conversation": "workspace:^",
-    "@nomix-ai/nomix-client-ui-primitives": "workspace:^",
-    "@nomix-ai/nomix-client-ui-slots": "workspace:^",
     "@nomix-ai/nomix-invariants": "workspace:^",
     "@nomix-ai/cordis": "workspace:^"
   },
@@ -66,7 +61,8 @@
     "@nomix-ai/nomix-client-ui-slots": "workspace:^",
     "@nomix-ai/nomix-invariants": "workspace:^",
     "@types/react": "~18.3.1",
-    "@nomix-ai/cordis": "workspace:^"
+    "@nomix-ai/cordis": "workspace:^",
+    "react": "^18.2.0"
   },
   "files": [
     "lib/index.js",

package/dist/kernel/client-ui-layout/lib/client.js

@@ -63,12 +63,12 @@ window.__ModuleLoader__.load({
 			document.head.appendChild(tag);
 		}
 		var AppFrame_module_css_default = {
+			"centerCol": "_G2BLq_centerCol",
 			"detailsCol": "_G2BLq_detailsCol",
-			"sidebarCol": "_G2BLq_sidebarCol",
 			"frame": "_G2BLq_frame",
 			"handle": "_G2BLq_handle",
-			"centerCol": "_G2BLq_centerCol",
-			"overlayLayer": "_G2BLq_overlayLayer"
+			"overlayLayer": "_G2BLq_overlayLayer",
+			"sidebarCol": "_G2BLq_sidebarCol"
 		};
 		//#endregion
 		//#region lib/types/client/AppFrame.js

package/dist/kernel/client-ui-layout/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nomix-ai/nomix-client-ui-layout",
   "description": "Shell plugin: three-column AppFrame with drag handles, ctx.layout viewing-state service (navigation + panels)",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "publishConfig": {
     "access": "public"
   },
@@ -45,11 +45,9 @@
   "license": "MIT",
   "peerDependencies": {
     "@nomix-ai/nomix-client-runtime": "workspace:^",
-    "@nomix-ai/nomix-client-ui-slots": "workspace:^",
     "@nomix-ai/nomix-client-ui-theme": "workspace:^",
     "@nomix-ai/nomix-invariants": "workspace:^",
-    "@nomix-ai/cordis": "workspace:^",
-    "react": "^18.2.0"
+    "@nomix-ai/cordis": "workspace:^"
   },
   "devDependencies": {
     "@nomix-ai/nomix-client-locale": "workspace:^",

package/dist/kernel/client-ui-message-feedback/lib/client.js

@@ -6,6 +6,7 @@ window.__ModuleLoader__.load({
 		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 		let react_jsx_runtime = require("react/jsx-runtime");
 		let react = require("react");
+		let react_dom = require("react-dom");
 		let _nomix_ai_nomix_client_ui_primitives = require("@nomix-ai/nomix-client-ui-primitives");
 		//#region lib/types/client/controller.js
 		const INITIAL_VIEW = Object.freeze({
@@ -325,7 +326,7 @@ window.__ModuleLoader__.load({
 		};
 		//#endregion
 		//#region \0nomix-css:/home/runner/work/nomix-harness/nomix-harness/packages/client/ui-message-feedback/src/client/MessageFeedbackActions.module.css.mjs
-		const css = ".IUyupW_action{width:28px;height:28px;color:var(--dsw-alias-label-tertiary);cursor:pointer;background:0 0;border:none;border-radius:28px;justify-content:center;align-items:center;padding:6px;display:inline-flex}.IUyupW_action:hover{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-secondary)}.IUyupW_action:disabled{cursor:default;opacity:.4}.IUyupW_action[data-active]{color:var(--dsw-alias-label-primary)}.IUyupW_noteOpen{max-width:220px;color:var(--dsw-alias-label-tertiary);white-space:nowrap;text-overflow:ellipsis;cursor:pointer;background:0 0;border:none;border-radius:14px;padding:0 8px;font-size:13px;line-height:28px;overflow:hidden}.IUyupW_noteOpen:hover{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-secondary)}.IUyupW_noteEditor{align-items:flex-start;gap:6px;display:inline-flex}.IUyupW_noteInput{border:1px solid var(--dsw-alias-border-secondary);background:var(--dsw-alias-bg-primary);width:260px;color:var(--dsw-alias-label-primary);font:inherit;resize:vertical;border-radius:8px;padding:6px 8px;font-size:13px}.IUyupW_noteSave,.IUyupW_noteCancel{cursor:pointer;border:none;border-radius:14px;height:28px;padding:0 10px;font-size:13px}.IUyupW_noteSave{background:var(--dsw-alias-interactive-bg-primary);color:var(--dsw-alias-label-inverse)}.IUyupW_noteSave:disabled{cursor:default;opacity:.4}.IUyupW_noteCancel{color:var(--dsw-alias-label-tertiary);background:0 0}.IUyupW_noteCancel:hover{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-secondary)}.IUyupW_failure{color:var(--dsw-alias-label-tertiary);padding-left:4px;font-size:13px;line-height:28px}";
+		const css = ".IUyupW_action{width:28px;height:28px;color:var(--dsw-alias-label-tertiary);cursor:pointer;background:0 0;border:none;border-radius:28px;justify-content:center;align-items:center;padding:6px;display:inline-flex}.IUyupW_action:hover{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-secondary)}.IUyupW_action:disabled{cursor:default;opacity:.4}.IUyupW_action[data-active]{color:var(--dsw-alias-label-primary)}.IUyupW_noteOpen{max-width:220px;color:var(--dsw-alias-label-tertiary);white-space:nowrap;text-overflow:ellipsis;cursor:pointer;background:0 0;border:none;border-radius:14px;padding:0 8px;font-size:13px;line-height:28px;overflow:hidden}.IUyupW_noteOpen:hover,.IUyupW_noteOpen[aria-expanded=true]{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-secondary)}.IUyupW_notePanel{z-index:1100;box-sizing:border-box;border:1px solid var(--dsw-alias-border-inverted);background:var(--dsw-specific-menu);width:320px;max-width:min(360px,100vw - 24px);max-height:calc(100vh - 24px);box-shadow:var(--dsw-shadow-lv3);--nomix-scrollbar-thumb:var(--dsw-alias-scrollbar-bg-l2);--nomix-scrollbar-thumb-hover:var(--dsw-alias-scrollbar-hover-l2);border-radius:12px;flex-direction:column;gap:8px;padding:8px;display:flex;position:fixed;overflow-y:auto}.IUyupW_noteInput{box-sizing:border-box;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);width:100%;color:var(--dsw-alias-label-primary);font:inherit;resize:vertical;border-radius:8px;padding:6px 8px;font-size:13px}.IUyupW_noteActions{justify-content:flex-end;gap:6px;display:flex}.IUyupW_noteSave,.IUyupW_noteCancel{cursor:pointer;border:none;border-radius:14px;height:28px;padding:0 10px;font-size:13px}.IUyupW_noteSave{background:var(--dsw-alias-button-primary-fill);color:var(--dsw-alias-label-primary-foreground)}.IUyupW_noteSave:hover:not(:disabled){background:var(--dsw-alias-button-primary-hover)}.IUyupW_noteSave:disabled{cursor:default;opacity:.4}.IUyupW_noteCancel{color:var(--dsw-alias-label-tertiary);background:0 0}.IUyupW_noteCancel:hover{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-secondary)}.IUyupW_failure{color:var(--dsw-alias-label-tertiary);padding-left:4px;font-size:13px;line-height:20px}";
 		const tagId = "@nomix-ai/nomix-client-ui-message-feedback/MessageFeedbackActions.module.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId) + "]") === null) {
 			const tag = document.createElement("style");
@@ -335,27 +336,49 @@ window.__ModuleLoader__.load({
 			document.head.appendChild(tag);
 		}
 		var MessageFeedbackActions_module_css_default = {
-			"noteSave": "IUyupW_noteSave",
-			"failure": "IUyupW_failure",
-			"noteEditor": "IUyupW_noteEditor",
 			"action": "IUyupW_action",
+			"failure": "IUyupW_failure",
+			"noteActions": "IUyupW_noteActions",
 			"noteCancel": "IUyupW_noteCancel",
+			"noteInput": "IUyupW_noteInput",
 			"noteOpen": "IUyupW_noteOpen",
-			"noteInput": "IUyupW_noteInput"
+			"notePanel": "IUyupW_notePanel",
+			"noteSave": "IUyupW_noteSave"
 		};
 		//#endregion
 		//#region lib/types/client/MessageFeedbackActions.js
 		/**
 		* Per-message feedback controls: a Like/Dislike pair plus an optional note.
-		* Rendered inside the assistant message's IconActions row, so the buttons
-		* reuse that row's chrome and sit between copy and branch.
+		* The buttons render inside the assistant message's IconActions row, so they
+		* reuse that row's chrome and sit between copy and branch. The note editor is
+		* a popover (portaled to `document.body`) anchored to the note trigger, not an
+		* inline expansion: a 260px textarea plus buttons cannot fit the row at any
+		* viewport, and an inline element pushed the branch action and clock out of the
+		* conversation column. Portaling out of the column also escapes its `overflow`
+		* clip, so the panel cannot be cropped or detached from the message it annotates.
 		* @module @nomix-ai/nomix-client-ui-message-feedback/client/MessageFeedbackActions
 		*/
+		/** Safe distance kept between the panel and the viewport edges (the Menu portal margin). */
+		const PANEL_MARGIN = 12;
+		/** Distance between the trigger's bottom edge and the panel's top. */
+		const PANEL_GAP = 4;
+		/**
+		* Unplaced portal panel: hidden but laid out so `offsetWidth` is real for the
+		* clamp. The explicit insets match `Menu`'s measure style — a `position: fixed`
+		* element with auto insets otherwise sits at its static position, a different
+		* origin than the one the first placement measures from.
+		*/
+		const MEASURE_STYLE = {
+			visibility: "hidden",
+			left: 0,
+			top: 0
+		};
 		/**
 		* One message's feedback controls.
 		* @param props - the owner's message identity, the injected verbs, and the
 		* shared feedback hook.
-		* @returns the rating buttons, plus the note editor while it is open.
+		* @returns the rating buttons and the note trigger, with the note editor
+		* portal-open beneath the trigger while it is open.
 		*/
 		function MessageFeedbackActions({ messageId, ensure, rate, toggle, clearNote, useFeedback, t }) {
 			const item = useFeedback((view) => view.items.get(messageId));
@@ -364,7 +387,11 @@ window.__ModuleLoader__.load({
 			const [noteOpen, setNoteOpen] = (0, react.useState)(false);
 			const [draft, setDraft] = (0, react.useState)("");
 			const [pending, setPending] = (0, react.useState)(false);
-			const [failure, setFailure] = (0, react.useState)(null);
+			const [rowFailure, setRowFailure] = (0, react.useState)(null);
+			const [noteFailure, setNoteFailure] = (0, react.useState)(null);
+			const triggerRef = (0, react.useRef)(null);
+			const panelRef = (0, react.useRef)(null);
+			const inputRef = (0, react.useRef)(null);
 			const seeded = (0, react.useRef)(false);
 			const seed = (0, react.useCallback)(() => {
 				if (seeded.current) return;
@@ -375,44 +402,113 @@ window.__ModuleLoader__.load({
 			(0, react.useEffect)(() => () => {
 				alive.current = false;
 			}, []);
-			const settle = (0, react.useCallback)((result) => {
+			/** Bumped whenever an editing session ends, so a late save can tell it is stale. */
+			const noteGeneration = (0, react.useRef)(0);
+			/** Current panel open-state, readable from a stale closure via a ref. */
+			const noteOpenRef = (0, react.useRef)(false);
+			(0, react.useEffect)(() => {
+				noteOpenRef.current = noteOpen;
+			}, [noteOpen]);
+			const errorCopy = (0, react.useCallback)((result) => {
+				return result.error?.code === "version-conflict" ? t("error.conflict") : t("error.generic");
+			}, [t]);
+			const settleRating = (0, react.useCallback)((result) => {
 				if (!alive.current) return;
 				setPending(false);
-				if (result.ok) {
-					setFailure(null);
-					return;
-				}
-				setFailure(result.error?.code === "version-conflict" ? t("error.conflict") : t("error.generic"));
-			}, [t]);
+				setRowFailure(result.ok ? null : errorCopy(result));
+			}, [errorCopy]);
+			const closeNote = (0, react.useCallback)(() => {
+				noteGeneration.current += 1;
+				setNoteOpen(false);
+			}, []);
 			const onRate = (0, react.useCallback)((next) => {
 				setPending(true);
-				setFailure(null);
-				setNoteOpen(false);
-				toggle(messageId, next).then(settle);
+				setRowFailure(null);
+				closeNote();
+				toggle(messageId, next).then(settleRating);
 			}, [
+				closeNote,
 				messageId,
-				settle,
+				settleRating,
 				toggle
 			]);
 			const onSaveNote = (0, react.useCallback)((current) => {
 				const trimmed = draft.trim();
 				setPending(true);
-				setFailure(null);
+				setNoteFailure(null);
+				const generation = noteGeneration.current;
+				const staleSeed = item?.note ?? "";
 				(trimmed.length === 0 ? clearNote(messageId) : rate(messageId, current, trimmed)).then((result) => {
-					settle(result);
-					if (result.ok && alive.current) setNoteOpen(false);
+					if (!alive.current) return;
+					setPending(false);
+					if (result.ok) {
+						if (generation === noteGeneration.current) {
+							setNoteFailure(null);
+							setNoteOpen(false);
+							return;
+						}
+						setDraft((draftNow) => draftNow === staleSeed ? trimmed : draftNow);
+						return;
+					}
+					if (generation === noteGeneration.current || !noteOpenRef.current) setNoteFailure(errorCopy(result));
 				});
 			}, [
 				clearNote,
 				draft,
+				errorCopy,
+				item?.note,
 				messageId,
-				rate,
-				settle
+				noteOpenRef,
+				rate
 			]);
-			const openNote = (0, react.useCallback)(() => {
+			const toggleNote = (0, react.useCallback)(() => {
+				if (noteOpen) {
+					closeNote();
+					return;
+				}
 				setDraft(item?.note ?? "");
+				setNoteFailure(null);
 				setNoteOpen(true);
-			}, [item?.note]);
+			}, [
+				noteOpen,
+				closeNote,
+				item?.note
+			]);
+			const pos = (0, _nomix_ai_nomix_client_ui_primitives.useAnchoredPosition)({
+				open: noteOpen,
+				anchorRef: triggerRef,
+				panelRef,
+				gap: PANEL_GAP,
+				margin: PANEL_MARGIN
+			});
+			(0, react.useEffect)(() => {
+				if (!noteOpen) return;
+				inputRef.current?.focus();
+				const onPointerDown = (e) => {
+					if (!(e.target instanceof Node)) return;
+					if (triggerRef.current?.contains(e.target) === true) return;
+					if (panelRef.current?.contains(e.target) === true) return;
+					closeNote();
+				};
+				const onKeyDown = (e) => {
+					if (e.key === "Escape") closeNote();
+				};
+				document.addEventListener("pointerdown", onPointerDown);
+				document.addEventListener("keydown", onKeyDown);
+				return () => {
+					document.removeEventListener("pointerdown", onPointerDown);
+					document.removeEventListener("keydown", onKeyDown);
+				};
+			}, [noteOpen, closeNote]);
+			const wasOpen = (0, react.useRef)(false);
+			(0, react.useEffect)(() => {
+				if (noteOpen) {
+					wasOpen.current = true;
+					return;
+				}
+				if (wasOpen.current) triggerRef.current?.focus();
+				wasOpen.current = false;
+			}, [noteOpen]);
 			const likeLabel = rating === "positive" ? t("action.likeActive") : t("action.like");
 			const dislikeLabel = rating === "negative" ? t("action.dislikeActive") : t("action.dislike");
 			return (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
@@ -452,54 +548,72 @@ window.__ModuleLoader__.load({
 						children: (0, react_jsx_runtime.jsx)(_nomix_ai_nomix_client_ui_primitives.IconDislikeOutline16, {})
 					})
 				}),
-				rating !== void 0 && !noteOpen && (0, react_jsx_runtime.jsx)("button", {
+				rating !== void 0 && (0, react_jsx_runtime.jsx)("button", {
+					ref: triggerRef,
 					type: "button",
 					className: MessageFeedbackActions_module_css_default.noteOpen,
-					onClick: openNote,
+					"aria-haspopup": "dialog",
+					"aria-expanded": noteOpen,
+					onClick: toggleNote,
 					children: item?.note === void 0 ? t("note.open") : item.note
 				}),
-				rating !== void 0 && noteOpen && (0, react_jsx_runtime.jsxs)("span", {
-					className: MessageFeedbackActions_module_css_default.noteEditor,
+				rowFailure === null && loadFailed && (0, react_jsx_runtime.jsx)("span", {
+					className: MessageFeedbackActions_module_css_default.failure,
+					role: "status",
+					children: t("error.load")
+				}),
+				rowFailure !== null && (0, react_jsx_runtime.jsx)("span", {
+					className: MessageFeedbackActions_module_css_default.failure,
+					role: "status",
+					children: rowFailure
+				}),
+				!(rating !== void 0 && noteOpen) && noteFailure !== null && (0, react_jsx_runtime.jsx)("span", {
+					className: MessageFeedbackActions_module_css_default.failure,
+					role: "status",
+					children: noteFailure
+				}),
+				rating !== void 0 && noteOpen && (0, react_dom.createPortal)((0, react_jsx_runtime.jsxs)("div", {
+					ref: panelRef,
+					className: MessageFeedbackActions_module_css_default.notePanel,
+					role: "dialog",
+					"aria-label": t("note.dialog"),
+					style: pos ?? MEASURE_STYLE,
 					children: [
 						(0, react_jsx_runtime.jsx)("textarea", {
+							ref: inputRef,
 							className: MessageFeedbackActions_module_css_default.noteInput,
 							"aria-label": t("note.aria"),
 							placeholder: t("note.placeholder"),
 							value: draft,
-							rows: 2,
+							rows: 3,
 							onChange: (event) => {
 								setDraft(event.target.value);
 							}
 						}),
-						(0, react_jsx_runtime.jsx)("button", {
-							type: "button",
-							className: MessageFeedbackActions_module_css_default.noteSave,
-							disabled: pending,
-							onClick: () => {
-								onSaveNote(rating);
-							},
-							children: t("note.save")
+						(0, react_jsx_runtime.jsxs)("div", {
+							className: MessageFeedbackActions_module_css_default.noteActions,
+							children: [(0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: MessageFeedbackActions_module_css_default.noteSave,
+								disabled: pending,
+								onClick: () => {
+									onSaveNote(rating);
+								},
+								children: t("note.save")
+							}), (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: MessageFeedbackActions_module_css_default.noteCancel,
+								onClick: closeNote,
+								children: t("note.cancel")
+							})]
 						}),
-						(0, react_jsx_runtime.jsx)("button", {
-							type: "button",
-							className: MessageFeedbackActions_module_css_default.noteCancel,
-							onClick: () => {
-								setNoteOpen(false);
-							},
-							children: t("note.cancel")
+						noteFailure !== null && (0, react_jsx_runtime.jsx)("span", {
+							className: MessageFeedbackActions_module_css_default.failure,
+							role: "status",
+							children: noteFailure
 						})
 					]
-				}),
-				failure === null && loadFailed && (0, react_jsx_runtime.jsx)("span", {
-					className: MessageFeedbackActions_module_css_default.failure,
-					role: "status",
-					children: t("error.load")
-				}),
-				failure !== null && (0, react_jsx_runtime.jsx)("span", {
-					className: MessageFeedbackActions_module_css_default.failure,
-					role: "status",
-					children: failure
-				})
+				}), document.body)
 			] });
 		}
 		//#endregion
@@ -512,6 +626,7 @@ window.__ModuleLoader__.load({
 			"action.dislike": "有问题的回答",
 			"action.dislikeActive": "取消标记",
 			"note.open": "补充说明",
+			"note.dialog": "反馈",
 			"note.placeholder": "这条回答哪里好，或哪里有问题？（可选）",
 			"note.save": "保存",
 			"note.cancel": "取消",
@@ -527,6 +642,7 @@ window.__ModuleLoader__.load({
 			"action.dislike": "Bad response",
 			"action.dislikeActive": "Remove rating",
 			"note.open": "Add a note",
+			"note.dialog": "Feedback",
 			"note.placeholder": "What was good, or what went wrong? (optional)",
 			"note.save": "Save",
 			"note.cancel": "Cancel",

package/dist/kernel/client-ui-message-feedback/lib/types/client/MessageFeedbackActions.d.ts

@@ -1,7 +1,12 @@
 /**
  * Per-message feedback controls: a Like/Dislike pair plus an optional note.
- * Rendered inside the assistant message's IconActions row, so the buttons
- * reuse that row's chrome and sit between copy and branch.
+ * The buttons render inside the assistant message's IconActions row, so they
+ * reuse that row's chrome and sit between copy and branch. The note editor is
+ * a popover (portaled to `document.body`) anchored to the note trigger, not an
+ * inline expansion: a 260px textarea plus buttons cannot fit the row at any
+ * viewport, and an inline element pushed the branch action and clock out of the
+ * conversation column. Portaling out of the column also escapes its `overflow`
+ * clip, so the panel cannot be cropped or detached from the message it annotates.
  * @module @nomix-ai/nomix-client-ui-message-feedback/client/MessageFeedbackActions
  */
 import type { MessageFeedbackActionProps } from './slots.ts';
@@ -9,7 +14,8 @@ import type { MessageFeedbackActionProps } from './slots.ts';
  * One message's feedback controls.
  * @param props - the owner's message identity, the injected verbs, and the
  * shared feedback hook.
- * @returns the rating buttons, plus the note editor while it is open.
+ * @returns the rating buttons and the note trigger, with the note editor
+ * portal-open beneath the trigger while it is open.
  */
 export declare function MessageFeedbackActions({ messageId, ensure, rate, toggle, clearNote, useFeedback, t }: MessageFeedbackActionProps): import("react").JSX.Element;
 //# sourceMappingURL=MessageFeedbackActions.d.ts.map