@iloveagents/foundry-web-ui 0.1.0 → 0.1.2

package/src/components/global-selection-popover.tsx

@@ -1,18 +1,27 @@
 /**
- * Global "Add to context" popover for text selection anywhere on the page.
+ * Global selection command bar for text selection anywhere on the page.
  *
  * Appears near selected text when the user makes a selection outside of
  * input elements and the tool panel (which has its own SelectionPopover).
  */
 
-import { useState, useEffect, useCallback, useRef } from "react";
-import { TextSelect } from "lucide-react";
+import { type FormEvent, useState, useEffect, useCallback, useRef } from "react";
+import { PencilLine, Send, TextSelect, X } from "lucide-react";
 import { cn } from "@iloveagents/foundry-web-primitives";
 import { useAppStore } from "../lib/app-store.ts";
+import { useChatBubbleStore } from "../lib/chat-bubble-store.ts";
+import { submitComposerText } from "../lib/composer-submit-store.ts";
+import {
+  resolveSelectionContext,
+  type SelectionContextResult,
+} from "../lib/selection-context.ts";
 
-const POPOVER_HEIGHT = 36;
-const POPOVER_WIDTH = 150;
+const ACTION_POPOVER_HEIGHT = 38;
+const SIMPLE_POPOVER_WIDTH = 126;
+const ACTION_POPOVER_WIDTH = 236;
+const MODIFY_POPOVER_WIDTH = 340;
 const OFFSET = 8;
