@tangle-network/agent-app 0.46.3 → 0.46.4

package/dist/chunk-RLOHIX5Y.js

@@ -0,0 +1,36 @@
+// src/web-react/mention-pill.ts
+var MENTION_PILL_CLASS = "rounded-md bg-primary/10 px-1 py-0.5 font-medium text-primary";
+
+// src/web-react/class-names.ts
+function joinClasses(...parts) {
+  const kept = [];
+  for (const part of parts) {
+    if (typeof part !== "string") continue;
+    const trimmed = part.trim();
+    if (trimmed.length > 0) kept.push(trimmed);
+  }
+  return kept.join(" ");
+}
+
+// src/web-react/mention-boundaries.ts
+var PATH_CONTINUATION_CHAR = /[\p{L}\p{M}\p{N}._\-/]/u;
+var WORD_CHAR = /[\p{L}\p{M}\p{N}]/u;
+function charBefore(text, index) {
+  if (index <= 0) return void 0;
+  return Array.from(text.slice(Math.max(0, index - 2), index)).pop();
+}
+function charAt(text, index) {
+  if (index >= text.length) return void 0;
+  const codePoint = text.codePointAt(index);
+  return codePoint === void 0 ? void 0 : String.fromCodePoint(codePoint);
+}
+
+export {
+  MENTION_PILL_CLASS,
+  joinClasses,
+  PATH_CONTINUATION_CHAR,
+  WORD_CHAR,
+  charBefore,
+  charAt
+};
+//# sourceMappingURL=chunk-RLOHIX5Y.js.map

