@iloveagents/foundry-web-ui 0.1.0

package/src/components/context-bar.tsx

@@ -0,0 +1,202 @@
+/**
+ * Context Pins — pin button with count badge and hover flyout.
+ *
+ * Click: toggles pin/unpin current page.
+ * Hover (when pins exist): shows flyout to view, navigate, and remove pins.
+ */
+
+import { type FC, useState, useRef, useEffect, createElement } from "react";
+import { useNavigate } from "react-router";
+import {
+  X,
+  Pin,
+  PinOff,
+  TextSelect,
+  FileText,
+  Link2,
+  StickyNote,
+  type LucideIcon,
+} from "lucide-react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+import { TooltipIconButton } from "./tooltip-icon-button.tsx";
+import { useAppStore, type ContextItem, type ContextItemType } from "../lib/app-store.ts";
+
+const CONTEXT_ICONS: Record<ContextItemType, LucideIcon> = {
+  selection: TextSelect,
+  page: FileText,
+  ref: Link2,
+  note: StickyNote,
+};
+
+interface ContextPinsProps {
+  /** Show the pin button to add current page */
+  showPinButton?: boolean;
+  /** Compact mode for small containers (mini chat bubble header) */
+  compact?: boolean;
+  /** Direction flyout opens: up (composer) or down (header) */
+  flyoutDirection?: "up" | "down";
+}
+
+/** Get navigable path from a context item (page items only). */
+function getNavigablePath(item: ContextItem): string | null {
+  if (item.type === "page" && item.payload.kind === "page") return item.payload.path;
+  return null;
+}
+
+export const ContextPins: FC<ContextPinsProps> = ({
+  showPinButton = true,
+  compact = false,
+  flyoutDirection = "up",
+}) => {
+  const items = useAppStore((s) => s.contextItems);
+  const removeItem = useAppStore((s) => s.removeContextItem);
+  const addContextItem = useAppStore((s) => s.addContextItem);
+  const currentPage = useAppStore((s) => s.currentPage);
+  const pageLabel = useAppStore((s) => s.navContext.label);
+  const navMeta = useAppStore((s) => s.navContext.meta);
+  const navigate = useNavigate();
+  const [flyoutOpen, setFlyoutOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const hoverTimeout = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  const pinned = items.filter((i) => i.persistence === "persistent");
+
+  // Check if current page is already pinned
+  const isCurrentPagePinned = pinned.some(
+    (i) => i.type === "page" && i.payload.kind === "page" && i.payload.path === currentPage,
+  );
+
+  // Find the pin item for current page (to unpin)
+  const currentPagePin = pinned.find(
+    (i) => i.type === "page" && i.payload.kind === "page" && i.payload.path === currentPage,
+  );
+
+  // Close flyout on outside click
+  useEffect(() => {
+    if (!flyoutOpen) return;
+    const handleClick = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setFlyoutOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [flyoutOpen]);
+
+  const handleTogglePin = () => {
+    if (isCurrentPagePinned && currentPagePin) {
+      removeItem(currentPagePin.id);
+    } else {
+      addContextItem({
+        type: "page",
+        label: pageLabel,
+        payload: { kind: "page", path: currentPage, label: pageLabel, meta: navMeta },
+        sourcePage: currentPage,
+        persistence: "persistent",
+      });
+    }
+  };
+
+  const handleMouseEnter = () => {
+    clearTimeout(hoverTimeout.current);
+    if (pinned.length > 0) setFlyoutOpen(true);
+  };
+
+  const handleMouseLeave = () => {
+    hoverTimeout.current = setTimeout(() => setFlyoutOpen(false), 200);
+  };
+
+  if (pinned.length === 0 && !showPinButton) return null;
+
+  return (
+    <div
+      className="relative"
+      ref={containerRef}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <TooltipIconButton
+        tooltip={isCurrentPagePinned ? "Unpin this page" : "Pin this page"}
+        size="icon"
+        className={cn(
+          "shrink-0 relative",
+          compact ? "size-7" : "size-8",
+          isCurrentPagePinned && "text-primary",
+        )}
+        onClick={handleTogglePin}
+      >
+        {isCurrentPagePinned ? (
+          <PinOff className={compact ? "size-3.5" : "size-4"} />
+        ) : (
+          <Pin className={compact ? "size-3.5" : "size-4"} />
+        )}
+        {pinned.length > 0 && (
+          <span
+            className={cn(
+              "absolute rounded-full bg-primary font-medium text-primary-foreground flex items-center justify-center",
+              compact
+                ? "-top-0.5 -right-0.5 size-3.5 text-[9px]"
+                : "top-0 right-0 size-3.5 text-[9px]",
+            )}
+          >
+            {pinned.length}
+          </span>
+        )}
+      </TooltipIconButton>
+
+      {/* Hover flyout */}
+      {flyoutOpen && pinned.length > 0 && (
+        <div
+          className={cn(
+            "absolute z-50 w-64 rounded-lg border border-border bg-background shadow-xl p-2 space-y-1",
+            flyoutDirection === "up" ? "bottom-full mb-2 left-0" : "top-9 right-0",
+          )}
+        >
+          <div className="px-1 pb-1 border-b border-border/50">
+            <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wide">
+              Pinned Context
+            </span>
+          </div>
+          {pinned.map((item) => {
+            const navPath = getNavigablePath(item);
+            return (
+              <div
+                key={item.id}
+                className="flex items-center gap-1.5 px-1 py-1 rounded hover:bg-muted group/pin"
+              >
+                {createElement(CONTEXT_ICONS[item.type] ?? TextSelect, {
+                  className: "size-3 text-primary shrink-0",
+                })}
+                {navPath ? (
+                  <button
+                    type="button"
+                    onClick={() => {
+                      navigate(navPath);
+                      setFlyoutOpen(false);
+                    }}
+                    className="text-xs text-foreground truncate flex-1 text-left hover:underline"
+                  >
+                    {item.label}
+                  </button>
+                ) : (
+                  <span className="text-xs text-foreground truncate flex-1">{item.label}</span>
+                )}
+                <button
+                  type="button"
+                  onClick={() => removeItem(item.id)}
+                  className={cn(
+                    "p-0.5 rounded hover:bg-primary/10 transition-opacity shrink-0",
+                    "opacity-0 group-hover/pin:opacity-100",
+                  )}
+                  aria-label={`Remove ${item.label}`}
+                >
+                  <X className="size-3 text-muted-foreground" />
+                </button>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/form-dialog.tsx

@@ -0,0 +1,56 @@
+import type { ReactNode } from "react";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../ui/dialog.tsx";
+import { cn } from "@iloveagents/foundry-web-primitives";
+
+export function FormDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  footer,
+  contentClassName,
+  bodyClassName,
+  size = "md",
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: ReactNode;
+  description?: ReactNode;
+  children?: ReactNode;
+  footer?: ReactNode;
+  contentClassName?: string;
+  bodyClassName?: string;
+  size?: "sm" | "md" | "lg" | "xl" | "2xl";
+}) {
+  const sizeClassName = {
+    sm: "max-w-sm",
+    md: "max-w-lg",
+    lg: "max-w-xl",
+    xl: "max-w-2xl",
+    "2xl": "max-w-3xl",
+  }[size];
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className={cn(sizeClassName, contentClassName)}>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription className={description ? undefined : "sr-only"}>
+            {description ?? "Complete the form below."}
+          </DialogDescription>
+        </DialogHeader>
+        {children != null ? <div className={bodyClassName}>{children}</div> : null}
+        {footer ? <DialogFooter>{footer}</DialogFooter> : null}
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,135 @@
+/**
+ * Global "Add to context" popover 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 { cn } from "@iloveagents/foundry-web-primitives";
+import { useAppStore } from "../lib/app-store.ts";
+
+const POPOVER_HEIGHT = 36;
+const POPOVER_WIDTH = 150;
+const OFFSET = 8;
+
+/** Elements where selection should NOT trigger the popover */
+function isEditableTarget(node: Node): boolean {
+  const el = node instanceof HTMLElement ? node : node.parentElement;
+  if (!el) return false;
+  const tag = el.tagName;
+  if (tag === "INPUT" || tag === "TEXTAREA") return true;
+  if (el.isContentEditable) return true;
+  return false;
+}
+
+export function GlobalSelectionPopover() {
+  const [position, setPosition] = useState<{ top: number; left: number } | null>(null);
+  const [selectedText, setSelectedText] = useState("");
+  const addContextItem = useAppStore((s) => s.addContextItem);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  const hidePopover = useCallback(() => {
+    setPosition(null);
+    setSelectedText("");
+  }, []);
+
+  const handleMouseUp = useCallback(() => {
+    requestAnimationFrame(() => {
+      const selection = window.getSelection();
+      if (!selection || selection.isCollapsed || !selection.toString().trim()) return;
+
+      const anchorNode = selection.anchorNode;
+      if (!anchorNode) return;
+
+      // Skip if inside editable element
+      if (isEditableTarget(anchorNode)) return;
+
+      // Skip if inside tool panel (it has its own SelectionPopover)
+      const el = anchorNode instanceof HTMLElement ? anchorNode : anchorNode.parentElement;
+      if (el?.closest("[data-tool-panel]")) return;
+
+      const text = selection.toString().trim();
+      if (!text) return;
+
+      const range = selection.getRangeAt(0);
+      const rect = range.getBoundingClientRect();
+
+      // Position above selection, fixed to viewport
+      let top = rect.top - POPOVER_HEIGHT - OFFSET;
+      let left = rect.left + rect.width / 2 - POPOVER_WIDTH / 2;
+
+      // If would go above viewport, place below
+      if (top < OFFSET) {
+        top = rect.bottom + OFFSET;
+      }
+
+      // Clamp horizontal
+      left = Math.max(OFFSET, Math.min(left, window.innerWidth - POPOVER_WIDTH - OFFSET));
+
+      setSelectedText(text);
+      setPosition({ top, left });
+    });
+  }, []);
+
+  const handleAddToContext = useCallback(() => {
+    if (!selectedText) return;
+
+    const navLabel = useAppStore.getState().navContext.label;
+
+    addContextItem({
+      type: "selection",
+      label: selectedText,
+      payload: { kind: "text", text: selectedText },
+      sourcePage: navLabel,
+      persistence: "ephemeral",
+    });
+
+    window.getSelection()?.removeAllRanges();
+    hidePopover();
+  }, [selectedText, addContextItem, hidePopover]);
+
+  useEffect(() => {
+    const handleMouseDown = (e: MouseEvent) => {
+      if (buttonRef.current?.contains(e.target as Node)) return;
+      hidePopover();
+    };
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") hidePopover();
+    };
+
+    document.addEventListener("mouseup", handleMouseUp);
+    document.addEventListener("mousedown", handleMouseDown);
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.removeEventListener("mousedown", handleMouseDown);
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [handleMouseUp, hidePopover]);
+
+  if (!position) return null;
+
+  return (
+    <button
+      ref={buttonRef}
+      type="button"
+      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",
+        "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>
+  );
+}

package/src/components/infinite-scroll-sentinel.tsx

@@ -0,0 +1,48 @@
+import { useEffect, useRef } from "react";
+
+import { cn } from "@iloveagents/foundry-web-primitives";
+
+export function InfiniteScrollSentinel({
+  enabled,
+  loading,
+  onVisible,
+  className,
+}: {
+  enabled: boolean;
+  loading?: boolean;
+  onVisible: () => void;
+  className?: string;
+}) {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const pendingRef = useRef(false);
+
+  useEffect(() => {
+    if (!enabled || !loading) {
+      pendingRef.current = false;
+    }
+  }, [enabled, loading]);
+
+  useEffect(() => {
+    if (!enabled || !ref.current) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting) && !pendingRef.current) {
+          pendingRef.current = true;
+          onVisible();
+        }
+      },
+      { rootMargin: "240px 0px" },
+    );
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [enabled, onVisible]);
+
+  return (
+    <div
+      ref={ref}
+      className={cn("flex h-12 items-center justify-center text-sm text-muted-foreground", className)}
+    >
+      {enabled ? (loading ? "Loading more..." : "Scroll for more") : null}
+    </div>
+  );
+}

package/src/components/json-viewer.tsx

@@ -0,0 +1,232 @@
+/**
+ * JsonViewer — Collapsible JSON tree renderer.
+ *
+ * Fetches JSON from a URL and renders it as an interactive tree
+ * with syntax coloring and expand/collapse controls.
+ */
+
+import { useEffect, useState } from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+
+export function JsonViewer({
+  url,
+  defaultExpanded = 2,
+}: {
+  url: string;
+  defaultExpanded?: number;
+}) {
+  const [state, setState] = useState<{
+    data: unknown;
+    loading: boolean;
+    error: boolean;
+  }>({ data: null, loading: true, error: false });
+
+  useEffect(() => {
+    let cancelled = false;
+    fetch(url)
+      .then((r) => {
+        if (!r.ok) throw new Error("Failed to fetch");
+        return r.json();
+      })
+      .then((json) => {
+        if (!cancelled) setState({ data: json, loading: false, error: false });
+      })
+      .catch(() => {
+        if (!cancelled) setState({ data: null, loading: false, error: true });
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [url]);
+
+  const { data, loading, error } = state;
+
+  if (loading) {
+    return (
+      <div className="flex-1 flex items-center justify-center text-sm text-muted-foreground p-12">
+        Loading...
+      </div>
+    );
+  }
+
+  if (error || data == null) {
+    return (
+      <div className="flex-1 flex items-center justify-center text-sm text-muted-foreground p-12">
+        Failed to load JSON
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 overflow-auto p-6">
+      <div className="font-mono text-sm max-w-5xl">
+        <JsonNode value={data} depth={0} defaultExpanded={defaultExpanded} />
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// JsonNode — recursive tree node
+// ---------------------------------------------------------------------------
+
+function JsonNode({
+  label,
+  value,
+  depth,
+  defaultExpanded,
+}: {
+  label?: string;
+  value: unknown;
+  depth: number;
+  defaultExpanded: number;
+}) {
+  const [expanded, setExpanded] = useState(depth < defaultExpanded);
+
+  if (value === null || value === undefined) {
+    return (
+      <span>
+        {label != null && <KeyLabel text={label} />}
+        <span className="text-muted-foreground italic">null</span>
+      </span>
+    );
+  }
+
+  if (typeof value === "boolean") {
+    return (
+      <span>
+        {label != null && <KeyLabel text={label} />}
+        <span className="text-[var(--syntax-boolean)]">{String(value)}</span>
+      </span>
+    );
+  }
+
+  if (typeof value === "number") {
+    return (
+      <span>
+        {label != null && <KeyLabel text={label} />}
+        <span className="text-[var(--syntax-number)]">{value}</span>
+      </span>
+    );
+  }
+
+  if (typeof value === "string") {
+    const display = value.length > 200 ? value.slice(0, 200) + "..." : value;
+    return (
+      <span>
+        {label != null && <KeyLabel text={label} />}
+        <span className="text-[var(--syntax-string)]">"{display}"</span>
+      </span>
+    );
+  }
+
+  if (Array.isArray(value)) {
+    if (value.length === 0) {
+      return (
+        <span>
+          {label != null && <KeyLabel text={label} />}
+          <span className="text-muted-foreground">[]</span>
+        </span>
+      );
+    }
+
+    return (
+      <div>
+        <ToggleButton expanded={expanded} onToggle={() => setExpanded(!expanded)}>
+          {label != null && <KeyLabel text={label} />}
+          <span className="text-muted-foreground ml-1">[{value.length} items]</span>
+        </ToggleButton>
+        {expanded && (
+          <div className={cn("border-l border-border ml-2 pl-3", depth > 4 && "ml-1 pl-2")}>
+            {value.map((item, i) => (
+              <div key={i} className="py-0.5">
+                <JsonNode
+                  label={String(i)}
+                  value={item}
+                  depth={depth + 1}
+                  defaultExpanded={defaultExpanded}
+                />
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  if (typeof value === "object") {
+    const entries = Object.entries(value as Record<string, unknown>);
+    if (entries.length === 0) {
+      return (
+        <span>
+          {label != null && <KeyLabel text={label} />}
+          <span className="text-muted-foreground">{"{}"}</span>
+        </span>
+      );
+    }
+
+    return (
+      <div>
+        <ToggleButton expanded={expanded} onToggle={() => setExpanded(!expanded)}>
+          {label != null && <KeyLabel text={label} />}
+          <span className="text-muted-foreground ml-1">
+            {"{"}
+            {entries.length} keys
+            {"}"}
+          </span>
+        </ToggleButton>
+        {expanded && (
+          <div className={cn("border-l border-border ml-2 pl-3", depth > 4 && "ml-1 pl-2")}>
+            {entries.map(([key, val]) => (
+              <div key={key} className="py-0.5">
+                <JsonNode
+                  label={key}
+                  value={val}
+                  depth={depth + 1}
+                  defaultExpanded={defaultExpanded}
+                />
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <span>
+      {label != null && <KeyLabel text={label} />}
+      <span>{String(value)}</span>
+    </span>
+  );
+}
+
+function KeyLabel({ text }: { text: string }) {
+  return <span className="text-[var(--syntax-key)]">{text}: </span>;
+}
+
+function ToggleButton({
+  expanded,
+  onToggle,
+  children,
+}: {
+  expanded: boolean;
+  onToggle: () => void;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onToggle}
+      className="inline-flex items-center gap-0.5 hover:bg-muted/50 rounded px-0.5 -ml-0.5"
+    >
+      {expanded ? (
+        <ChevronDown className="size-3.5 text-muted-foreground" />
+      ) : (
+        <ChevronRight className="size-3.5 text-muted-foreground" />
+      )}
+      {children}
+    </button>
+  );
+}