@aphrody/m3-ai 3.3.2 → 3.3.4

package/src/index.ts

@@ -0,0 +1,107 @@
+// SPDX-License-Identifier: Apache-2.0 AND MIT
+// Derived from SpaceUI (packages/aphrody-spaceui/packages/ai/src/index.ts), MIT, rebuilt on Material Design 3.
+// @aphrody/m3-ai - AI agent interaction components on Material Design 3
+
+// Types
+export type {
+  ToolCallStatus,
+  ToolCallPair,
+  ActionContent,
+  TranscriptStep,
+  TranscriptItem,
+  TaskInfo,
+  MemoryInfo,
+  CronJobInfo,
+  AgentInfo,
+  ModelOption,
+  TaskStatus,
+  TaskPriority,
+  Subtask,
+  Task,
+} from "./types";
+
+export {
+  pairTranscriptSteps,
+  tryParseJson,
+  isErrorResult,
+  TASK_STATUS_ORDER,
+  TASK_STATUS_LABEL,
+  TASK_PRIORITY_LABEL,
+} from "./types";
+
+// Components
+export { ToolCall } from "./ToolCall";
+export type { ToolCallProps } from "./ToolCall";
+export { Markdown, CodeBlock, InlineMath, BlockMath } from "./Markdown";
+export type {
+  MarkdownProps,
+  CodeBlockProps,
+  InlineMathProps,
+  BlockMathProps,
+} from "./Markdown";
+export { MessageBubble } from "./MessageBubble";
+export type { MessageBubbleProps } from "./MessageBubble";
+export { InlineWorkerCard } from "./InlineWorkerCard";
+export type { InlineWorkerCardProps } from "./InlineWorkerCard";
+export { InlineBranchCard } from "./InlineBranchCard";
+export type { InlineBranchCardProps } from "./InlineBranchCard";
+export { ModelSelector, ModelOptionList, groupModelsByProvider } from "./ModelSelector";
+export type { ModelSelectorProps, ModelOptionListProps } from "./ModelSelector";
+export { ChatComposer } from "./ChatComposer";
+export type { ChatComposerProps } from "./ChatComposer";
+
+// Google & Gemini Desktop / Web benchmark components
+export { GoogleSpotlightBar } from "./GoogleSpotlightBar";
+export type { GoogleSpotlightBarProps } from "./GoogleSpotlightBar";
+export {
+  GeminiAccountMenu,
+  ComposerMoreUploadsMenu,
+} from "./GeminiAccountMenu";
+export type {
+  GeminiAccountMenuProps,
+  ComposerMoreUploadsMenuProps,
+  MenuItem,
+} from "./GeminiAccountMenu";
+export { GeminiPersonalContextEdit } from "./GeminiPersonalContextEdit";
+export type { GeminiPersonalContextEditProps } from "./GeminiPersonalContextEdit";
+
+
+// Task components
+export { TaskStatusIcon } from "./TaskStatusIcon";
+export type { TaskStatusIconProps } from "./TaskStatusIcon";
+export { TaskPriorityIcon } from "./TaskPriorityIcon";
+export type { TaskPriorityIconProps } from "./TaskPriorityIcon";
+export { TaskRow } from "./TaskRow";
+export type { TaskRowProps } from "./TaskRow";
+export { TaskList } from "./TaskList";
+export type { TaskListProps } from "./TaskList";
+export { TaskDetail } from "./TaskDetail";
+export type { TaskDetailProps } from "./TaskDetail";
+export { TaskCreateForm } from "./TaskCreateForm";
+export type { TaskCreateFormProps, TaskCreateFormData } from "./TaskCreateForm";
+
+// AG-UI Protocol & Agent-to-User (A2U) Bridge
+export { EventType } from "@aphrody/ag-ui";
+export {
+  AgUiEventAccumulator,
+  agUiEventsToTranscriptSteps,
+  agUiEventsToTranscriptItems,
+  coordEnvelopeToAgUiEvent,
+  agUiEventToCoordEnvelope,
+} from "./AgUiEventStream";
+export type {
+  CoordEnvelope,
+  EnvelopeKind,
+  SubagentTrace,
+  AgUiStreamState,
+} from "./AgUiEventStream";
+
+// Aphrody A2A (Agent-to-Agent) Fleet UI
+export { A2APeerInspector } from "./A2APeerInspector";
+export type { A2APeerInspectorProps, AgentPeer, SendEnvelopePayload } from "./A2APeerInspector";
+export { A2ATaskTimeline } from "./A2ATaskTimeline";
+export type { A2ATaskTimelineProps, TimelineStep } from "./A2ATaskTimeline";
+
+// MCP-UI Generative Card
+export { McpAppCard } from "./McpAppCard";
+export type { McpAppCardProps } from "./McpAppCard";