package/dist/chunk-RLOHIX5Y.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/web-react/mention-pill.ts","../src/web-react/class-names.ts","../src/web-react/mention-boundaries.ts"],"sourcesContent":["/**\n * Visual contract for a rendered mention pill. The TipTap extension in\n * `mention-editor.tsx` styles its inline atom node with this, and any other\n * surface that renders a resolved mention (e.g. a sent-message transcript)\n * uses the same constant so the two stay one visual contract instead of\n * silently drifting apart. Kept in its own module (no TipTap import) so\n * importing it never pulls the lazily-loaded editor chunk into a consumer's\n * bundle.\n */\nexport const MENTION_PILL_CLASS = 'rounded-md bg-primary/10 px-1 py-0.5 font-medium text-primary'\n","/**\n * One class-attribute join for this subpath.\n *\n * The pattern it replaces is `` `base ${className ?? ''}` ``, which emits\n * `class=\"base \"` for every caller that passes nothing: a trailing separator in\n * the DOM, in every snapshot, and in every assertion that compares the attribute\n * instead of searching it. Interpolating an absent value is the defect — the\n * fix is to never build the attribute by interpolation.\n */\nexport function joinClasses(...parts: ReadonlyArray<string | false | null | undefined>): string {\n  const kept: string[] = []\n  for (const part of parts) {\n    if (typeof part !== 'string') continue\n    const trimmed = part.trim()\n    if (trimmed.length > 0) kept.push(trimmed)\n  }\n  return kept.join(' ')\n}\n","/**\n * The one boundary vocabulary for reading `@<path>` mention tokens out of\n * plain text. Two inverse readings share it — the transcript segmenter\n * (`chat-mentions.ts`) and editor-pill restore (`mention-serialize.ts`) — and\n * they must agree, or a token one accepts the other mangles. Kept OUT of the\n * `/web-react` barrel on purpose: these are internals of the grammar, not\n * public API.\n */\n\n/** A character that could plausibly continue the SAME path/filename past a\n *  matched token. Without this lookahead a mention of `@a/b.md` would match\n *  inside the unrelated `@a/b.md.bak` and split it mid-filename.\n *\n *  Unicode-aware because the wire validator (`validateSandboxMentionPath`)\n *  deliberately ALLOWS non-ASCII paths — in-box filenames are arbitrary. An\n *  ASCII-only class here would accept input the readers then mangle.\n *  `\\p{M}` keeps DECOMPOSED filenames whole: without it, a combining accent\n *  (`a` + U+0301) reads as a boundary and splits the name after its base\n *  letter. */\nexport const PATH_CONTINUATION_CHAR = /[\\p{L}\\p{M}\\p{N}._\\-/]/u\n\n/** A character that, immediately BEFORE an `@`, means the `@` is part of a\n *  longer token (an email local part, a handle) rather than a mention start.\n *  Unicode-aware for the same reasons, combining marks included. */\nexport const WORD_CHAR = /[\\p{L}\\p{M}\\p{N}]/u\n\n/** The full character (code point) ENDING just before `index`, or undefined\n *  at the start. Indexing `text[index - 1]` hands a lone UTF-16 surrogate to\n *  the Unicode-aware classes above, which then misread every astral letter —\n *  boundary checks must see whole characters. `index` must be a code-point\n *  boundary (both callers derive it from `@` positions and id lengths, which\n *  are). */\nexport function charBefore(text: string, index: number): string | undefined {\n  if (index <= 0) return undefined\n  return Array.from(text.slice(Math.max(0, index - 2), index)).pop()\n}\n\n/** The full character (code point) starting at `index`, or undefined past the\n *  end — same surrogate rationale and precondition as {@link charBefore}. */\nexport function charAt(text: string, index: number): string | undefined {\n  if (index >= text.length) return undefined\n  const codePoint = text.codePointAt(index)\n  return codePoint === undefined ? undefined : String.fromCodePoint(codePoint)\n}\n"],"mappings":";AASO,IAAM,qBAAqB;;;ACA3B,SAAS,eAAe,OAAiE;AAC9F,QAAM,OAAiB,CAAC;AACxB,aAAW,QAAQ,OAAO;AACxB,QAAI,OAAO,SAAS,SAAU;AAC9B,UAAM,UAAU,KAAK,KAAK;AAC1B,QAAI,QAAQ,SAAS,EAAG,MAAK,KAAK,OAAO;AAAA,EAC3C;AACA,SAAO,KAAK,KAAK,GAAG;AACtB;;;ACEO,IAAM,yBAAyB;AAK/B,IAAM,YAAY;AAQlB,SAAS,WAAW,MAAc,OAAmC;AAC1E,MAAI,SAAS,EAAG,QAAO;AACvB,SAAO,MAAM,KAAK,KAAK,MAAM,KAAK,IAAI,GAAG,QAAQ,CAAC,GAAG,KAAK,CAAC,EAAE,IAAI;AACnE;AAIO,SAAS,OAAO,MAAc,OAAmC;AACtE,MAAI,SAAS,KAAK,OAAQ,QAAO;AACjC,QAAM,YAAY,KAAK,YAAY,KAAK;AACxC,SAAO,cAAc,SAAY,SAAY,OAAO,cAAc,SAAS;AAC7E;","names":[]}

package/dist/{chunk-RZ6MYWMJ.js → chunk-YTEUZXX2.js}

@@ -1,3 +1,10 @@
+import {
+  PATH_CONTINUATION_CHAR,
+  WORD_CHAR,
+  charAt,
+  charBefore,
+  joinClasses
+} from "./chunk-RLOHIX5Y.js";
 import {
   stepActivityFlowTrace
 } from "./chunk-FBVLEGEG.js";
