@aphrody/m3-ai 3.3.1 → 3.3.4

package/src/TaskDetail.tsx

@@ -0,0 +1,224 @@
+// SPDX-License-Identifier: Apache-2.0 AND MIT
+// Derived from SpaceUI (packages/aphrody-spaceui/packages/ai/src/TaskDetail.tsx), MIT, rebuilt on Material Design 3.
+
+import { Button, CircleButton, Icon, Select, SelectOption } from "@aphrody/m3-primitives";
+import { clsx } from "clsx";
+
+import { focusRing } from "./internal";
+import { Markdown } from "./Markdown";
+import { TaskPriorityIcon } from "./TaskPriorityIcon";
+import { TaskStatusIcon } from "./TaskStatusIcon";
+import type { Task, TaskStatus } from "./types";
+import { TASK_PRIORITY_LABEL, TASK_STATUS_LABEL, TASK_STATUS_ORDER } from "./types";
+
+export interface TaskDetailProps {
+  task: Task;
+  resolveAgentName?: (agentId: string) => string;
+  onStatusChange?: (task: Task, status: TaskStatus) => void;
+  onSubtaskToggle?: (task: Task, index: number, completed: boolean) => void;
+  onDelete?: (task: Task) => void;
+  onClose?: () => void;
+  className?: string;
+}
+
+function formatDate(iso: string) {
+  return new Date(iso).toLocaleDateString(undefined, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+function Property({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="flex min-w-0 flex-col gap-0.5">
+      <span className="text-label-medium text-on-surface-variant">{label}</span>
+      <span className="flex min-h-8 items-center gap-1.5 text-body-medium text-on-surface">
+        {children}
+      </span>
+    </div>
+  );
+}
+
+/**
+ * A task on an M3 surface: `text-headline-small` title, a property grid, subtasks as an M3 list
+ * with checkboxes, markdown description, and actions as M3 buttons (filled for the primary
+ * transition, text for the others).
+ */
+export function TaskDetail({
+  task,
+  resolveAgentName,
+  onStatusChange,
+  onSubtaskToggle,
+  onDelete,
+  onClose,
+  className,
+}: TaskDetailProps) {
+  const ownerName = resolveAgentName?.(task.owner_agent_id) ?? task.owner_agent_id;
+  const assigneeName = resolveAgentName?.(task.assigned_agent_id) ?? task.assigned_agent_id;
+  const completedCount = task.subtasks.filter((s) => s.completed).length;
+
+  return (
+    <div className={clsx("flex flex-col gap-6 bg-surface p-6 text-on-surface", className)}>
+      {/* Header */}
+      <div className="flex flex-col gap-2">
+        <div className="flex items-center gap-2">
+          <div className="flex flex-1 items-center gap-2">
+            <TaskStatusIcon status={task.status} size={20} />
+            <TaskPriorityIcon priority={task.priority} size={18} />
+            <span className="font-code text-body-small text-on-surface-variant">
+              SPC-{task.task_number}
+            </span>
+          </div>
+          {onClose && (
+            <CircleButton icon="close" variant="standard" onClick={onClose} aria-label="Close" />
+          )}
+        </div>
+        <h2 className="text-headline-small text-on-surface">{task.title}</h2>
+      </div>
+
+      {/* Properties */}
+      <div className="grid grid-cols-2 gap-x-6 gap-y-4 medium:grid-cols-4">
+        <Property label="Status">
+          {onStatusChange ? (
+            <Select
+              value={task.status}
+              size="md"
+              onChange={(value) => onStatusChange(task, value as TaskStatus)}
+            >
+              {TASK_STATUS_ORDER.map((s) => (
+                <SelectOption key={s} value={s}>
+                  {TASK_STATUS_LABEL[s]}
+                </SelectOption>
+              ))}
+            </Select>
+          ) : (
+            TASK_STATUS_LABEL[task.status]
+          )}
+        </Property>
+        <Property label="Priority">
+          <TaskPriorityIcon priority={task.priority} size={18} label="" />
+          {TASK_PRIORITY_LABEL[task.priority]}
+        </Property>
+        <Property label="Owner">
+          <span className="truncate">{ownerName}</span>
+        </Property>
+        <Property label="Assigned">
+          <span className="truncate">{assigneeName}</span>
+        </Property>
+      </div>
+
+      {/* Subtasks */}
+      {task.subtasks.length > 0 && (
+        <section className="flex flex-col gap-2">
+          <div className="flex items-center justify-between">
+            <h3 className="text-title-small text-on-surface">Subtasks</h3>
+            <span className="text-body-small text-on-surface-variant">
+              {completedCount}/{task.subtasks.length}
+            </span>
+          </div>
+          <ul className="m-0 list-none overflow-hidden rounded-medium border border-outline-variant p-0">
+            {task.subtasks.map((subtask, i) => (
+              <li key={subtask.title}>
+                <button
+                  type="button"
+                  // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role -- M3 list item with a leading checkbox: the whole 48 dp row toggles and carries the state layer; a native checkbox input cannot host the row.
+                  role="checkbox"
+                  aria-checked={subtask.completed}
+                  onClick={() => onSubtaskToggle?.(task, i, !subtask.completed)}
+                  className={clsx(
+                    "flex min-h-12 w-full items-center gap-4 px-4 py-2 text-left text-body-large",
+                    "transition-colors duration-200 ease-standard hover:bg-on-surface/8 active:bg-on-surface/10",
+                    focusRing,
+                    "focus-visible:outline-offset-[-3px]",
+                    i > 0 && "border-t border-outline-variant",
+                  )}
+                >
+                  <span
+                    className={clsx(
+                      "flex size-[18px] shrink-0 items-center justify-center rounded-[2px] transition-colors duration-200 ease-standard",
+                      subtask.completed
+                        ? "bg-primary text-on-primary"
+                        : "border-2 border-on-surface-variant",
+                    )}
+                  >
+                    {subtask.completed && <Icon name="check" size={16} weight={700} />}
+                  </span>
+                  <span
+                    className={clsx(
+                      "min-w-0 flex-1",
+                      subtask.completed
+                        ? "text-on-surface-variant line-through"
+                        : "text-on-surface",
+                    )}
+                  >
+                    {subtask.title}
+                  </span>
+                </button>
+              </li>
+            ))}
+          </ul>
+        </section>
+      )}
+
+      {/* Description */}
+      <section className="flex flex-col gap-2">
+        <h3 className="text-title-small text-on-surface">Description</h3>
+        {task.description ? (
+          <Markdown content={task.description} size="medium" />
+        ) : (
+          <p className="text-body-medium text-on-surface-variant">No description</p>
+        )}
+      </section>
+
+      {/* Timestamps */}
+      <div className="flex flex-col gap-1 text-body-small text-on-surface-variant">
+        <span>Created {formatDate(task.created_at)}</span>
+        <span>Updated {formatDate(task.updated_at)}</span>
+        {task.completed_at && <span>Completed {formatDate(task.completed_at)}</span>}
+      </div>
+
+      {/* Actions */}
+      {(onStatusChange || onDelete) && (
+        <div className="flex flex-wrap items-center gap-2">
+          {onStatusChange && task.status === "pending_approval" && (
+            <Button variant="filled" size="lg" onClick={() => onStatusChange(task, "ready")}>
+              Approve
+            </Button>
+          )}
+          {onStatusChange && task.status === "backlog" && (
+            <Button variant="filled" size="lg" onClick={() => onStatusChange(task, "in_progress")}>
+              Execute
+            </Button>
+          )}
+          {onStatusChange && (task.status === "in_progress" || task.status === "ready") && (
+            <Button variant="filled" size="lg" onClick={() => onStatusChange(task, "done")}>
+              Mark Done
+            </Button>
+          )}
+          {onStatusChange && task.status === "done" && (
+            <Button variant="text" size="lg" onClick={() => onStatusChange(task, "ready")}>
+              Reopen
+            </Button>
+          )}
+          {onDelete && (
+            <button
+              type="button"
+              onClick={() => onDelete(task)}
+              className={clsx(
+                "inline-flex h-10 items-center justify-center gap-2 rounded-full px-3 text-label-large text-error",
+                "transition-colors duration-200 ease-standard hover:bg-error/8 active:bg-error/10",
+                focusRing,
+              )}
+            >
+              <Icon name="delete" size={18} />
+              Delete
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/TaskList.tsx

@@ -0,0 +1,136 @@
+// SPDX-License-Identifier: Apache-2.0 AND MIT
+// Derived from SpaceUI (packages/aphrody-spaceui/packages/ai/src/TaskList.tsx), MIT, rebuilt on Material Design 3.
+
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, Icon } from "@aphrody/m3-primitives";
+import { clsx } from "clsx";
+import { useMemo } from "react";
+
+import { focusRing } from "./internal";
+import { TASK_ROW_GRID, TaskRow } from "./TaskRow";
+import { TaskStatusIcon } from "./TaskStatusIcon";
+import type { Task, TaskStatus } from "./types";
+import { TASK_STATUS_LABEL, TASK_STATUS_ORDER } from "./types";
+
+export interface TaskListProps {
+  tasks: Task[];
+  groups?: TaskStatus[];
+  collapsedGroups?: Set<TaskStatus>;
+  onToggleGroup?: (status: TaskStatus) => void;
+  activeTaskId?: string;
+  onTaskClick: (task: Task) => void;
+  onStatusChange?: (task: Task, status: TaskStatus) => void;
+  onDelete?: (task: Task) => void;
+  resolveAgentName?: (agentId: string) => string;
+  className?: string;
+}
+
+const GRID_STYLE = {
+  gridTemplateColumns: TASK_ROW_GRID,
+  paddingLeft: 16,
+  paddingRight: 8,
+  gap: 12,
+} as const;
+
+/**
+ * Tasks grouped by status as an M3 list: a column header in `text-label-medium`, collapsible
+ * section headers in `text-title-small`, `outline-variant` dividers.
+ */
+export function TaskList({
+  tasks,
+  groups = TASK_STATUS_ORDER,
+  collapsedGroups,
+  onToggleGroup,
+  activeTaskId,
+  onTaskClick,
+  onStatusChange,
+  onDelete,
+  resolveAgentName,
+  className,
+}: TaskListProps) {
+  const grouped = useMemo(() => {
+    const map = new Map<TaskStatus, Task[]>();
+    for (const status of groups) map.set(status, []);
+    for (const task of tasks) {
+      const bucket = map.get(task.status);
+      if (bucket) bucket.push(task);
+    }
+    return map;
+  }, [tasks, groups]);
+
+  return (
+    <div className={clsx("flex flex-col bg-surface text-on-surface", className)}>
+      {/* Column header */}
+      <div
+        className="grid items-center border-b border-outline-variant text-label-medium text-on-surface-variant"
+        style={{ ...GRID_STYLE, height: 32 }}
+      >
+        <span />
+        <span />
+        <span>ID</span>
+        <span>Title</span>
+        <span className="text-right">Subs</span>
+        <span className="text-right">Assignee</span>
+        <span />
+      </div>
+
+      {/* Groups */}
+      {groups.map((status) => {
+        const items = grouped.get(status) ?? [];
+        const isOpen = !collapsedGroups?.has(status);
+
+        return (
+          <Collapsible key={status} open={isOpen} onOpenChange={() => onToggleGroup?.(status)}>
+            <CollapsibleTrigger
+              className={clsx(
+                "grid w-full items-center rounded-none border-b border-outline-variant bg-surface-container-low",
+                "text-title-small text-on-surface transition-colors duration-200 ease-standard",
+                "hover:bg-on-surface/8 active:bg-on-surface/10",
+                focusRing,
+                "focus-visible:outline-offset-[-3px]",
+              )}
+              style={{ ...GRID_STYLE, height: 40 }}
+            >
+              <span className="flex items-center justify-center text-on-surface-variant">
+                <Icon
+                  name="chevron_right"
+                  size={20}
+                  className={clsx(
+                    "shrink-0 transition-transform duration-300 ease-emphasized",
+                    isOpen && "rotate-90",
+                  )}
+                />
+              </span>
+              <span className="flex items-center justify-center">
+                <TaskStatusIcon status={status} size={18} label="" />
+              </span>
+              <span className="col-span-5 flex items-center gap-1.5 text-left">
+                {TASK_STATUS_LABEL[status]}
+                <span className="text-body-small text-on-surface-variant">({items.length})</span>
+              </span>
+            </CollapsibleTrigger>
+
+            <CollapsibleContent>
+              {items.length > 0 ? (
+                items.map((task) => (
+                  <TaskRow
+                    key={task.id}
+                    task={task}
+                    isActive={task.id === activeTaskId}
+                    onClick={onTaskClick}
+                    onStatusChange={onStatusChange}
+                    onDelete={onDelete}
+                    resolveAgentName={resolveAgentName}
+                  />
+                ))
+              ) : (
+                <div className="border-b border-outline-variant px-4 py-3 text-body-small text-on-surface-variant">
+                  No tasks
+                </div>
+              )}
+            </CollapsibleContent>
+          </Collapsible>
+        );
+      })}
+    </div>
+  );
+}

package/src/TaskPriorityIcon.tsx

@@ -0,0 +1,39 @@
+// SPDX-License-Identifier: Apache-2.0 AND MIT
+// Derived from SpaceUI (packages/aphrody-spaceui/packages/ai/src/TaskPriorityIcon.tsx), MIT, rebuilt on Material Design 3.
+
+import { Icon } from "@aphrody/m3-primitives";
+import { clsx } from "clsx";
+
+import type { TaskPriority } from "./types";
+import { TASK_PRIORITY_LABEL } from "./types";
+
+/** Material Symbols glyph and M3 color role per priority. */
+const config: Record<TaskPriority, { icon: string; filled: boolean; color: string }> = {
+  critical: { icon: "priority_high", filled: true, color: "text-error" },
+  high: { icon: "keyboard_double_arrow_up", filled: false, color: "text-warning" },
+  medium: { icon: "drag_handle", filled: false, color: "text-primary" },
+  low: { icon: "keyboard_arrow_down", filled: false, color: "text-outline" },
+};
+
+export interface TaskPriorityIconProps {
+  priority: TaskPriority;
+  size?: number;
+  className?: string;
+  /** Accessible label; defaults to the priority label. Pass `""` for a decorative icon. */
+  label?: string;
+}
+
+export function TaskPriorityIcon({ priority, size = 14, className, label }: TaskPriorityIconProps) {
+  const { icon, filled, color } = config[priority];
+  return (
+    <Icon
+      name={icon}
+      size={size}
+      filled={filled}
+      weight={600}
+      label={label ?? `${TASK_PRIORITY_LABEL[priority]} priority`}
+      data-priority={priority}
+      className={clsx(color, className)}
+    />
+  );
+}

package/src/TaskRow.tsx

@@ -0,0 +1,177 @@
+// SPDX-License-Identifier: Apache-2.0 AND MIT
+// Derived from SpaceUI (packages/aphrody-spaceui/packages/ai/src/TaskRow.tsx), MIT, rebuilt on Material Design 3.
+
+import { DropdownMenu, Icon } from "@aphrody/m3-primitives";
+import { clsx } from "clsx";
+
+import { focusRing } from "./internal";
+import { TaskPriorityIcon } from "./TaskPriorityIcon";
+import { TaskStatusIcon } from "./TaskStatusIcon";
+import type { Task, TaskStatus } from "./types";
+import { TASK_STATUS_LABEL, TASK_STATUS_ORDER } from "./types";
+
+export interface TaskRowProps {
+  task: Task;
+  onClick?: (task: Task) => void;
+  isActive?: boolean;
+  resolveAgentName?: (agentId: string) => string;
+  onStatusChange?: (task: Task, status: TaskStatus) => void;
+  onDelete?: (task: Task) => void;
+  className?: string;
+}
+
+/** Column template shared with the {@link TaskList} header. */
+export const TASK_ROW_GRID = "20px 18px 72px 1fr 56px 96px 40px";
+
+/** M3 list item height at desktop density (56 dp baseline, two density steps). */
+export const TASK_ROW_HEIGHT = 48;
+
+/**
+ * A task as a dense M3 list item: leading status and priority icons, `text-body-large` headline,
+ * `text-body-small` supporting columns, `on-surface` 8 % hover, `secondary-container` selection
+ * and a trailing overflow-menu icon button.
+ */
+export function TaskRow({
+  task,
+  onClick,
+  isActive,
+  resolveAgentName,
+  onStatusChange,
+  onDelete,
+  className,
+}: TaskRowProps) {
+  const completedSubtasks = task.subtasks.filter((s) => s.completed).length;
+  const assigneeName = resolveAgentName?.(task.assigned_agent_id) ?? task.assigned_agent_id;
+  const hasActions = onStatusChange || onDelete;
+  const isRowInteractive = typeof onClick === "function";
+
+  const rowClassName = clsx(
+    "task-row group grid w-full items-center border-b border-outline-variant text-left",
+    "transition-colors duration-200 ease-standard",
+    isActive
+      ? "bg-secondary-container text-on-secondary-container"
+      : "bg-transparent text-on-surface hover:bg-on-surface/8",
+    isRowInteractive && !isActive && "active:bg-on-surface/10",
+    className,
+  );
+  const rowStyle: React.CSSProperties = {
+    gridTemplateColumns: TASK_ROW_GRID,
+    minHeight: TASK_ROW_HEIGHT,
+    paddingLeft: 16,
+    paddingRight: 8,
+    gap: 12,
+  };
+
+  const mainContent = (
+    <>
+      <TaskStatusIcon status={task.status} size={20} />
+      <TaskPriorityIcon priority={task.priority} size={18} />
+
+      <span
+        className={clsx(
+          "truncate font-code text-body-small",
+          isActive ? "text-on-secondary-container" : "text-on-surface-variant",
+        )}
+      >
+        SPC-{task.task_number}
+      </span>
+
+      <span className="min-w-0 truncate text-body-large">{task.title}</span>
+
+      <span
+        className={clsx(
+          "text-right text-body-small",
+          isActive ? "text-on-secondary-container" : "text-on-surface-variant",
+        )}
+      >
+        {task.subtasks.length > 0 ? `${completedSubtasks}/${task.subtasks.length}` : ""}
+      </span>
+
+      <span
+        className={clsx(
+          "truncate text-right text-body-small",
+          isActive ? "text-on-secondary-container" : "text-on-surface-variant",
+        )}
+      >
+        {assigneeName}
+      </span>
+    </>
+  );
+
+  const actions = (
+    <span className="flex items-center justify-center">
+      {hasActions ? (
+        <DropdownMenu.Root>
+            <DropdownMenu.Trigger asChild>
+              <button
+                type="button"
+                aria-label="Task Actions"
+                className={clsx(
+                  "flex size-8 items-center justify-center rounded-full text-on-surface-variant",
+                  "opacity-0 transition-[opacity,background-color] duration-200 ease-standard",
+                  "hover:bg-on-surface/8 active:bg-on-surface/10",
+                  "group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100 data-popup-open:opacity-100",
+                  focusRing,
+                )}
+              >
+                <Icon name="more_vert" size={20} />
+              </button>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content align="end" sideOffset={4}>
+              {onStatusChange &&
+                TASK_STATUS_ORDER.filter((s) => s !== task.status).map((s) => (
+                  <DropdownMenu.Item
+                    key={s}
+                    onClick={() => {
+                      onStatusChange(task, s);
+                    }}
+                  >
+                    <TaskStatusIcon status={s} size={20} label="" />
+                    <span>{TASK_STATUS_LABEL[s]}</span>
+                  </DropdownMenu.Item>
+                ))}
+              {onStatusChange && onDelete && <DropdownMenu.Separator />}
+              {onDelete && (
+                <DropdownMenu.Item
+                  onClick={() => {
+                    onDelete(task);
+                  }}
+                  className="text-error"
+                >
+                  <Icon name="delete" size={20} />
+                  <span>Delete</span>
+                </DropdownMenu.Item>
+              )}
+            </DropdownMenu.Content>
+        </DropdownMenu.Root>
+      ) : null}
+    </span>
+  );
+
+  if (!isRowInteractive) {
+    return (
+      <div aria-current={isActive ? "true" : undefined} className={rowClassName} style={rowStyle}>
+        {mainContent}
+        {actions}
+      </div>
+    );
+  }
+
+  return (
+    <div className={rowClassName} style={rowStyle}>
+      <button
+        type="button"
+        aria-current={isActive ? "true" : undefined}
+        onClick={() => onClick(task)}
+        className={clsx(
+          "col-span-6 grid grid-cols-subgrid items-center border-0 bg-transparent p-0 text-left font-inherit",
+          focusRing,
+          "focus-visible:outline-offset-[-3px]",
+        )}
+      >
+        {mainContent}
+      </button>
+      {actions}
+    </div>
+  );
+}

package/src/TaskStatusIcon.tsx

@@ -0,0 +1,39 @@
+// SPDX-License-Identifier: Apache-2.0 AND MIT
+// Derived from SpaceUI (packages/aphrody-spaceui/packages/ai/src/TaskStatusIcon.tsx), MIT, rebuilt on Material Design 3.
+
+import { Icon } from "@aphrody/m3-primitives";
+import { clsx } from "clsx";
+
+import type { TaskStatus } from "./types";
+import { TASK_STATUS_LABEL } from "./types";
+
+/** Material Symbols glyph and M3 color role per status. */
+const config: Record<TaskStatus, { icon: string; filled: boolean; color: string }> = {
+  done: { icon: "check_circle", filled: true, color: "text-success" },
+  in_progress: { icon: "clock_loader_40", filled: true, color: "text-primary" },
+  ready: { icon: "radio_button_checked", filled: false, color: "text-primary" },
+  pending_approval: { icon: "schedule", filled: false, color: "text-warning" },
+  backlog: { icon: "radio_button_unchecked", filled: false, color: "text-outline" },
+};
+
+export interface TaskStatusIconProps {
+  status: TaskStatus;
+  size?: number;
+  className?: string;
+  /** Accessible label; defaults to the status label. Pass `""` for a decorative icon. */
+  label?: string;
+}
+
+export function TaskStatusIcon({ status, size = 16, className, label }: TaskStatusIconProps) {
+  const { icon, filled, color } = config[status];
+  return (
+    <Icon
+      name={icon}
+      size={size}
+      filled={filled}
+      label={label ?? TASK_STATUS_LABEL[status]}
+      data-status={status}
+      className={clsx(color, className)}
+    />
+  );
+}