@iloveagents/foundry-web-ui 0.1.0

package/src/components/collection-filter-bar.tsx

@@ -0,0 +1,168 @@
+import { Check, Filter, X } from "lucide-react";
+
+import { Button } from "@iloveagents/foundry-web-primitives";
+import { Checkbox } from "@iloveagents/foundry-web-primitives";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover.tsx";
+import { cn } from "@iloveagents/foundry-web-primitives";
+
+export type CollectionFilterValue = string | string[] | boolean | undefined;
+
+export interface CollectionFilterOption {
+  value: string;
+  label: string;
+}
+
+export interface CollectionFilterDefinition {
+  key: string;
+  label: string;
+  type: "single" | "multi" | "boolean";
+  options?: CollectionFilterOption[];
+  trueLabel?: string;
+}
+
+function activeCount(value: CollectionFilterValue, type: CollectionFilterDefinition["type"]) {
+  if (type === "boolean") return value ? 1 : 0;
+  if (Array.isArray(value)) return value.length;
+  return value ? 1 : 0;
+}
+
+export function CollectionFilterBar({
+  filters,
+  values,
+  onValueChange,
+  onClearAll,
+  className,
+}: {
+  filters: CollectionFilterDefinition[];
+  values: Record<string, CollectionFilterValue>;
+  onValueChange: (key: string, value: CollectionFilterValue) => void;
+  onClearAll?: () => void;
+  className?: string;
+}) {
+  const hasActiveFilters = filters.some((filter) => activeCount(values[filter.key], filter.type) > 0);
+
+  return (
+    <div className={cn("flex flex-wrap items-center gap-2", className)}>
+      {filters.map((filter) => {
+        const count = activeCount(values[filter.key], filter.type);
+        return (
+          <Popover key={filter.key}>
+            <PopoverTrigger asChild>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className={cn(
+                  "rounded-xl border-border/45 bg-background/65 shadow-none hover:bg-muted/26",
+                  count > 0 && "border-primary/18 bg-primary/7 text-foreground hover:bg-primary/10",
+                )}
+              >
+                <Filter className="size-4" />
+                <span>{filter.label}</span>
+                {count > 0 ? (
+                  <span className="rounded-full bg-primary/10 px-1.5 py-0.5 text-[11px] font-semibold text-primary">
+                    {count}
+                  </span>
+                ) : null}
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent align="start" className="w-64 rounded-2xl border-border/45 bg-popover/95 p-2 shadow-lg">
+              <div className="px-2 pb-2 pt-1 text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground">
+                {filter.label}
+              </div>
+              {filter.type === "boolean" ? (
+                <button
+                  type="button"
+                  onClick={() => onValueChange(filter.key, values[filter.key] ? undefined : true)}
+                  className={cn(
+                    "flex w-full items-center gap-3 rounded-xl px-3 py-2 text-left text-sm transition-colors",
+                    values[filter.key] ? "bg-primary/8 text-foreground" : "hover:bg-accent",
+                  )}
+                >
+                  <Checkbox checked={Boolean(values[filter.key])} />
+                  <span>{filter.trueLabel ?? `Only ${filter.label.toLowerCase()}`}</span>
+                </button>
+              ) : null}
+              {filter.type === "single" ? (
+                <div className="space-y-1">
+                  <button
+                    type="button"
+                    onClick={() => onValueChange(filter.key, undefined)}
+                    className="flex w-full items-center justify-between rounded-xl px-3 py-2 text-left text-sm transition-colors hover:bg-accent"
+                  >
+                    <span>Any</span>
+                    <Check
+                      className={cn(
+                        "size-4 text-primary",
+                        values[filter.key] == null ? "opacity-100" : "opacity-0",
+                      )}
+                    />
+                  </button>
+                  {filter.options?.map((option) => (
+                    <button
+                      key={option.value}
+                      type="button"
+                      onClick={() => onValueChange(filter.key, option.value)}
+                      className="flex w-full items-center justify-between rounded-xl px-3 py-2 text-left text-sm transition-colors hover:bg-accent"
+                    >
+                      <span>{option.label}</span>
+                      <Check
+                        className={cn(
+                          "size-4 text-primary",
+                          values[filter.key] === option.value ? "opacity-100" : "opacity-0",
+                        )}
+                      />
+                    </button>
+                  ))}
+                </div>
+              ) : null}
+              {filter.type === "multi" ? (
+                <div className="space-y-1">
+                  {filter.options?.map((option) => {
+                    const current = Array.isArray(values[filter.key])
+                      ? (values[filter.key] as string[])
+                      : [];
+                    const checked = current.includes(option.value);
+                    return (
+                      <button
+                        key={option.value}
+                        type="button"
+                        onClick={() =>
+                          onValueChange(
+                            filter.key,
+                            checked
+                              ? current.filter((item: string) => item !== option.value)
+                              : [...current, option.value],
+                          )
+                        }
+                        className={cn(
+                          "flex w-full items-center gap-3 rounded-xl px-3 py-2 text-left text-sm transition-colors",
+                          checked ? "bg-primary/8 text-foreground" : "hover:bg-accent",
+                        )}
+                      >
+                        <Checkbox checked={checked} />
+                        <span>{option.label}</span>
+                      </button>
+                    );
+                  })}
+                </div>
+              ) : null}
+            </PopoverContent>
+          </Popover>
+        );
+      })}
+      {hasActiveFilters && onClearAll ? (
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={onClearAll}
+          className="rounded-xl text-muted-foreground hover:bg-muted/26"
+        >
+          <X className="size-4" />
+          <span>Clear</span>
+        </Button>
+      ) : null}
+    </div>
+  );
+}

