@tangle-network/ui 11.5.0 → 11.7.0

package/src/editor/tiptap-editor.tsx

@@ -1,13 +1,13 @@
 "use client";
 
 import type { AnyExtension } from "@tiptap/core";
-import Collaboration from "@tiptap/extension-collaboration";
-import CollaborationCaret from "@tiptap/extension-collaboration-caret";
-import { type Editor, EditorContent, useEditor } from "@tiptap/react";
-import StarterKit from "@tiptap/starter-kit";
-import { useEffect, useMemo } from "react";
+import type { Editor } from "@tiptap/react";
+import { type ComponentType, Suspense, useEffect, useMemo } from "react";
 import { cn } from "../lib/utils";
 import { type Collaborator, useEditorContext } from "./editor-provider";
+import { retryableLazyEditor } from "./editor-lazy";
+import { EditorLoadingPlaceholder } from "./editor-loading";
+import { type CollaborationPeers, loadCollaborationPeers } from "./editor-peers";
 
 /**
  * Props for TiptapEditor component.
@@ -57,140 +57,149 @@ function getCursorColors(color: string) {
 }
 
 /**
- * TiptapEditor - Collaborative markdown editor with Y.js sync.
- * Must be used within an EditorProvider.
+ * Builds the collaborative editor against loaded tiptap namespaces. The peers
+ * arrive as an argument so that this module reaches them through type-only
+ * imports, which a bundler erases.
  */
