@aphrody/m3-ai 3.3.2 → 3.3.4

package/src/McpAppCard.tsx

@@ -0,0 +1,161 @@
+// SPDX-License-Identifier: Apache-2.0
+/**
+ * @aphrody/m3-ai - McpAppCard
+ *
+ * Material Design 3 Interactive MCP App Container:
+ * - Renders generative UI resources produced by MCP tools (SEP-1724 / mcp-ui).
+ * - Hosts interactive guest web applications in an isolated sandbox iframe.
+ * - Passes reactive M3 theme and color scheme context to the guest app.
+ * - Supports expandable full-bleed or embedded card layouts.
+ */
+
+import React, { useState, useRef, useMemo } from "react";
+import { clsx } from "clsx";
+import { AppRenderer, type SandboxConfig, type McpUiHostContext } from "@aphrody/mcp-ui";
+
+export interface McpAppCardProps {
+  toolName: string;
+  title?: string;
+  html?: string;
+  toolResourceUri?: string;
+  toolInput?: Record<string, unknown>;
+  toolResult?: any;
+  sandboxUrl?: string;
+  isExpandedDefault?: boolean;
+  className?: string;
+  onAction?: (action: string, payload?: unknown) => void;
+}
+
+export const McpAppCard: React.FC<McpAppCardProps> = ({
+  toolName,
+  title,
+  html,
+  toolResourceUri,
+  toolInput,
+  toolResult,
+  sandboxUrl,
+  isExpandedDefault = false,
+  className,
+  onAction: _onAction,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(isExpandedDefault);
+  const [hasError, setHasError] = useState<string | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Host context with Material Design 3 tokens
+  const hostContext: McpUiHostContext = useMemo(() => {
+    const isDark =
+      typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches;
+    return {
+      theme: isDark ? "dark" : "light",
+      locale: typeof navigator !== "undefined" ? navigator.language : "en-US",
+      displayMode: isExpanded ? "fullscreen" : "inline",
+    };
+  }, [isExpanded]);
+
+  // Fallback default sandbox proxy URL
+  const resolvedSandbox: SandboxConfig = useMemo(() => {
+    const url = sandboxUrl ? new URL(sandboxUrl) : new URL("https://mcpui.dev/sandbox_proxy.html");
+    return {
+      url,
+      permissions: "allow-scripts allow-forms allow-same-origin",
+    };
+  }, [sandboxUrl]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={clsx(
+        "flex flex-col rounded-3xl border transition-all duration-300 overflow-hidden",
+        "bg-[var(--md-sys-color-surface-container-low,#f7f2fa)]",
+        "border-[var(--md-sys-color-outline-variant,#cac4d0)]",
+        "text-[var(--md-sys-color-on-surface,#1d1b20)]",
+        isExpanded ? "fixed inset-4 z-50 shadow-2xl" : "relative w-full shadow-sm",
+        className,
+      )}
+    >
+      {/* App Card Header */}
+      <div className="flex items-center justify-between px-4 py-3 border-b border-[var(--md-sys-color-outline-variant,#cac4d0)]/40 bg-[var(--md-sys-color-surface-container,#f3edf7)]/60">
+        <div className="flex items-center gap-2.5">
+          <div className="flex h-7 w-7 items-center justify-center rounded-xl bg-[var(--md-sys-color-primary-container,#eaddff)] text-[var(--md-sys-color-on-primary-container,#21005d)]">
+            <span className="material-symbols-outlined text-base">widgets</span>
+          </div>
+
+          <div className="flex flex-col">
+            <div className="flex items-center gap-2">
+              <span className="text-xs font-semibold tracking-tight">{title || toolName}</span>
+              <span className="rounded-full bg-[var(--md-sys-color-surface-container-high,#ece6f0)] px-2 py-0.2 text-[10px] font-mono text-[var(--md-sys-color-on-surface-variant,#49454f)]">
+                mcp-ui
+              </span>
+            </div>
+            {toolResourceUri && (
+              <span className="text-[10px] font-mono text-[var(--md-sys-color-outline,#79747e)]">
+                {toolResourceUri}
+              </span>
+            )}
+          </div>
+        </div>
+
+        {/* Action icons */}
+        <div className="flex items-center gap-1">
+          <div className="flex items-center gap-1 rounded-full bg-emerald-500/10 px-2 py-0.5 text-[10px] font-medium text-emerald-700 dark:text-emerald-400">
+            <span className="material-symbols-outlined text-xs">verified_user</span>
+            <span>Sandboxed</span>
+          </div>
+
+          <button
+            type="button"
+            onClick={() => setIsExpanded(!isExpanded)}
+            title={isExpanded ? "Collapse" : "Expand Fullscreen"}
+            className="flex h-7 w-7 items-center justify-center rounded-lg text-[var(--md-sys-color-on-surface-variant,#49454f)] hover:bg-[var(--md-sys-color-surface-container-high,#ece6f0)] transition-colors"
+          >
+            <span className="material-symbols-outlined text-base">
+              {isExpanded ? "close_fullscreen" : "open_in_full"}
+            </span>
+          </button>
+        </div>
+      </div>
+
+      {/* App Frame Content */}
+      <div
+        className={clsx(
+          "relative w-full overflow-hidden transition-all",
+          isExpanded ? "flex-1 min-h-[500px]" : "h-96",
+        )}
+      >
+        {hasError ? (
+          <div className="flex h-full flex-col items-center justify-center p-6 text-center text-xs text-[var(--md-sys-color-error,#b3261e)]">
+            <span className="material-symbols-outlined text-3xl mb-1">error</span>
+            <span className="font-semibold">MCP App Render Error</span>
+            <p className="mt-1 font-mono text-[11px] opacity-80">{hasError}</p>
+          </div>
+        ) : html ? (
+          <AppRenderer
+            toolName={toolName}
+            html={html}
+            sandbox={resolvedSandbox}
+            toolInput={toolInput}
+            toolResult={toolResult}
+            hostContext={hostContext}
+            onError={(err) => setHasError(err.message)}
+          />
+        ) : (
+          <div className="flex h-full flex-col items-center justify-center p-6 text-xs text-[var(--md-sys-color-outline,#79747e)]">
+            <span className="material-symbols-outlined text-2xl animate-spin mb-1 text-[var(--md-sys-color-primary,#6750a4)]">
+              progress_activity
+            </span>
+            <span>Awaiting MCP UI Resource ({toolName})...</span>
+          </div>
+        )}
+      </div>
+
+      {/* Footer info */}
+      {toolInput && (
+        <div className="flex items-center justify-between px-4 py-2 border-t border-[var(--md-sys-color-outline-variant,#cac4d0)]/30 bg-[var(--md-sys-color-surface-container-lowest,#ffffff)] text-[10px] text-[var(--md-sys-color-outline,#79747e)] font-mono">
+          <span className="truncate">input: {JSON.stringify(toolInput)}</span>
+          <span className="shrink-0 ml-2">M3 UI Bridge</span>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/MessageBubble.tsx

@@ -0,0 +1,95 @@
+// SPDX-License-Identifier: Apache-2.0 AND MIT
+// Derived from SpaceUI (packages/aphrody-spaceui/packages/ai/src/MessageBubble.tsx), MIT, rebuilt on Material Design 3.
+
+"use client";
+
+import { CircleButton } from "@aphrody/m3-primitives";
+import { clsx } from "clsx";
+
+import { Markdown } from "./Markdown";
+
+export interface MessageBubbleProps {
+  content: string;
+  isUser: boolean;
+  isStreaming?: boolean;
+  onCopy?: (content: string) => void;
+  onDislike?: (content: string) => void;
+  onFork?: () => void;
+  variant?: "default" | "codex";
+  className?: string;
+}
+
+/**
+ * One chat turn. The user turn is an M3 bubble, the assistant turn is plain markdown
+ * on the surface, as in M3 / Codex conversations.
+ */
+export function MessageBubble({
+  content,
+  isUser,
+  isStreaming = false,
+  onCopy,
+  onDislike,
+  onFork,
+  variant = "default",
+  className,
+}: MessageBubbleProps) {
+  const isCodex = variant === "codex";
+
+  return (
+    <div
+      className={clsx("group flex flex-col py-1.5 w-full", isUser ? "items-end" : "items-start", className)}
+    >
+      <div
+        className={clsx(
+          "min-w-0",
+          isUser
+            ? isCodex
+              ? "max-w-[75%] rounded-[28px] bg-surface-container-high px-5 py-3 text-body-large text-on-surface shadow-xs"
+              : "max-w-[80%] rounded-large rounded-br-extra-small bg-secondary-container px-4 py-2.5 text-body-large text-on-secondary-container"
+            : "w-full max-w-full bg-transparent text-body-large text-on-surface",
+        )}
+        aria-busy={isStreaming || undefined}
+      >
+        {isUser ? (
+          <div className="whitespace-pre-wrap break-words">{content}</div>
+        ) : (
+          <Markdown content={content} size="large" className="break-words font-sans" />
+        )}
+      </div>
+      {!isUser && (onCopy || onDislike || onFork) ? (
+        <div className="mt-1.5 flex items-center gap-1 opacity-0 transition-opacity duration-200 ease-standard group-focus-within:opacity-100 group-hover:opacity-100">
+          {onCopy && (
+            <CircleButton
+              icon="content_copy"
+              variant="standard"
+              size="sm"
+              onClick={() => onCopy(content)}
+              aria-label={isStreaming ? "Copy Streaming Message" : "Copy Message"}
+              title={isStreaming ? "Copy streaming message" : "Copier"}
+            />
+          )}
+          {onDislike && (
+            <CircleButton
+              icon="thumb_down"
+              variant="standard"
+              size="sm"
+              onClick={() => onDislike(content)}
+              aria-label="Dislike"
+              title="Je n'aime pas"
+            />
+          )}
+          {onFork && (
+            <CircleButton
+              icon="call_split"
+              variant="standard"
+              size="sm"
+              onClick={onFork}
+              aria-label="Fork"
+              title="Bifurquer à partir de ce tour"
+            />
+          )}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/ModelSelector.tsx

@@ -0,0 +1,300 @@
+// SPDX-License-Identifier: Apache-2.0 AND MIT
+// Derived from SpaceUI (packages/aphrody-spaceui/packages/ai/src/ModelSelector.tsx), MIT, rebuilt on Material Design 3.
+
+"use client";
+
+import {
+  Icon,
+  Popover,
+  usePopover,
+  SelectPill,
+  type SelectPillProps,
+} from "@aphrody/m3-primitives";
+import { clsx } from "clsx";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+
+import { focusRing } from "./internal";
+import type { ModelOption } from "./types";
+
+export interface ModelSelectorProps {
+  /** Available models */
+  models: ModelOption[];
+  /** Currently selected model ID */
+  value: string;
+  /** Called when a model is selected */
+  onChange: (value: string) => void;
+  /** Placeholder when nothing selected */
+  placeholder?: string;
+  /** Search placeholder */
+  searchPlaceholder?: string;
+  /** SelectPill variant */
+  variant?: SelectPillProps["variant"];
+  /** SelectPill size */
+  size?: SelectPillProps["size"];
+  /** Controlled popover (optional) */
+  popover?: ReturnType<typeof usePopover>;
+  /** Additional trigger className */
+  className?: string;
+  /** Disabled state */
+  disabled?: boolean;
+}
+
+/** Group models by provider, keeping the order of first appearance. */
+export function groupModelsByProvider(
+  models: ModelOption[],
+  search = "",
+): Record<string, ModelOption[]> {
+  const q = search.trim().toLowerCase();
+  const filtered = q
+    ? models.filter((m) => m.name.toLowerCase().includes(q) || m.provider.toLowerCase().includes(q))
+    : models;
+
+  return filtered.reduce(
+    (acc, model) => {
+      if (!acc[model.provider]) acc[model.provider] = [];
+      acc[model.provider].push(model);
+      return acc;
+    },
+    Object.create(null) as Record<string, ModelOption[]>,
+  );
+}
+
+export interface ModelOptionListProps {
+  /** Models grouped by provider (see {@link groupModelsByProvider}). */
+  grouped: Record<string, ModelOption[]>;
+  /** Currently selected model ID */
+  value: string;
+  /** Called when a model is picked */
+  onSelect: (value: string) => void;
+  className?: string;
+}
+
+/**
+ * The M3 menu list of the model selector: provider section headers (`text-title-small`),
+ * 48 dp two-line items (`text-label-large` + `text-body-small` supporting text), the selected
+ * item on `secondary-container`, capabilities as small outlined chips.
+ */
+export function ModelOptionList({ grouped, value, onSelect, className }: ModelOptionListProps) {
+  const providers = Object.entries(grouped);
+  const models = providers.flatMap(([, providerModels]) => providerModels);
+  const [focusedId, setFocusedId] = useState(value);
+  const focusId = models.some((model) => model.id === focusedId)
+    ? focusedId
+    : (models.find((model) => model.id === value)?.id ?? models[0]?.id);
+  return (
+    <div
+      // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role -- M3 menu whose options are rich rows (headers, supporting text, chips); a native <select>/<datalist> cannot render them.
+      role="listbox"
+      aria-label="Models"
+      tabIndex={-1}
+      onKeyDown={(event) => {
+        if (event.defaultPrevented) return;
+        const options = Array.from(
+          event.currentTarget.querySelectorAll<HTMLButtonElement>('[role="option"]'),
+        );
+        const index = options.indexOf(event.target as HTMLButtonElement);
+        if (index < 0) return;
+        let next: number;
+        switch (event.key) {
+          case "ArrowDown":
+            next = (index + 1) % options.length;
+            break;
+          case "ArrowUp":
+            next = (index - 1 + options.length) % options.length;
+            break;
+          case "Home":
+            next = 0;
+            break;
+          case "End":
+            next = options.length - 1;
+            break;
+          default:
+            return;
+        }
+        event.preventDefault();
+        options[next]!.focus();
+      }}
+      className={clsx("flex flex-col", className)}
+    >
+      {providers.map(([provider, providerModels], groupIndex) => (
+        <div
+          key={provider}
+          // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role -- provider section of the custom listbox with a visible M3 header row; <optgroup> only exists inside a native <select>.
+          role="group"
+          aria-label={provider}
+          className={clsx(groupIndex > 0 && "mt-1 border-t border-outline-variant pt-1")}
+        >
+          <div className="px-3 pt-2 pb-1 text-title-small text-on-surface-variant">{provider}</div>
+          {providerModels.map((model) => {
+            const selected = model.id === value;
+            return (
+              <button
+                key={model.id}
+                type="button"
+                // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role -- M3 two-line menu item (label, supporting text, capability chips, check icon); a native <option> can only hold text.
+                role="option"
+                aria-selected={selected}
+                tabIndex={model.id === focusId ? 0 : -1}
+                onFocus={() => setFocusedId(model.id)}
+                onClick={() => onSelect(model.id)}
+                className={clsx(
+                  "flex min-h-12 w-full items-center gap-3 px-3 py-2 text-left",
+                  "transition-colors duration-200 ease-standard",
+                  selected
+                    ? "bg-secondary-container text-on-secondary-container"
+                    : "text-on-surface hover:bg-on-surface/8 active:bg-on-surface/10",
+                  focusRing,
+                  "focus-visible:outline-offset-[-3px]",
+                )}
+              >
+                <div className="min-w-0 flex-1">
+                  <div className="truncate text-label-large">{model.name}</div>
+                  {model.context_window || model.capabilities?.length ? (
+                    <div className="mt-0.5 flex flex-wrap items-center gap-1">
+                      {model.context_window ? (
+                        <span
+                          className={clsx(
+                            "text-body-small",
+                            selected ? "text-on-secondary-container" : "text-on-surface-variant",
+                          )}
+                        >
+                          {model.context_window.toLocaleString()} tokens
+                        </span>
+                      ) : null}
+                      {model.capabilities?.map((capability) => (
+                        <span
+                          key={capability}
+                          className={clsx(
+                            "inline-flex h-5 items-center rounded-small border border-outline-variant px-1.5 text-label-small",
+                            selected ? "text-on-secondary-container" : "text-on-surface-variant",
+                          )}
+                        >
+                          {capability}
+                        </span>
+                      ))}
+                    </div>
+                  ) : null}
+                </div>
+                {selected && <Icon name="check" size={20} className="shrink-0" />}
+              </button>
+            );
+          })}
+        </div>
+      ))}
+      {providers.length === 0 && (
+        <div className="px-3 py-3 text-center text-body-small text-on-surface-variant">
+          No models found
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * The menu's search field. It mounts with the popover content and takes focus then (replaces
+ * `autoFocus`), so typing filters the list as soon as the menu opens.
+ */
+function ModelSearchField({
+  value,
+  onChange,
+  placeholder,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder: string;
+}) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  return (
+    <div className="px-2 pb-2">
+      <label className="flex h-10 items-center gap-2 rounded-full bg-surface-container-high px-3 text-on-surface-variant focus-within:bg-surface-container-highest">
+        <Icon name="search" size={20} className="shrink-0" />
+        <input
+          ref={inputRef}
+          value={value}
+          onChange={(event) => onChange(event.target.value)}
+          placeholder={placeholder}
+          aria-label={placeholder}
+          className="min-w-0 flex-1 bg-transparent text-body-large text-on-surface outline-none placeholder:text-on-surface-variant"
+        />
+      </label>
+    </div>
+  );
+}
+
+export const ModelSelector = forwardRef<HTMLButtonElement, ModelSelectorProps>(
+  (
+    {
+      models,
+      value,
+      onChange,
+      placeholder = "Select model...",
+      searchPlaceholder = "Search models...",
+      variant,
+      size,
+      popover: externalPopover,
+      className,
+      disabled,
+    },
+    ref,
+  ) => {
+    const internalPopover = usePopover();
+    const popover = externalPopover ?? internalPopover;
+    const [search, setSearch] = useState("");
+
+    const selectedModel = models.find((m) => m.id === value);
+
+    const grouped = useMemo(() => groupModelsByProvider(models, search), [models, search]);
+
+    return (
+      <Popover.Root
+        open={popover.open}
+        onOpenChange={(open) => {
+          popover.setOpen(open);
+          if (!open) setSearch("");
+        }}
+      >
+        <Popover.Trigger asChild>
+          <SelectPill
+            ref={ref}
+            variant={variant}
+            size={size}
+            disabled={disabled}
+            aria-haspopup="listbox"
+            className={clsx("w-full", className)}
+          >
+            {selectedModel?.name ?? placeholder}
+          </SelectPill>
+        </Popover.Trigger>
+        <Popover.Content
+          align="end"
+          sideOffset={8}
+          style={{ width: 280 }}
+          className="overflow-hidden rounded-extra-small! py-2"
+        >
+          {/* Search */}
+          <ModelSearchField value={search} onChange={setSearch} placeholder={searchPlaceholder} />
+
+          {/* Grouped results */}
+          <div className="max-h-[320px] overflow-y-auto">
+            <ModelOptionList
+              grouped={grouped}
+              value={value}
+              onSelect={(id) => {
+                onChange(id);
+                popover.setOpen(false);
+                setSearch("");
+              }}
+            />
+          </div>
+        </Popover.Content>
+      </Popover.Root>
+    );
+  },
+);
+
+ModelSelector.displayName = "ModelSelector";

package/src/TaskCreateForm.tsx

@@ -0,0 +1,123 @@
+// SPDX-License-Identifier: Apache-2.0 AND MIT
+// Derived from SpaceUI (packages/aphrody-spaceui/packages/ai/src/TaskCreateForm.tsx), MIT, rebuilt on Material Design 3.
+
+import { Button, Input, Select, SelectOption, TextArea } from "@aphrody/m3-primitives";
+import { clsx } from "clsx";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+
+import type { TaskPriority } from "./types";
+import { TASK_PRIORITY_LABEL } from "./types";
+
+export interface TaskCreateFormData {
+  title: string;
+  description: string;
+  priority: TaskPriority;
+}
+
+export interface TaskCreateFormProps {
+  onSubmit: (data: TaskCreateFormData) => void;
+  onCancel?: () => void;
+  defaultPriority?: TaskPriority;
+  isSubmitting?: boolean;
+  className?: string;
+}
+
+const PRIORITIES: TaskPriority[] = ["critical", "high", "medium", "low"];
+
+/**
+ * Inline task creation on an M3 surface: title and description text fields, a priority select,
+ * and M3 actions (filled `Create`, text `Cancel`).
+ */
+export function TaskCreateForm({
+  onSubmit,
+  onCancel,
+  defaultPriority = "medium",
+  isSubmitting,
+  className,
+}: TaskCreateFormProps) {
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [priority, setPriority] = useState<TaskPriority>(defaultPriority);
+  const titleInputId = useId();
+  const descriptionInputId = useId();
+  const titleInputRef = useRef<HTMLInputElement>(null);
+
+  // Focus the title when the form mounts (replaces `autoFocus`).
+  useEffect(() => {
+    titleInputRef.current?.focus();
+  }, []);
+
+  const canSubmit = title.trim().length > 0 && !isSubmitting;
+
+  const handleSubmit = useCallback(() => {
+    if (!canSubmit) return;
+    onSubmit({ title: title.trim(), description: description.trim(), priority });
+    setTitle("");
+    setDescription("");
+    setPriority(defaultPriority);
+  }, [canSubmit, onSubmit, title, description, priority, defaultPriority]);
+
+  return (
+    <div
+      className={clsx(
+        "flex flex-col gap-3 rounded-medium bg-surface-container-low p-4 text-on-surface",
+        className,
+      )}
+    >
+      <div className="flex items-center gap-2">
+        <label htmlFor={titleInputId} className="sr-only">
+          Task Title
+        </label>
+        <Input
+          ref={titleInputRef}
+          id={titleInputId}
+          type="text"
+          size="lg"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") handleSubmit();
+            if (e.key === "Escape") onCancel?.();
+          }}
+          placeholder="Task title..."
+          className="min-w-0 flex-1"
+          disabled={isSubmitting}
+        />
+        <Select
+          value={priority}
+          size="lg"
+          onChange={(value) => setPriority(value as TaskPriority)}
+          disabled={isSubmitting}
+        >
+          {PRIORITIES.map((p) => (
+            <SelectOption key={p} value={p}>
+              {TASK_PRIORITY_LABEL[p]}
+            </SelectOption>
+          ))}
+        </Select>
+      </div>
+      <label htmlFor={descriptionInputId} className="sr-only">
+        Description
+      </label>
+      <TextArea
+        id={descriptionInputId}
+        value={description}
+        onChange={(e) => setDescription(e.target.value)}
+        placeholder="Description (optional)"
+        rows={2}
+        className="w-full resize-none"
+        disabled={isSubmitting}
+      />
+      <div className="flex items-center justify-end gap-2">
+        {onCancel && (
+          <Button variant="text" size="lg" onClick={onCancel} disabled={isSubmitting}>
+            Cancel
+          </Button>
+        )}
+        <Button variant="filled" size="lg" disabled={!canSubmit} onClick={handleSubmit}>
+          Create
+        </Button>
+      </div>
+    </div>
+  );
+}