@iloveagents/foundry-web-ui 0.3.0 → 0.4.0

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

@@ -1,48 +0,0 @@
-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

@@ -1,232 +0,0 @@
-/**
- * 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>
-  );
-}

package/src/components/loading-indicator.tsx

@@ -1,40 +0,0 @@
-import { useStore } from "zustand";
-import { streamingStatusStore } from "@iloveagents/foundry-agent";
-
-function formatToolName(name: string): string {
-  return name.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
-}
-
-/** Shimmer bar shown above the composer while the agent is running. */
-export function LoadingBar() {
-  return (
-    <div className="w-full h-px bg-primary/30 overflow-hidden">
-      <div className="h-full w-1/4 bg-primary animate-[shimmer_1.5s_ease-in-out_infinite]" />
-    </div>
-  );
-}
-
-/** Inline status text shown in the message area while the agent is running. */
-export function LoadingIndicator() {
-  const streaming = useStore(streamingStatusStore, (s) => s.streamingStatus);
-
-  let label = "Thinking";
-  if (streaming.status === "calling" && streaming.toolName) {
-    label = `Running ${formatToolName(streaming.toolName)}`;
-  } else if (streaming.status === "streaming") {
-    label = "Generating response";
-  }
-
-  return (
-    <div className="h-10 px-4">
-      <div className="flex items-center gap-2 py-2 text-foreground leading-relaxed animate-in fade-in duration-300">
-        <span className="text-sm text-muted-foreground">{label}</span>
-        <div className="flex gap-1">
-          <span className="size-1.5 rounded-full bg-primary/60 animate-[pulse_1.4s_ease-in-out_infinite]" />
-          <span className="size-1.5 rounded-full bg-primary/60 animate-[pulse_1.4s_ease-in-out_0.2s_infinite]" />
-          <span className="size-1.5 rounded-full bg-primary/60 animate-[pulse_1.4s_ease-in-out_0.4s_infinite]" />
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,108 +0,0 @@
-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");
-  });
-});