package/src/components/collection-search-input.tsx

@@ -0,0 +1,41 @@
+import { Search, X } from "lucide-react";
+
+import { Button } from "@iloveagents/foundry-web-primitives";
+import { Input } from "@iloveagents/foundry-web-primitives";
+import { cn } from "@iloveagents/foundry-web-primitives";
+
+export function CollectionSearchInput({
+  value,
+  onValueChange,
+  placeholder = "Search...",
+  className,
+}: {
+  value: string;
+  onValueChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+}) {
+  return (
+    <div className={cn("relative min-w-[16rem] flex-1", className)}>
+      <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+      <Input
+        value={value}
+        onChange={(event) => onValueChange(event.target.value)}
+        placeholder={placeholder}
+        className="h-10 rounded-xl border-border/45 bg-background/72 pl-9 pr-10 shadow-none hover:bg-background/82 focus:border-primary/20 focus:ring-primary/10"
+      />
+      {value ? (
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          onClick={() => onValueChange("")}
+          className="absolute right-1 top-1/2 size-8 -translate-y-1/2 rounded-lg text-muted-foreground"
+        >
+          <X className="size-4" />
+          <span className="sr-only">Clear search</span>
+        </Button>
+      ) : null}
+    </div>
+  );
+}

package/src/components/collection-skeleton.tsx

