@iloveagents/foundry-web-ui 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -0,0 +1,28 @@
+# @iloveagents/foundry-web-ui
+
+## 0.1.1
+
+### Patch Changes
+
+- 689d3e9: feat(sidebar): distinct file-drop affordance for nav containers
+
+  `useNavItemDnd` now exposes `isFileDragOver` separately from `isDragOver`
+  so consuming nav items can render a prominent file-drop visual (dashed
+  primary outline + soft primary background + Upload icon) when the user
+  is dragging native files over the container. Previously file drags
+  shared the same subtle ring as entity-move drags, so users couldn't
+  tell that a folder accepted external files. Applies to all five nav-
+  item shapes (action-row leaf, button leaf, `NestedFolderItem`,
+  `CollapsibleNavItem` with children/actions, `NavLink` fallthrough) and
+  updates `ContainerDropZone` for visual parity.
+
+  Also fixes a related regression: the capture-phase
+  `onDragEnterCapture` / `onDragOverCapture` handlers were calling
+  `e.stopPropagation()`, which short-circuits React's synthetic dispatch
+  and prevented the bubble-phase `onDragEnter` (where state actually
+  mutates) from running. Removed — `preventDefault()` alone is enough to
+  mark the element as droppable.
+
+- Updated dependencies [689d3e9]
+  - @iloveagents/foundry-agent@0.1.1
+  - @iloveagents/foundry-web-primitives@0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iloveagents/foundry-web-ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
   "types": "./src/index.ts",
@@ -23,8 +23,8 @@
     "lucide-react": ">=0.400.0",
     "@azure/msal-browser": "^5.0.0",
     "@azure/msal-react": "^5.0.0",
