@iloveagents/foundry-web-ui 0.1.0

package/src/components/chat-bubble.tsx

@@ -0,0 +1,339 @@
+import { useRef, useState } from "react";
+import {
+  ThreadPrimitive,
+  ComposerPrimitive,
+  MessagePrimitive,
+  ActionBarPrimitive,
+} from "@assistant-ui/react";
+import {
+  MessageSquare,
+  X,
+  Maximize2,
+  ArrowUp,
+  Square,
+  ChevronDown,
+  Copy,
+  Check,
+  Paperclip,
+} from "lucide-react";
+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 { MarkdownText } from "./markdown-text.tsx";
+import { LoadingIndicator } from "./loading-indicator.tsx";
+import { useAppStore } from "../lib/app-store.ts";
+import { useChatBubbleStore } from "../lib/chat-bubble-store.ts";
+import { RAIL_WIDTH, useSidebarStore } from "../lib/sidebar-store.ts";
+
+const CHAT_BUBBLE_INSET = 8;
+
+function BubbleAssistantMessage() {
+  return (
+    <MessagePrimitive.Root className="w-full mb-2 group">
+      <div className="text-foreground text-sm leading-relaxed flex flex-col gap-2">
+        <MessagePrimitive.Parts
+          components={{
+            Text: MarkdownText,
+          }}
+        />
+      </div>
+      <div className="flex items-center gap-1 mt-1">
+        <ActionBarPrimitive.Root hideWhenRunning className="flex items-center gap-1">
+          <ActionBarPrimitive.Copy asChild>
+            <TooltipIconButton tooltip="Copy" size="icon" className="size-7">
+              <MessagePrimitive.If copied={false}>
+                <Copy className="size-3" />
+              </MessagePrimitive.If>
+              <MessagePrimitive.If copied>
+                <Check className="size-3 text-primary" />
+              </MessagePrimitive.If>
+            </TooltipIconButton>
+          </ActionBarPrimitive.Copy>
+        </ActionBarPrimitive.Root>
+      </div>
+    </MessagePrimitive.Root>
+  );
+}
+
+function BubbleUserMessage() {
+  return (
+    <MessagePrimitive.Root className="w-full mb-2">
+      <div className="flex justify-end">
+        <div className="max-w-[85%] bg-muted rounded-2xl px-3 py-2 text-sm text-foreground">
+          <MessagePrimitive.Content />
+        </div>
+      </div>
+    </MessagePrimitive.Root>
+  );
+}
+
+export function ChatBubble() {
+  const isOpen = useChatBubbleStore((s) => s.isOpen);
+  const isExpanded = useChatBubbleStore((s) => s.isExpanded);
+  const openBubble = useChatBubbleStore((s) => s.open);
+  const closeBubble = useChatBubbleStore((s) => s.close);
+  const expandChat = useChatBubbleStore((s) => s.expand);
+  const isSidebarOpen = useSidebarStore((s) => s.isOpen);
+  const sidebarWidth = useSidebarStore((s) => s.width);
+  const pageLabel = useAppStore((s) => s.navContext.label);
+  const currentPage = useAppStore((s) => s.currentPage);
+  const threadActive = useAppStore((s) => s.threadActive);
+
+  // Draggable position: null = use default CSS anchored with equal left/bottom inset.
+  const [dragPos, setDragPos] = useState<{ x: number; y: number } | null>(null);
+  const dragStart = useRef<{ mx: number; my: number; px: number; py: number } | null>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  // Close and reset drag position so it reopens at the default spot
+  const handleClose = () => {
+    setDragPos(null);
+    closeBubble();
+  };
+
+  const onHeaderPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
+    // Don't start drag when clicking header buttons
+    if ((e.target as HTMLElement).closest("button")) return;
+    const panel = panelRef.current;
+    if (!panel) return;
+    e.preventDefault();
+    const rect = panel.getBoundingClientRect();
+    dragStart.current = { mx: e.clientX, my: e.clientY, px: rect.left, py: rect.top };
+    // Capture the initial position so first pointer-move works correctly
+    setDragPos({ x: rect.left, y: rect.top });
+    e.currentTarget.setPointerCapture(e.pointerId);
+  };
+
+  const onHeaderPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (!dragStart.current) return;
+    const panel = panelRef.current;
+    const panelW = panel?.offsetWidth ?? 380;
+    const panelH = panel?.offsetHeight ?? 600;
+    const dx = e.clientX - dragStart.current.mx;
+    const dy = e.clientY - dragStart.current.my;
+    // Clamp within viewport so the panel can't be dragged fully off-screen
+    const x = Math.max(0, Math.min(window.innerWidth - panelW, dragStart.current.px + dx));
+    const y = Math.max(0, Math.min(window.innerHeight - panelH, dragStart.current.py + dy));
+    setDragPos({ x, y });
+  };
+
+  const onHeaderPointerUp = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (!dragStart.current) return;
+    dragStart.current = null;
+    e.currentTarget.releasePointerCapture(e.pointerId);
+  };
+
+  const onHeaderLostPointerCapture = () => {
+    dragStart.current = null;
+  };
+
+  // Hide bubble on chat page (already full-screen) and in expanded mode
+  if (currentPage === "/" || isExpanded) return null;
+
+  return (
+    <>
+      {!isOpen && (
+        <div
+          aria-hidden="true"
+          className={cn(
+            "pointer-events-none fixed bottom-0 left-0 z-40 hidden md:block",
+            "border-r border-sidebar-border",
+            "bg-gradient-to-b from-sidebar/0 via-sidebar/88 to-sidebar/96",
+            "supports-[backdrop-filter]:backdrop-blur",
+          )}
+          style={{
+            width: isSidebarOpen ? sidebarWidth : RAIL_WIDTH,
+            height: 64,
+          }}
+        />
+      )}
+
+      {/* Trigger button — bottom-left corner */}
+      {!isOpen && (
+        <button
+          type="button"
+          onClick={openBubble}
+          className={cn(
+            "fixed bottom-4 z-50",
+            "size-10 rounded-full",
+            "bg-primary text-primary-foreground shadow-lg",
+            "flex items-center justify-center",
+            "hover:bg-primary/90 transition-all duration-200",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          )}
+          style={{ left: CHAT_BUBBLE_INSET, bottom: CHAT_BUBBLE_INSET }}
+          aria-label="Open chat"
+        >
+          <MessageSquare className="size-4" />
+        </button>
+      )}
+
+      {/* Chat panel — draggable, anchored bottom-left by default */}
+      {isOpen && (
+        <div
+          ref={panelRef}
+          className={cn(
+            "fixed z-50",
+            "rounded-2xl border border-border",
+            "bg-background shadow-2xl",
+            "flex flex-col overflow-hidden",
+            "w-95 h-150",
+          )}
+          style={
+            dragPos
+              ? { left: dragPos.x, top: dragPos.y }
+              : { left: CHAT_BUBBLE_INSET, bottom: CHAT_BUBBLE_INSET }
+          }
+        >
+          {/* Header — drag handle */}
+          <div
+            className={cn(
+              "flex items-center justify-between px-4 py-2.5 border-b border-border shrink-0",
+              "cursor-grab active:cursor-grabbing select-none",
+            )}
+            style={{ touchAction: "none" }}
+            onPointerDown={onHeaderPointerDown}
+            onPointerMove={onHeaderPointerMove}
+            onPointerUp={onHeaderPointerUp}
+            onLostPointerCapture={onHeaderLostPointerCapture}
+          >
+            <div className="flex flex-col min-w-0">
+              <div className="flex items-center gap-1.5 text-sm">
+                <MessageSquare className="size-3.5 text-primary shrink-0" />
+                <span className="font-semibold text-foreground truncate">{pageLabel}</span>
+              </div>
+              <span className="text-xs text-muted-foreground">
+                {threadActive ? "Active thread" : "New conversation"}
+              </span>
+            </div>
+            <div className="flex items-center gap-0.5">
+              <TooltipIconButton
+                tooltip="Expand chat"
+                size="icon"
+                className="size-7"
+                onClick={expandChat}
+              >
+                <Maximize2 className="size-3.5" />
+              </TooltipIconButton>
+              <TooltipIconButton
+                tooltip="Close"
+                size="icon"
+                className="size-7"
+                onClick={handleClose}
+              >
+                <X className="size-4" />
+              </TooltipIconButton>
+            </div>
+          </div>
+
+          {/* Thread */}
+          <ThreadPrimitive.Root className="flex flex-col flex-1 overflow-hidden">
+            <div className="relative flex-1 overflow-hidden">
+              <ThreadPrimitive.Viewport className="absolute inset-0 overflow-y-auto">
+                <ThreadPrimitive.Empty>
+                  <div className="flex h-full items-center justify-center p-4">
+                    <p className="text-sm text-muted-foreground text-center">
+                      Ask the agent about this page
+                    </p>
+                  </div>
+                </ThreadPrimitive.Empty>
+
+                <ThreadPrimitive.If empty={false}>
+                  <div className="px-4 pt-4">
+                    <ThreadPrimitive.Messages
+                      components={{
+                        UserMessage: BubbleUserMessage,
+                        AssistantMessage: BubbleAssistantMessage,
+                      }}
+                    />
+                    <ThreadPrimitive.If running>
+                      <LoadingIndicator />
+                    </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>
+            </div>
+
+            {/* Composer — same pattern as full chat: clip + pin + input + send */}
+            <div className="shrink-0 border-t border-border px-3 py-3">
+              <ComposerPrimitive.Root
+                className={cn(
+                  "flex flex-col gap-1",
+                  "rounded-2xl border border-input",
+                  "bg-background shadow-sm",
+                  "px-3 py-2",
+                  "focus-within:border-primary/50",
+                  "transition-all duration-200",
+                )}
+              >
+                <ComposerContextBadges />
+                <div className="flex items-center gap-2">
+                  <div className="flex items-center -space-x-1 shrink-0">
+                    <ComposerPrimitive.AddAttachment asChild>
+                      <TooltipIconButton
+                        tooltip="Attach file"
+                        size="icon"
+                        className="size-7 shrink-0"
+                      >
+                        <Paperclip className="size-3.5" />
+                      </TooltipIconButton>
+                    </ComposerPrimitive.AddAttachment>
+                    <ContextPins compact showPinButton />
+                  </div>
+                  <ComposerPrimitive.Input
+                    autoFocus
+                    placeholder="Message..."
+                    rows={1}
+                    className={cn(
+                      "flex-1 bg-transparent",
+                      "py-1 text-sm",
+                      "text-foreground outline-none",
+                      "placeholder:text-muted-foreground",
+                      "resize-none max-h-20",
+                    )}
+                  />
+                  <ThreadPrimitive.If running>
+                    <ComposerPrimitive.Cancel asChild>
+                      <Button
+                        variant="secondary"
+                        size="icon"
+                        className="rounded-full size-8 shrink-0"
+                        aria-label="Stop"
+                      >
+                        <Square className="size-3" />
+                      </Button>
+                    </ComposerPrimitive.Cancel>
+                  </ThreadPrimitive.If>
+                  <ThreadPrimitive.If running={false}>
+                    <ComposerPrimitive.Send asChild>
+                      <Button
+                        size="icon"
+                        className="rounded-full size-8 shrink-0"
+                        aria-label="Send"
+                      >
+                        <ArrowUp className="size-4" />
+                      </Button>
+                    </ComposerPrimitive.Send>
+                  </ThreadPrimitive.If>
+                </div>
+              </ComposerPrimitive.Root>
+            </div>
+          </ThreadPrimitive.Root>
+        </div>
+      )}
+    </>
+  );
+}