@@ -1412,6 +1419,9 @@ async function streamChatTurn(opts) {
 
 // src/web-react/chat-composer.tsx
 import {
+  Component,
+  lazy as lazy2,
+  Suspense as Suspense2,
   useCallback as useCallback3,
   useEffect as useEffect6,
   useMemo as useMemo3,
@@ -1554,6 +1564,56 @@ function useDictation({ onDictate, onError }) {
 
 // src/web-react/chat-composer.tsx
 import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function createLazyMentionEditor() {
+  return lazy2(() => import("./mention-editor-GVLG3W7C.js").then((m) => m.loadMentionEditor()));
+}
+var MentionEditorBoundary = class extends Component {
+  state = { error: null };
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch() {
+    this.props.onFailed();
+  }
+  render() {
+    if (this.state.error === null) return this.props.children;
+    const message = this.state.error instanceof Error ? this.state.error.message : String(this.state.error);
+    return /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        role: "alert",
+        "data-testid": "composer-mention-editor-error",
+        className: "rounded-xl border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive",
+        children: [
+          /* @__PURE__ */ jsxs5("div", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ jsxs5("span", { className: "min-w-0 flex-1", children: [
+              "The mention input failed to load: ",
+              message
+            ] }),
+            /* @__PURE__ */ jsx7(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Retry loading the mention input",
+                onClick: this.props.onRetry,
+                className: "shrink-0 font-medium underline-offset-2 hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-destructive/50",
+                children: "Retry"
+              }
+            )
+          ] }),
+          this.props.draft.trim() !== "" && /* @__PURE__ */ jsx7(
+            "p",
+            {
+              "data-testid": "composer-error-held-draft",
+              className: "mt-1.5 max-h-20 overflow-y-auto whitespace-pre-wrap rounded-lg border border-destructive/30 bg-card px-2 py-1 text-foreground",
+              children: this.props.draft
+            }
+          )
+        ]
+      }
+    );
+  }
+};
 var IS_APPLE_PLATFORM = typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/i.test(navigator.platform);
 function SendGlyph({ className }) {
   return /* @__PURE__ */ jsx7("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx7("path", { d: "M22 2 11 13M22 2l-7 20-4-9-9-4 20-7z" }) });
@@ -1644,6 +1704,7 @@ function ChatComposer({
   minRows = 2,
   maxHeight = DEFAULT_MAX_HEIGHT,
   trailing,
+  mention,
   slashCommands,
   onDictate,
   onDictateError,
@@ -1659,6 +1720,13 @@ function ChatComposer({
   const textRef = useRef6(text);
   textRef.current = text;
   const textareaRef = useRef6(null);
+  const richFocusRef = useRef6(null);
+  const registerRichFocus = useCallback3((focus) => {
+    richFocusRef.current = focus;
+  }, []);
+  const [editorEpoch, setEditorEpoch] = useState8(0);
+  const MentionEditor = useMemo3(createLazyMentionEditor, [editorEpoch]);
+  const [editorFailed, setEditorFailed] = useState8(false);
   const fileInputRef = useRef6(null);
   const folderInputRef = useRef6(null);
   const [dragOver, setDragOver] = useState8(false);
@@ -1730,21 +1798,30 @@ function ChatComposer({
     const end = Math.min(pending.end, text.length);
     el.setSelectionRange(start, end);
   }, [text]);
+  const mentionEnabled = mention != null;
   useEffect6(() => {
     if (!focusShortcut || disabled) return;
     function onKeyDown(e) {
       if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "l") {
-        e.preventDefault();
-        textareaRef.current?.focus();
+        if (mentionEnabled) {
+          const focus = richFocusRef.current;
+          if (!focus) return;
+          e.preventDefault();
+          focus();
+        } else {
+          e.preventDefault();
+          textareaRef.current?.focus();
+        }
       }
     }
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
-  }, [focusShortcut, disabled]);
+  }, [focusShortcut, disabled, mentionEnabled]);
   const sendableFiles = canSubmitAttachmentsOnly ? pendingFiles : pendingFiles.filter((f) => f.status === "ready");
   const hasSendable = text.trim().length > 0 || sendableFiles.length > 0;
   const sendBlockedByStream = isStreaming && !canSubmitWhileBusy;
-  const canSend = hasSendable && !sendBlockedByStream && !disabled;
+  const editorInputLost = mention != null && editorFailed;
+  const canSend = hasSendable && !sendBlockedByStream && !disabled && !editorInputLost;
   const [failedSend, setFailedSend] = useState8(null);
   const failSend = useCallback3(
     (error, draft, trimmed, parts, caret) => {
@@ -1789,7 +1866,7 @@ function ChatComposer({
   );
   const send = useCallback3(() => {
     const trimmed = text.trim();
-    if (sendBlockedByStream || disabled) return;
+    if (sendBlockedByStream || disabled || editorInputLost) return;
     const readyFiles = pendingFiles.filter((f) => f.status === "ready");
     const sendable = canSubmitAttachmentsOnly ? pendingFiles : readyFiles;
     if (!trimmed && sendable.length === 0) return;
@@ -1809,6 +1886,7 @@ function ChatComposer({
     text,
     sendBlockedByStream,
     disabled,
+    editorInputLost,
     canSubmitAttachmentsOnly,
     attachmentsNotReadyMessage,
     onSendParts,
@@ -1828,7 +1906,7 @@ function ChatComposer({
   const slashListId = useId();
   const [slashActive, setSlashActive] = useState8(0);
   const [slashDismissedFor, setSlashDismissedFor] = useState8(null);
-  const slashToken = slashCommands && slashCommands.length > 0 ? /^\/(\S*)$/.exec(text)?.[1] : void 0;
+  const slashToken = !mention && slashCommands && slashCommands.length > 0 ? /^\/(\S*)$/.exec(text)?.[1] : void 0;
   const slashOpen = slashToken !== void 0 && text !== slashDismissedFor;
   const slashItems = useMemo3(
     () => (slashCommands ?? []).map((command) => ({
@@ -1926,11 +2004,8 @@ function ChatComposer({
     if (e.target.files?.length) deliverFiles(Array.from(e.target.files), e.target.files);
     e.target.value = "";
   };
-  const handlePaste = (e) => {
-    if (!onAttach) return;
-    const clipboardFiles = e.clipboardData?.files;
-    if (!clipboardFiles || clipboardFiles.length === 0) return;
-    e.preventDefault();
+  const ingestPastedFiles = (clipboardFiles) => {
+    if (!onAttach || clipboardFiles.length === 0) return false;
     const { files, nextIndex } = renamePastedImages(
       Array.from(clipboardFiles),
       pastedImageCount.current,
@@ -1938,6 +2013,12 @@ function ChatComposer({
     );
     pastedImageCount.current = nextIndex;
     deliverFiles(files, clipboardFiles);
+    return true;
+  };
+  const handlePaste = (e) => {
+    const clipboardFiles = e.clipboardData?.files;
+    if (!clipboardFiles || clipboardFiles.length === 0) return;
+    if (ingestPastedFiles(clipboardFiles)) e.preventDefault();
   };
   const handleFolderChange = (e) => {
     if (e.target.files?.length) (onAttachFolder ?? onAttach)?.(e.target.files);
@@ -1978,6 +2059,7 @@ function ChatComposer({
   const fileChips = pendingFiles.filter((f) => f.kind !== "folder");
   const showAbove = controls != null && controlsPlacement === "above";
   const showInline = controls != null && !showAbove;
+  const inputMinHeight = minRows * LINE_HEIGHT + TEXTAREA_PADDING_Y;
   return /* @__PURE__ */ jsxs5(
     "div",
     {
@@ -2128,22 +2210,79 @@ function ChatComposer({
             "data-testid": "composer-card",
             className: `flex flex-col gap-1.5 rounded-2xl border border-card-edge bg-card px-3 py-2.5 transition focus-within:border-primary/40 focus-within:ring-2 focus-within:ring-primary/15 ${floating ? "shadow-raised" : ""}`,
             children: [
-              /* @__PURE__ */ jsx7(
-                "textarea",
-                {
-                  ref: textareaRef,
-                  value: text,
-                  onChange: (e) => setText(e.target.value),
-                  onKeyDown: handleKeyDown,
-                  onPaste: onAttach ? handlePaste : void 0,
-                  placeholder,
-                  disabled,
-                  autoFocus,
-                  rows: minRows,
-                  style: { minHeight: minRows * LINE_HEIGHT + TEXTAREA_PADDING_Y, maxHeight },
-                  "aria-label": "Message input",
-                  className: "w-full resize-none bg-transparent px-1.5 py-1 text-base leading-6 text-foreground outline-none placeholder:text-muted-foreground disabled:opacity-50"
-                }
+              mention ? (
+                // The editor arrives as a lazy chunk; until it lands, a read-only
+                // textarea with the same metrics holds the layout so the card
+                // doesn't jump. The boundary contains a failed load (e.g. the
+                // missing-peer error) to the input area instead of unmounting the
+                // host's region.
+                /* @__PURE__ */ jsx7(
+                  MentionEditorBoundary,
+                  {
+                    onRetry: () => {
+                      setEditorFailed(false);
+                      setEditorEpoch((epoch) => epoch + 1);
+                    },
+                    onFailed: () => setEditorFailed(true),
+                    draft: text,
+                    children: /* @__PURE__ */ jsx7(
+                      Suspense2,
+                      {
+                        fallback: /* @__PURE__ */ jsx7(
+                          "textarea",
+                          {
+                            rows: minRows,
+                            value: text,
+                            readOnly: true,
+                            disabled: true,
+                            placeholder,
+                            "aria-label": "Message input",
+                            style: { minHeight: inputMinHeight, maxHeight },
+                            className: "w-full resize-none bg-transparent px-1.5 py-1 text-base leading-6 text-foreground outline-none placeholder:text-muted-foreground disabled:opacity-50"
+                          }
+                        ),
+                        children: /* @__PURE__ */ jsx7(
+                          MentionEditor,
+                          {
+                            value: text,
+                            onChange: setText,
+                            onSubmit: send,
+                            placeholder,
+                            disabled,
+                            autoFocus,
+                            minHeight: inputMinHeight,
+                            maxHeight,
+                            mention,
+                            registerFocus: registerRichFocus,
+                            onPasteFiles: onAttach ? ingestPastedFiles : void 0
+                          }
+                        )
+                      }
+                    )
+                  },
+                  editorEpoch
+                )
+              ) : (
+                // Focus: `outline-none` is safe because the card above draws the
+                // keyboard indicator through `focus-within:` — one ring for
+                // whichever input mode is mounted.
+                /* @__PURE__ */ jsx7(
+                  "textarea",
+                  {
+                    ref: textareaRef,
+                    value: text,
+                    onChange: (e) => setText(e.target.value),
+                    onKeyDown: handleKeyDown,
+                    onPaste: onAttach ? handlePaste : void 0,
+                    placeholder,
+                    disabled,
+                    autoFocus,
+                    rows: minRows,
+                    style: { minHeight: inputMinHeight, maxHeight },
+                    "aria-label": "Message input",
+                    className: "w-full resize-none bg-transparent px-1.5 py-1 text-base leading-6 text-foreground outline-none placeholder:text-muted-foreground disabled:opacity-50"
+                  }
+                )
               ),
               /* @__PURE__ */ jsxs5("div", { className: "flex items-end gap-2", children: [
                 onAttach && /* @__PURE__ */ jsxs5(Fragment2, { children: [
@@ -2821,8 +2960,6 @@ function useFileMentions(options) {
 }
 
 // src/web-react/chat-mentions.ts
-var PATH_CONTINUATION_CHAR = /[\p{L}\p{N}._\-/]/u;
-var WORD_CHAR = /[\p{L}\p{N}]/u;
 function segmentMentionContent(content, parts) {
   const matched = /* @__PURE__ */ new Set();
   if (!content) return { segments: [], matched };
@@ -2836,7 +2973,7 @@ function segmentMentionContent(content, parts) {
       cursor += 1;
       continue;
     }
-    const prevChar = cursor > 0 ? content[cursor - 1] : void 0;
+    const prevChar = charBefore(content, cursor);
     if (prevChar && WORD_CHAR.test(prevChar)) {
       cursor += 1;
       continue;
@@ -2847,7 +2984,7 @@ function segmentMentionContent(content, parts) {
       continue;
     }
     const endIdx = cursor + candidate.token.length;
-    const nextChar = endIdx < content.length ? content[endIdx] : void 0;
+    const nextChar = charAt(content, endIdx);
     if (nextChar && PATH_CONTINUATION_CHAR.test(nextChar)) {
       cursor += 1;
       continue;
@@ -5342,17 +5479,6 @@ function CommandPalette({
   );
 }
 
-// src/web-react/class-names.ts
-function joinClasses(...parts) {
-  const kept = [];
-  for (const part of parts) {
-    if (typeof part !== "string") continue;
-    const trimmed = part.trim();
-    if (trimmed.length > 0) kept.push(trimmed);
-  }
-  return kept.join(" ");
-}
-
 // src/web-react/sparkline.tsx
 import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 var DEFAULT_SPARKLINE_WIDTH = 96;
@@ -6885,4 +7011,4 @@ export {
   useThinkingSeconds,
   ChatMessages
 };
-//# sourceMappingURL=chunk-RZ6MYWMJ.js.map
+//# sourceMappingURL=chunk-YTEUZXX2.js.map