-    "@iloveagents/foundry-agent": "0.1.0",
-    "@iloveagents/foundry-web-primitives": "0.1.0"
+    "@iloveagents/foundry-agent": "0.1.1",
+    "@iloveagents/foundry-web-primitives": "0.1.1"
   },
   "peerDependenciesMeta": {
     "@azure/msal-browser": {

package/src/components/__tests__/context-bar.test.ts

@@ -0,0 +1,112 @@
+/**
+ * Unit tests for ``getNavigablePath`` — the function powering
+ * click-to-navigate on pinned context chips. Two shapes the framework
+ * supports: page (uses payload.path) and ref (uses sourcePage as the
+ * deep-link URL set by the source module).
+ */
+
+import { describe, expect, it } from "vitest";
+import { getNavigablePath } from "../context-bar.tsx";
+import type { ContextItem } from "../../lib/app-store.ts";
+
+function pageItem(path: string): ContextItem {
+  return {
+    id: "i-1",
+    type: "page",
+    label: "Workspace",
+    payload: { kind: "page", path, label: "Workspace" },
+    sourcePage: path,
+    persistence: "persistent",
+    createdAt: 0,
+  };
+}
+
+function refItem(refId: string, sourcePage: string): ContextItem {
+  return {
+    id: "i-2",
+    type: "ref",
+    label: "Field · cell",
+    payload: { kind: "ref", refType: "block", refId },
+    sourcePage,
+    persistence: "persistent",
+    createdAt: 0,
+  };
+}
+
+describe("getNavigablePath", () => {
+  it("returns the page payload path for page items", () => {
+    expect(getNavigablePath(pageItem("/spaces/abc"))).toBe("/spaces/abc");
+  });
+
+  it("returns the ref's sourcePage URL (incl. hash) for ref items", () => {
+    // The source module places the deep-link in sourcePage when it
+    // creates the ref; the framework surfaces it without knowing
+    // anything about the ref shape.
+    expect(
+      getNavigablePath(refItem("abc:b1", "/spaces/abc#block-b1")),
+    ).toBe("/spaces/abc#block-b1");
+  });
+
+  it("returns null when a ref has no sourcePage", () => {
+    const item = refItem("abc:b1", "");
+    expect(getNavigablePath(item)).toBeNull();
+  });
+
+  it("returns null for selection items (excerpts are not anchors)", () => {
+    const item: ContextItem = {
+      id: "i-3",
+      type: "selection",
+      label: "x",
+      payload: { kind: "text", text: "x" },
+      sourcePage: "/spaces/abc",
+      persistence: "ephemeral",
+      createdAt: 0,
+    };
+    expect(getNavigablePath(item)).toBeNull();
+  });
+
+  it("returns null for note items (use text payload — note shares it)", () => {
+    // ``ContextPayload`` is a closed union of ``text | page | ref``.
+    // Note items reuse the ``text`` payload (the ``type`` field is
+    // what distinguishes them from selections).
+    const item: ContextItem = {
+      id: "i-4",
+      type: "note",
+      label: "n",
+      payload: { kind: "text", text: "n" },
+      sourcePage: "/spaces/abc",
+      persistence: "ephemeral",
+      createdAt: 0,
+    };
+    expect(getNavigablePath(item)).toBeNull();
+  });
+
+  it("returns null for ref items whose sourcePage isn't a route-like path", () => {
+    // Some callers populate ``sourcePage`` with a free-form
+    // breadcrumb label rather than a URL. Guard against navigate()
+    // pushing a relative/invalid route.
+    const item: ContextItem = {
+      id: "i-5",
+      type: "ref",
+      label: "Field · x",
+      payload: { kind: "ref", refType: "block", refId: "abc:b1" },
+      sourcePage: "Workspace breadcrumb",
+      persistence: "persistent",
+      createdAt: 0,
+    };
+    expect(getNavigablePath(item)).toBeNull();
+  });
+
+  it("accepts hash-only sourcePages (same-page deep-link)", () => {
+    const item: ContextItem = {
+      id: "i-6",
+      type: "ref",
+      label: "Field · x",
+      payload: { kind: "ref", refType: "block", refId: "abc:b1" },
+      sourcePage: "#block-b1",
+      persistence: "persistent",
+      createdAt: 0,
+    };
+    expect(getNavigablePath(item)).toBe("#block-b1");
+  });
+});

package/src/components/assistant-chat.tsx

@@ -8,6 +8,7 @@ import {
   ErrorPrimitive,
   useAuiState,
   useComposerRuntime,
+  useThreadViewport,
 } from "@assistant-ui/react";
 import {
   ArrowUp,
@@ -31,6 +32,7 @@ import { TooltipIconButton } from "./tooltip-icon-button.tsx";
 import { userAttachmentComponents, composerAttachmentComponents } from "./chat-attachments.tsx";
 import { SentContextBadges, ComposerContextBadges } from "./context-badges.tsx";
 import { ContextPins } from "./context-bar.tsx";
+import { ComposerSubmitBridge } from "./composer-submit-bridge.tsx";
 import { useChatBubbleStore } from "../lib/chat-bubble-store.ts";
 import { MarkdownText } from "./markdown-text.tsx";
 import { ToolFallback } from "./tool-fallback.tsx";
@@ -106,7 +108,9 @@ const AssistantMessage: FC = () => (
       <MessageError />
 
       <div className="flex items-center gap-2 mt-1">
-        <AssistantActionBar />
+        <div className="flex h-8 w-[4.25rem] items-center">
+          <AssistantActionBar />
+        </div>
         <BranchPicker />
       </div>
     </div>
@@ -114,7 +118,14 @@ const AssistantMessage: FC = () => (
 );
 
 const AssistantActionBar: FC = () => (
-  <ActionBarPrimitive.Root hideWhenRunning className="flex items-center gap-1 -ml-2">
+  <ActionBarPrimitive.Root
+    hideWhenRunning
+    className={cn(
+      "pointer-events-none flex items-center gap-1 -ml-2 opacity-0 transition-opacity",
+      "group-hover:pointer-events-auto group-hover:opacity-100",
+      "group-focus-within:pointer-events-auto group-focus-within:opacity-100",
+    )}
+  >
     <ActionBarPrimitive.Copy asChild>
       <TooltipIconButton tooltip="Copy" size="icon">
         <MessagePrimitive.If copied={false}>
@@ -219,17 +230,23 @@ const STARTER_SUGGESTIONS = [
   "Draft a concise release note from bullet points",
 ];
 
-const ScrollToBottomButton: FC = () => (
-  <ThreadPrimitive.ScrollToBottom asChild>
+const ScrollToBottomButton: FC = () => {
+  const isAtBottom = useThreadViewport((s) => s.isAtBottom);
+  const scrollToBottom = useThreadViewport((s) => s.scrollToBottom);
+
+  if (isAtBottom) return null;
+
+  return (
     <Button
       variant="outline"
       size="icon"
       className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 rounded-full shadow-md"
+      onClick={() => scrollToBottom({ behavior: "smooth" })}
     >
       <ChevronDown className="size-4" />
     </Button>
-  </ThreadPrimitive.ScrollToBottom>
-);
+  );
+};
 
 const DropZone: FC<{ children: React.ReactNode }> = ({ children }) => {
   const [isDragging, setIsDragging] = useState(false);
@@ -366,8 +383,10 @@ export function ChatContent() {
                 </ThreadPrimitive.If>
               </div>
             </ThreadPrimitive.If>
+            <ThreadPrimitive.If empty={false}>
+              <ScrollToBottomButton />
+            </ThreadPrimitive.If>
           </ThreadPrimitive.Viewport>
-          <ScrollToBottomButton />
         </div>
 
         <div className="shrink-0 bg-background">
@@ -389,6 +408,7 @@ export function ChatContent() {
                 "transition-all duration-300",
               )}
             >
+              <ComposerSubmitBridge />
               <ComposerContextBadges />
               <ComposerPrimitive.Attachments components={composerAttachmentComponents} />
               <div className="flex items-center gap-2">

package/src/components/chat-bubble.tsx

@@ -4,6 +4,8 @@ import {
   ComposerPrimitive,
   MessagePrimitive,
   ActionBarPrimitive,
+  useAuiState,
+  useThreadViewport,
 } from "@assistant-ui/react";
 import {
   MessageSquare,
@@ -20,7 +22,8 @@ import { cn } from "@iloveagents/foundry-web-primitives";
 import { Button } from "@iloveagents/foundry-web-primitives";
 import { TooltipIconButton } from "./tooltip-icon-button.tsx";
 import { ContextPins } from "./context-bar.tsx";
-import { ComposerContextBadges } from "./context-badges.tsx";
+import { ComposerContextBadges, SentContextBadges } from "./context-badges.tsx";
+import { ComposerSubmitBridge } from "./composer-submit-bridge.tsx";
 import { MarkdownText } from "./markdown-text.tsx";
 import { LoadingIndicator } from "./loading-indicator.tsx";
 import { useAppStore } from "../lib/app-store.ts";
@@ -39,8 +42,15 @@ function BubbleAssistantMessage() {
           }}
         />
       </div>
-      <div className="flex items-center gap-1 mt-1">
-        <ActionBarPrimitive.Root hideWhenRunning className="flex items-center gap-1">
+      <div className="flex h-7 w-8 items-center mt-1">
+        <ActionBarPrimitive.Root
+          hideWhenRunning
+          className={cn(
+            "pointer-events-none flex items-center gap-1 opacity-0 transition-opacity",
+            "group-hover:pointer-events-auto group-hover:opacity-100",
+            "group-focus-within:pointer-events-auto group-focus-within:opacity-100",
+          )}
+        >
           <ActionBarPrimitive.Copy asChild>
             <TooltipIconButton tooltip="Copy" size="icon" className="size-7">
               <MessagePrimitive.If copied={false}>
@@ -58,9 +68,12 @@ function BubbleAssistantMessage() {
 }
 
 function BubbleUserMessage() {
+  const messageId = useAuiState((s) => s.message.id);
+
   return (
     <MessagePrimitive.Root className="w-full mb-2">
-      <div className="flex justify-end">
+      <div className="flex flex-col items-end gap-1">
+        <SentContextBadges messageId={messageId} />
         <div className="max-w-[85%] bg-muted rounded-2xl px-3 py-2 text-sm text-foreground">
           <MessagePrimitive.Content />
         </div>
@@ -69,6 +82,24 @@ function BubbleUserMessage() {
   );
 }
 
+function BubbleScrollToBottomButton() {
+  const isAtBottom = useThreadViewport((s) => s.isAtBottom);
+  const scrollToBottom = useThreadViewport((s) => s.scrollToBottom);
+
+  if (isAtBottom) return null;
+
+  return (
+    <Button
+      variant="outline"
+      size="icon"
+      className="absolute bottom-2 left-1/2 -translate-x-1/2 z-10 rounded-full shadow-md size-7"
+      onClick={() => scrollToBottom({ behavior: "smooth" })}
+    >
+      <ChevronDown className="size-3" />
+    </Button>
+  );
+}
+
 export function ChatBubble() {
   const isOpen = useChatBubbleStore((s) => s.isOpen);
   const isExpanded = useChatBubbleStore((s) => s.isExpanded);
@@ -252,19 +283,11 @@ export function ChatBubble() {
                     </ThreadPrimitive.If>
                   </div>
                 </ThreadPrimitive.If>
-              </ThreadPrimitive.Viewport>
 
-              <ThreadPrimitive.If empty={false}>
-                <ThreadPrimitive.ScrollToBottom asChild>
-                  <Button
-                    variant="outline"
-                    size="icon"
-                    className="absolute bottom-2 left-1/2 -translate-x-1/2 z-10 rounded-full shadow-md size-7"
-                  >
-                    <ChevronDown className="size-3" />
-                  </Button>
-                </ThreadPrimitive.ScrollToBottom>
-              </ThreadPrimitive.If>
+                <ThreadPrimitive.If empty={false}>
+                  <BubbleScrollToBottomButton />
+                </ThreadPrimitive.If>
+              </ThreadPrimitive.Viewport>
             </div>
 
             {/* Composer — same pattern as full chat: clip + pin + input + send */}
@@ -279,6 +302,7 @@ export function ChatBubble() {
                   "transition-all duration-200",
                 )}
               >
+                <ComposerSubmitBridge />
                 <ComposerContextBadges />
                 <div className="flex items-center gap-2">
                   <div className="flex items-center -space-x-1 shrink-0">

package/src/components/composer-submit-bridge.tsx

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+import { useComposerRuntime } from "@assistant-ui/react";
+import { useComposerSubmitStore } from "../lib/composer-submit-store.ts";
+
+export function ComposerSubmitBridge() {
+  const composerRuntime = useComposerRuntime();
+  const pending = useComposerSubmitStore((s) => s.pending);
+
+  useEffect(() => {
+    if (!pending) return;
+
+    composerRuntime.setText(pending.text);
+    composerRuntime.send({ startRun: true });
+    useComposerSubmitStore.getState().consume(pending.id);
+  }, [composerRuntime, pending]);
+
+  return null;
+}
+

package/src/components/context-badges.tsx

@@ -78,19 +78,31 @@ const ComposerBadge: FC<{ item: ContextItem }> = ({ item }) => {
   );
 };
 
-/** Read-only badge on a sent user message (no remove button, compact). */
-const SentBadge: FC<{ item: ContextItem }> = ({ item }) => (
-  <div
-    className={cn(
-      "inline-flex items-center gap-1 max-w-60",
-      "rounded-md border border-primary/20 bg-primary/5",
-      "px-2 py-1",
-    )}
-  >
-    <ContextIcon type={item.type} className="size-3 text-primary shrink-0" />
-    <span className="text-[11px] leading-tight text-foreground truncate">{item.label}</span>
-  </div>
-);
+/** Read-only badge on a sent user message. Mirrors composer context chips. */
+const SentBadge: FC<{ item: ContextItem }> = ({ item }) => {
+  const isEphemeral = item.persistence === "ephemeral";
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <div
+          className={cn(
+            "inline-flex items-center gap-1.5 max-w-70",
+            "rounded-lg bg-primary/5",
+            "px-2 py-1",
+            isEphemeral ? "border border-dashed border-primary/40" : "border border-primary/20",
+          )}
+        >
+          <ContextIcon type={item.type} className="size-3 text-primary shrink-0" />
+          <span className="text-[11px] leading-tight text-foreground truncate">{item.label}</span>
+        </div>
+      </TooltipTrigger>
+      <TooltipContent side="top" className="whitespace-pre-line">
+        {getBadgeTooltip(item)}
+      </TooltipContent>
+    </Tooltip>
+  );
+};
 
 /** Renders ephemeral context badges in the composer (persistent items shown in ContextPins). */
 export const ComposerContextBadges: FC = () => {

package/src/components/context-bar.tsx

@@ -37,9 +37,45 @@ interface ContextPinsProps {
   flyoutDirection?: "up" | "down";
 }
 
-/** Get navigable path from a context item (page items only). */
-function getNavigablePath(item: ContextItem): string | null {
+/** Resolve the URL a context item navigates to when clicked.
+ *
+ * Two shapes the framework knows about:
+ *
+ * 1. **Page** (``type: "page"``) — the canonical case the OSS shell
+ *    creates for "Pin this page". The payload's ``path`` IS the
+ *    navigation target.
+ * 2. **Ref** (``type: "ref"``) — created by feature modules when the
+ *    user pins a structured reference (Spaces blocks, code symbols,
+ *    DB rows, …). The framework stays agnostic about the ref shape;
+ *    the source module places the canonical deep-link URL — including
+ *    any anchor hash — in the chip's ``sourcePage`` field, which is
+ *    already the conventional "where the user pinned from" breadcrumb.
+ *    Surfacing it here makes every feature module's ref chips clickable
+ *    without an extension-point registry, and without the framework
+ *    knowing module-specific URL shapes.
+ *
+ * Other item types (``selection``, ``note``) intentionally stay
+ * non-clickable — they are excerpts / annotations, not anchors.
+ *
+ * @internal Exported for unit tests; not part of the public API.
+ */
+export function getNavigablePath(item: ContextItem): string | null {
   if (item.type === "page" && item.payload.kind === "page") return item.payload.path;
+  if (
+    item.type === "ref" &&
+    item.payload.kind === "ref" &&
+    typeof item.sourcePage === "string" &&
+    // Guard: ``sourcePage`` is also used as a free-form breadcrumb
+    // label by some callers (e.g. "page-label" instead of "/page").
+    // Treat it as a navigation target only when it looks like an
+    // in-app path. Hash-only links (``#anchor``) are also valid —
+    // they keep the user on the current entity but scroll to the
+    // pinned atom (e.g. Spaces ``#block-{id}`` deep-link from the
+    // current page).
+    (item.sourcePage.startsWith("/") || item.sourcePage.startsWith("#"))
+  ) {
+    return item.sourcePage;
+  }
   return null;
 }