package/src/internal.tsx

@@ -0,0 +1,107 @@
+// SPDX-License-Identifier: Apache-2.0
+// Shared Material Design 3 building blocks for @aphrody/m3-ai (internal, not exported).
+
+import { m3Durations, m3Easings } from "@aphrody/m3-motion";
+import { clsx } from "clsx";
+import type { ReactNode } from "react";
+
+/** The M3 focus indicator (contract: docs/design/SPACEUI-M3-FUSION.md, "States"). */
+export const focusRing =
+  "outline-none focus-visible:outline-3 focus-visible:outline-secondary focus-visible:outline-offset-2";
+
+/** Expand / collapse: enter on emphasized decelerate, exit on emphasized accelerate. */
+export const expandMotion = {
+  initial: { height: 0, opacity: 0 },
+  animate: {
+    height: "auto",
+    opacity: 1,
+    transition: { duration: m3Durations.medium2, ease: m3Easings.emphasizedDecelerate },
+  },
+  exit: {
+    height: 0,
+    opacity: 0,
+    transition: { duration: m3Durations.short4, ease: m3Easings.emphasizedAccelerate },
+  },
+} as const;
+
+/**
+ * Indeterminate M3 circular progress indicator (active indicator on `primary` or the current
+ * color, 4 dp track gap omitted at small sizes). Replaces the upstream Grid loader.
+ */
+export function CircularIndicator({
+  size = 16,
+  className,
+  label = "Loading",
+}: {
+  size?: number;
+  className?: string;
+  label?: string;
+}) {
+  const stroke = size <= 16 ? 2 : size <= 24 ? 3 : 4;
+  const r = (size - stroke) / 2;
+  const c = 2 * Math.PI * r;
+  return (
+    <span
+      // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role -- M3 circular indeterminate indicator is an animated SVG arc; a native <progress> cannot render it.
+      role="progressbar"
+      aria-label={label}
+      className={clsx("m3-circular-indicator inline-flex shrink-0 text-primary", className)}
+      style={{ width: size, height: size }}
+    >
+      <svg
+        width={size}
+        height={size}
+        viewBox={`0 0 ${size} ${size}`}
+        className="animate-spin"
+        aria-hidden="true"
+      >
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={r}
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={stroke}
+          strokeLinecap="round"
+          strokeDasharray={`${c * 0.7} ${c}`}
+        />
+      </svg>
+    </span>
+  );
+}
+
+export type ChipTone = "primary" | "success" | "error" | "warning" | "neutral";
+
+const chipTones: Record<ChipTone, string> = {
+  primary: "bg-primary-container text-on-primary-container",
+  success: "bg-success-container text-on-success-container",
+  error: "bg-error-container text-on-error-container",
+  warning: "bg-warning-container text-on-warning-container",
+  neutral: "border border-outline-variant text-on-surface-variant",
+};
+
+/** Non-interactive M3 assist chip used as a status label (dense, `rounded-small`). */
+export function StatusChip({
+  tone,
+  icon,
+  children,
+  className,
+}: {
+  tone: ChipTone;
+  icon?: ReactNode;
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <span
+      className={clsx(
+        "inline-flex h-6 shrink-0 items-center gap-1 rounded-small px-2 text-label-medium",
+        chipTones[tone],
+        className,
+      )}
+    >
+      {icon}
+      {children}
+    </span>
+  );
+}

package/src/types.ts

