');
+ expect(html).toContain("kpi kpi-danger");
+ expect(html).toContain('5');
+ expect(html).not.toContain("");
+ });
+
+ it("renders page headers without description paragraphs", () => {
+ const html = renderToStaticMarkup();
+ expect(html).toContain('Overview
');
+ expect(html).not.toContain("");
+ });
+});
diff --git a/apps/web/src/components/console-ui.tsx b/apps/web/src/components/console-ui.tsx
new file mode 100644
index 000000000..fbbae3b3d
--- /dev/null
+++ b/apps/web/src/components/console-ui.tsx
@@ -0,0 +1,315 @@
+import { CircleHelp, RefreshCw, type LucideIcon } from "lucide-react";
+import { useCallback, useEffect, useId, useRef, useState, type ReactNode } from "react";
+import * as m from "motion/react-m";
+import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
+
+/**
+ * Shared page grammar for the administrator console. Every page uses the same
+ * header, body padding, section heading, metric strip, status and meter
+ * vocabulary so that screens read as one product.
+ */
+
+const TIP_WIDTH = 288;
+
+/**
+ * Explanations live behind a small circled question mark instead of lines of
+ * small print. The tip opens on hover, keyboard focus or click and renders in a
+ * portal so framed containers cannot clip it.
+ */
+export function HelpTip({ children, label, id: fixedId }: { children: ReactNode; label?: string; id?: string }) {
+ const { t } = useTranslation();
+ const buttonRef = useRef(null);
+ const [position, setPosition] = useState<{ top: number; left: number; above: boolean } | null>(null);
+ const [pinned, setPinned] = useState(false);
+ const generatedId = useId();
+ // A fixed id lets a form control keep pointing at the explanation with aria-describedby.
+ const id = fixedId ?? generatedId;
+
+ const show = useCallback(() => {
+ const rect = buttonRef.current?.getBoundingClientRect();
+ if (!rect) return;
+ const left = Math.min(Math.max(8, rect.left - 12), window.innerWidth - TIP_WIDTH - 8);
+ const above = rect.bottom + 160 > window.innerHeight && rect.top > 180;
+ setPosition({ top: above ? rect.top - 8 : rect.bottom + 8, left, above });
+ }, []);
+ const hide = useCallback(() => {
+ setPosition(null);
+ setPinned(false);
+ }, []);
+
+ useEffect(() => {
+ if (!position) return;
+ const close = () => hide();
+ window.addEventListener("scroll", close, true);
+ window.addEventListener("resize", close);
+ return () => {
+ window.removeEventListener("scroll", close, true);
+ window.removeEventListener("resize", close);
+ };
+ }, [hide, position]);
+
+ return (
+ <>
+
+ {/* The explanation stays in the document for assistive technology; the popover is its visual copy. */}
+ {children}
+ {position && typeof document !== "undefined" ? createPortal(
+
+ {children}
+
,
+ document.body,
+ ) : null}
+
+ );
+}
+
+export function PageHeader({
+ title,
+ help,
+ actions,
+ headingId,
+}: {
+ title: ReactNode;
+ help?: ReactNode;
+ actions?: ReactNode;
+ headingId?: string;
+}) {
+ return (
+
+ );
+}
+
+export function RefreshButton({
+ onClick,
+ refreshing = false,
+ disabled = false,
+ label,
+ updatedAt,
+}: {
+ onClick: () => void;
+ refreshing?: boolean;
+ disabled?: boolean;
+ label?: string;
+ /** Shown as the button's tooltip instead of a visible timestamp. */
+ updatedAt?: string | null;
+}) {
+ const { t } = useTranslation();
+ const name = refreshing ? t("actions.refreshing") : label ?? t("actions.refresh");
+ return (
+
+ );
+}
+
+export function PageBody({ children, className }: { children: ReactNode; className?: string }) {
+ return {children}
;
+}
+
+export function Section({
+ title,
+ help,
+ actions,
+ headingId,
+ children,
+ className,
+}: {
+ title: ReactNode;
+ help?: ReactNode;
+ actions?: ReactNode;
+ headingId: string;
+ children: ReactNode;
+ className?: string;
+}) {
+ return (
+
+ );
+}
+
+export type Tone = "ok" | "warning" | "danger" | "neutral" | "pending";
+
+export function StatusDot({ tone, label }: { tone: Tone; label: ReactNode }) {
+ return (
+
+
+ {label}
+
+ );
+}
+
+export function KpiStrip({ children, label }: { children: ReactNode; label: string }) {
+ return {children}
;
+}
+
+export function Kpi({
+ label,
+ value,
+ help,
+ tone,
+}: {
+ label: ReactNode;
+ value: ReactNode;
+ help?: ReactNode;
+ tone?: Tone;
+}) {
+ return (
+
+
-
+ {label}
+ {help ? {help} : null}
+
+ -
+ {tone ? : null}
+ {value}
+
+
+ );
+}
+
+/** A ratio against a limit. The fill carries severity; the track stays in the same ramp. */
+export function Meter({
+ value,
+ limit,
+ label,
+ warnAt = 0.9,
+ dangerAt = 1,
+ color,
+}: {
+ value: number | null;
+ limit: number | null;
+ label: string;
+ warnAt?: number;
+ dangerAt?: number;
+ /** Fixed identity colour for a share (for example a status); disables the threshold tones. */
+ color?: string;
+}) {
+ const ratio = value !== null && limit !== null && limit > 0 ? Math.min(1, Math.max(0, value / limit)) : null;
+ const tone = ratio === null ? "unknown" : color ? "share" : ratio >= dangerAt ? "danger" : ratio >= warnAt ? "warning" : "ok";
+ return (
+
+ 0 ? 3 : 0)}%`, background: color }} />
+
+ );
+}
+
+export function EmptyState({
+ icon: Icon,
+ title,
+ description,
+ action,
+}: {
+ icon?: LucideIcon;
+ title: ReactNode;
+ description?: ReactNode;
+ action?: ReactNode;
+}) {
+ return (
+
+ {Icon ?
: null}
+
{title}
+ {description ?
{description}
: null}
+ {action ?
{action}
: null}
+
{
+ if (event.key === "ArrowRight" || event.key === "ArrowDown") { event.preventDefault(); move(1); }
+ if (event.key === "ArrowLeft" || event.key === "ArrowUp") { event.preventDefault(); move(-1); }
+ }}
+ >
+ {options.map((option) => (
+
+ ))}
+
+ );
+}
diff --git a/apps/web/src/components/list-ui.tsx b/apps/web/src/components/list-ui.tsx
new file mode 100644
index 000000000..684c79c46
--- /dev/null
+++ b/apps/web/src/components/list-ui.tsx
@@ -0,0 +1,144 @@
+import { Check, Copy, Search } from "lucide-react";
+import { useEffect, useState, type ButtonHTMLAttributes, type MouseEvent, type ReactNode } from "react";
+import type { TFunction } from "i18next";
+import { useTranslation } from "react-i18next";
+
+import { shortId } from "../lib/format";
+
+/**
+ * One list grammar for every resource page: a toolbar (search first, then
+ * filters, the count on the right), a framed table whose first column carries
+ * the name with its ID underneath, and row actions aligned at the end.
+ */
+
+export function ListToolbar({ label, children, summary }: { label: string; children?: ReactNode; summary?: ReactNode }) {
+ return (
+
+
{children}
+ {summary ?
{summary}
: null}
+
{compact ? shortId(id) : id}
+
+
+ );
+}
+
+/**
+ * The first column of every resource table: the name (or a muted fallback)
+ * with the compact ID and its copy button underneath. When `onOpen` is given
+ * the name opens the resource.
+ */
+export function NameCell({
+ name,
+ id,
+ fallback,
+ onOpen,
+ openLabel,
+ openProps,
+ idLabel,
+ children,
+}: {
+ name: string | null | undefined;
+ id: string;
+ fallback?: string;
+ onOpen?: () => void;
+ openLabel?: string;
+ /** Extra attributes for the open button (data hooks, disabled). */
+ openProps?: ButtonHTMLAttributes & Record<`data-${string}`, string>;
+ /** Accessible name of the copy button when a resource-specific one reads better ("Copy File ID"). */
+ idLabel?: string;
+ /** Optional inline marker after the name, for example a status. */
+ children?: ReactNode;
+}) {
+ const label = name?.trim() ? name : null;
+ const title = label ?? fallback ?? id;
+ return (
+
+
+ {onOpen ? (
+
+ ) : (
+ {title}
+ )}
+ {children}
+
+
+
+ );
+}
+
+export function RowActions({ children }: { children: ReactNode }) {
+ return {children};
+}
diff --git a/apps/web/src/components/live-number.tsx b/apps/web/src/components/live-number.tsx
new file mode 100644
index 000000000..75980b53b
--- /dev/null
+++ b/apps/web/src/components/live-number.tsx
@@ -0,0 +1,28 @@
+import NumberFlow, { type Format } from "@number-flow/react";
+import { useTranslation } from "react-i18next";
+
+import { MISSING } from "../lib/format";
+
+export type LiveNumberFormat = "integer" | "compact" | "percent";
+
+/** Intl options matching formatInteger, formatCompact and formatPercent in lib/format. */
+function formatOptions(value: number, format: LiveNumberFormat, locale: string | undefined): Format {
+ if (format === "percent") return { style: "percent", maximumFractionDigits: value > 0 && value < 0.1 ? 1 : 0 };
+ if (format === "integer" || Math.abs(value) < 10_000) return { maximumFractionDigits: 0 };
+ const integerDigits = new Intl.NumberFormat(locale, { notation: "compact", maximumFractionDigits: 1 })
+ .formatToParts(value).filter((part) => part.type === "integer").map((part) => part.value).join("").length;
+ return { notation: "compact", maximumFractionDigits: integerDigits === 1 ? 2 : 1 };
+}
+
+/**
+ * A live figure. When a refresh changes it, its digits roll to the new value
+ * (NumberFlow, https://number-flow.barvian.me) instead of swapping, so a
+ * change is noticed without a highlight; the first render does not animate.
+ * Missing figures stay an em dash.
+ */
+export function LiveNumber({ value, format = "integer" }: { value: number | null | undefined; format?: LiveNumberFormat }) {
+ const { i18n } = useTranslation();
+ const locale = i18n.resolvedLanguage;
+ if (value === null || value === undefined || !Number.isFinite(value)) return <>{MISSING};
+ return ;
+}
diff --git a/apps/web/src/components/magicui/README.md b/apps/web/src/components/magicui/README.md
new file mode 100644
index 000000000..325aaa17c
--- /dev/null
+++ b/apps/web/src/components/magicui/README.md
@@ -0,0 +1,14 @@
+# Magic UI components
+
+Copied from the Magic UI registry (, MIT License,
+Copyright (c) Magic UI) and used by the onboarding stage. Their animation
+keyframes live in `src/styles/magicui-theme.css`.
+
+Local changes:
+
+- `motion.*` components are Motion's lazy `m.*` components, as the console
+ renders inside a strict `LazyMotion`.
+- `flickering-grid.tsx` draws one still frame with reduced motion, redrawn on
+ resize, instead of flickering.
+- `orbiting-circles.tsx` starts each orbit at its wall-clock phase, so a
+ remounted orbit continues instead of jumping, and ignores the unused `delay`.
diff --git a/apps/web/src/components/magicui/animated-shiny-text.tsx b/apps/web/src/components/magicui/animated-shiny-text.tsx
new file mode 100644
index 000000000..02b24c193
--- /dev/null
+++ b/apps/web/src/components/magicui/animated-shiny-text.tsx
@@ -0,0 +1,42 @@
+import {
+ type ComponentPropsWithoutRef,
+ type CSSProperties,
+ type FC,
+} from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface AnimatedShinyTextProps extends ComponentPropsWithoutRef<"span"> {
+ shimmerWidth?: number
+}
+
+export const AnimatedShinyText: FC = ({
+ children,
+ className,
+ shimmerWidth = 100,
+ ...props
+}) => {
+ return (
+
+ {children}
+
+ )
+}
diff --git a/apps/web/src/components/magicui/blur-fade.tsx b/apps/web/src/components/magicui/blur-fade.tsx
new file mode 100644
index 000000000..a8aa58630
--- /dev/null
+++ b/apps/web/src/components/magicui/blur-fade.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import { useRef } from "react"
+import * as m from "motion/react-m"
+import {
+ AnimatePresence,
+ useInView,
+ type MotionProps,
+ type UseInViewOptions,
+ type Variants,
+} from "motion/react"
+
+type MarginType = UseInViewOptions["margin"]
+
+interface BlurFadeProps extends MotionProps {
+ children: React.ReactNode
+ className?: string
+ variant?: {
+ hidden: { y: number }
+ visible: { y: number }
+ }
+ duration?: number
+ delay?: number
+ offset?: number
+ direction?: "up" | "down" | "left" | "right"
+ inView?: boolean
+ inViewMargin?: MarginType
+ blur?: string
+}
+
+const getFilter = (v: Variants[string]) =>
+ typeof v === "function" ? undefined : v.filter
+
+export function BlurFade({
+ children,
+ className,
+ variant,
+ duration = 0.4,
+ delay = 0,
+ offset = 6,
+ direction = "down",
+ inView = false,
+ inViewMargin = "-50px",
+ blur = "6px",
+ ...props
+}: BlurFadeProps) {
+ const ref = useRef(null)
+ const inViewResult = useInView(ref, { once: true, margin: inViewMargin })
+ const isInView = !inView || inViewResult
+ const defaultVariants: Variants = {
+ hidden: {
+ [direction === "left" || direction === "right" ? "x" : "y"]:
+ direction === "right" || direction === "down" ? -offset : offset,
+ opacity: 0,
+ filter: `blur(${blur})`,
+ },
+ visible: {
+ [direction === "left" || direction === "right" ? "x" : "y"]: 0,
+ opacity: 1,
+ filter: `blur(0px)`,
+ },
+ }
+ const combinedVariants = variant ?? defaultVariants
+
+ const hiddenFilter = getFilter(combinedVariants.hidden)
+ const visibleFilter = getFilter(combinedVariants.visible)
+
+ const shouldTransitionFilter =
+ hiddenFilter != null &&
+ visibleFilter != null &&
+ hiddenFilter !== visibleFilter
+
+ return (
+
+
+ {children}
+
+
+ )
+}
diff --git a/apps/web/src/components/magicui/border-beam.tsx b/apps/web/src/components/magicui/border-beam.tsx
new file mode 100644
index 000000000..2e34104ca
--- /dev/null
+++ b/apps/web/src/components/magicui/border-beam.tsx
@@ -0,0 +1,111 @@
+"use client"
+
+import * as m from "motion/react-m"
+import {
+ type MotionStyle,
+ type Transition,
+} from "motion/react"
+
+import { cn } from "@/lib/utils"
+
+interface BorderBeamProps {
+ /**
+ * The size of the border beam.
+ */
+ size?: number
+ /**
+ * The duration of the border beam.
+ */
+ duration?: number
+ /**
+ * The delay of the border beam.
+ */
+ delay?: number
+ /**
+ * The color of the border beam from.
+ */
+ colorFrom?: string
+ /**
+ * The color of the border beam to.
+ */
+ colorTo?: string
+ /**
+ * The motion transition of the border beam.
+ */
+ transition?: Transition
+ /**
+ * The class name of the border beam.
+ */
+ className?: string
+ /**
+ * The style of the border beam.
+ */
+ style?: React.CSSProperties
+ /**
+ * Whether to reverse the animation direction.
+ */
+ reverse?: boolean
+ /**
+ * The initial offset position (0-100).
+ */
+ initialOffset?: number
+ /**
+ * The border width of the beam.
+ */
+ borderWidth?: number
+}
+
+export const BorderBeam = ({
+ className,
+ size = 50,
+ delay = 0,
+ duration = 6,
+ colorFrom = "#ffaa40",
+ colorTo = "#9c40ff",
+ transition,
+ style,
+ reverse = false,
+ initialOffset = 0,
+ borderWidth = 1,
+}: BorderBeamProps) => {
+ return (
+
+
+
+ )
+}
diff --git a/apps/web/src/components/magicui/flickering-grid.tsx b/apps/web/src/components/magicui/flickering-grid.tsx
new file mode 100644
index 000000000..5ce387ede
--- /dev/null
+++ b/apps/web/src/components/magicui/flickering-grid.tsx
@@ -0,0 +1,203 @@
+"use client"
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
+
+import { cn } from "@/lib/utils"
+
+interface FlickeringGridProps extends React.HTMLAttributes {
+ squareSize?: number
+ gridGap?: number
+ flickerChance?: number
+ color?: string
+ width?: number
+ height?: number
+ className?: string
+ maxOpacity?: number
+}
+
+export const FlickeringGrid: React.FC = ({
+ squareSize = 4,
+ gridGap = 6,
+ flickerChance = 0.3,
+ color = "rgb(0, 0, 0)",
+ width,
+ height,
+ className,
+ maxOpacity = 0.3,
+ ...props
+}) => {
+ const canvasRef = useRef(null)
+ const containerRef = useRef(null)
+ const [isInView, setIsInView] = useState(false)
+ const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 })
+
+ const memoizedColor = useMemo(() => {
+ const toRGBA = (color: string) => {
+ if (typeof window === "undefined") {
+ return `rgba(0, 0, 0,`
+ }
+ const canvas = document.createElement("canvas")
+ canvas.width = canvas.height = 1
+ const ctx = canvas.getContext("2d")
+ if (!ctx) return "rgba(255, 0, 0,"
+ ctx.fillStyle = color
+ ctx.fillRect(0, 0, 1, 1)
+ const [r, g, b] = Array.from(ctx.getImageData(0, 0, 1, 1).data)
+ return `rgba(${r}, ${g}, ${b},`
+ }
+ return toRGBA(color)
+ }, [color])
+
+ const setupCanvas = useCallback(
+ (canvas: HTMLCanvasElement, width: number, height: number) => {
+ const dpr = window.devicePixelRatio || 1
+ canvas.width = width * dpr
+ canvas.height = height * dpr
+ canvas.style.width = `${width}px`
+ canvas.style.height = `${height}px`
+ const cols = Math.ceil(width / (squareSize + gridGap))
+ const rows = Math.ceil(height / (squareSize + gridGap))
+
+ const squares = new Float32Array(cols * rows)
+ for (let i = 0; i < squares.length; i++) {
+ squares[i] = Math.random() * maxOpacity
+ }
+
+ return { cols, rows, squares, dpr }
+ },
+ [squareSize, gridGap, maxOpacity]
+ )
+
+ const updateSquares = useCallback(
+ (squares: Float32Array, deltaTime: number) => {
+ for (let i = 0; i < squares.length; i++) {
+ if (Math.random() < flickerChance * deltaTime) {
+ squares[i] = Math.random() * maxOpacity
+ }
+ }
+ },
+ [flickerChance, maxOpacity]
+ )
+
+ const drawGrid = useCallback(
+ (
+ ctx: CanvasRenderingContext2D,
+ width: number,
+ height: number,
+ cols: number,
+ rows: number,
+ squares: Float32Array,
+ dpr: number
+ ) => {
+ ctx.clearRect(0, 0, width, height)
+ ctx.fillStyle = "transparent"
+ ctx.fillRect(0, 0, width, height)
+
+ for (let i = 0; i < cols; i++) {
+ for (let j = 0; j < rows; j++) {
+ const opacity = squares[i * rows + j]
+ ctx.fillStyle = `${memoizedColor}${opacity})`
+ ctx.fillRect(
+ i * (squareSize + gridGap) * dpr,
+ j * (squareSize + gridGap) * dpr,
+ squareSize * dpr,
+ squareSize * dpr
+ )
+ }
+ }
+ },
+ [memoizedColor, squareSize, gridGap]
+ )
+
+ useEffect(() => {
+ const canvas = canvasRef.current
+ const container = containerRef.current
+ const ctx = canvas?.getContext("2d") ?? null
+ let animationFrameId: number | null = null
+ let resizeObserver: ResizeObserver | null = null
+ let intersectionObserver: IntersectionObserver | null = null
+ let gridParams: ReturnType | null = null
+
+ if (canvas && container && ctx) {
+ // Local change: with reduced motion the grid is one still frame, redrawn on resize.
+ const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches
+ const updateCanvasSize = () => {
+ const newWidth = width || container.clientWidth
+ const newHeight = height || container.clientHeight
+ setCanvasSize({ width: newWidth, height: newHeight })
+ gridParams = setupCanvas(canvas, newWidth, newHeight)
+ if (reduced) {
+ drawGrid(ctx, canvas.width, canvas.height, gridParams.cols, gridParams.rows, gridParams.squares, gridParams.dpr)
+ }
+ }
+
+ updateCanvasSize()
+
+ let lastTime = 0
+ const animate = (time: number) => {
+ if (!isInView || !gridParams) return
+
+ const deltaTime = (time - lastTime) / 1000
+ lastTime = time
+
+ updateSquares(gridParams.squares, deltaTime)
+ drawGrid(
+ ctx,
+ canvas.width,
+ canvas.height,
+ gridParams.cols,
+ gridParams.rows,
+ gridParams.squares,
+ gridParams.dpr
+ )
+ animationFrameId = requestAnimationFrame(animate)
+ }
+
+ resizeObserver = new ResizeObserver(() => {
+ updateCanvasSize()
+ })
+ resizeObserver.observe(container)
+
+ intersectionObserver = new IntersectionObserver(
+ ([entry]) => {
+ setIsInView(entry?.isIntersecting ?? false)
+ },
+ { threshold: 0 }
+ )
+ intersectionObserver.observe(canvas)
+
+ if (!reduced && isInView) {
+ animationFrameId = requestAnimationFrame(animate)
+ }
+ }
+
+ return () => {
+ if (animationFrameId !== null) {
+ cancelAnimationFrame(animationFrameId)
+ }
+ if (resizeObserver) {
+ resizeObserver.disconnect()
+ }
+ if (intersectionObserver) {
+ intersectionObserver.disconnect()
+ }
+ }
+ }, [setupCanvas, updateSquares, drawGrid, width, height, isInView])
+
+ return (
+
+
+
+ )
+}
diff --git a/apps/web/src/components/magicui/light-rays.tsx b/apps/web/src/components/magicui/light-rays.tsx
new file mode 100644
index 000000000..a70c4cd10
--- /dev/null
+++ b/apps/web/src/components/magicui/light-rays.tsx
@@ -0,0 +1,149 @@
+"use client"
+
+import { useEffect, useState, type CSSProperties } from "react"
+import * as m from "motion/react-m"
+
+import { cn } from "@/lib/utils"
+
+interface LightRaysProps extends React.HTMLAttributes {
+ ref?: React.Ref
+ count?: number
+ color?: string
+ blur?: number
+ speed?: number
+ length?: string
+}
+
+type LightRay = {
+ id: string
+ left: number
+ rotate: number
+ width: number
+ swing: number
+ delay: number
+ duration: number
+ intensity: number
+}
+
+const createRays = (count: number, cycle: number): LightRay[] => {
+ if (count <= 0) return []
+
+ return Array.from({ length: count }, (_, index) => {
+ const left = 8 + Math.random() * 84
+ const rotate = -28 + Math.random() * 56
+ const width = 160 + Math.random() * 160
+ const swing = 0.8 + Math.random() * 1.8
+ const delay = Math.random() * cycle
+ const duration = cycle * (0.75 + Math.random() * 0.5)
+ const intensity = 0.6 + Math.random() * 0.5
+
+ return {
+ id: `${index}-${Math.round(left * 10)}`,
+ left,
+ rotate,
+ width,
+ swing,
+ delay,
+ duration,
+ intensity,
+ }
+ })
+}
+
+const Ray = ({
+ left,
+ rotate,
+ width,
+ swing,
+ delay,
+ duration,
+ intensity,
+}: LightRay) => {
+ return (
+
+ )
+}
+
+export function LightRays({
+ className,
+ style,
+ count = 7,
+ color = "rgba(160, 210, 255, 0.2)",
+ blur = 36,
+ speed = 14,
+ length = "70vh",
+ ref,
+ ...props
+}: LightRaysProps) {
+ const [rays, setRays] = useState([])
+ const cycleDuration = Math.max(speed, 0.1)
+
+ useEffect(() => {
+ setRays(createRays(count, cycleDuration))
+ }, [count, cycleDuration])
+
+ return (
+
+
+
+
+ {rays.map((ray) => (
+
+ ))}
+
+
+ {child}
+
+ )
+ })}
+
+ )
+}
diff --git a/apps/web/src/components/magicui/terminal.tsx b/apps/web/src/components/magicui/terminal.tsx
new file mode 100644
index 000000000..df2f3f20d
--- /dev/null
+++ b/apps/web/src/components/magicui/terminal.tsx
@@ -0,0 +1,300 @@
+"use client"
+
+import {
+ Children,
+ createContext,
+ useContext,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+ type ComponentType,
+ type RefAttributes,
+} from "react"
+import * as m from "motion/react-m"
+import {
+ useInView,
+ type DOMMotionComponents,
+ type HTMLMotionProps,
+ type MotionProps,
+} from "motion/react"
+
+import { cn } from "@/lib/utils"
+
+interface SequenceContextValue {
+ completeItem: (index: number) => void
+ activeIndex: number
+ sequenceStarted: boolean
+}
+
+const SequenceContext = createContext(null)
+
+const useSequence = () => useContext(SequenceContext)
+
+const ItemIndexContext = createContext(null)
+const useItemIndex = () => useContext(ItemIndexContext)
+
+const motionElements = {
+ article: m.article,
+ div: m.div,
+ h1: m.h1,
+ h2: m.h2,
+ h3: m.h3,
+ h4: m.h4,
+ h5: m.h5,
+ h6: m.h6,
+ li: m.li,
+ p: m.p,
+ section: m.section,
+ span: m.span,
+} as const
+
+type MotionElementType = Extract<
+ keyof DOMMotionComponents,
+ keyof typeof motionElements
+>
+type TerminalTypingMotionComponent = ComponentType<
+ Omit, "ref"> & RefAttributes
+>
+
+interface AnimatedSpanProps extends MotionProps {
+ children: React.ReactNode
+ delay?: number
+ className?: string
+ startOnView?: boolean
+}
+
+export const AnimatedSpan = ({
+ children,
+ delay = 0,
+ className,
+ startOnView = false,
+ ...props
+}: AnimatedSpanProps) => {
+ const elementRef = useRef(null)
+ const isInView = useInView(elementRef as React.RefObject, {
+ amount: 0.3,
+ once: true,
+ })
+
+ const sequence = useSequence()
+ const itemIndex = useItemIndex()
+ const [hasStarted, setHasStarted] = useState(false)
+ useEffect(() => {
+ if (!sequence || itemIndex === null) return
+ if (!sequence.sequenceStarted) return
+ if (hasStarted) return
+ if (sequence.activeIndex === itemIndex) {
+ setHasStarted(true)
+ }
+ }, [sequence, hasStarted, itemIndex])
+
+ const shouldAnimate = sequence ? hasStarted : startOnView ? isInView : true
+
+ return (
+ {
+ if (!sequence) return
+ if (itemIndex === null) return
+ sequence.completeItem(itemIndex)
+ }}
+ {...props}
+ >
+ {children}
+
+ )
+}
+
+interface TypingAnimationProps extends Omit {
+ children: string
+ className?: string
+ duration?: number
+ delay?: number
+ as?: MotionElementType
+ startOnView?: boolean
+}
+
+export const TypingAnimation = ({
+ children,
+ className,
+ duration = 60,
+ delay = 0,
+ as: Component = "span",
+ startOnView = true,
+ ...props
+}: TypingAnimationProps) => {
+ if (typeof children !== "string") {
+ throw new Error("TypingAnimation: children must be a string. Received:")
+ }
+
+ const MotionComponent = motionElements[
+ Component
+ ] as TerminalTypingMotionComponent
+
+ const [displayedText, setDisplayedText] = useState("")
+ const [started, setStarted] = useState(false)
+ const elementRef = useRef(null)
+ const isInView = useInView(elementRef as React.RefObject, {
+ amount: 0.3,
+ once: true,
+ })
+
+ const sequence = useSequence()
+ const itemIndex = useItemIndex()
+ const hasSequence = sequence !== null
+ const sequenceStarted = sequence?.sequenceStarted ?? false
+ const sequenceActiveIndex = sequence?.activeIndex ?? null
+ const sequenceCompleteItemRef = useRef<
+ SequenceContextValue["completeItem"] | null
+ >(null)
+ const sequenceItemIndexRef = useRef(null)
+
+ useEffect(() => {
+ sequenceCompleteItemRef.current = sequence?.completeItem ?? null
+ sequenceItemIndexRef.current = itemIndex
+ }, [sequence?.completeItem, itemIndex])
+
+ useEffect(() => {
+ let startTimeout: ReturnType | null = null
+
+ if (hasSequence && itemIndex !== null) {
+ if (sequenceStarted && !started && sequenceActiveIndex === itemIndex) {
+ setStarted(true)
+ }
+ } else if (!startOnView || isInView) {
+ startTimeout = setTimeout(() => setStarted(true), delay)
+ }
+
+ return () => {
+ if (startTimeout !== null) {
+ clearTimeout(startTimeout)
+ }
+ }
+ }, [
+ delay,
+ startOnView,
+ isInView,
+ started,
+ hasSequence,
+ sequenceActiveIndex,
+ sequenceStarted,
+ itemIndex,
+ ])
+
+ useEffect(() => {
+ let typingEffect: ReturnType | null = null
+
+ if (started) {
+ let i = 0
+ typingEffect = setInterval(() => {
+ if (i < children.length) {
+ setDisplayedText(children.substring(0, i + 1))
+ i++
+ } else {
+ if (typingEffect !== null) {
+ clearInterval(typingEffect)
+ }
+ const completeItem = sequenceCompleteItemRef.current
+ const currentItemIndex = sequenceItemIndexRef.current
+ if (completeItem && currentItemIndex !== null) {
+ completeItem(currentItemIndex)
+ }
+ }
+ }, duration)
+ }
+
+ return () => {
+ if (typingEffect !== null) {
+ clearInterval(typingEffect)
+ }
+ }
+ }, [children, duration, started])
+
+ return (
+
+ {displayedText}
+
+ )
+}
+
+interface TerminalProps {
+ children: React.ReactNode
+ className?: string
+ sequence?: boolean
+ startOnView?: boolean
+}
+
+export const Terminal = ({
+ children,
+ className,
+ sequence = true,
+ startOnView = true,
+}: TerminalProps) => {
+ const containerRef = useRef(null)
+ const isInView = useInView(containerRef as React.RefObject, {
+ amount: 0.3,
+ once: true,
+ })
+
+ const [activeIndex, setActiveIndex] = useState(0)
+ const sequenceHasStarted = sequence ? !startOnView || isInView : false
+
+ const contextValue = useMemo(() => {
+ if (!sequence) return null
+ return {
+ completeItem: (index: number) => {
+ setActiveIndex((current) => (index === current ? current + 1 : current))
+ },
+ activeIndex,
+ sequenceStarted: sequenceHasStarted,
+ }
+ }, [sequence, activeIndex, sequenceHasStarted])
+
+ const wrappedChildren = useMemo(() => {
+ if (!sequence) return children
+ const array = Children.toArray(children)
+ return array.map((child, index) => (
+
+ {child as React.ReactNode}
+
+ ))
+ }, [children, sequence])
+
+ const content = (
+
+
+
+ {wrappedChildren}
+
+
+
+ {children}
+
+
+
+
+
+
+
+
+ );
+}
+
+export function SelectItem({
+ className,
+ children,
+ ...props
+}: SelectPrimitive.Item.Props): React.ReactElement {
+ return (
+
+
+
+
+
+ {children}
+
+
+ );
+}
+
+export function SelectSeparator({
+ className,
+ ...props
+}: SelectPrimitive.Separator.Props): React.ReactElement {
+ return (
+
+ );
+}
+
+export function SelectGroup(
+ props: SelectPrimitive.Group.Props,
+): React.ReactElement {
+ return ;
+}
+
+export function SelectLabel({
+ className,
+ ...props
+}: SelectPrimitive.Label.Props): React.ReactElement {
+ return (
+
+ );
+}
+
+export function SelectGroupLabel(
+ props: SelectPrimitive.GroupLabel.Props,
+): React.ReactElement {
+ return (
+
+ );
+}
+
+export { SelectPrimitive, SelectPopup as SelectContent };
diff --git a/apps/web/src/features/CoreCollectionStates.test.tsx b/apps/web/src/features/CoreCollectionStates.test.tsx
deleted file mode 100644
index 1c1997c33..000000000
--- a/apps/web/src/features/CoreCollectionStates.test.tsx
+++ /dev/null
@@ -1,490 +0,0 @@
-import { renderToStaticMarkup } from "react-dom/server";
-import { describe, expect, it } from "vitest";
-
-import type { AgentSession, SavedAgent, SessionItem } from "@agents-core-web/agents-client";
-
-import { AgentsView } from "./agents/AgentsView";
-import { restoreDraftAfterFailedSend, SessionsView } from "./sessions/SessionsView";
-
-const agentsCallbacks = {
- onCreate: async () => undefined,
- onRefresh: () => undefined,
- onStartSession: async () => undefined,
-};
-
-const sessionsCallbacks = {
- onCancel: async () => undefined,
- onCreateSession: async () => undefined,
- onDeleteSession: async () => true,
- onCancelAndDeleteSession: async () => true,
- onFunctionResult: async () => undefined,
- onRefresh: () => undefined,
- onRetrySession: () => undefined,
- onRetryStream: () => undefined,
- onRetrieveSession: async () => undefined,
- onSelect: () => undefined,
- onSend: async () => undefined,
- onUpdateSession: async () => undefined,
-};
-
-const selectedSession: AgentSession = {
- id: "session_1",
- object: "agent.session",
- agent: {
- id: "agent_1",
- model: "gpt-5",
- name: "Researcher",
- instructions: null,
- multi_agent: { enabled: false, max_concurrent_subagents: null },
- reasoning: {},
- service_tier: "auto",
- text: { format: { type: "text" }, verbosity: "medium" },
- tools: [],
- },
- environment: { type: "none" },
- status: "idle",
- error: null,
- metadata: {},
- required_actions: [],
- vault_ids: [],
- usage: null,
- created_at: 1,
- last_active_at: 1,
-};
-
-const durableItems: SessionItem[] = [{
- id: "item_1",
- turn_id: "turn_1",
- type: "message",
- status: "completed",
- role: "user",
- content: [{ type: "input_text", text: "Existing durable item" }],
-}];
-
-const savedAgent: SavedAgent = {
- ...selectedSession.agent,
- object: "agent",
- metadata: {},
- created_at: 1,
- updated_at: 1,
-};
-
-describe("Agent Core collection states", () => {
- it("restores a failed message only when it cannot overwrite a newer draft", () => {
- expect(restoreDraftAfterFailedSend("", "failed message")).toBe("failed message");
- expect(restoreDraftAfterFailedSend("new draft", "failed message")).toBe("new draft");
- });
-
- it("keeps an Agents load failure distinct from a ready empty collection", () => {
- const failed = renderToStaticMarkup(
- ,
- );
- const empty = renderToStaticMarkup(
- ,
- );
-
- expect(failed).toContain("Couldn’t load Agents");
- expect(failed).toContain("connection refused");
- expect(failed).not.toContain("No saved Agents");
- expect(empty).toContain("No saved Agents");
- });
-
- it("keeps a stale Agent ledger visible when its collection refresh fails", () => {
- const failed = renderToStaticMarkup(
- ,
- );
-
- expect(failed).toContain("Couldn’t refresh Agents");
- expect(failed).toContain("agents refresh failed");
- expect(failed).toContain('aria-label="Agents"');
- expect(failed).toContain("Researcher");
- });
-
- it("shows composer activity only for a Core-reported in-progress Session", () => {
- const renderStatus = (status: AgentSession["status"], busy = false) => renderToStaticMarkup(
- ,
- );
-
- const active = renderStatus("in_progress");
- expect(active).toContain('class="conversation-activity"');
- expect(active).toContain('role="status" aria-live="polite" aria-atomic="true"');
- expect(active).toContain("Researcher is working…");
- expect(renderStatus("idle", true)).not.toContain("conversation-activity");
- expect(renderStatus("requires_action")).not.toContain("conversation-activity");
- expect(renderStatus("failed")).not.toContain("conversation-activity");
- });
-
- it("keeps Sessions loading and failure distinct from ready empty copy", () => {
- const common = {
- agents: [],
- sessions: [],
- selected: null,
- items: [],
- busy: false,
- detailError: null,
- detailState: "idle" as const,
- streamError: null,
- streamState: "idle" as const,
- ...sessionsCallbacks,
- };
- const loading = renderToStaticMarkup(
- ,
- );
- const failed = renderToStaticMarkup(
- ,
- );
- const empty = renderToStaticMarkup(
- ,
- );
-
- expect(loading).toContain("Loading Sessions");
- expect(loading).not.toContain("No Sessions yet");
- expect(failed).toContain("Couldn’t load Sessions");
- expect(failed).not.toContain("Select or create a Session");
- expect(empty).toContain("No Sessions yet");
- expect(empty).toContain("Select or create a Session");
- });
-
- it("keeps stale Sessions and a healthy selected workspace usable after collection refresh fails", () => {
- const failed = renderToStaticMarkup(
- ,
- );
- const composer = failed.match(/]*aria-label="Message the Agent"[^>]*>/)?.[0] ?? "";
-
- expect(failed).toContain("Couldn’t refresh Sessions");
- expect(failed).toContain("sessions refresh failed");
- expect(failed).toContain("Existing durable item");
- expect(failed).toContain("Live events");
- expect(composer).not.toContain("disabled");
- });
-
- it("does not claim an empty timeline before the selected Session load succeeds", () => {
- const common = {
- agents: [],
- sessions: [selectedSession],
- selected: selectedSession,
- items: [],
- busy: false,
- coreError: null,
- coreState: "ready" as const,
- streamError: null,
- streamState: "connecting" as const,
- ...sessionsCallbacks,
- };
- const loading = renderToStaticMarkup(
- ,
- );
- const failed = renderToStaticMarkup(
- ,
- );
- const ready = renderToStaticMarkup(
- ,
- );
-
- expect(loading).toContain("Loading Session timeline");
- expect(loading).not.toContain("Session is ready");
- expect(failed).toContain("Couldn’t load this Session");
- expect(failed).toContain("items request failed");
- expect(failed).toContain("Retry");
- expect(failed).not.toContain("Session is ready");
- expect(ready).toContain("Session is ready");
- expect(ready).toContain("Message execution also requires a Core worker and executor.");
- });
-
- it("keeps durable Items visible beside refresh and terminal Session failures", () => {
- const refreshFailed = renderToStaticMarkup(
- ,
- );
- const sessionFailed = renderToStaticMarkup(
- ,
- );
-
- expect(refreshFailed).toContain("Existing durable item");
- expect(refreshFailed).toContain("refresh failed");
- expect(refreshFailed).toContain("last loaded Items remain visible");
- expect(sessionFailed).toContain("Latest attempt failed");
- expect(sessionFailed).toContain("You can send another message to start a new Turn in this Session.");
- expect(sessionFailed).toContain("model execution failed");
- expect(sessionFailed).not.toContain("Session is ready");
- expect(sessionFailed.match(/]*aria-label="Message the Agent"[^>]*>/)?.[0]).not.toContain("disabled");
- expect(sessionFailed).not.toContain("This Session has failed");
- });
-
- it("blocks new messages only when the selected Session has a proven terminal Environment", () => {
- const environmentId = "0f745b0d-b545-49cd-8d7e-4c31c80dc564";
- const html = renderToStaticMarkup(
- ,
- );
-
- expect(html).toContain("Session cannot continue");
- expect(html).toContain("Start a new Session to continue");
- expect(html.match(/]*aria-label="Message the Agent"[^>]*>/)?.[0]).toContain("disabled");
- });
-
- it.each([
- ["401", "A valid key is required."],
- ["404", "The Session event stream was not found."],
- ])("keeps an events %s rejection visible with an explicit stream retry", (_status, streamError) => {
- const failed = renderToStaticMarkup(
- ,
- );
-
- expect(failed).toContain("Couldn’t open live events");
- expect(failed).toContain(streamError);
- expect(failed).toContain("Retry");
- expect(failed).not.toContain("Session is ready");
- expect(failed).not.toContain("Opening the event stream");
- });
-
- it("keeps execution-unavailable message failures visible without claiming a retry", () => {
- const failed = renderToStaticMarkup(
- ,
- );
-
- expect(failed).toContain("Core execution is unavailable");
- expect(failed).toContain("Execution is not enabled on this service.");
- expect(failed).toContain("Your draft was restored and was not retried.");
- expect(failed).toContain("operator runtime configuration");
- expect(failed).toContain("Core runtime setup");
- expect(failed).toContain("/parsar-core/blob/main/services/agents-api/README.md#public-text-execution");
- expect(failed).not.toContain("AGENTS_API_DAEMON_WS_URL");
- });
-
- it("renders Environment connection actions separately from simultaneous function results", () => {
- const waiting = renderToStaticMarkup(
- ,
- );
-
- expect(waiting).toContain('aria-label="Environment connection required"');
- expect(waiting).toContain('aria-haspopup="dialog"');
- expect(waiting).toContain('aria-label="Connect environment"');
- expect(waiting).toContain("Live events");
- expect(waiting).not.toContain('aria-label="Environment and Workspace status"');
- expect(waiting).toContain("environment_01");
- expect(waiting).toContain("must be connected by the Core operator");
- expect(waiting).toContain('aria-label="Function result required"');
- expect(waiting).toContain('aria-label="Function result or error"');
- expect(waiting.match(/aria-label="Function result or error"/g)).toHaveLength(1);
- expect(waiting).toContain("Structured result");
- expect(waiting).toContain("1 / 2");
- expect(waiting).toContain('title="lookup"');
- expect(waiting).not.toContain('title="summarize"');
- expect(waiting).toContain("This Web cannot connect, complete, or approve it.");
- });
-
- it("blocks the composer for unknown, malformed, or missing required actions", () => {
- for (const requiredActions of [
- [{ type: "future_approval", credential: "must-not-render" }],
- [{ type: "function_call", name: "missing identity" }],
- [
- { type: "future_approval" },
- { type: "function_call", call_id: "call", turn_id: "turn", name: "valid_but_blocked", arguments: {} },
- ],
- [],
- null,
- ]) {
- const html = renderToStaticMarkup(
- ,
- );
- expect(html).toContain('aria-label="Unsupported required action"');
- expect(html).toContain("will not infer a form or continue the Session");
- expect(html).not.toContain('aria-label="Message the Agent"');
- expect(html).not.toContain('aria-label="Function result or error"');
- expect(html).toContain('aria-label="Cancel active Turn"');
- expect(html).not.toContain("must-not-render");
- }
- });
-});
diff --git a/apps/web/src/features/agents/AgentCatalog.css b/apps/web/src/features/agents/AgentCatalog.css
index b42590015..84f70b95e 100644
--- a/apps/web/src/features/agents/AgentCatalog.css
+++ b/apps/web/src/features/agents/AgentCatalog.css
@@ -1,263 +1,14 @@
-.agents-catalog-scroll {
- min-width: 0;
- min-height: 0;
- flex: 1;
- padding: 24px;
- overflow: auto;
-}
-
-.agent-catalog-section {
- display: grid;
- gap: 14px;
-}
-
-.agent-catalog-section + .agent-catalog-section {
- margin-top: 34px;
-}
-
-.agent-catalog-section > h2,
-.agent-catalog-section > header h2 {
- margin: 0;
- color: var(--fg);
- font-size: 18px;
- font-weight: 600;
- line-height: 24px;
-}
-
-.agent-catalog-section > header p {
- margin: 3px 0 0;
- color: var(--fg-muted);
- font-size: 12px;
- line-height: 17px;
-}
+/* Resources › Agents: the shared filter bar and data table grammar. */
-.agent-card-grid,
-.agent-template-grid {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(min(245px, 100%), 1fr));
- gap: 12px;
+.agent-table th[scope="row"] {
+ min-width: 200px;
}
-.agent-catalog-card {
- min-width: 0;
- min-height: 190px;
- color: var(--fg);
- text-align: left;
- background: var(--surface);
- border: 1px solid var(--line);
- border-radius: 10px;
- box-shadow: var(--shadow-control);
- transition: background-color 150ms var(--ease-settle), border-color 150ms var(--ease-settle), transform 150ms var(--ease-settle);
-}
-
-.agent-catalog-slot,
-.agent-catalog-slot > .agent-catalog-card {
- height: 100%;
-}
-
-button.agent-catalog-card,
-.agent-card-main {
- cursor: pointer;
-}
-
-.agent-catalog-card:hover:not(:disabled),
-.agent-catalog-card:focus-within {
- background: var(--hover);
- border-color: var(--line-strong);
-}
-
-.agent-catalog-card:focus-visible,
-.agent-card-main:focus-visible {
- outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
- outline-offset: 2px;
-}
-
-.agent-catalog-card:disabled,
-.agent-card-main:disabled {
- cursor: not-allowed;
- opacity: 0.58;
-}
-
-.agent-card-main,
-button.agent-catalog-card {
- display: flex;
- width: 100%;
- min-width: 0;
- flex-direction: column;
- align-items: flex-start;
- padding: 18px;
- color: inherit;
- text-align: left;
-}
-
-.agent-card-main {
- background: transparent;
- border: 0;
-}
-
-.agent-saved-card {
- display: flex;
- flex-direction: column;
+.agent-table-model {
+ display: inline-block;
+ max-width: 220px;
overflow: hidden;
-}
-
-.agent-saved-card .agent-card-main {
- flex: 1;
-}
-
-.agent-card-icon {
- display: inline-flex;
- width: 34px;
- height: 34px;
- flex: 0 0 34px;
- align-items: center;
- justify-content: center;
- margin-bottom: 18px;
- color: var(--fg);
- background: var(--tile);
- border: 1px solid var(--line);
- border-radius: 9px;
-}
-
-.agent-catalog-card > strong,
-.agent-card-main > strong {
- display: block;
- max-width: 100%;
- overflow: hidden;
- font-size: 15px;
- font-weight: 550;
- line-height: 21px;
+ vertical-align: bottom;
text-overflow: ellipsis;
white-space: nowrap;
}
-
-.agent-card-description {
- display: -webkit-box;
- min-height: 38px;
- margin-top: 5px;
- overflow: hidden;
- color: var(--fg-muted);
- font-size: 12px;
- line-height: 18px;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
-}
-
-.agent-card-meta {
- display: flex;
- width: 100%;
- min-width: 0;
- align-items: center;
- margin-top: auto;
- padding-top: 16px;
- gap: 8px;
- color: var(--fg-muted);
- font-size: 10px;
- line-height: 14px;
-}
-
-.agent-card-meta code {
- min-width: 0;
- flex: 1;
- overflow: hidden;
- color: inherit;
- font-family: var(--font-mono);
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-.agent-card-opening {
- margin-top: 8px;
- color: var(--accent);
- font-size: 11px;
-}
-
-.agent-saved-card > footer {
- display: flex;
- min-height: 44px;
- align-items: center;
- justify-content: flex-end;
- padding: 8px 12px;
- border-top: 1px solid var(--line);
-}
-
-.agent-create-card,
-.agent-template-card {
- border-style: dashed;
- box-shadow: none;
-}
-
-.agent-create-card .agent-card-icon {
- color: var(--surface);
- background: var(--accent);
- border-color: transparent;
-}
-
-.agent-template-card .agent-card-icon {
- color: var(--accent);
- background: color-mix(in srgb, var(--accent) 10%, var(--surface));
- border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
-}
-
-.agent-catalog-empty {
- display: flex;
- align-items: center;
- padding: 12px 14px;
- gap: 8px;
- color: var(--fg-muted);
- font-size: 12px;
- background: var(--surface-subtle);
- border: 1px solid var(--line);
- border-radius: 7px;
-}
-
-.agent-catalog-empty strong {
- color: var(--fg);
- font-weight: 500;
-}
-
-.agent-catalog-empty .button {
- margin-left: auto;
-}
-
-.agent-catalog-more {
- display: flex;
- min-height: 36px;
- align-items: center;
- justify-content: flex-end;
- gap: 10px;
- color: var(--fg-muted);
- font-size: 11px;
-}
-
-.agent-catalog-more .button {
- gap: 5px;
-}
-
-@media (max-width: 640px) {
- .agents-catalog-scroll {
- padding: 16px 12px 28px;
- }
-
- .agent-card-grid,
- .agent-template-grid {
- grid-template-columns: minmax(0, 1fr);
- }
-
- .agent-catalog-section + .agent-catalog-section {
- margin-top: 28px;
- }
-
- .agent-catalog-empty {
- align-items: flex-start;
- flex-direction: column;
- }
-
- .agent-catalog-empty .button {
- margin-left: 0;
- }
-
- .agent-catalog-more {
- justify-content: space-between;
- }
-}
diff --git a/apps/web/src/features/agents/AgentCatalog.test.tsx b/apps/web/src/features/agents/AgentCatalog.test.tsx
deleted file mode 100644
index b8379e7dd..000000000
--- a/apps/web/src/features/agents/AgentCatalog.test.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { renderToStaticMarkup } from "react-dom/server";
-import { describe, expect, it } from "vitest";
-
-import type { SavedAgent } from "@agents-core-web/agents-client";
-
-import { AgentCatalog, twoRowSavedAgentCapacity } from "./AgentCatalog";
-
-function savedAgent(index: number): SavedAgent {
- return {
- id: `agent_${index}`,
- object: "agent",
- model: "provider/model",
- name: `Agent ${index}`,
- instructions: `Instructions ${index}`,
- metadata: {},
- multi_agent: { enabled: false, max_concurrent_subagents: null },
- reasoning: {},
- service_tier: "auto",
- text: { format: { type: "text" }, verbosity: "medium" },
- tools: [],
- created_at: 1_700_000_000 + index,
- updated_at: 1_700_000_100 + index,
- };
-}
-
-function renderCatalog(expanded = false, isFiltering = false): string {
- return renderToStaticMarkup(
- savedAgent(index))}
- busy={false}
- coreReady
- expanded={expanded}
- hasSavedAgents
- isFiltering={isFiltering}
- openingAgentId={null}
- vaultCatalog={null}
- onClearSearch={() => undefined}
- onCreate={() => undefined}
- onEdit={() => undefined}
- onExpandedChange={() => undefined}
- onStartSession={() => undefined}
- onUseTemplate={() => undefined}
- />,
- );
-}
-
-describe("Agent catalog", () => {
- it("reserves the first card for Create and bounds saved Agents to two responsive rows", () => {
- expect(twoRowSavedAgentCapacity(1)).toBe(1);
- expect(twoRowSavedAgentCapacity(2)).toBe(3);
- expect(twoRowSavedAgentCapacity(3)).toBe(5);
- expect(twoRowSavedAgentCapacity(4)).toBe(7);
-
- const html = renderCatalog();
- expect(html.indexOf("Create agent")).toBeLessThan(html.indexOf("Edit Agent 0"));
- expect(html).toContain("Edit Agent 0 (agent_0)");
- expect(html).not.toContain("Edit Agent 1 (agent_1)");
- expect(html).toContain('aria-expanded="false"');
- expect(html).toContain("Show 3 more");
- });
-
- it("shows every saved Agent after expansion or while filtering", () => {
- const expanded = renderCatalog(true);
- expect(expanded).toContain("Edit Agent 3 (agent_3)");
- expect(expanded).toContain('aria-expanded="true"');
- expect(expanded).toContain("Show less");
-
- const filtered = renderCatalog(false, true);
- expect(filtered).toContain("Edit Agent 3 (agent_3)");
- expect(filtered).not.toContain("Show 3 more");
- });
-});
diff --git a/apps/web/src/features/agents/AgentCatalog.tsx b/apps/web/src/features/agents/AgentCatalog.tsx
deleted file mode 100644
index a89f60805..000000000
--- a/apps/web/src/features/agents/AgentCatalog.tsx
+++ /dev/null
@@ -1,232 +0,0 @@
-import { Bot, ChevronDown, ChevronUp, MessageSquare, PanelsTopLeft, Plus } from "lucide-react";
-import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-import i18n from "../../i18n";
-
-import type { SavedAgent } from "@agents-core-web/agents-client";
-
-import type { VaultCatalog } from "../vaults/vault-catalog";
-import { sessionAdmissionBlocker } from "./session-admission";
-import { AGENT_TEMPLATES, type AgentTemplate } from "./agent-templates";
-
-import "./AgentCatalog.css";
-
-const useIsomorphicLayoutEffect = typeof document === "undefined" ? useEffect : useLayoutEffect;
-
-export function twoRowSavedAgentCapacity(columnCount: number): number {
- return Math.max(1, Math.floor(columnCount) * 2 - 1);
-}
-
-function resolvedGridColumnCount(grid: HTMLElement): number {
- const template = window.getComputedStyle(grid).gridTemplateColumns.trim();
- if (!template || template === "none") return 1;
- return Math.max(1, template.split(/\s+/u).length);
-}
-
-function formatShortDate(seconds: number): string {
- return new Intl.DateTimeFormat(i18n.resolvedLanguage ?? "en", { month: "short", day: "numeric" }).format(new Date(seconds * 1000));
-}
-
-function AgentSessionStartAction({
- agent,
- busy,
- onStart,
- vaultCatalog,
-}: {
- agent: SavedAgent;
- busy: boolean;
- onStart: (agentId: string) => void;
- vaultCatalog: VaultCatalog | null;
-}) {
- const { t } = useTranslation("agents");
- const blocker = sessionAdmissionBlocker(agent, vaultCatalog);
- const descriptionId = useId();
- return (
-
-
- {blocker ? (
-
- {t("catalog.sessionUnavailable", { reason: blocker })}
-
- ) : null}
-
- );
-}
-
-export function AgentCatalog({
- agents,
- busy,
- coreReady,
- hasSavedAgents,
- openingAgentId,
- vaultCatalog,
- onClearSearch,
- onCreate,
- onEdit,
- onExpandedChange,
- onStartSession,
- onUseTemplate,
- expanded,
- isFiltering,
-}: {
- agents: SavedAgent[];
- busy: boolean;
- coreReady: boolean;
- expanded: boolean;
- hasSavedAgents: boolean;
- isFiltering: boolean;
- openingAgentId: string | null;
- vaultCatalog: VaultCatalog | null;
- onClearSearch: () => void;
- onCreate: (returnFocus: HTMLButtonElement) => void;
- onEdit: (agent: SavedAgent, returnFocus: HTMLButtonElement) => void;
- onExpandedChange: (expanded: boolean) => void;
- onStartSession: (agentId: string) => void;
- onUseTemplate: (template: AgentTemplate, returnFocus: HTMLButtonElement) => void;
-}) {
- const { t } = useTranslation("agents");
- const count = (value: number) => new Intl.NumberFormat(i18n.resolvedLanguage ?? "en").format(value);
- const interactionDisabled = busy;
- const gridId = useId();
- const gridRef = useRef(null);
- const [columnCount, setColumnCount] = useState(1);
- const savedCapacity = twoRowSavedAgentCapacity(columnCount);
- const canExpand = !isFiltering && agents.length > savedCapacity;
- const visibleAgents = isFiltering || expanded ? agents : agents.slice(0, savedCapacity);
- const hiddenAgentCount = Math.max(0, agents.length - savedCapacity);
-
- useIsomorphicLayoutEffect(() => {
- const grid = gridRef.current;
- if (!grid) return;
-
- const updateColumnCount = () => {
- const next = resolvedGridColumnCount(grid);
- setColumnCount((current) => current === next ? current : next);
- };
- updateColumnCount();
-
- if (typeof ResizeObserver === "undefined") {
- window.addEventListener("resize", updateColumnCount);
- return () => window.removeEventListener("resize", updateColumnCount);
- }
-
- const observer = new ResizeObserver(updateColumnCount);
- observer.observe(grid);
- return () => observer.disconnect();
- }, []);
-
- return (
-
-
- {t("catalog.listLabel")}
-
-
-
-
- {visibleAgents.map((agent) => (
-
-
-
-
- ))}
-
- {expanded ? t("catalog.showingAll", { count: agents.length, formattedCount: count(agents.length) }) : t("catalog.more", { count: hiddenAgentCount, formattedCount: count(hiddenAgentCount) })}
-
-
- ) : null}
- {!agents.length ? (
-
- {hasSavedAgents ? t("catalog.noMatch") : t("catalog.noSaved")}
- {hasSavedAgents ? t("catalog.trySearch") : t("catalog.emptyHelp")}
- {hasSavedAgents ? : null}
-
- ) : null}
-
-
-
-
-
- {AGENT_TEMPLATES.map((template) => (
-
-
-
- ))}
-
-
;
- return typeof document === "undefined" ? dialog : createPortal(dialog, document.body);
-}
diff --git a/apps/web/src/features/agents/AgentForm.tsx b/apps/web/src/features/agents/AgentForm.tsx
deleted file mode 100644
index e208567e3..000000000
--- a/apps/web/src/features/agents/AgentForm.tsx
+++ /dev/null
@@ -1,425 +0,0 @@
-import { Info } from "lucide-react";
-import { useEffect, useRef, useState, type FormEvent } from "react";
-import { useTranslation } from "react-i18next";
-
-import type { CoreHarnessKind, SavedAgent } from "@agents-core-web/agents-client";
-
-import {
- buildModelOptionGroups,
- CUSTOM_MODEL_OPTION,
- modelIdFromOption,
- modelOptionValue,
-} from "../../lib/model-options";
-import type { VaultCatalog } from "../vaults/vault-catalog";
-import { vaultName } from "../vaults/vault-catalog";
-import { type AgentFormSubmitInput, type AgentFormValues, type AgentToolDraft, validateAgentForm, valuesFromAgent } from "./agent-form";
-
-interface AgentFormProps {
- agent?: SavedAgent;
- defaultHarness?: CoreHarnessKind;
- disabled?: boolean;
- enabledHarnesses?: readonly CoreHarnessKind[] | null;
- formId: string;
- initialValues?: AgentFormValues;
- knownModels: string[];
- vaultCatalog?: VaultCatalog | null;
- onDraftChange?: (values: AgentFormValues) => void;
- onSubmit: (input: AgentFormSubmitInput) => Promise;
-}
-
-function harnessLabel(harness: CoreHarnessKind): string {
- if (harness === "claude_sdk") return "Claude SDK";
- if (harness === "mcode") return "MiniMax Code";
- return "Codex";
-}
-
-export function AgentForm({
- agent,
- defaultHarness,
- disabled = false,
- enabledHarnesses = null,
- formId,
- initialValues,
- knownModels,
- vaultCatalog = null,
- onDraftChange,
- onSubmit,
-}: AgentFormProps) {
- const { t } = useTranslation("agents");
- const nameRef = useRef(null);
- const initial = agent ? valuesFromAgent(agent, vaultCatalog) : initialValues ?? valuesFromAgent(undefined, vaultCatalog);
- const initialHarness = agent
- ? initial.harness
- : initial.harness || (defaultHarness && enabledHarnesses?.includes(defaultHarness) ? defaultHarness : "");
- const options = buildModelOptionGroups(
- knownModels,
- import.meta.env.VITE_AGENT_MODEL_PRESETS,
- initial.model || import.meta.env.VITE_AGENT_DEFAULT_MODEL,
- );
- const initialIsSuggested = [...options.configured, ...options.previouslyUsed].includes(initial.model);
- const [name, setName] = useState(initial.name);
- const [harness, setHarness] = useState(initialHarness);
- const [harnessModified, setHarnessModified] = useState(initial.harnessModified);
- const [modelChoice, setModelChoice] = useState(
- initial.model && !initialIsSuggested ? CUSTOM_MODEL_OPTION : modelOptionValue(initial.model || options.defaultModel),
- );
- const [customModel, setCustomModel] = useState(initialIsSuggested ? "" : initial.model);
- const [instructions, setInstructions] = useState(initial.instructions);
- const [metadata, setMetadata] = useState(initial.metadata);
- const [reasoningEffort, setReasoningEffort] = useState(initial.reasoningEffort);
- const [reasoningSummary, setReasoningSummary] = useState(initial.reasoningSummary);
- const [serviceTier, setServiceTier] = useState(initial.serviceTier);
- const [textFormat] = useState(initial.textFormat);
- const [textVerbosity, setTextVerbosity] = useState(initial.textVerbosity);
- const [tools, setTools] = useState(initial.tools);
- const [toolsModified, setToolsModified] = useState(initial.toolsModified);
- const [configurationError, setConfigurationError] = useState(null);
- const [modelError, setModelError] = useState(null);
- const [metadataError, setMetadataError] = useState(null);
- const [nameError, setNameError] = useState(null);
- const [toolsError, setToolsError] = useState(null);
- const model = modelChoice === CUSTOM_MODEL_OPTION ? customModel : modelIdFromOption(modelChoice) ?? "";
-
- const updateTools = (update: (current: AgentToolDraft[]) => AgentToolDraft[]) => {
- setTools((current) => update(current));
- setToolsModified(true);
- if (toolsError) setToolsError(null);
- };
-
- useEffect(() => {
- const frame = window.requestAnimationFrame(() => nameRef.current?.focus());
- return () => window.cancelAnimationFrame(frame);
- }, []);
-
- useEffect(() => {
- if (!agent && !harness && defaultHarness && enabledHarnesses?.includes(defaultHarness)) {
- setHarness(defaultHarness);
- }
- }, [agent, defaultHarness, enabledHarnesses, harness]);
-
- useEffect(() => {
- onDraftChange?.({
- name,
- harness,
- harnessModified,
- model,
- instructions,
- metadata,
- reasoningEffort,
- reasoningSummary,
- serviceTier,
- textFormat,
- textVerbosity,
- tools,
- toolsModified,
- });
- }, [harness, harnessModified, instructions, metadata, model, name, onDraftChange, reasoningEffort, reasoningSummary, serviceTier, textFormat, textVerbosity, tools, toolsModified]);
-
- const submit = async (event: FormEvent) => {
- event.preventDefault();
- const result = validateAgentForm({
- name,
- harness,
- harnessModified,
- model,
- instructions,
- metadata,
- reasoningEffort,
- reasoningSummary,
- serviceTier,
- textFormat,
- textVerbosity,
- tools,
- toolsModified,
- }, agent ? "update" : "create", vaultCatalog);
- setConfigurationError(result.configurationError ?? null);
- setModelError(result.modelError ?? null);
- setMetadataError(result.metadataError ?? null);
- setNameError(result.nameError ?? null);
- setToolsError(result.toolsError ?? null);
- if (!result.input) return;
- await onSubmit(result.input);
- };
-
- return (
-