package/src/components/chat-header.tsx

@@ -0,0 +1,44 @@
+import { type FC } from "react";
+import { Link } from "react-router";
+import { SquarePen, Menu } from "lucide-react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+import { AppBrand } from "./app-brand.tsx";
+import { TooltipIconButton } from "./tooltip-icon-button.tsx";
+import { ThemeToggle } from "./theme-toggle.tsx";
+import { UserMenu } from "./user-menu.tsx";
+import { useSidebarStore } from "../lib/sidebar-store.ts";
+import { useNewConversation } from "../lib/use-new-conversation.ts";
+
+export const ChatHeader: FC = () => {
+  const handleNewConversation = useNewConversation();
+  const toggleMobile = useSidebarStore((s) => s.toggleMobile);
+  const isSidebarOpen = useSidebarStore((s) => s.isOpen);
+
+  return (
+    <div className={cn("shrink-0", "bg-background border-b border-border")}>
+      <div className="px-4 py-3 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <TooltipIconButton tooltip="Open sidebar" onClick={toggleMobile} className="md:hidden">
+            <Menu className="size-5" />
+          </TooltipIconButton>
+          <Link
+            to="/"
+            className={cn(
+              "flex items-center gap-2.5 hover:opacity-80 transition-opacity",
+              isSidebarOpen && "md:hidden",
+            )}
+          >
+            <AppBrand labelClassName="text-sm font-semibold text-foreground" />
+          </Link>
+        </div>
+        <div className="flex items-center gap-1">
+          <ThemeToggle />
+          <TooltipIconButton tooltip="New Thread" size="icon" onClick={handleNewConversation}>
+            <SquarePen className="size-4 text-primary" />
+          </TooltipIconButton>
+          <UserMenu />
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/client-tool-executor.tsx

@@ -0,0 +1,230 @@
+/**
+ * Client Tool Executor — registers custom UIs for client-side tools.
+ *
+ * Tool execution happens in the AGUIRunner (client-side tools intercepted at
+ * `tool-call-end`). This component only registers the UI rendering and
+ * injects the navigate function (which requires React Router context).
+ *
+ * Modern assistant-ui v0.12 pattern: each tool UI is a top-level
+ * `makeAssistantToolUI(...)` component. We mount them as children of
+ * `<ClientToolExecutor>` inside the AssistantRuntimeProvider tree.
+ */
+
+import { makeAssistantToolUI } from "@assistant-ui/react";
+import { useNavigate } from "react-router";
+import { useEffect } from "react";
+import { setNavigateFunction } from "../lib/client-tools.ts";
+import { useToolPanelStore } from "../lib/tool-panel-store.ts";
+import { ConfirmationCard } from "./confirmation-card.tsx";
+import { ToolCallCard } from "./tool-call-card.tsx";
+import {
+  Navigation,
+  Palette,
+  PanelRight,
+  MousePointerClick,
+  PenLine,
+  Highlighter,
+  ShieldCheck,
+  Info,
+} from "lucide-react";
+
+const NavigateUI = makeAssistantToolUI<{ path: string }, { status: string }>({
+  toolName: "ui_navigate",
+  render: ({ args, result, status }) => {
+    const navigate = useNavigate();
+    return (
+      <ToolCallCard
+        icon={<Navigation className="size-3.5" />}
+        title="Navigate"
+        description={
+          status.type === "running"
+            ? "Navigating..."
+            : result?.status === "success"
+              ? `Navigated to ${args?.path}`
+              : "Navigation failed"
+        }
+        status={status}
+        action={
+          status.type === "complete" && args?.path
+            ? { label: "Go to page", onClick: () => navigate(args.path) }
+            : undefined
+        }
+        className="w-full"
+      />
+    );
+  },
+});
+
+const SetThemeUI = makeAssistantToolUI<{ mode: string }, { status: string }>({
+  toolName: "ui_set_theme",
+  render: ({ args, result, status }) => (
+    <ToolCallCard
+      icon={<Palette className="size-3.5" />}
+      title="Set Theme"
+      description={
+        status.type === "running"
+          ? "Changing theme..."
+          : result?.status === "success"
+            ? `Theme set to ${args?.mode}`
+            : "Theme change failed"
+      }
+      status={status}
+      className="w-full"
+    />
+  ),
+});
+
+const OpenPanelUI = makeAssistantToolUI<
+  { title: string; path?: string; content?: string; type?: string },
+  { status: string }
+>({
+  toolName: "ui_open_panel",
+  render: ({ args, result, status }) => {
+    const handleReopen = () => {
+      if (args?.path) {
+        useToolPanelStore.getState().openPanel({
+          title: args.title,
+          content: args.path,
+          type: "page",
+        });
+      } else if (args?.content) {
+        useToolPanelStore.getState().openPanel({
+          title: args.title,
+          content: args.content,
+          type: (args.type as "markdown" | "text" | "page" | "pdf") || "markdown",
+        });
+      }
+    };
+
+    return (
+      <ToolCallCard
+        icon={<PanelRight className="size-3.5" />}
+        title="Open Panel"
+        description={
+          status.type === "running"
+            ? "Opening panel..."
+            : result?.status === "success"
+              ? `Panel: ${args?.title}`
+              : "Panel failed"
+        }
+        status={status}
+        action={
+          status.type === "complete" && result?.status === "success"
+            ? { label: "View", onClick: handleReopen }
+            : undefined
+        }
+        className="w-full"
+      />
+    );
+  },
+});
+
+const SelectItemUI = makeAssistantToolUI<{ itemId?: string }, unknown>({
+  toolName: "ui_select_item",
+  render: ({ args, status }) => (
+    <ToolCallCard
+      icon={<MousePointerClick className="size-3.5" />}
+      title="Select Item"
+      description={
+        status.type === "running"
+          ? "Selecting..."
+          : args?.itemId
+            ? `Selected: ${args.itemId}`
+            : "Selection cleared"
+      }
+      status={status}
+      className="w-full"
+    />
+  ),
+});
+
+const UpdateContentUI = makeAssistantToolUI<{ fields?: Record<string, unknown> }, unknown>({
+  toolName: "ui_update_content",
+  render: ({ args, status }) => {
+    const fieldNames = args?.fields ? Object.keys(args.fields).join(", ") : "";
+    return (
+      <ToolCallCard
+        icon={<PenLine className="size-3.5" />}
+        title="Update Content"
+        description={status.type === "running" ? "Updating..." : `Updated: ${fieldNames}`}
+        status={status}
+        className="w-full"
+      />
+    );
+  },
+});
+
+const HighlightUI = makeAssistantToolUI<{ entityId?: string }, unknown>({
+  toolName: "ui_highlight",
+  render: ({ args, status }) => (
+    <ToolCallCard
+      icon={<Highlighter className="size-3.5" />}
+      title="Highlight"
+      description={
+        status.type === "running" ? "Highlighting..." : `Highlighted: ${args?.entityId}`
+      }
+      status={status}
+      className="w-full"
+    />
+  ),
+});
+
+const ConfirmUI = makeAssistantToolUI<
+  { action?: string; details?: string },
+  { status?: string }
+>({
+  toolName: "ui_confirm",
+  render: ({ args, result, status }) => {
+    if (result?.status === "pending") {
+      return (
+        <ConfirmationCard
+          action={args?.action ?? "Unknown action"}
+          details={args?.details}
+          status={status}
+        />
+      );
+    }
+    return (
+      <ToolCallCard
+        icon={<ShieldCheck className="size-3.5" />}
+        title="Confirmation Required"
+        description={args?.action ?? "Confirmation requested"}
+        status={status}
+        className="w-full"
+      />
+    );
+  },
+});
+
+const GetContextUI = makeAssistantToolUI<unknown, unknown>({
+  toolName: "ui_get_context",
+  render: ({ status }) => (
+    <ToolCallCard
+      icon={<Info className="size-3.5" />}
+      title="Get Context"
+      description={status.type === "running" ? "Reading context..." : "Context loaded"}
+      status={status}
+      className="w-full"
+    />
+  ),
+});
+
+export function ClientToolExecutor() {
+  const navigate = useNavigate();
+  useEffect(() => {
+    setNavigateFunction(navigate);
+  }, [navigate]);
+
+  return (
+    <>
+      <NavigateUI />
+      <SetThemeUI />
+      <OpenPanelUI />
+      <SelectItemUI />
+      <UpdateContentUI />
+      <HighlightUI />
+      <ConfirmUI />
+      <GetContextUI />
+    </>
+  );
+}

package/src/components/collection-empty-state.tsx

@@ -0,0 +1,37 @@
+import type { ReactNode } from "react";
+import type { LucideIcon } from "lucide-react";
+import { SearchX } from "lucide-react";
+
+import { cn } from "@iloveagents/foundry-web-primitives";
+
+export function CollectionEmptyState({
+  icon: Icon = SearchX,
+  title,
+  description,
+  action,
+  className,
+}: {
+  icon?: LucideIcon | null;
+  title: string;
+  description?: string;
+  action?: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "flex min-h-[18rem] flex-col items-center justify-center rounded-[1.75rem] bg-muted/18 px-6 py-10 text-center ring-1 ring-border/35",
+        className,
+      )}
+    >
+      {Icon ? (
+        <div className="mb-4 flex size-14 items-center justify-center rounded-2xl bg-background/85 text-primary shadow-[0_8px_24px_-18px_rgb(15_23_42/0.35)]">
+          <Icon className="size-6" />
+        </div>
+      ) : null}
+      <div className="text-base font-semibold text-foreground">{title}</div>
+      {description ? <p className="mt-2 max-w-xl text-sm leading-6 text-muted-foreground">{description}</p> : null}
+      {action ? <div className="mt-5">{action}</div> : null}
+    </div>
+  );
+}