@@ -0,0 +1,55 @@
+import { cn } from "@iloveagents/foundry-web-primitives";
+
+import type { CollectionViewMode } from "./collection-view-toggle.tsx";
+
+export function CollectionSkeleton({
+  view,
+  rows = 8,
+  className,
+}: {
+  view: CollectionViewMode;
+  rows?: number;
+  className?: string;
+}) {
+  if (view === "table") {
+    return (
+      <div className={cn("overflow-hidden rounded-[1.5rem] bg-background/65 ring-1 ring-border/35", className)}>
+        <div className="grid grid-cols-4 gap-4 border-b border-border/40 bg-muted/28 px-5 py-4">
+          {Array.from({ length: 4 }).map((_, index) => (
+            <div key={index} className="h-3.5 animate-pulse rounded bg-muted" />
+          ))}
+        </div>
+        <div className="divide-y divide-border/35">
+          {Array.from({ length: rows }).map((_, index) => (
+            <div key={index} className="grid grid-cols-4 gap-4 px-5 py-4">
+              {Array.from({ length: 4 }).map((_, cellIndex) => (
+                <div key={cellIndex} className="h-4 animate-pulse rounded bg-muted/80" />
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        view === "tiles"
+          ? "grid gap-3 [grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))]"
+          : "grid gap-4 [grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))]",
+        className,
+      )}
+    >
+      {Array.from({ length: rows }).map((_, index) => (
+        <div
+          key={index}
+          className={cn(
+            "animate-pulse rounded-[1.5rem] bg-card/80 ring-1 ring-border/35",
+            view === "tiles" ? "h-28" : "h-40",
+          )}
+        />
+      ))}
+    </div>
+  );
+}

package/src/components/collection-sort-menu.tsx

@@ -0,0 +1,62 @@
+import { ArrowUpDown, Check } from "lucide-react";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu.tsx";
+import { Button } from "@iloveagents/foundry-web-primitives";
+import { cn } from "@iloveagents/foundry-web-primitives";
+
+export interface CollectionSortOption {
+  value: string;
+  label: string;
+}
+
+export function CollectionSortMenu({
+  options,
+  value,
+  onValueChange,
+  className,
+}: {
+  options: CollectionSortOption[];
+  value: string;
+  onValueChange: (value: string) => void;
+  className?: string;
+}) {
+  const active = options.find((option) => option.value === value) ?? options[0];
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          className={cn(
+            "rounded-xl border-border/45 bg-background/65 shadow-none hover:bg-muted/26",
+            className,
+          )}
+        >
+          <ArrowUpDown className="size-4" />
+          <span>{active?.label ?? "Sort"}</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-56 rounded-xl border-border/45 bg-popover/95 shadow-lg">
+        {options.map((option) => (
+          <DropdownMenuItem
+            key={option.value}
+            onClick={() => onValueChange(option.value)}
+            className="flex items-center justify-between gap-3"
+          >
+            <span>{option.label}</span>
+            <Check
+              className={cn("size-4 text-primary", value === option.value ? "opacity-100" : "opacity-0")}
+            />
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/components/collection-surface.tsx

@@ -0,0 +1,46 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+
+import { cn } from "@iloveagents/foundry-web-primitives";
+
+export function CollectionSurface({
+  toolbar,
+  bordered = false,
+  backgrounded = true,
+  className,
+  toolbarClassName,
+  contentClassName,
+  children,
+  ...props
+}: ComponentPropsWithoutRef<"section"> & {
+  toolbar?: ReactNode;
+  bordered?: boolean;
+  backgrounded?: boolean;
+  toolbarClassName?: string;
+  contentClassName?: string;
+}) {
+  return (
+    <section
+      className={cn(
+        "w-full min-w-0 overflow-hidden rounded-[1.75rem]",
+        backgrounded && "bg-card/60 shadow-[0_12px_36px_-24px_rgb(15_23_42/0.18)] backdrop-blur-sm",
+        bordered && "ring-1 ring-border/45",
+        className,
+      )}
+      {...props}
+    >
+      {toolbar ? (
+        <div
+          className={cn(
+            "sticky top-0 z-10 px-4 py-4 sm:px-5",
+            backgrounded && "bg-muted/18 backdrop-blur",
+            bordered && "border-b border-border/45",
+            toolbarClassName,
+          )}
+        >
+          {toolbar}
+        </div>
+      ) : null}
+      <div className={cn("p-4 sm:p-5", contentClassName)}>{children}</div>
+    </section>
+  );
+}

package/src/components/collection-toolbar.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+
+import { cn } from "@iloveagents/foundry-web-primitives";
+
+export function CollectionToolbar({
+  search,
+  filters,
+  sort,
+  viewToggle,
+  actions,
+  className,
+}: {
+  search?: ReactNode;
+  filters?: ReactNode;
+  sort?: ReactNode;
+  viewToggle?: ReactNode;
+  actions?: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn("flex flex-col gap-2.5", className)}>
+      <div className="flex flex-col gap-2.5 lg:flex-row lg:items-center">
+        <div className="flex min-w-0 flex-1 items-center gap-3">{search}</div>
+        <div className="flex flex-wrap items-center gap-2">
+          {sort}
+          {viewToggle}
+          {actions}
+        </div>
+      </div>
+      {filters ? <div className="flex flex-wrap items-center gap-2">{filters}</div> : null}
+    </div>
+  );
+}

package/src/components/collection-view-toggle.tsx

@@ -0,0 +1,61 @@
+import { LayoutGrid, Rows3, TableProperties } from "lucide-react";
+
+import { Button } from "@iloveagents/foundry-web-primitives";
+import { cn } from "@iloveagents/foundry-web-primitives";
+
+export type CollectionViewMode = "table" | "grid" | "tiles";
+
+const VIEW_OPTIONS: Array<{
+  value: CollectionViewMode;
+  label: string;
+  icon: typeof TableProperties;
+}> = [
+  { value: "table", label: "Table", icon: TableProperties },
+  { value: "grid", label: "Grid", icon: LayoutGrid },
+  { value: "tiles", label: "Tiles", icon: Rows3 },
+];
+
+export function CollectionViewToggle({
+  value,
+  onValueChange,
+  views = ["table", "grid"],
+  className,
+}: {
+  value: CollectionViewMode;
+  onValueChange: (value: CollectionViewMode) => void;
+  views?: CollectionViewMode[];
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "inline-flex items-center rounded-xl bg-muted/26 p-1 ring-1 ring-border/40",
+        className,
+      )}
+    >
+      {VIEW_OPTIONS.filter((option) => views.includes(option.value)).map((option) => {
+        const Icon = option.icon;
+        const active = value === option.value;
+        return (
+          <Button
+            key={option.value}
+            type="button"
+            aria-label={option.label}
+            variant={active ? "secondary" : "ghost"}
+            size="sm"
+            onClick={() => onValueChange(option.value)}
+            className={cn(
+              "rounded-lg px-2.5 text-muted-foreground hover:bg-background/70 hover:text-foreground",
+              active &&
+                "bg-background text-foreground ring-1 ring-primary/35 shadow-[0_1px_2px_rgb(15_23_42/0.08)] hover:bg-background",
+            )}
+          >
+            <Icon className="size-4" />
+            <span className="hidden sm:inline">{option.label}</span>
+            <span className="sr-only sm:hidden">{option.label}</span>
+          </Button>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/confirm-dialog.tsx

@@ -0,0 +1,49 @@
+import { Button } from "@iloveagents/foundry-web-primitives";
+import { FormDialog } from "./form-dialog.tsx";
+
+export function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  destructive = false,
+  onConfirm,
+  confirming = false,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  description?: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  destructive?: boolean;
+  onConfirm: () => void;
+  confirming?: boolean;
+}) {
+  return (
+    <FormDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title={title}
+      description={description}
+      size="sm"
+      footer={
+        <>
+          <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
+            {cancelLabel}
+          </Button>
+          <Button
+            type="button"
+            variant={destructive ? "destructive" : "default"}
+            onClick={onConfirm}
+            disabled={confirming}
+          >
+            {confirmLabel}
+          </Button>
+        </>
+      }
+    />
+  );
+}

package/src/components/confirmation-card.tsx

@@ -0,0 +1,32 @@
+/**
+ * Confirmation Card — informational UI for the ui_confirm tool.
+ *
+ * Renders a card with action description and optional details.
+ * The user responds by typing their confirmation in the chat.
+ */
+
+import { ShieldCheck } from "lucide-react";
+import { ToolCallCard, type ToolCallStatus } from "./tool-call-card.tsx";
+
+interface ConfirmationCardProps {
+  action: string;
+  details?: string;
+  status: ToolCallStatus;
+}
+
+export function ConfirmationCard({ action, details, status }: ConfirmationCardProps) {
+  return (
+    <ToolCallCard
+      icon={<ShieldCheck className="size-3.5" />}
+      title="Confirmation Required"
+      description={action}
+      status={status}
+      className="w-full"
+    >
+      {details && <p className="text-xs text-muted-foreground mt-1">{details}</p>}
+      <p className="text-xs text-muted-foreground mt-2 italic">
+        Reply to confirm or reject this action.
+      </p>
+    </ToolCallCard>
+  );
+}

package/src/components/context-badges.tsx

@@ -0,0 +1,124 @@
+/**
+ * Context badge components for the composer and sent messages.
+ *
+ * Renders user-selected context items as violet-tinted badges,
+ * visually distinct from gray file attachment badges.
+ *
+ * - ComposerContextBadges: editable badges in the composer (with remove button)
+ * - SentContextBadges: read-only badges on sent user messages
+ */
+
+import { type FC, createElement } from "react";
+import { Pin, TextSelect, X, FileText, Link2, StickyNote, type LucideIcon } from "lucide-react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+import { Tooltip, TooltipTrigger, TooltipContent } from "../ui/tooltip.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,
+};
+
+function ContextIcon({ type, className }: { type: ContextItemType; className?: string }) {
+  return createElement(CONTEXT_ICONS[type] ?? TextSelect, { className });
+}
+
+/** Get tooltip text for a context item (source page or path). */
+function getBadgeTooltip(item: ContextItem): string {
+  const source =
+    item.type === "page" && item.payload.kind === "page" ? item.payload.path : item.sourcePage;
+  return `${item.label}\n${source}`;
+}
+
+/** Editable badge in the composer with a remove button. */
+const ComposerBadge: FC<{ item: ContextItem }> = ({ item }) => {
+  const removeItem = useAppStore((s) => s.removeContextItem);
+  const promoteItem = useAppStore((s) => s.promoteContextItem);
+  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-xs text-foreground truncate">{item.label}</span>
+          {isEphemeral && (
+            <button
+              type="button"
+              onClick={() => promoteItem(item.id)}
+              className="p-0.5 rounded hover:bg-primary/10 shrink-0"
+              aria-label="Pin context"
+            >
+              <Pin className="size-3 text-muted-foreground" />
+            </button>
+          )}
+          <button
+            type="button"
+            onClick={() => removeItem(item.id)}
+            className="p-0.5 rounded hover:bg-primary/10 shrink-0"
+            aria-label="Remove context"
+          >
+            <X className="size-3" />
+          </button>
+        </div>
+      </TooltipTrigger>
+      <TooltipContent side="top" className="whitespace-pre-line">
+        {getBadgeTooltip(item)}
+      </TooltipContent>
+    </Tooltip>
+  );
+};
+
+/** 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>
+);
+
+/** Renders ephemeral context badges in the composer (persistent items shown in ContextPins). */
+export const ComposerContextBadges: FC = () => {
+  const items = useAppStore((s) => s.contextItems);
+  const ephemeral = items.filter((i) => i.persistence === "ephemeral");
+
+  if (ephemeral.length === 0) return null;
+
+  return (
+    <div className="flex flex-wrap gap-1.5">
+      {ephemeral.map((item) => (
+        <ComposerBadge key={item.id} item={item} />
+      ))}
+    </div>
+  );
+};
+
+/** Renders sent context badges on a user message (read-only). */
+export const SentContextBadges: FC<{ messageId: string }> = ({ messageId }) => {
+  const items = useAppStore((s) => s.sentContext[messageId]);
+
+  if (!items || items.length === 0) return null;
+
+  return (
+    <div className="flex flex-wrap gap-1 mb-1">
+      {items.map((item) => (
+        <SentBadge key={item.id} item={item} />
+      ))}
+    </div>
+  );
+};