@adres/mgda-ui 0.0.0-stage → 0.0.2

package/src/components/tool-call-card.stories.tsx

@@ -0,0 +1,97 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { CalendarCheck, LineChart, Search } from "lucide-react"
+import { Button } from "./button"
+import { Text } from "./text"
+import { ToolCallCard, toolPartToCallCard } from "./tool-call-card"
+
+const INPUT = [
+  { label: "Community", value: "Yas Island" },
+  { label: "Type", value: "Townhouse" },
+  { label: "Max price", value: "AED 5,000,000" },
+]
+
+const OUTPUT = [
+  { label: "Matches", value: "12" },
+  { label: "Lowest price", value: "AED 4,200,000" },
+]
+
+const meta: Meta<typeof ToolCallCard> = {
+  title: "Components/ToolCallCard",
+  component: ToolCallCard,
+  tags: ["autodocs"],
+  decorators: [(Story) => <div style={{ maxWidth: 640 }}><Story /></div>],
+  argTypes: {
+    status: { control: "select", options: ["awaiting-approval", "running", "success", "error", "declined", "cancelled"] },
+    icon: { control: false },
+  },
+  args: {
+    icon: Search,
+    title: "Searched listings",
+    toolName: "search_listings",
+    subtitle: "12 townhouses under AED 5M",
+    status: "success",
+    durationMs: 1400,
+    input: INPUT,
+    output: OUTPUT,
+    defaultOpen: true,
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof ToolCallCard>
+
+export const Success: Story = {}
+
+export const Running: Story = {
+  args: { title: "Searching listings", subtitle: undefined, status: "running", onCancel: () => undefined, defaultOpen: false },
+}
+
+export const Failed: Story = {
+  args: {
+    icon: LineChart,
+    title: "Check registered sales",
+    toolName: "get_dld_transactions",
+    subtitle: "Couldn't finish",
+    status: "error",
+    error: "The sales registry didn't respond. Nothing was changed.",
+    onRetry: () => undefined,
+  },
+}
+
+export const AwaitingApproval: Story = {
+  args: {
+    icon: CalendarCheck,
+    title: "Book a viewing",
+    toolName: "book_viewing",
+    subtitle: "Waiting for your approval",
+    status: "awaiting-approval",
+    children: (
+      <div style={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}>
+        <Text as="p" size="2">The assistant wants to book a viewing on Saturday at 11:00. Nothing happens until you approve.</Text>
+        <div style={{ display: "flex", gap: "0.5rem" }}>
+          <Button size="sm">Approve</Button>
+          <Button variant="ghost" size="sm">Decline</Button>
+        </div>
+      </div>
+    ),
+  },
+}
+
+export const Compact: Story = { args: { compact: true, defaultOpen: false } }
+
+export const FromAiSdkToolPart: Story = {
+  render: () => (
+    <ToolCallCard
+      icon={Search}
+      defaultOpen
+      {...toolPartToCallCard({
+        type: "tool-search_listings",
+        state: "output-available",
+        input: { community: "Yas Island", maxPrice: 5000000 },
+        output: { count: 12, cheapest: { price: 4200000, ref: "YA-22B" } },
+        toolCallId: "call_8f2a91",
+      })}
+    />
+  ),
+}

package/src/components/tool-call-card.test.tsx

@@ -0,0 +1,88 @@
+import { describe, expect, it } from "vitest"
+import * as React from "react"
+import { renderToStaticMarkup } from "react-dom/server"
+import {
+  TOOL_CALL_STATUS, ToolCallCard, toolCallNeedsAttention, toolPartToCallCard, type ToolCallStatus, type ToolPart,
+} from "./tool-call-card"
+
+const Icon = () => <svg />
+const INPUT = [{ label: "Community", value: "Yas Island" }]
+const OUTPUT = [{ label: "Matches", value: "12" }]
+
+const render = (status: ToolCallStatus, extra: Partial<React.ComponentProps<typeof ToolCallCard>> = {}) =>
+  renderToStaticMarkup(<ToolCallCard icon={Icon} title="Search listings" status={status} input={INPUT} output={OUTPUT} {...extra} />)
+
+describe("ToolCallCard", () => {
+  it.each(Object.entries(TOOL_CALL_STATUS))("labels %s as %o", (status, { label }) => {
+    expect(render(status as ToolCallStatus)).toContain(`>${label}</`)
+  })
+
+  it("opens for approval and errors, stays closed otherwise", () => {
+    expect(toolCallNeedsAttention("awaiting-approval")).toBe(true)
+    expect(toolCallNeedsAttention("error")).toBe(true)
+    expect(toolCallNeedsAttention("success")).toBe(false)
+    expect(render("error")).toContain('aria-expanded="true"')
+    expect(render("success")).toContain('aria-expanded="false"')
+  })
+
+  it("shows the approval body in place of the fields while awaiting approval", () => {
+    const html = render("awaiting-approval", { children: <p>Approve this booking?</p> })
+    expect(html).toContain("Approve this booking?")
+    expect(html).not.toContain("Yas Island")
+  })
+
+  it("shows results only once the call succeeded", () => {
+    expect(render("success", { defaultOpen: true })).toContain(">Result<")
+    expect(render("running", { defaultOpen: true })).not.toContain(">Result<")
+  })
+
+  it("marks the card busy while running", () => {
+    expect(render("running")).toContain('aria-busy="true"')
+  })
+})
+
+describe("toolPartToCallCard", () => {
+  const part: ToolPart = {
+    type: "tool-search_listings",
+    state: "output-available",
+    input: { community: "Yas Island", maxPrice: 5_000_000 },
+    output: { count: 12, cheapest: { price: 4_200_000, ref: "YA-22B" } },
+    toolCallId: "call_8f2",
+  }
+
+  it("names the tool and turns its id into a plain title", () => {
+    const props = toolPartToCallCard(part)
+    expect(props.toolName).toBe("search_listings")
+    expect(props.title).toBe("Search listings")
+    expect(props.callId).toBe("call_8f2")
+  })
+
+  it.each([
+    ["input-streaming", "running"],
+    ["input-available", "running"],
+    ["approval-requested", "awaiting-approval"],
+    ["output-available", "success"],
+    ["output-error", "error"],
+    ["output-denied", "declined"],
+  ] as const)("maps %s to %s", (state, status) => {
+    expect(toolPartToCallCard({ ...part, state }).status).toBe(status)
+  })
+
+  it("lists record entries as fields and pretty-prints nested values", () => {
+    const props = toolPartToCallCard(part)
+    expect(props.input?.map((field) => field.label)).toEqual(["community", "maxPrice"])
+    const html = renderToStaticMarkup(<>{props.output?.find((field) => field.label === "cheapest")?.value}</>)
+    expect(html).toContain("<pre")
+    expect(html).toContain("&quot;price&quot;: 4200000")
+  })
+
+  it("wraps a non-record output in a single result field and passes errors through", () => {
+    expect(toolPartToCallCard({ ...part, output: [1, 2] }).output?.map((field) => field.label)).toEqual(["result"])
+    expect(toolPartToCallCard({ ...part, state: "output-error", errorText: "Timed out" }).error).toBe("Timed out")
+  })
+
+  it("shows the call id at the foot of open details", () => {
+    const html = renderToStaticMarkup(<ToolCallCard icon={Icon} defaultOpen {...toolPartToCallCard(part)} />)
+    expect(html).toContain("Call ID: call_8f2")
+  })
+})

package/src/components/tool-call-card.tsx

@@ -0,0 +1,231 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDown } from "lucide-react"
+import { cn } from "../lib/cn"
+import { Alert, AlertDescription } from "./alert"
+import { Badge, type BadgeProps } from "./badge"
+import { Button } from "./button"
+import { Spinner } from "./spinner"
+import { Text } from "./text"
+
+export type ToolCallStatus = "awaiting-approval" | "running" | "success" | "error" | "declined" | "cancelled"
+
+export interface ToolCallField {
+  label: string
+  value: React.ReactNode
+}
+
+export const TOOL_CALL_STATUS: Record<ToolCallStatus, { label: string; variant: NonNullable<BadgeProps["variant"]> }> = {
+  "awaiting-approval": { label: "Needs approval", variant: "warning" },
+  running: { label: "Running", variant: "muted" },
+  success: { label: "Done", variant: "success" },
+  error: { label: "Failed", variant: "destructive" },
+  declined: { label: "Declined", variant: "muted" },
+  cancelled: { label: "Cancelled", variant: "muted" },
+}
+
+/** Approval and errors need the person, so the card opens for them. */
+export const toolCallNeedsAttention = (status: ToolCallStatus) => status === "awaiting-approval" || status === "error"
+
+const seconds = (ms: number) => `${(ms / 1000).toFixed(1)}s`
+
+function FieldGroup({ label, fields }: { label: string; fields: ToolCallField[] }) {
+  return (
+    <div className="ax:flex ax:flex-col ax:gap-xs">
+      <Text as="p" size="2" weight="medium" color="muted">{label}</Text>
+      <dl className="ax:flex ax:flex-col ax:gap-1 ax:rounded ax:border ax:border-border ax:bg-background ax:p-xs ax:font-mono ax:text-sm">
+        {fields.map((field) => (
+          <div key={field.label} className="ax:flex ax:min-w-0 ax:flex-wrap ax:gap-x-xs">
+            <dt className="ax:text-muted-foreground">{field.label}:</dt>
+            <dd className="ax:min-w-0 ax:wrap-break-word ax:text-foreground">{field.value}</dd>
+          </div>
+        ))}
+      </dl>
+    </div>
+  )
+}
+
+export interface ToolCallCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+  /** The tool's icon; replaced by a spinner while running. */
+  icon: React.ElementType
+  /** What the call does in plain words, in the tense of its status ("Searching listings", "Searched listings"). */
+  title: string
+  /** The technical tool name, shown in mono from `sm` up. */
+  toolName?: string
+  /** One line under the title: the result summary, or why it stopped. */
+  subtitle?: string
+  status: ToolCallStatus
+  /** Shown once the call succeeds. */
+  durationMs?: number
+  input?: ToolCallField[]
+  /** Shown once the call succeeds. */
+  output?: ToolCallField[]
+  /** Shown when the call fails, with Retry when `onRetry` is set. */
+  error?: string
+  onRetry?: () => void
+  /** Adds Cancel while running. */
+  onCancel?: () => void
+  /** Tighter header for a run of several calls. */
+  compact?: boolean
+  /** Whether the body starts open. Defaults to open while awaiting approval or after an error. */
+  defaultOpen?: boolean
+  /** The approval body shown while `awaiting-approval`, in place of the fields. */
+  children?: React.ReactNode
+  /** The call's id, shown small at the foot of the details for support and debugging. */
+  callId?: string
+}
+
+/**
+ * ToolCallCard - one tool call by an assistant: what it called in plain
+ * words, live status, and the inputs and results as labelled fields on
+ * demand. Calls with side effects stop at an approval step (`children`).
+ *
+ * @example
+ *   <ToolCallCard icon={Search} title="Searched listings" toolName="search_listings" status="success"
+ *     subtitle="12 matches" durationMs={1400} input={inputFields} output={resultFields} />
+ */
+export const ToolCallCard = React.forwardRef<HTMLDivElement, ToolCallCardProps>(
+  (
+    {
+      icon: Icon, title, toolName, subtitle, status, durationMs, input = [], output = [], error, onRetry, onCancel,
+      compact = false, defaultOpen, children, callId, className, ...props
+    },
+    ref,
+  ) => {
+    const id = React.useId()
+    const needsAttention = toolCallNeedsAttention(status)
+    const [open, setOpen] = React.useState(defaultOpen ?? needsAttention)
+    React.useEffect(() => {
+      if (needsAttention) setOpen(true)
+    }, [needsAttention])
+
+    return (
+      <div
+        ref={ref}
+        data-slot="tool-call-card"
+        className={cn(
+          "ax:overflow-hidden ax:rounded ax:border ax:border-border ax:bg-card",
+          status === "awaiting-approval" && "ax:border-warning-weaker",
+          className,
+        )}
+        aria-busy={status === "running"}
+        {...props}
+      >
+        <div className={cn("ax:flex ax:items-center ax:gap-sm ax:px-sm", compact ? "ax:py-1.5" : "ax:py-xs")}>
+          <span className="ax:flex ax:size-4 ax:shrink-0 ax:items-center ax:justify-center ax:text-muted-foreground">
+            {status === "running" ? <Spinner size="sm" decorative /> : <Icon className="ax:size-4" aria-hidden />}
+          </span>
+          <div className="ax:flex ax:min-w-0 ax:flex-1 ax:flex-col">
+            <span className="ax:flex ax:min-w-0 ax:items-baseline ax:gap-xs">
+              <Text size="2" weight="medium" truncate>{title}</Text>
+              {toolName && <Text size="1" color="muted" className="ax:hidden ax:font-mono ax:sm:inline">{toolName}</Text>}
+            </span>
+            {subtitle && <Text size="1" color={status === "error" ? "destructive" : "muted"} truncate>{subtitle}</Text>}
+          </div>
+          {status === "success" && durationMs !== undefined && (
+            <Text size="1" color="muted" className="ax:hidden ax:tabular-nums ax:sm:inline">{seconds(durationMs)}</Text>
+          )}
+          <Badge variant={TOOL_CALL_STATUS[status].variant} size="sm" className="ax:rounded-full" aria-live="polite">
+            {TOOL_CALL_STATUS[status].label}
+          </Badge>
+          {status === "running" && onCancel && <Button variant="ghost" size="sm" className="ax:rounded-full" onClick={onCancel}>Cancel</Button>}
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            className="ax:rounded-full ax:text-muted-foreground ax:hover:text-foreground"
+            aria-expanded={open}
+            aria-controls={`${id}-body`}
+            aria-label={open ? `Hide details for ${title}` : `Show details for ${title}`}
+            onClick={() => setOpen((value) => !value)}
+          >
+            <ChevronDown className={cn("ax:transition-transform ax:motion-reduce:transition-none", open && "ax:rotate-180")} />
+          </Button>
+        </div>
+
+        {open && (
+          <div id={`${id}-body`} className="ax:flex ax:flex-col ax:gap-sm ax:border-t ax:border-border ax:p-sm">
+            {status === "awaiting-approval" && children ? children : (
+              <>
+                {status === "error" && error && (
+                  <Alert variant="destructive" size="md">
+                    <AlertDescription>{error}</AlertDescription>
+                    {onRetry && (
+                      <Button variant="ghost" size="sm" className="ax:rounded-full ax:self-start" onClick={onRetry}>Retry</Button>
+                    )}
+                  </Alert>
+                )}
+                {input.length > 0 && <FieldGroup label="Input" fields={input} />}
+                {status === "success" && output.length > 0 && <FieldGroup label="Result" fields={output} />}
+              </>
+            )}
+            {callId && <Text as="p" size="1" color="muted" className="ax:font-mono ax:break-all">Call ID: {callId}</Text>}
+          </div>
+        )}
+      </div>
+    )
+  },
+)
+ToolCallCard.displayName = "ToolCallCard"
+
+/** A tool call part as the Vercel AI SDK streams it: `type` is "tool-<name>". */
+export interface ToolPart {
+  type: string
+  state: "input-streaming" | "input-available" | "approval-requested" | "output-available" | "output-error" | "output-denied"
+  input?: unknown
+  output?: unknown
+  errorText?: string
+  toolCallId?: string
+}
+
+const TOOL_PART_STATUS: Record<ToolPart["state"], ToolCallStatus> = {
+  "input-streaming": "running",
+  "input-available": "running",
+  "approval-requested": "awaiting-approval",
+  "output-available": "success",
+  "output-error": "error",
+  "output-denied": "declined",
+}
+
+/** Plain values as text; objects and arrays as scrollable pretty-printed JSON. */
+export function formatToolValue(value: unknown): React.ReactNode {
+  if (value === null || value === undefined) return String(value)
+  if (typeof value !== "object") return String(value)
+  return <pre className="ax:max-h-60 ax:overflow-auto ax:whitespace-pre-wrap">{JSON.stringify(value, null, 2)}</pre>
+}
+
+function toFields(value: unknown, fallbackLabel: string): ToolCallField[] {
+  if (value === undefined) return []
+  if (value !== null && typeof value === "object" && !Array.isArray(value)) {
+    return Object.entries(value).map(([label, entry]) => ({ label, value: formatToolValue(entry) }))
+  }
+  return [{ label: fallbackLabel, value: formatToolValue(value) }]
+}
+
+/** "tool-search_listings" to "Search listings". */
+const humanize = (name: string) => {
+  const words = name.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[_-]+/g, " ").trim().toLowerCase()
+  return words.charAt(0).toUpperCase() + words.slice(1)
+}
+
+export type ToolPartCardProps = Pick<ToolCallCardProps, "title" | "toolName" | "status" | "input" | "output" | "error" | "callId">
+
+/**
+ * Maps an AI SDK tool part to ToolCallCard props. Pass the icon yourself, and
+ * override `title` with plain words in the right tense when you have them.
+ *
+ * @example
+ *   <ToolCallCard icon={Search} {...toolPartToCallCard(part)} />
+ */
+export function toolPartToCallCard(part: ToolPart): ToolPartCardProps {
+  const toolName = part.type.replace(/^tool-/, "")
+  return {
+    title: humanize(toolName),
+    toolName,
+    status: TOOL_PART_STATUS[part.state],
+    input: toFields(part.input, "input"),
+    output: toFields(part.output, "result"),
+    error: part.errorText,
+    callId: part.toolCallId,
+  }
+}