-export function TiptapEditor({
-  initialContent,
-  placeholder = "Start writing...",
-  readOnly = false,
-  autoFocus = false,
-  className,
-  contentClassName,
-  onUpdate,
-  onSelectionUpdate,
-  onReady,
-}: TiptapEditorProps) {
-  const { doc, provider, connectionState } = useEditorContext();
-
-  // Y.js fragment for the editor content
-  const fragment = useMemo(() => doc.getXmlFragment("prosemirror"), [doc]);
-
-  // Configure Tiptap extensions
-  const extensions = useMemo(() => {
-    const baseExtensions: AnyExtension[] = [
-      StarterKit.configure({
-        // Disable history - Y.js handles undo/redo
-        ...({ history: false } as any),
-        // Configure code block for syntax highlighting placeholder
-        codeBlock: {
-          HTMLAttributes: {
-            class: "hljs",
-          },
-        },
-      }),
-      Collaboration.configure({
-        fragment,
-      }),
-    ];
-
-    // Add collaboration cursor if provider is available
-    if (provider?.awareness) {
-      baseExtensions.push(
-        CollaborationCaret.configure({
-          provider,
-          user: provider.awareness.getLocalState()?.user ?? {
-            name: "Anonymous",
-            color: "#808080",
-          },
-          render: (user: { name: string; color: string }) => {
-            const { background, text } = getCursorColors(user.color);
+export function createTiptapEditor(
+  peers: CollaborationPeers,
+): ComponentType<TiptapEditorProps> {
+  const { EditorContent, useEditor } = peers.react;
+  const StarterKit = peers.starterKit.default;
+  const Collaboration = peers.collaboration.default;
+  const CollaborationCaret = peers.collaborationCaret.default;
 
-            const cursor = document.createElement("span");
-            cursor.className = "collaboration-cursor";
-            cursor.style.borderColor = background;
+  return function TiptapEditor({
+    initialContent,
+    placeholder = "Start writing...",
+    readOnly = false,
+    autoFocus = false,
+    className,
+    contentClassName,
+    onUpdate,
+    onSelectionUpdate,
+    onReady,
+  }: TiptapEditorProps) {
+    const { doc, provider, connectionState } = useEditorContext();
 
-            const label = document.createElement("span");
-            label.className = "collaboration-cursor-label";
-            label.style.backgroundColor = background;
-            label.style.color = text;
-            label.textContent = user.name;
+    // Y.js fragment for the editor content
+    const fragment = useMemo(() => doc.getXmlFragment("prosemirror"), [doc]);
 
-            cursor.appendChild(label);
-            return cursor;
+    // Configure Tiptap extensions
+    const extensions = useMemo(() => {
+      const baseExtensions: AnyExtension[] = [
+        StarterKit.configure({
+          // Disable history - Y.js handles undo/redo
+          ...({ history: false } as any),
+          // Configure code block for syntax highlighting placeholder
+          codeBlock: {
+            HTMLAttributes: {
+              class: "hljs",
+            },
           },
         }),
-      );
-    }
-
-    return baseExtensions;
-  }, [fragment, provider]);
-
-  // Initialize Tiptap editor
-  const editor = useEditor({
-    extensions,
-    editable: !readOnly,
-    autofocus: autoFocus,
-    editorProps: {
-      attributes: {
-        class: cn(
-          "prose prose-sm sm:prose-base dark:prose-invert max-w-none",
-          "focus:outline-none",
-          contentClassName,
-        ),
-        "data-placeholder": placeholder,
+        Collaboration.configure({
+          fragment,
+        }),
+      ];
+
+      // Add collaboration cursor if provider is available
+      if (provider?.awareness) {
+        baseExtensions.push(
+          CollaborationCaret.configure({
+            provider,
+            user: provider.awareness.getLocalState()?.user ?? {
+              name: "Anonymous",
+              color: "#808080",
+            },
+            render: (user: { name: string; color: string }) => {
+              const { background, text } = getCursorColors(user.color);
+
+              const cursor = document.createElement("span");
+              cursor.className = "collaboration-cursor";
+              cursor.style.borderColor = background;
+
+              const label = document.createElement("span");
+              label.className = "collaboration-cursor-label";
+              label.style.backgroundColor = background;
+              label.style.color = text;
+              label.textContent = user.name;
+
+              cursor.appendChild(label);
+              return cursor;
+            },
+          }),
+        );
+      }
+
+      return baseExtensions;
+    }, [fragment, provider]);
+
+    // Initialize Tiptap editor
+    const editor = useEditor({
+      extensions,
+      editable: !readOnly,
+      autofocus: autoFocus,
+      editorProps: {
+        attributes: {
+          class: cn(
+            "prose prose-sm sm:prose-base dark:prose-invert max-w-none",
+            "focus:outline-none",
+            contentClassName,
+          ),
+          "data-placeholder": placeholder,
+        },
       },
-    },
-    onUpdate: ({ editor: ed }) => {
-      onUpdate?.(ed);
-    },
-    onSelectionUpdate: ({ editor: ed }) => {
-      onSelectionUpdate?.(ed);
-    },
-    onCreate: ({ editor: ed }) => {
-      onReady?.(ed);
-    },
-  });
-
-  // Update editable state when readOnly changes
-  useEffect(() => {
-    if (editor) {
-      editor.setEditable(!readOnly);
-    }
-  }, [editor, readOnly]);
-
-  // Handle initial content (only for new documents)
-  useEffect(() => {
-    if (
-      editor &&
-      initialContent &&
-      connectionState === "synced" &&
-      editor.isEmpty
-    ) {
-      editor.commands.setContent(initialContent);
-    }
-  }, [editor, initialContent, connectionState]);
+      onUpdate: ({ editor: ed }) => {
+        onUpdate?.(ed);
+      },
+      onSelectionUpdate: ({ editor: ed }) => {
+        onSelectionUpdate?.(ed);
+      },
+      onCreate: ({ editor: ed }) => {
+        onReady?.(ed);
+      },
+    });
 
-  return (
-    <div
-      className={cn(
-        "relative min-h-[200px] w-full rounded-lg border border-border",
-        "bg-background",
-        className,
-      )}
-    >
-      {/* Connection status indicator */}
-      <div className="absolute top-2 right-2 z-10">
-        <ConnectionIndicator state={connectionState} />
-      </div>
+    // Update editable state when readOnly changes
+    useEffect(() => {
+      if (editor) {
+        editor.setEditable(!readOnly);
+      }
+    }, [editor, readOnly]);
 
-      {/* Editor content */}
-      <div className="p-4 pt-10">
-        <EditorContent editor={editor} />
-      </div>
+    // Handle initial content (only for new documents)
+    useEffect(() => {
+      if (
+        editor &&
+        initialContent &&
+        connectionState === "synced" &&
+        editor.isEmpty
+      ) {
+        editor.commands.setContent(initialContent);
+      }
+    }, [editor, initialContent, connectionState]);
 
-      {/* Placeholder when empty */}
-      <style>{`
+    return (
+      <div
+        className={cn(
+          "relative min-h-[200px] w-full rounded-lg border border-border",
+          "bg-background",
+          className,
+        )}
+      >
+        {/* Connection status indicator */}
+        <div className="absolute top-2 right-2 z-10">
+          <ConnectionIndicator state={connectionState} />
+        </div>
+
+        {/* Editor content */}
+        <div className="p-4 pt-10">
+          <EditorContent editor={editor} />
+        </div>
+
+        {/* Placeholder when empty */}
+        <style>{`
         .ProseMirror p.is-editor-empty:first-child::before {
           content: attr(data-placeholder);
           float: left;
@@ -253,7 +262,30 @@ export function TiptapEditor({
           font-size: inherit;
         }
       `}</style>
-    </div>
+      </div>
+    );
+  };
+}
+
+const lazyTiptapEditor = retryableLazyEditor(async () =>
+  createTiptapEditor(await loadCollaborationPeers()),
+);
+
+/**
+ * TiptapEditor - Collaborative markdown editor with Y.js sync.
+ * Must be used within an EditorProvider. Loads its tiptap, Hocuspocus and
+ * yjs peers on first render.
+ */
+export function TiptapEditor(props: TiptapEditorProps) {
+  const LazyTiptapEditor = lazyTiptapEditor();
+  return (
+    <Suspense
+      fallback={
+        <EditorLoadingPlaceholder className={cn("min-h-[200px]", props.className)} />
+      }
+    >
+      <LazyTiptapEditor {...props} />
+    </Suspense>
   );
 }
 

package/src/primitives/index.ts

@@ -87,6 +87,9 @@ export { Switch } from "./switch";
 
 export { Skeleton, SkeletonCard, SkeletonTable } from "./skeleton";
 
+export { TextShimmer } from "./text-shimmer";
+export type { TextShimmerProps } from "./text-shimmer";
+
 export { ToastContainer, ToastProvider, useToast } from "./toast";
 export type { Toast } from "./toast";
 

package/src/primitives/text-shimmer.test.tsx

@@ -0,0 +1,34 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { TextShimmer } from "./text-shimmer";
+
+describe("TextShimmer", () => {
+  it("wraps the label in the shimmer class and keeps the text readable", () => {
+    const { container } = render(<TextShimmer>Thinking…</TextShimmer>);
+    const span = container.querySelector(".tangle-text-shimmer");
+    expect(span).not.toBeNull();
+    expect(span!.textContent).toBe("Thinking…");
+  });
+
+  it("injects its stylesheet once for any number of instances", () => {
+    render(
+      <>
+        <TextShimmer>one</TextShimmer>
+        <TextShimmer>two</TextShimmer>
+      </>,
+    );
+    const sheets = document.querySelectorAll("#tangle-text-shimmer-styles");
+    expect(sheets).toHaveLength(1);
+    expect(sheets[0].textContent).toContain("@keyframes tangle-text-shimmer");
+    expect(sheets[0].textContent).toContain("mask-image");
+    expect(sheets[0].textContent).toContain("prefers-reduced-motion");
+  });
+
+  it("exposes the sweep period as the animation duration", () => {
+    const { container } = render(
+      <TextShimmer durationMs={900}>slow</TextShimmer>,
+    );
+    const span = container.querySelector<HTMLElement>(".tangle-text-shimmer");
+    expect(span!.style.animationDuration).toBe("900ms");
+  });
+});

package/src/primitives/text-shimmer.tsx

@@ -0,0 +1,82 @@
+import { useEffect, useLayoutEffect, type ReactNode } from "react";
+import { cn } from "../lib/utils";
+
+const CLASS_NAME = "tangle-text-shimmer";
+const STYLE_ID = "tangle-text-shimmer-styles";
+
+/**
+ * The sweep is a MASK over the text's own colour, not a gradient background
+ * clipped to the glyphs: if this stylesheet is missing the text still renders
+ * in its normal colour instead of disappearing (`color: transparent`).
+ *
+ * Mask geometry mirrors the background variant: a 250%-wide tile whose bright
+ * band sits at 45–60%, slid from 150% to -50% so one band crosses the text per
+ * cycle. The tile repeats, so the .72 floor covers every glyph at every frame —
+ * the label reads at ~72% foreground opacity with a brighter sweep through it.
+ */
+const SHIMMER_CSS = `
+@keyframes ${CLASS_NAME} {
+  from { -webkit-mask-position: 150% center; mask-position: 150% center; }
+  to { -webkit-mask-position: -50% center; mask-position: -50% center; }
+}
+.${CLASS_NAME} {
+  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.72) 0%, #000 45%, rgba(0,0,0,0.72) 60%);
+  mask-image: linear-gradient(90deg, rgba(0,0,0,0.72) 0%, #000 45%, rgba(0,0,0,0.72) 60%);
+  -webkit-mask-size: 250% 100%;
+  mask-size: 250% 100%;
+  animation: ${CLASS_NAME} 1.4s linear infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .${CLASS_NAME} {
+    animation: none;
+    -webkit-mask-image: none;
+    mask-image: none;
+    text-decoration: underline dotted currentColor;
+    text-underline-offset: 3px;
+  }
+}
+`;
+
+/** Inject the shimmer stylesheet once per document. A no-op on the server. */
+function ensureShimmerStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = SHIMMER_CSS;
+  document.head.appendChild(style);
+}
+
+// Layout effect so the mask is in place before the first paint; effect on the
+// server, where there is no layout phase.
+const useIsomorphicLayoutEffect =
+  typeof window === "undefined" ? useEffect : useLayoutEffect;
+
+export interface TextShimmerProps {
+  children: ReactNode;
+  className?: string;
+  /** One sweep across the text, in milliseconds. */
+  durationMs?: number;
+}
+
+/**
+ * Inline text with a gradient-mask sweep — the in-flight signal for a run row
+ * label ("Thinking…", a tool verb while its call is running). Carries the
+ * styles it needs, so a consumer that only scans this package for Tailwind
+ * classes still gets the animation.
+ */
+export function TextShimmer({
+  children,
+  className,
+  durationMs = 1400,
+}: TextShimmerProps) {
+  useIsomorphicLayoutEffect(ensureShimmerStyles, []);
+  return (
+    <span
+      className={cn(CLASS_NAME, "text-foreground", className)}
+      style={{ animationDuration: `${durationMs}ms` }}
+    >
+      {children}
+    </span>
+  );
+}

package/src/run/inline-thinking-item.stories.tsx

@@ -135,8 +135,8 @@ const bashTool: ToolPart = {
   },
 }
 
-// Reasoning and tool rows adjacent — they must read as one family (shared
-// badge geometry, trailing status/duration, chevron), not two designs.
+// Reasoning and tool rows adjacent — they must read as one family (same glyph
+// slot, same type scale, same hover reveal), not two designs.
 export const UnifiedWithToolRow: Story = {
   name: 'Unified shell (reasoning + tool)',
   render: () => (

package/src/run/inline-thinking-item.tsx

@@ -3,6 +3,7 @@ import { Brain } from "lucide-react";
 import { truncateText } from "../utils/format";
 import type { ReasoningPart } from "../types/parts";
 import { Markdown } from "../markdown/markdown";
+import { TextShimmer } from "../primitives/text-shimmer";
 import { RunRowShell } from "./run-row-shell";
 import { ExpandableContent } from "./expandable-content";
 
@@ -52,10 +53,9 @@ export const InlineThinkingItem = memo(
     return (
       <RunRowShell
         icon={<Brain className="h-3.5 w-3.5" />}
-        title={isActive ? "Thinking…" : "Reasoning"}
+        title={isActive ? <TextShimmer>Thinking…</TextShimmer> : "Reasoning"}
         description={preview}
         status={isActive ? "running" : "idle"}
-        startTime={startTime}
         durationMs={durationMs}
         open={open}
         onOpenChange={setOpen}

package/src/run/inline-tool-item.test.tsx

@@ -0,0 +1,76 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import type { ToolPart } from "../types/parts";
+import { formatDuration } from "../utils/format";
+import { InlineToolItem } from "./inline-tool-item";
+
+const NOW = 1_700_000_000_000;
+
+function part(overrides: Partial<ToolPart["state"]>, tool = "read"): ToolPart {
+  return {
+    type: "tool",
+    id: `tool-${tool}`,
+    tool,
+    state: {
+      status: "completed",
+      input: { file_path: "src/lib/jitter.ts" },
+      output: "export function jitter() {}",
+      time: { start: NOW - 1200, end: NOW - 1140 },
+      ...overrides,
+    },
+  };
+}
+
+describe("InlineToolItem", () => {
+  it("titles the row with the bare verb and prints the path once", () => {
+    const { container } = render(<InlineToolItem part={part({})} />);
+    expect(screen.getByText("Read")).toBeInTheDocument();
+    expect(screen.getAllByText("src/lib/jitter.ts")).toHaveLength(1);
+    // The path never repeats inside the title.
+    expect(container.textContent).not.toContain("Read src/lib/jitter.ts");
+  });
+
+  it("renders no status dot and no spinner once the call completes", () => {
+    const { container } = render(<InlineToolItem part={part({})} />);
+    expect(container.querySelector("[data-run-row-status]")).toBeNull();
+    expect(container.querySelector(".animate-spin")).toBeNull();
+    expect(container.querySelector(".tangle-text-shimmer")).toBeNull();
+  });
+
+  it("shimmers the verb while running instead of spinning", () => {
+    const { container } = render(
+      <InlineToolItem
+        part={part({ status: "running", output: undefined, time: { start: NOW - 400 } }, "bash")}
+      />,
+    );
+    const shimmer = container.querySelector(".tangle-text-shimmer");
+    expect(shimmer).not.toBeNull();
+    expect(shimmer!.textContent).toBe("Shell");
+    expect(container.querySelector(".animate-spin")).toBeNull();
+    expect(container.querySelector("[data-run-row-duration]")).toBeNull();
+  });
+
+  it("treats a pending call as running", () => {
+    const { container } = render(
+      <InlineToolItem part={part({ status: "pending", input: undefined, output: undefined })} />,
+    );
+    expect(container.querySelector(".tangle-text-shimmer")).not.toBeNull();
+  });
+
+  it("keeps the red dot and the collapsed error on failure", () => {
+    const { container } = render(
+      <InlineToolItem
+        part={part({ status: "error", error: "ENOENT: no such file", output: undefined })}
+      />,
+    );
+    expect(container.querySelector('[data-run-row-status="error"]')).not.toBeNull();
+    expect(screen.getByText("ENOENT: no such file")).toBeInTheDocument();
+  });
+
+  it("carries the completed duration as a hover-only label", () => {
+    const { container } = render(<InlineToolItem part={part({})} />);
+    const duration = container.querySelector("[data-run-row-duration]");
+    expect(duration!.textContent).toBe(formatDuration(60));
+    expect(duration!.className).toContain("group-hover:opacity-100");
+  });
+});

package/src/run/inline-tool-item.tsx

@@ -20,6 +20,7 @@ import {
 import type { ToolPart } from "../types/parts";
 import type { ToolCategory } from "../types/run";
 import type { CustomToolRenderer } from "../types/tool-display";
+import { TextShimmer } from "../primitives/text-shimmer";
 import { ExpandedToolDetail } from "./expanded-tool-detail";
 import { RunRowShell, type RunRowStatus } from "./run-row-shell";
 
@@ -60,10 +61,11 @@ function toRowStatus(status: ToolPart["state"]["status"]): RunRowStatus {
 }
 
 /**
- * Compact single-line tool call display. Shows a category icon, title,
- * description, duration and status, and expands on click to show
- * ExpandedToolDetail. Rendered through the shared RunRowShell so it stays
- * consistent with the reasoning row.
+ * Compact single-line tool call display: a category glyph, the tool verb, and
+ * the path or command it acted on. While the call runs the verb shimmers;
+ * once it completes the row goes quiet (duration on hover, a red dot only on
+ * error). Expands on click to show ExpandedToolDetail. Rendered through the
+ * shared RunRowShell so it stays consistent with the reasoning row.
  */
 export const InlineToolItem = memo(
   ({
@@ -88,15 +90,15 @@ export const InlineToolItem = memo(
 
     const category = getToolCategory(part.tool);
     const DefaultIcon = TOOL_CATEGORY_ICON_MAP[category] ?? Settings;
+    const status = toRowStatus(part.state.status);
 
     return (
       <RunRowShell
         icon={<DefaultIcon className="h-3.5 w-3.5" />}
-        title={title}
+        title={status === "running" ? <TextShimmer>{title}</TextShimmer> : title}
         description={description}
         descriptionMono
-        status={toRowStatus(part.state.status)}
-        startTime={startTime}
+        status={status}
         durationMs={durationMs}
         groupPosition={groupPosition}
         collapsedError={errorText ?? undefined}

package/src/run/run-group.tsx

@@ -28,8 +28,9 @@ import { Markdown } from "../markdown/markdown";
 
 /**
  * One row on the run's timeline spine: a connector line + accent dot in a
- * narrow gutter, content to the right. Mirrors AgentTimeline's row so a run
- * reads as separated, distinct steps — not one filled box.
+ * narrow gutter, content to the right, so a run reads as separated, distinct
+ * steps — not one filled box. The dot's top offset centers it on a 30px run
+ * row header (RunRowShell: 22px glyph slot + 4px inset each side).
  */
 function SpineRow({
   accentClassName,
@@ -48,7 +49,7 @@ function SpineRow({
         )}
         <span
           className={cn(
-            "relative mt-1.5 h-[var(--timeline-dot-size,0.5rem)] w-[var(--timeline-dot-size,0.5rem)] rounded-full ring-4 ring-[var(--bg-root)]",
+            "relative mt-2.5 h-[var(--timeline-dot-size,0.5rem)] w-[var(--timeline-dot-size,0.5rem)] rounded-full ring-4 ring-[var(--bg-root)]",
             accentClassName,
           )}
         />