+const DEFAULT_MODIFY_PROMPT_PREFIX = "Modify the selected content:";
 
 /** Elements where selection should NOT trigger the popover */
 function isEditableTarget(node: Node): boolean {
@@ -27,15 +36,28 @@ function isEditableTarget(node: Node): boolean {
 export function GlobalSelectionPopover() {
   const [position, setPosition] = useState<{ top: number; left: number } | null>(null);
   const [selectedText, setSelectedText] = useState("");
+  const [selectionContext, setSelectionContext] = useState<SelectionContextResult | null>(null);
+  const [mode, setMode] = useState<"actions" | "modify">("actions");
+  const [modifyPrompt, setModifyPrompt] = useState("");
   const addContextItem = useAppStore((s) => s.addContextItem);
-  const buttonRef = useRef<HTMLButtonElement>(null);
+  const popoverRef = useRef<HTMLElement | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const setPopoverNode = useCallback((node: HTMLElement | null) => {
+    popoverRef.current = node;
+  }, []);
 
   const hidePopover = useCallback(() => {
     setPosition(null);
     setSelectedText("");
+    setSelectionContext(null);
+    setMode("actions");
+    setModifyPrompt("");
   }, []);
 
-  const handleMouseUp = useCallback(() => {
+  const handleMouseUp = useCallback((event: MouseEvent) => {
+    if (popoverRef.current?.contains(event.target as Node)) return;
+
     requestAnimationFrame(() => {
       const selection = window.getSelection();
       if (!selection || selection.isCollapsed || !selection.toString().trim()) return;
@@ -55,10 +77,19 @@ export function GlobalSelectionPopover() {
 
       const range = selection.getRangeAt(0);
       const rect = range.getBoundingClientRect();
+      const sourcePage = useAppStore.getState().navContext.label;
+      const resolved = resolveSelectionContext({
+        text,
+        anchorNode,
+        focusNode: selection.focusNode,
+        range,
+        sourcePage,
+      });
+      const width = resolved.supportsModify ? ACTION_POPOVER_WIDTH : SIMPLE_POPOVER_WIDTH;
 
       // Position above selection, fixed to viewport
-      let top = rect.top - POPOVER_HEIGHT - OFFSET;
-      let left = rect.left + rect.width / 2 - POPOVER_WIDTH / 2;
+      let top = rect.top - ACTION_POPOVER_HEIGHT - OFFSET;
+      let left = rect.left + rect.width / 2 - width / 2;
 
       // If would go above viewport, place below
       if (top < OFFSET) {
@@ -66,33 +97,64 @@ export function GlobalSelectionPopover() {
       }
 
       // Clamp horizontal
-      left = Math.max(OFFSET, Math.min(left, window.innerWidth - POPOVER_WIDTH - OFFSET));
+      left = Math.max(OFFSET, Math.min(left, window.innerWidth - width - OFFSET));
 
       setSelectedText(text);
+      setSelectionContext(resolved);
+      setMode("actions");
+      setModifyPrompt("");
       setPosition({ top, left });
     });
   }, []);
 
+  const addResolvedContext = useCallback(() => {
+    if (!selectionContext) return false;
+    addContextItem(selectionContext.item);
+    return true;
+  }, [addContextItem, selectionContext]);
+
   const handleAddToContext = useCallback(() => {
-    if (!selectedText) return;
+    if (!selectedText || !addResolvedContext()) return;
 
-    const navLabel = useAppStore.getState().navContext.label;
+    window.getSelection()?.removeAllRanges();
+    hidePopover();
+  }, [selectedText, addResolvedContext, hidePopover]);
 
-    addContextItem({
-      type: "selection",
-      label: selectedText,
-      payload: { kind: "text", text: selectedText },
-      sourcePage: navLabel,
-      persistence: "ephemeral",
+  const handleStartModify = useCallback(() => {
+    setMode("modify");
+    setPosition((current) => {
+      if (!current) return current;
+      const centeredLeft = current.left - (MODIFY_POPOVER_WIDTH - ACTION_POPOVER_WIDTH) / 2;
+      return {
+        ...current,
+        left: Math.max(
+          OFFSET,
+          Math.min(centeredLeft, window.innerWidth - MODIFY_POPOVER_WIDTH - OFFSET),
+        ),
+      };
     });
+  }, []);
 
-    window.getSelection()?.removeAllRanges();
-    hidePopover();
-  }, [selectedText, addContextItem, hidePopover]);
+  const handleModifySubmit = useCallback(
+    (event: FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+      const prompt = modifyPrompt.trim();
+      if (!prompt || !selectionContext || !addResolvedContext()) return;
+
+      const text =
+        selectionContext.formatModifyPrompt?.(prompt) ??
+        `${DEFAULT_MODIFY_PROMPT_PREFIX} ${prompt}`;
+      useChatBubbleStore.getState().open();
+      submitComposerText(text);
+      window.getSelection()?.removeAllRanges();
+      hidePopover();
+    },
+    [addResolvedContext, hidePopover, modifyPrompt, selectionContext],
+  );
 
   useEffect(() => {
     const handleMouseDown = (e: MouseEvent) => {
-      if (buttonRef.current?.contains(e.target as Node)) return;
+      if (popoverRef.current?.contains(e.target as Node)) return;
       hidePopover();
     };
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -110,26 +172,95 @@ export function GlobalSelectionPopover() {
     };
   }, [handleMouseUp, hidePopover]);
 
-  if (!position) return null;
+  useEffect(() => {
+    if (mode === "modify") {
+      inputRef.current?.focus();
+    }
+  }, [mode]);
+
+  if (!position || !selectionContext) return null;
+
+  if (mode === "modify") {
+    return (
+      <form
+        ref={setPopoverNode}
+        className={cn(
+          "fixed z-50",
+          "flex items-center gap-1.5",
+          "rounded-2xl border border-border/70 bg-background/95 p-1.5 shadow-xl shadow-black/10 backdrop-blur-md",
+          "animate-in fade-in-0 zoom-in-95 duration-150",
+        )}
+        style={{ top: position.top, left: position.left, width: MODIFY_POPOVER_WIDTH }}
+        onSubmit={handleModifySubmit}
+      >
+        <PencilLine className="ml-1 size-3.5 shrink-0 text-primary" />
+        <input
+          ref={inputRef}
+          value={modifyPrompt}
+          onChange={(event) => setModifyPrompt(event.target.value)}
+          placeholder="Describe change..."
+          className={cn(
+            "min-w-0 flex-1 bg-transparent px-1 py-1.5 text-xs text-foreground outline-none",
+            "placeholder:text-muted-foreground",
+          )}
+        />
+        <button
+          type="button"
+          aria-label="Cancel modify"
+          onClick={hidePopover}
+          className="rounded-full p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+        >
+          <X className="size-3.5" />
+        </button>
+        <button
+          type="submit"
+          aria-label="Send modify prompt"
+          disabled={!modifyPrompt.trim()}
+          className={cn(
+            "rounded-full p-1.5 transition-colors",
+            modifyPrompt.trim()
+              ? "bg-primary text-primary-foreground hover:bg-primary/90"
+              : "text-muted-foreground opacity-50",
+          )}
+        >
+          <Send className="size-3.5" />
+        </button>
+      </form>
+    );
+  }
 
   return (
-    <button
-      ref={buttonRef}
-      type="button"
+    <div
+      ref={setPopoverNode}
+      role="toolbar"
+      aria-label="Selection actions"
       className={cn(
         "fixed z-50",
-        "flex items-center gap-1.5",
-        "rounded-lg border border-border bg-background shadow-lg",
-        "px-3 py-1.5 text-xs font-medium text-foreground",
-        "hover:bg-muted transition-colors",
+        "inline-flex items-center gap-1",
+        "rounded-full border border-border/70 bg-background/95 p-1 shadow-xl shadow-black/10 backdrop-blur-md",
         "animate-in fade-in-0 zoom-in-95 duration-150",
       )}
       style={{ top: position.top, left: position.left }}
       onMouseDown={(e) => e.preventDefault()}
-      onClick={handleAddToContext}
     >
-      <TextSelect className="size-3.5 text-primary" />
-      Add to context
-    </button>
+      <button
+        type="button"
+        className="inline-flex h-7 items-center gap-1.5 rounded-full px-2.5 text-xs font-medium text-foreground transition-colors hover:bg-muted"
+        onClick={handleAddToContext}
+      >
+        <TextSelect className="size-3.5 text-primary" />
+        Add to chat
+      </button>
+      {selectionContext.supportsModify && (
+        <button
+          type="button"
+          className="inline-flex h-7 items-center gap-1.5 rounded-full px-2.5 text-xs font-medium text-foreground transition-colors hover:bg-primary/10 hover:text-primary"
+          onClick={handleStartModify}
+        >
+          <PencilLine className="size-3.5 text-primary" />
+          Modify
+        </button>
+      )}
+    </div>
   );
 }

package/src/components/markdown-text-citations.test.tsx

@@ -0,0 +1,108 @@
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { citationStore, linkStore } from "@iloveagents/foundry-agent";
+import { injectCitations, markdownComponents } from "./markdown-text.tsx";
+
+describe("injectCitations", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+  let originalActEnvironment: boolean | undefined;
+
+  beforeEach(() => {
+    originalActEnvironment = globalThis.IS_REACT_ACT_ENVIRONMENT;
+    globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+    citationStore.getState().clear();
+    linkStore.getState().clear();
+    citationStore.getState().setResults([
+      {
+        chunk_id: "chunk-1",
+        entity_id: "entity-1",
+        entity_name: "Document One",
+        content: "One",
+        page_number: 1,
+        bounding_regions: "[]",
+        score: 1,
+      },
+      {
+        chunk_id: "chunk-2",
+        entity_id: "entity-2",
+        entity_name: "Document Two",
+        content: "Two",
+        page_number: 2,
+        bounding_regions: "[]",
+        score: 1,
+      },
+    ]);
+    citationStore.getState().setHandler({ openCitation: vi.fn() });
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+    citationStore.getState().clear();
+    linkStore.getState().clear();
+    globalThis.IS_REACT_ACT_ENVIRONMENT = originalActEnvironment;
+  });
+
+  it("turns citation markers into clickable refs inside plain and nested text", async () => {
+    await act(async () => {
+      root.render(
+        <p>
+          {injectCitations([
+            "Plain claim [1]. ",
+            <strong key="nested">Nested claim [2].</strong>,
+          ])}
+        </p>,
+      );
+    });
+
+    expect(container.querySelectorAll('[role="button"]')).toHaveLength(2);
+    expect(container.querySelector("strong sup")?.textContent).toBe("[2]");
+  });
+
+  it("turns handled raw deep links into clickable anchors", async () => {
+    const openLink = vi.fn();
+    linkStore.getState().setHandler({
+      normalizeHref: (href) => href,
+      canHandle: (href) => href.startsWith("/spaces/"),
+      openLink,
+    });
+
+    await act(async () => {
+      root.render(<p>{injectCitations("Created /spaces/entity-1#block-b1.")}</p>);
+    });
+
+    const link = container.querySelector("a");
+    expect(link?.getAttribute("href")).toBe("/spaces/entity-1#block-b1");
+    expect(link?.textContent).toBe("/spaces/entity-1#block-b1");
+
+    await act(async () => {
+      link?.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
+    });
+
+    expect(openLink).toHaveBeenCalledWith("/spaces/entity-1#block-b1");
+  });
+
+  it("renders handled inline-code deep links as links", async () => {
+    linkStore.getState().setHandler({
+      normalizeHref: (href) => href,
+      canHandle: (href) => href.startsWith("/spaces/"),
+      openLink: vi.fn(),
+    });
+    const Code = markdownComponents.code;
+
+    await act(async () => {
+      root.render(<p>{Code ? <Code>/spaces/entity-1</Code> : null}</p>);
+    });
+
+    const link = container.querySelector("a");
+    expect(link?.getAttribute("href")).toBe("/spaces/entity-1");
+    expect(link?.className).toContain("font-mono");
+  });
+});

package/src/components/markdown-text.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState, type FC } from "react";
+import { cloneElement, isValidElement, useCallback, useEffect, useState, type FC } from "react";
 import {
   MarkdownTextPrimitive,
   type SyntaxHighlighterProps,
@@ -7,11 +7,16 @@ import {
 import remarkGfm from "remark-gfm";
 import type { Components } from "react-markdown";
 import type { Highlighter } from "shiki/bundle/web";
-import { Children, type ReactNode } from "react";
+import { Children, type ReactElement, type ReactNode } from "react";
 import { Check, Copy } from "lucide-react";
 import { cn } from "@iloveagents/foundry-web-primitives";
 import { useStore } from "zustand";
-import { citationStore, type CitationResult } from "@iloveagents/foundry-agent";
+import {
+  citationStore,
+  linkStore,
+  resolveLinkHandler,
+  type CitationResult,
+} from "@iloveagents/foundry-agent";
 
 /* ---------- Shiki syntax highlighter (lazy-loaded singleton) ---------- */
 
@@ -98,11 +103,133 @@ const CopyButton: FC<{ text: string; className?: string }> = ({ text, className
 
 /* ---------- Inline code ---------- */
 
-const InlineCode = ({ children, ...props }: React.HTMLAttributes<HTMLElement>) => (
-  <code className="rounded bg-muted px-1.5 py-0.5 text-sm font-mono text-foreground" {...props}>
-    {children}
-  </code>
-);
+function textFromChildren(children: ReactNode): string | null {
+  if (typeof children === "string") return children;
+  if (typeof children === "number") return String(children);
+  if (!Array.isArray(children)) return null;
+  let out = "";
+  for (const child of children) {
+    if (typeof child === "string" || typeof child === "number") {
+      out += String(child);
+    } else {
+      return null;
+    }
+  }
+  return out;
+}
+
+function resolveHandledHref(rawHref: string): string | null {
+  return resolveLinkHandler(rawHref)?.href ?? null;
+}
+
+function openHandledHref(href: string) {
+  const resolved = resolveLinkHandler(href);
+  resolved?.handler.openLink(resolved.href);
+}
+
+const TRAILING_LINK_PUNCT_RE = /[.,;:!?)\]]+$/;
+
+function trimLinkCandidate(value: string): { href: string; suffix: string } {
+  const match = value.match(TRAILING_LINK_PUNCT_RE);
+  if (!match) return { href: value, suffix: "" };
+  return {
+    href: value.slice(0, -match[0].length),
+    suffix: match[0],
+  };
+}
+
+function exactHandledHref(value: string): string | null {
+  const trimmed = value.trim();
+  if (!trimmed || /\s/.test(trimmed)) return null;
+  const { href, suffix } = trimLinkCandidate(trimmed);
+  if (suffix) return null;
+  return resolveHandledHref(href);
+}
+
+const HANDLED_LINK_RE = /(https?:\/\/[^\s<>"`]+|\/[A-Za-z0-9][^\s<>"`]*)/g;
+
+const HandledLink: FC<
+  {
+    href: string;
+    children: ReactNode;
+    className?: string;
+  } & React.AnchorHTMLAttributes<HTMLAnchorElement>
+> = ({ href, children, className, ...props }) => {
+  const handledHref = useStore(linkStore, () => resolveHandledHref(href));
+
+  if (!handledHref) {
+    return (
+      <a
+        href={href}
+        className={cn("text-primary hover:underline", className)}
+        target="_blank"
+        rel="noopener noreferrer"
+        {...props}
+      >
+        {children}
+      </a>
+    );
+  }
+
+  return (
+    <a
+      href={handledHref}
+      className={cn("text-primary hover:underline", className)}
+      onClick={(event) => {
+        event.preventDefault();
+        openHandledHref(handledHref);
+      }}
+      {...props}
+    >
+      {children}
+    </a>
+  );
+};
+
+const AutoLinkedText: FC<{ text: string }> = ({ text }) => {
+  useStore(linkStore, (s) => s.handlers);
+
+  const parts: ReactNode[] = [];
+  let lastIndex = 0;
+  for (const match of text.matchAll(HANDLED_LINK_RE)) {
+    const raw = match[0];
+    const start = match.index ?? 0;
+    const { href, suffix } = trimLinkCandidate(raw);
+    const handledHref = resolveHandledHref(href);
+    if (!handledHref) continue;
+    if (start > lastIndex) parts.push(text.slice(lastIndex, start));
+    parts.push(
+      <HandledLink key={`${start}-${href}`} href={handledHref}>
+        {href}
+      </HandledLink>,
+    );
+    if (suffix) parts.push(suffix);
+    lastIndex = start + raw.length;
+  }
+  if (lastIndex === 0) return <>{text}</>;
+  if (lastIndex < text.length) parts.push(text.slice(lastIndex));
+  return <>{parts}</>;
+};
+
+const InlineCode = ({ children, ...props }: React.HTMLAttributes<HTMLElement>) => {
+  const value = textFromChildren(children);
+  const handledHref = useStore(linkStore, () => (value ? exactHandledHref(value) : null));
+  const className = "rounded bg-muted px-1.5 py-0.5 text-sm font-mono text-foreground";
+
+  if (handledHref) {
+    return (
+      <HandledLink href={handledHref} className={className}>
+        {children}
+      </HandledLink>
+    );
+  }
+
+  return (
+    <code className={className} {...props}>
+      {children}
+    </code>
+  );
+};
 
 /* ---------- Code block with header + highlighting (used by ReactMarkdown / tool panel) ---------- */
 
@@ -261,15 +388,9 @@ export const markdownComponents: Components = {
     </blockquote>
   ),
   a: ({ children, href, ...props }) => (
-    <a
-      href={href}
-      className="text-primary hover:underline"
-      target="_blank"
-      rel="noopener noreferrer"
-      {...props}
-    >
+    <HandledLink href={href || ""} {...props}>
       {children}
-    </a>
+    </HandledLink>
   ),
   hr: (props) => <hr className="my-6 border-border" {...props} />,
   table: ({ children, ...props }) => (
@@ -349,17 +470,25 @@ const CitationRef: FC<{ index: number }> = ({ index }) => {
  * Walk React children and replace [n] text fragments with CitationRef
  * components. Only processes string children — leaves elements untouched.
  */
-function injectCitations(children: ReactNode): ReactNode {
+export function injectCitations(children: ReactNode): ReactNode {
   return Children.map(children, (child) => {
-    if (typeof child !== "string") return child;
-    if (!CITE_RE.test(child)) return child;
-
-    const parts = child.split(CITE_RE);
-    return parts.map((part, i) => {
-      const m = /^\[(\d+)\]$/.exec(part);
-      if (m) return <CitationRef key={i} index={parseInt(m[1], 10)} />;
-      return part;
-    });
+    if (typeof child === "string") {
+      if (!CITE_RE.test(child)) return <AutoLinkedText text={child} />;
+
+      const parts = child.split(CITE_RE);
+      return parts.map((part, i) => {
+        const m = /^\[(\d+)\]$/.exec(part);
+        if (m) return <CitationRef key={i} index={parseInt(m[1], 10)} />;
+        return <AutoLinkedText key={i} text={part} />;
+      });
+    }
+
+    if (!isValidElement(child)) return child;
+
+    const element = child as ReactElement<{ children?: ReactNode }>;
+    const nested = element.props.children;
+    if (nested == null) return child;
+    return cloneElement(element, undefined, injectCitations(nested));
   });
 }
 

package/src/components/selection-popover.tsx

@@ -1,5 +1,5 @@
 /**
- * Floating "Add to context" button for text selection in the tool panel.
+ * Floating "Add to chat" button for text selection in the tool panel.
  *
  * Appears near the selected text when the user makes a selection within
  * the panel content area. Clicking adds the selection to the context store.
@@ -21,7 +21,7 @@ interface PopoverPosition {
 }
 
 const POPOVER_HEIGHT = 36;
-const POPOVER_WIDTH = 150;
+const POPOVER_WIDTH = 126;
 const OFFSET = 8;
 
 export function SelectionPopover({ containerRef }: SelectionPopoverProps) {
@@ -150,7 +150,7 @@ export function SelectionPopover({ containerRef }: SelectionPopoverProps) {
       onClick={handleAddToContext}
     >
       <TextSelect className="size-3.5 text-primary" />
-      Add to context
+      Add to chat
     </button>
   );
 }