package/src/components/tooltip.stories.tsx

@@ -0,0 +1,25 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Button } from "./button"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip"
+
+const meta: Meta<typeof Tooltip> = {
+  title: "Components/Tooltip",
+  component: Tooltip,
+  tags: ["autodocs"],
+  decorators: [(Story) => <TooltipProvider><Story /></TooltipProvider>],
+}
+
+export default meta
+type Story = StoryObj<typeof Tooltip>
+
+export const Default: Story = {
+  render: () => (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="outline">Hover me</Button>
+      </TooltipTrigger>
+      <TooltipContent>Helpful tooltip text</TooltipContent>
+    </Tooltip>
+  ),
+}

package/src/components/tooltip.tsx

@@ -0,0 +1,43 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import { cn } from "../lib/cn"
+
+export const TooltipProvider = TooltipPrimitive.Provider
+export const Tooltip         = TooltipPrimitive.Root
+export const TooltipTrigger  = TooltipPrimitive.Trigger
+
+export interface TooltipContentProps
+  extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> {}
+
+export const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  TooltipContentProps
+>(({ className, sideOffset = 6, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        // Layered above Dialog/Drawer (z-[1100]) so tooltips on overlay UI stay visible.
+        "ax:z-1200 ax:overflow-hidden ax:rounded-none",
+        "ax:bg-foreground ax:px-sm ax:py-xs",
+        "ax:t-body-sm ax:text-background",
+        "ax:shadow-md",
+        "ax:animate-in ax:fade-in-0 ax:zoom-in-[0.96]",
+        "ax:data-[state=closed]:animate-out ax:data-[state=closed]:fade-out-0 ax:data-[state=closed]:zoom-out-[0.96]",
+        "ax:data-[side=bottom]:slide-in-from-top-1",
+        "ax:data-[side=left]:slide-in-from-right-1",
+        "ax:data-[side=right]:slide-in-from-left-1",
+        "ax:data-[side=top]:slide-in-from-bottom-1",
+        // Tooltips need to feel instant, intentionally faster than --motion-fast (160ms).
+        "ax:[animation-duration:100ms] ax:[animation-timing-function:var(--motion-ease-out)]",
+        "ax:motion-reduce:animate-none",
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName

package/src/components/top-nav.stories.tsx

@@ -0,0 +1,20 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Breadcrumbs, TopNav } from "./top-nav"
+
+const meta: Meta<typeof TopNav> = {
+  title: "Components/TopNav",
+  component: TopNav,
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof TopNav>
+
+export const Default: Story = {
+  render: () => (
+    <TopNav>
+      <Breadcrumbs items={[{ label: "Home", href: "#" }, { label: "Projects", href: "#" }, { label: "Overview" }]} />
+    </TopNav>
+  ),
+}

package/src/components/top-nav.tsx

@@ -0,0 +1,76 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../lib/cn"
+
+export interface TopNavProps extends React.HTMLAttributes<HTMLElement> {
+  /** Left-aligned slot (typically breadcrumbs or a page title). */
+  start?: React.ReactNode
+  /** Right-aligned slot (search, notifications, user menu). */
+  end?: React.ReactNode
+}
+
+/**
+ * TopNav - sticky top bar for the web app shell.
+ * Supports both webapp (with sidebar context) and standalone usage.
+ */
+export const TopNav = React.forwardRef<HTMLElement, TopNavProps>(
+  ({ className, start, end, children, ...props }, ref) => (
+    <header
+      ref={ref}
+      className={cn(
+        "ax:sticky ax:top-0 ax:z-100 ax:flex ax:h-5xl ax:w-full ax:shrink-0 ax:items-center ax:gap-md",
+        "ax:border-b ax:border-border ax:bg-background/80 ax:backdrop-blur-md",
+        "ax:px-md ax:md:px-xl",
+        className
+      )}
+      {...props}
+    >
+      <div className="ax:flex ax:items-center ax:gap-sm ax:flex-1 ax:min-w-0">{start}</div>
+      <div className="ax:flex-1 ax:flex ax:items-center ax:justify-center ax:min-w-0">{children}</div>
+      <div className="ax:flex ax:items-center ax:gap-xs ax:flex-1 ax:min-w-0 ax:justify-end">{end}</div>
+    </header>
+  )
+)
+TopNav.displayName = "TopNav"
+
+export interface BreadcrumbsProps extends React.HTMLAttributes<HTMLElement> {
+  items: { label: string; href?: string }[]
+  /** Custom separator. Default: '/'. */
+  separator?: React.ReactNode
+}
+
+export const Breadcrumbs = React.forwardRef<HTMLElement, BreadcrumbsProps>(
+  ({ className, items, separator = "/", ...props }, ref) => (
+    <nav ref={ref} aria-label="Breadcrumb" className={cn("ax:flex ax:items-center", className)} {...props}>
+      <ol className="ax:flex ax:items-center ax:gap-xs">
+        {items.map((item, i) => {
+          const isLast = i === items.length - 1
+          return (
+            <li key={`${item.label}-${i}`} className="ax:flex ax:items-center ax:gap-xs">
+              {i > 0 && (
+                <span aria-hidden="true" className="ax:t-caption ax:text-muted-foreground/60">
+                  {separator}
+                </span>
+              )}
+              {item.href ? (
+                <a
+                  href={item.href}
+                  aria-current={isLast ? "page" : undefined}
+                  className="ax:t-body-sm ax:text-muted-foreground ax:hover:text-foreground ax:transition-colors ax:focus-visible:outline-none ax:focus-visible:underline"
+                >
+                  {item.label}
+                </a>
+              ) : (
+                <span aria-current={isLast ? "page" : undefined} className="ax:t-label-sm ax:text-foreground">
+                  {item.label}
+                </span>
+              )}
+            </li>
+          )
+        })}
+      </ol>
+    </nav>
+  )
+)
+Breadcrumbs.displayName = "Breadcrumbs"