@@ -0,0 +1,212 @@
+// SPDX-License-Identifier: Apache-2.0 AND MIT
+// Derived from SpaceUI (packages/aphrody-spaceui/packages/ai/src/types.ts), MIT.
+
+// Tool execution types
+export type ToolCallStatus = "running" | "completed" | "error";
+
+export interface ToolCallPair {
+  id: string;
+  name: string;
+  argsRaw: string;
+  args: Record<string, unknown> | null;
+  resultRaw: string | null;
+  result: Record<string, unknown> | null;
+  status: ToolCallStatus;
+  /** Human-readable summary provided by live opencode parts */
+  title?: string | null;
+}
+
+// Transcript step types — discriminated union matching the real API schema
+
+export type ActionContent =
+  | { type: "text"; text: string }
+  | { type: "tool_call"; id: string; name: string; args: string };
+
+export type TranscriptStep =
+  | { type: "action"; content: ActionContent[] }
+  | { type: "user_text"; text: string }
+  | { type: "system_text"; text: string }
+  | { type: "tool_result"; call_id: string; name: string; text: string };
+
+// Paired transcript item for rendering
+
+export type TranscriptItem = { kind: "text"; text: string } | { kind: "tool"; pair: ToolCallPair };
+
+// ---------------------------------------------------------------------------
+// Task board types
+// ---------------------------------------------------------------------------
+
+export type TaskStatus = "pending_approval" | "backlog" | "ready" | "in_progress" | "done";
+export type TaskPriority = "critical" | "high" | "medium" | "low";
+
+export interface Subtask {
+  title: string;
+  completed: boolean;
+}
+
+export interface Task {
+  id: string;
+  task_number: number;
+  title: string;
+  description?: string | null;
+  status: TaskStatus;
+  priority: TaskPriority;
+  owner_agent_id: string;
+  assigned_agent_id: string;
+  subtasks: Subtask[];
+  metadata: unknown;
+  worker_id?: string | null;
+  created_by: string;
+  created_at: string;
+  updated_at: string;
+  completed_at?: string | null;
+}
+
+export const TASK_STATUS_ORDER: TaskStatus[] = [
+  "in_progress",
+  "ready",
+  "pending_approval",
+  "backlog",
+  "done",
+];
+
+export const TASK_STATUS_LABEL: Record<TaskStatus, string> = {
+  in_progress: "In Progress",
+  ready: "Ready",
+  pending_approval: "Pending Approval",
+  backlog: "Backlog",
+  done: "Done",
+};
+
+export const TASK_PRIORITY_LABEL: Record<TaskPriority, string> = {
+  critical: "Critical",
+  high: "High",
+  medium: "Medium",
+  low: "Low",
+};
+
+// Domain objects
+export interface TaskInfo {
+  id: string;
+  title: string;
+  status: string;
+  priority: string;
+  assignees: string[];
+  conversation_id?: string;
+}
+
+export interface MemoryInfo {
+  id: string;
+  type: string;
+  content: string;
+  source?: string;
+  edges?: Array<{ target: string; relation: string }>;
+}
+
+export interface CronJobInfo {
+  id: string;
+  name: string;
+  schedule: string;
+  last_run?: string;
+  next_run?: string;
+  status: string;
+}
+
+export interface AgentInfo {
+  id: string;
+  name: string;
+  detail: string;
+  status?: string;
+}
+
+export interface ModelOption {
+  id: string;
+  name: string;
+  provider: string;
+  context_window?: number;
+  capabilities?: string[];
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+export function tryParseJson(text: string): Record<string, unknown> | null {
+  if (!text || text.trim().length === 0) return null;
+  try {
+    const parsed = JSON.parse(text);
+    if (typeof parsed === "object" && parsed !== null && !Array.isArray(parsed)) {
+      return parsed as Record<string, unknown>;
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+export function isErrorResult(text: string, parsed: Record<string, unknown> | null): boolean {
+  if (parsed?.error) return true;
+  if (parsed?.status === "error") return true;
+  if (parsed?.success === false) return true;
+  if (typeof parsed?.exit_code === "number" && parsed.exit_code !== 0) return true;
+  const lower = text.toLowerCase();
+  return (
+    lower.startsWith("error:") ||
+    lower.startsWith("error -") ||
+    lower.startsWith("failed:") ||
+    lower.startsWith("toolset error:")
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Transcript → TranscriptItem[] pairing
+// ---------------------------------------------------------------------------
+
+/**
+ * Walk a flat TranscriptStep[] and pair each tool_call with its tool_result
+ * via call_id matching, plus emit standalone text steps. Returns an ordered
+ * list of renderable items: text blocks and paired tool calls.
+ */
+export function pairTranscriptSteps(steps: TranscriptStep[]): TranscriptItem[] {
+  const items: TranscriptItem[] = [];
+  const resultsById = new Map<string, { name: string; text: string }>();
+
+  // First pass: index all tool_result steps by call_id
+  for (const step of steps) {
+    if (step.type === "tool_result") {
+      resultsById.set(step.call_id, { name: step.name, text: step.text });
+    }
+  }
+
+  // Second pass: emit items in order
+  for (const step of steps) {
+    if (step.type === "action") {
+      for (const content of step.content) {
+        if (content.type === "text") {
+          items.push({ kind: "text", text: content.text });
+        } else if (content.type === "tool_call") {
+          const result = resultsById.get(content.id);
+          const parsedArgs = tryParseJson(content.args);
+          const parsedResult = result ? tryParseJson(result.text) : null;
+
+          const hasError = result ? isErrorResult(result.text, parsedResult) : false;
+
+          items.push({
+            kind: "tool",
+            pair: {
+              id: content.id,
+              name: content.name,
+              argsRaw: content.args,
+              args: parsedArgs,
+              resultRaw: result?.text ?? null,
+              result: parsedResult,
+              status: result ? (hasError ? "error" : "completed") : "running",
+            },
+          });
+        }
+      }
+    }
+  }
+
+  return items;
+}