@vvedantb/ui 0.17.0 → 0.18.0

package/src/ai-elements/trace.tsx

@@ -0,0 +1,243 @@
+"use client";
+
+import type { ComponentProps, ReactNode } from "react";
+import { IconChevronRight } from "@tabler/icons-react";
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../ui/collapsible";
+import { CrossfadeIconSlot } from "../ui/crossfade-icon";
+import { useCn } from "../ui/ui-config";
+import { Shimmer } from "./shimmer";
+
+/**
+ * One agent step as one line: icon, title, optional faded description, and an
+ * optional fold. Reasoning, tool calls, grouped calls, subagents, to-dos and
+ * sandbox startup stages all render through these parts.
+ *
+ * Adapted from shadcn/ui Trace (October 2026). Kept from our side: the
+ * compositor `Shimmer` (Trace's CSS shimmer repaints the text every frame), the
+ * measured-height `CollapsibleContent`, and `CrossfadeIconSlot` icon swaps.
+ */
+
+export type AgentTraceStatus = "running" | "error" | "pending";
+
+export function AgentTrace({ className, ...props }: ComponentProps<"div">) {
+  const merge = useCn();
+  return (
+    <div
+      data-slot="trace"
+      className={merge("flex w-full min-w-0 flex-col gap-2 text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export function AgentTraceLine({
+  className,
+  status,
+  ...props
+}: ComponentProps<"span"> & { status?: AgentTraceStatus }) {
+  const merge = useCn();
+  return (
+    <span
+      data-slot="trace-line"
+      data-status={status}
+      className={merge(
+        "flex w-fit max-w-full min-w-0 items-center gap-2 text-muted-foreground text-sm transition-colors",
+        "in-[button:hover]:text-foreground",
+        "data-[status=error]:text-destructive data-[status=error]:in-[button:hover]:text-destructive",
+        "data-[status=pending]:opacity-60",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Pass `iconKey` to crossfade when the glyph or status changes (a spinner
+ * turning into a check); leave it out for a static glyph.
+ */
+export function AgentTraceIcon({
+  className,
+  iconKey,
+  children,
+}: {
+  className?: string;
+  iconKey?: string;
+  children: ReactNode;
+}) {
+  const merge = useCn();
+  const classes = merge(
+    "relative flex size-4 shrink-0 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
+    className,
+  );
+  if (iconKey === undefined) {
+    return (
+      <span data-slot="trace-icon" aria-hidden="true" className={classes}>
+        {children}
+      </span>
+    );
+  }
+  return (
+    <CrossfadeIconSlot iconKey={iconKey} variant="soft" className={classes}>
+      {children}
+    </CrossfadeIconSlot>
+  );
+}
+
+export function AgentTraceTitle({
+  className,
+  shimmer = false,
+  children,
+  title,
+}: {
+  className?: string;
+  /** Sweep a highlight across the title while the step runs. */
+  shimmer?: boolean;
+  children: string;
+  title?: string;
+}) {
+  const merge = useCn();
+  return (
+    <span
+      data-slot="trace-title"
+      title={title}
+      className={merge("min-w-0 truncate", className)}
+    >
+      {shimmer ? (
+        <Shimmer as="span" duration={2.5} spread={1.5}>
+          {children}
+        </Shimmer>
+      ) : (
+        children
+      )}
+    </span>
+  );
+}
+
+export function AgentTraceDescription({
+  className,
+  ...props
+}: ComponentProps<"span">) {
+  const merge = useCn();
+  return (
+    <span
+      data-slot="trace-description"
+      className={merge("shrink-0 tabular-nums opacity-70", className)}
+      {...props}
+    />
+  );
+}
+
+export function AgentTraceCollapsible({
+  className,
+  ...props
+}: ComponentProps<typeof Collapsible>) {
+  const merge = useCn();
+  return (
+    <Collapsible
+      data-slot="trace-collapsible"
+      className={merge("flex w-full min-w-0 flex-col", className)}
+      {...props}
+    />
+  );
+}
+
+const TRIGGER_FOCUS =
+  "rounded-md focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/45";
+
+/**
+ * `trailing` holds controls of their own (a clickable file chip). A button may
+ * not contain another button, so they render beside the trigger, not inside
+ * it. The trigger's `after:` overlay still makes the whole line clickable;
+ * buttons in `trailing` sit above that overlay so their own clicks
+ * land, and plain text in it lets clicks through to the trigger.
+ */
+export function AgentTraceCollapsibleTrigger({
+  className,
+  children,
+  trailing,
+  ...props
+}: ComponentProps<typeof CollapsibleTrigger> & { trailing?: ReactNode }) {
+  const merge = useCn();
+  const chevronClass = "transition-transform";
+  if (trailing === undefined) {
+    return (
+      <CollapsibleTrigger
+        data-slot="trace-collapsible-trigger"
+        className={merge(
+          "group/trace-trigger flex w-fit max-w-full min-w-0 items-center gap-1 text-left text-muted-foreground transition-colors hover:text-foreground has-[[data-status=error]]:text-destructive",
+          TRIGGER_FOCUS,
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <AgentTraceIcon
+          className={merge(chevronClass, "group-aria-expanded/trace-trigger:rotate-90")}
+        >
+          <IconChevronRight />
+        </AgentTraceIcon>
+      </CollapsibleTrigger>
+    );
+  }
+  return (
+    <div
+      data-slot="trace-collapsible-trigger"
+      className={merge(
+        "relative flex w-fit max-w-full min-w-0 items-center gap-2 text-muted-foreground transition-colors hover:text-foreground has-[[data-status=error]]:text-destructive",
+        className,
+      )}
+    >
+      <CollapsibleTrigger
+        className={merge(
+          "peer/trace-trigger flex min-w-0 items-center text-left after:absolute after:inset-0",
+          TRIGGER_FOCUS,
+        )}
+        {...props}
+      >
+        {children}
+      </CollapsibleTrigger>
+      <span className="pointer-events-none relative z-10 flex min-w-0 items-center gap-2 [&_button]:pointer-events-auto">
+        {trailing}
+      </span>
+      <AgentTraceIcon
+        className={merge(
+          chevronClass,
+          "pointer-events-none -ml-1 peer-aria-expanded/trace-trigger:rotate-90",
+        )}
+      >
+        <IconChevronRight />
+      </AgentTraceIcon>
+    </div>
+  );
+}
+
+/** Folded body, indented behind a rail that starts under the icon's centre. */
+export function AgentTraceCollapsibleContent({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof CollapsibleContent>) {
+  const merge = useCn();
+  return (
+    <CollapsibleContent
+      data-slot="trace-collapsible-content"
+      className="min-w-0"
+      {...props}
+    >
+      <div
+        className={merge(
+          "mt-2 mb-1 ml-[calc(--spacing(2)-1px)] min-w-0 border-l border-border pr-1 pl-4 leading-relaxed wrap-break-word text-muted-foreground",
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </CollapsibleContent>
+  );
+}

package/src/ai-elements/use-streaming-disclosure.ts

@@ -0,0 +1,50 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+const AUTO_CLOSE_DELAY_MS = 1000;
+
+/**
+ * Open state for a fold that follows a live stream: it opens when streaming
+ * starts so the text is readable as it lands, and closes once, a second after
+ * streaming stops. A reader's own toggle cancels a pending auto-close.
+ */
+export function useStreamingDisclosure(isStreaming: boolean): {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+} {
+  const [open, setOpen] = useState(isStreaming);
+  const [wasStreaming, setWasStreaming] = useState(isStreaming);
+  const [closeDue, setCloseDue] = useState(false);
+
+  if (isStreaming !== wasStreaming) {
+    setWasStreaming(isStreaming);
+    if (isStreaming) {
+      setOpen(true);
+      setCloseDue(false);
+    } else {
+      setCloseDue(true);
+    }
+  }
+
+  /* eslint-disable no-effect/no-event-handler --
+     The close is a delayed reaction to the stream stopping, not to a click:
+     only a timer can express "one second later". */
+  useEffect(() => {
+    if (!closeDue) return;
+    const timer = setTimeout(() => {
+      setOpen(false);
+      setCloseDue(false);
+    }, AUTO_CLOSE_DELAY_MS);
+    return () => clearTimeout(timer);
+  }, [closeDue]);
+  /* eslint-enable no-effect/no-event-handler */
+
+  return {
+    open,
+    onOpenChange: (next) => {
+      setCloseDue(false);
+      setOpen(next);
+    },
+  };
+}

package/src/ai-elements/web-preview.tsx

@@ -0,0 +1,349 @@
+"use client";
+
+import type { ComponentProps, ReactNode, Ref, RefObject } from "react";
+
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { Tabs, TabsList, TabsTrigger } from "../ui/tabs";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../ui/tooltip";
+import { IconBug, IconTerminal2 } from "@tabler/icons-react";
+import { useCn } from "../ui/ui-config";
+import { SURFACE_RADIUS_CLASS } from "../utils/surface-radius";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+export interface WebPreviewContextValue {
+  url: string;
+  setUrl: (url: string) => void;
+  iframeRef: RefObject<HTMLIFrameElement | null>;
+  reload: () => void;
+  goBack: () => void;
+  goForward: () => void;
+}
+
+const WebPreviewContext = createContext<WebPreviewContextValue | null>(null);
+
+export const useWebPreview = () => {
+  const context = useContext(WebPreviewContext);
+  if (!context) {
+    throw new Error("WebPreview components must be used within a WebPreview");
+  }
+  return context;
+};
+
+export type WebPreviewProps = ComponentProps<"div"> & {
+  defaultUrl?: string;
+  onUrlChange?: (url: string) => void;
+  ref?: Ref<HTMLDivElement>;
+};
+
+export const WebPreview = ({
+  className,
+  children,
+  defaultUrl = "",
+  onUrlChange,
+  ref,
+  ...props
+}: WebPreviewProps) => {
+  const merge = useCn();
+  const [url, setUrl] = useState(defaultUrl);
+  const [, setReloadKey] = useState(0);
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+
+  const handleUrlChange = useCallback(
+    (newUrl: string) => {
+      setUrl(newUrl);
+      onUrlChange?.(newUrl);
+    },
+    [onUrlChange],
+  );
+
+  const reload = useCallback(() => setReloadKey((k) => k + 1), []);
+
+  const goBack = useCallback(() => {
+    try {
+      iframeRef.current?.contentWindow?.history.back();
+    } catch {}
+  }, []);
+
+  const goForward = useCallback(() => {
+    try {
+      iframeRef.current?.contentWindow?.history.forward();
+    } catch {}
+  }, []);
+
+  const contextValue = useMemo<WebPreviewContextValue>(
+    () => ({
+      setUrl: handleUrlChange,
+      url,
+      iframeRef,
+      reload,
+      goBack,
+      goForward,
+    }),
+    [handleUrlChange, url, reload, goBack, goForward],
+  );
+
+  return (
+    <WebPreviewContext.Provider value={contextValue}>
+      <div
+        ref={ref}
+        className={merge(
+          "flex size-full flex-col border bg-card",
+          SURFACE_RADIUS_CLASS,
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </WebPreviewContext.Provider>
+  );
+};
+
+export type WebPreviewNavigationProps = ComponentProps<"div">;
+
+export const WebPreviewNavigation = ({
+  className,
+  children,
+  ...props
+}: WebPreviewNavigationProps) => {
+  const merge = useCn();
+  return (
+    <div
+      // `flex-wrap`: the nav holds back/forward/reload plus a URL field and a
+      // device toggle, which is wider than a phone-width preview pane. Without it
+      // the row overflows its container rather than taking a second line.
+      className={merge("flex items-center gap-1 border-b p-2 max-sm:flex-wrap", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+export type WebPreviewNavigationButtonProps = ComponentProps<typeof Button> & {
+  tooltip?: string;
+};
+
+export const WebPreviewNavigationButton = ({
+  onClick,
+  disabled,
+  tooltip,
+  children,
+  ...props
+}: WebPreviewNavigationButtonProps) => (
+  <TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          className="h-8 w-8 p-0 hover:text-foreground"
+          disabled={disabled}
+          onClick={onClick}
+          size="sm"
+          variant="ghost"
+          // These buttons are icon-only, and a `TooltipContent` is wired up as
+          // `aria-describedby` — a description, not a name — so without this
+          // every preview nav control is announced as just "button". Placed
+          // before the spread so a call site can still override it.
+          aria-label={tooltip}
+          {...props}
+        >
+          {children}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>{tooltip}</p>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+);
+
+export type WebPreviewUrlProps = ComponentProps<typeof Input>;
+
+export const WebPreviewUrl = ({
+  value,
+  onChange,
+  onKeyDown,
+  ...props
+}: WebPreviewUrlProps) => {
+  const { url, setUrl } = useWebPreview();
+  const [prevUrl, setPrevUrl] = useState(url);
+  const [inputValue, setInputValue] = useState(url);
+
+  if (url !== prevUrl) {
+    setPrevUrl(url);
+    setInputValue(url);
+  }
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(event.target.value);
+    onChange?.(event);
+  };
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>) => {
+      if (event.key === "Enter") {
+        setUrl(event.currentTarget.value);
+      }
+      onKeyDown?.(event);
+    },
+    [setUrl, onKeyDown],
+  );
+
+  return (
+    <Input
+      className="h-8 flex-1 text-sm"
+      onChange={onChange ?? handleChange}
+      onKeyDown={handleKeyDown}
+      placeholder="Enter URL..."
+      value={value ?? inputValue}
+      {...props}
+    />
+  );
+};
+
+export type WebPreviewBodyProps = Omit<ComponentProps<"iframe">, "loading"> & {
+  loading?: ReactNode;
+};
+
+function ensureHttps(url: string): string {
+  try {
+    const parsed = new URL(url);
+    if (parsed.protocol === "http:") {
+      parsed.protocol = "https:";
+    }
+    return parsed.toString();
+  } catch {
+    return url;
+  }
+}
+
+export const WebPreviewBody = ({
+  className,
+  loading,
+  src,
+  ...props
+}: WebPreviewBodyProps) => {
+  const merge = useCn();
+  const { url, iframeRef } = useWebPreview();
+  const rawSrc = (src ?? url) || undefined;
+  const safeSrc = rawSrc ? ensureHttps(rawSrc) : undefined;
+
+  return (
+    <div className="flex-1 h-full relative overflow-hidden min-h-0">
+      <iframe
+        ref={iframeRef}
+        className={merge("size-full", className)}
+        src={safeSrc}
+        title="Preview"
+        {...props}
+      />
+      {loading}
+    </div>
+  );
+};
+
+export type WebPreviewConsoleProps = ComponentProps<"div"> & {
+  logs?: {
+    level: "log" | "warn" | "error";
+    message: string;
+    timestamp: Date;
+  }[];
+  terminal?: ReactNode;
+};
+
+export const WebPreviewConsole = ({
+  className,
+  logs = [],
+  terminal,
+  children,
+  ...props
+}: WebPreviewConsoleProps) => {
+  const merge = useCn();
+  const [activeTab, setActiveTab] = useState<"console" | "terminal">(
+    terminal ? "terminal" : "console",
+  );
+
+  return (
+    <div className={merge("border-t bg-surface-secondary/50 text-sm", className)} {...props}>
+      <Tabs
+        value={activeTab}
+        onValueChange={(v) => {
+          if (v === "console" || v === "terminal") setActiveTab(v);
+        }}
+        className="h-full flex flex-col"
+      >
+        <TabsList className="w-full justify-start rounded-none bg-transparent px-2 h-9">
+          <TabsTrigger
+            value="console"
+            className="text-xs px-3 rounded-none gap-1.5"
+          >
+            <IconBug className="w-3.5 h-3.5" />
+            Console
+          </TabsTrigger>
+          {terminal && (
+            <TabsTrigger
+              value="terminal"
+              className="text-xs px-3 rounded-none gap-1.5"
+            >
+              <IconTerminal2 className="w-3.5 h-3.5" />
+              Terminal
+            </TabsTrigger>
+          )}
+        </TabsList>
+        <div className="flex-1 min-h-0">
+          <div
+            className={merge(
+              "h-64 space-y-1 overflow-y-auto scrollbar px-4 py-3 font-mono",
+              activeTab !== "console" && "hidden",
+            )}
+          >
+            {logs.length === 0 ? (
+              <p className="text-muted-foreground text-xs">No console output</p>
+            ) : (
+              logs.map((log, index) => (
+                <div
+                  className={merge(
+                    "text-xs",
+                    log.level === "error" && "text-destructive",
+                    log.level === "warn" && "text-warning",
+                    log.level === "log" && "text-foreground",
+                  )}
+                  key={`${log.timestamp.getTime()}-${index}`}
+                >
+                  <span className="text-muted-foreground">
+                    {log.timestamp.toLocaleTimeString()}
+                  </span>{" "}
+                  {log.message}
+                </div>
+              ))
+            )}
+            {children}
+          </div>
+          {terminal && (
+            <div
+              className={merge(
+                "h-64 overflow-y-auto scrollbar",
+                activeTab !== "terminal" && "hidden",
+              )}
+            >
+              {terminal}
+            </div>
+          )}
+        </div>
+      </Tabs>
+    </div>
+  );
+};

package/src/composer/input-area/ComposerSlashMenu.tsx

@@ -112,7 +112,7 @@ export function ComposerSlashMenu({
                         "transition-[background-color] active:scale-[0.99] active:duration-100 active:ease-out " +
                         (isSelected
                           ? "bg-primary/15 font-medium text-foreground dark:bg-primary/25"
-                          : "text-foreground/90 hover:bg-muted")
+                          : "text-foreground/90 hover:bg-muted") // check-tokens-allow: muted
                       }
                     >
                       {renderItem ? (