agentic-ds-kit 0.1.0

package/ui/Tooltip/Tooltip.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import {
+  cloneElement,
+  isValidElement,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import styles from "./Tooltip.module.css";
+
+export type TooltipPlacement = "top" | "bottom" | "left" | "right";
+
+export interface TooltipProps {
+  content: string;
+  placement?: TooltipPlacement;
+  delay?: number;
+  open?: boolean;
+  disabled?: boolean;
+  children: ReactNode;
+  className?: string;
+}
+
+export function Tooltip({
+  content,
+  placement = "top",
+  delay = 150,
+  open: controlledOpen,
+  disabled = false,
+  children,
+  className = "",
+}: TooltipProps) {
+  const tooltipId = useId();
+  const timerRef = useRef<number | null>(null);
+  const isControlled = controlledOpen !== undefined;
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const open = !disabled && (isControlled ? controlledOpen : uncontrolledOpen);
+
+  function clearTimer() {
+    if (timerRef.current != null) {
+      window.clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }
+
+  function show(immediate = false) {
+    if (disabled || isControlled) return;
+    clearTimer();
+    if (immediate || delay <= 0) {
+      setUncontrolledOpen(true);
+      return;
+    }
+    timerRef.current = window.setTimeout(() => setUncontrolledOpen(true), delay);
+  }
+
+  function hide() {
+    if (isControlled) return;
+    clearTimer();
+    setUncontrolledOpen(false);
+  }
+
+  useEffect(() => () => clearTimer(), []);
+
+  useEffect(() => {
+    if (!open) return undefined;
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") hide();
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open]);
+
+  const trigger = isValidElement(children)
+    ? cloneElement(children as ReactElement<{ "aria-describedby"?: string }>, {
+        "aria-describedby": open ? tooltipId : undefined,
+      })
+    : children;
+
+  return (
+    <span
+      className={`${styles.wrapper} ${className}`.trim()}
+      onPointerEnter={() => show()}
+      onPointerLeave={hide}
+      onFocus={() => show(true)}
+      onBlur={hide}
+    >
+      {trigger}
+      <span
+        id={tooltipId}
+        role="tooltip"
+        className={`${styles.bubble} ${styles[placement]}${open ? ` ${styles.open}` : ""}`}
+      >
+        {content}
+        <span className={styles.arrow} aria-hidden="true" />
+      </span>
+    </span>
+  );
+}

package/ui/Tooltip/index.ts

@@ -0,0 +1,2 @@
+export type { TooltipProps, TooltipPlacement } from "./Tooltip";
+export { Tooltip } from "./Tooltip";

package/ui/patterns/ActivityPattern/ActivityFeed.tsx

@@ -0,0 +1,77 @@
+import { DataTable } from "../../DataTable";
+import type { DataTableColumn, DataTableRow } from "../../DataTable";
+
+const EVENT_COLUMNS: DataTableColumn[] = [
+  { key: "actor", header: "Person", sortable: true },
+  { key: "event", header: "Event", sortable: true },
+  { key: "type", header: "Type", sortable: true },
+  { key: "when", header: "When", sortable: true },
+];
+
+const EVENT_ROWS: DataTableRow[] = [
+  {
+    id: "comment-launch",
+    actor: { type: "avatar", label: "Maya Chen", name: "Maya Chen", src: "/faces/maya-chen.jpg" },
+    event: { type: "file", label: "Commented on Launch brief" },
+    type: { type: "badge", label: "Comment", tone: "info" },
+    when: "2h ago",
+  },
+  {
+    id: "blocked-qa",
+    actor: { type: "avatar", label: "Unassigned", name: "Unassigned" },
+    event: { type: "file", label: "QA checklist marked Blocked" },
+    type: { type: "badge", label: "Status", tone: "danger" },
+    when: "4h ago",
+  },
+  {
+    id: "macros-update",
+    actor: { type: "avatar", label: "Alex Rivera", name: "Alex Rivera", src: "/faces/alex-rivera.jpg" },
+    event: { type: "file", label: "Updated Support macros" },
+    type: { type: "badge", label: "Edit", tone: "neutral" },
+    when: "5h ago",
+  },
+  {
+    id: "ready-notes",
+    actor: { type: "avatar", label: "Jordan Lee", name: "Jordan Lee", src: "/faces/jordan-lee.jpg" },
+    event: { type: "file", label: "Moved Release notes to Ready" },
+    type: { type: "badge", label: "Status", tone: "success" },
+    when: "Yesterday",
+  },
+  {
+    id: "mention-launch",
+    actor: { type: "avatar", label: "Maya Chen", name: "Maya Chen", src: "/faces/maya-chen.jpg" },
+    event: { type: "file", label: "Mentioned you in Launch brief" },
+    type: { type: "badge", label: "Mention", tone: "brand" },
+    when: "Yesterday",
+  },
+  {
+    id: "macros-comment",
+    actor: { type: "avatar", label: "Alex Rivera", name: "Alex Rivera", src: "/faces/alex-rivera.jpg" },
+    event: { type: "file", label: "Replied on Support macros" },
+    type: { type: "badge", label: "Comment", tone: "info" },
+    when: "Mon",
+  },
+];
+
+function rowsFor(tab: string): DataTableRow[] {
+  if (tab === "all") return EVENT_ROWS;
+  const label = tab === "comments" ? "Comment" : tab === "status" ? "Status" : "Mention";
+  return EVENT_ROWS.filter((row) => {
+    const cell = row.type;
+    return typeof cell === "object" && cell !== null && "label" in cell && cell.label === label;
+  });
+}
+
+export function ActivityFeed({ tab, caption }: { tab: string; caption: string }) {
+  return (
+    <DataTable
+      caption={caption}
+      toolbar
+      cellSize="sm"
+      searchPlaceholder="Search activity..."
+      emptyMessage="No activity in this filter."
+      columns={EVENT_COLUMNS}
+      rows={rowsFor(tab)}
+    />
+  );
+}

package/ui/patterns/ActivityPattern/ActivityPattern.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "../../Button";
+import { ButtonGroup } from "../../ButtonGroup";
+import { Empty } from "../../Empty";
+import { PageHeader } from "../../PageHeader";
+import type { PageHeaderProps } from "../../PageHeader";
+import { Scoreboard } from "../../Scoreboard";
+import { Section } from "../../Section";
+import { Tabs } from "../../Tabs";
+import { ActivityFeed } from "./ActivityFeed";
+import { TaskCards, TaskList } from "./ActivityTasks";
+import { TASK_INSIGHTS, TaskDrawer } from "./TaskDrawer";
+
+type TaskView = "cards" | "list";
+
+const ACTIVITY_METRICS = [
+  { label: "Today", value: "6", delta: "+2", trend: "up" as const, hint: "vs yesterday", size: "lg" as const, badge: "Live", badgeTone: "success" as const },
+  { label: "Comments", value: "5", delta: "+1", trend: "up" as const, hint: "this sprint", size: "lg" as const, badge: "Sprint", badgeTone: "info" as const },
+  { label: "Status changes", value: "4", delta: "0", trend: "flat" as const, hint: "this sprint", size: "lg" as const, badge: "Ship", badgeTone: "brand" as const },
+  { label: "Mentions", value: "2", delta: "+2", trend: "up" as const, hint: "need reply", size: "lg" as const, badge: "At risk", badgeTone: "danger" as const },
+];
+
+export interface ActivityPatternProps {
+  breadcrumbs?: PageHeaderProps["breadcrumbs"];
+}
+
+export function ActivityPattern({ breadcrumbs }: ActivityPatternProps) {
+  const [dismissed, setDismissed] = useState<string[]>([]);
+  const [openTaskId, setOpenTaskId] = useState<string | null>(null);
+  const [taskView, setTaskView] = useState<TaskView>("cards");
+
+  const tasks = TASK_INSIGHTS.filter((task) => !dismissed.includes(task.id));
+  const openTask = TASK_INSIGHTS.find((task) => task.id === openTaskId) ?? null;
+  const taskCount =
+    tasks.length === 0
+      ? "All caught up"
+      : `${tasks.length} ${tasks.length === 1 ? "needs" : "need"} attention`;
+
+  function dismissTask(id: string) {
+    setDismissed((current) => [...current, id]);
+    setOpenTaskId((current) => (current === id ? null : current));
+  }
+
+  return (
+    <div className="layout-canvas layout-canvas--sticky-header">
+      <div className="layout-header">
+        <PageHeader
+          title="Activity"
+          subtitle="What the team shipped, blocked, and commented on."
+          breadcrumbs={breadcrumbs}
+        />
+      </div>
+      <div className="layout-content">
+        <Section title="This week">
+          <Scoreboard
+            className="layout-metrics layout-metrics--fixed-4"
+            aria-label="Activity this week"
+            items={ACTIVITY_METRICS}
+          />
+        </Section>
+        <Section
+          title="Tasks"
+          description={taskCount}
+          actions={
+            tasks.length > 0 ? (
+              <ButtonGroup ariaLabel="Task layout">
+                <Button
+                  variant={taskView === "cards" ? "secondary" : "tertiary"}
+                  size="sm"
+                  onClick={() => setTaskView("cards")}
+                >
+                  Cards
+                </Button>
+                <Button
+                  variant={taskView === "list" ? "secondary" : "tertiary"}
+                  size="sm"
+                  onClick={() => setTaskView("list")}
+                >
+                  List
+                </Button>
+              </ButtonGroup>
+            ) : undefined
+          }
+        >
+          {tasks.length > 0 ? (
+            taskView === "cards" ? (
+              <TaskCards tasks={tasks} onOpen={setOpenTaskId} onDismiss={dismissTask} />
+            ) : (
+              <TaskList tasks={tasks} onOpen={setOpenTaskId} onDismiss={dismissTask} />
+            )
+          ) : (
+            <Empty
+              title="No open tasks"
+              description="Nothing in this sprint needs a look right now."
+              icon="Check"
+              outlined
+            />
+          )}
+        </Section>
+        <Section title="Feed" description="Newest first">
+          <Tabs
+            ariaLabel="Activity type"
+            variant="line"
+            size="md"
+            defaultValue="all"
+            items={[
+              { id: "all", label: "All", content: <ActivityFeed tab="all" caption="All activity" /> },
+              { id: "comments", label: "Comments", content: <ActivityFeed tab="comments" caption="Comments" /> },
+              { id: "status", label: "Status", content: <ActivityFeed tab="status" caption="Status changes" /> },
+              { id: "mentions", label: "Mentions", content: <ActivityFeed tab="mentions" caption="Mentions" /> },
+            ]}
+          />
+        </Section>
+      </div>
+      <TaskDrawer task={openTask} onClose={() => setOpenTaskId(null)} />
+    </div>
+  );
+}

package/ui/patterns/ActivityPattern/ActivityTasks.tsx

@@ -0,0 +1,86 @@
+import { Badge } from "../../Badge";
+import { Button } from "../../Button";
+import { ButtonGroup } from "../../ButtonGroup";
+import { Carousel } from "../../Carousel";
+import type { CarouselSlidesPerView } from "../../Carousel";
+import { InsightCard } from "../../InsightCard";
+import { Table } from "../../Table";
+import type { TaskInsight } from "./TaskDrawer";
+
+export function TaskCards({
+  tasks,
+  onOpen,
+  onDismiss,
+}: {
+  tasks: TaskInsight[];
+  onOpen: (id: string) => void;
+  onDismiss: (id: string) => void;
+}) {
+  const slidesPerView = Math.min(3, Math.max(1, tasks.length)) as CarouselSlidesPerView;
+
+  return (
+    <div className="layout-carousel">
+      <Carousel
+        ariaLabel="Tasks that need attention"
+        slidesPerView={slidesPerView}
+        items={tasks.map((task) => (
+          <InsightCard
+            key={task.id}
+            eyebrow="Task"
+            title={task.title}
+            description={task.description}
+            tone={task.tone}
+            source={task.source}
+            secondaryAction={{ label: "View task", onClick: () => onOpen(task.id) }}
+            onDismiss={() => onDismiss(task.id)}
+          />
+        ))}
+      />
+    </div>
+  );
+}
+
+export function TaskList({
+  tasks,
+  onOpen,
+  onDismiss,
+}: {
+  tasks: TaskInsight[];
+  onOpen: (id: string) => void;
+  onDismiss: (id: string) => void;
+}) {
+  return (
+    <Table
+      caption="Open tasks"
+      size="sm"
+      emptyLabel="No open tasks."
+      columns={[
+        { key: "task", header: "Task", emphasis: true },
+        { key: "owner", header: "Owner" },
+        { key: "status", header: "Status" },
+        { key: "due", header: "Due" },
+        { key: "actions", header: "Actions", align: "end" },
+      ]}
+      rows={tasks.map((task) => ({
+        task: task.title,
+        owner: task.owner,
+        status: (
+          <Badge size="sm" tone={task.statusTone}>
+            {task.status}
+          </Badge>
+        ),
+        due: task.due,
+        actions: (
+          <ButtonGroup ariaLabel={`${task.title} actions`}>
+            <Button variant="secondary" size="sm" onClick={() => onOpen(task.id)}>
+              View task
+            </Button>
+            <Button variant="tertiary" size="sm" onClick={() => onDismiss(task.id)}>
+              Dismiss
+            </Button>
+          </ButtonGroup>
+        ),
+      }))}
+    />
+  );
+}

package/ui/patterns/ActivityPattern/TaskDrawer.module.css

@@ -0,0 +1,39 @@
+.stack {
+  display: grid;
+  gap: var(--space-stack-lg);
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-inline-md);
+}
+
+.meta {
+  flex: 1;
+  min-width: 0;
+}
+
+.label {
+  margin: 0;
+  font-family: var(--font-sans);
+  font-size: var(--type-size-caption);
+  font-weight: var(--type-weight-caption);
+  color: var(--text-secondary);
+}
+
+.value {
+  margin: 0;
+  font-family: var(--font-sans);
+  font-size: var(--type-size-body-sm);
+  font-weight: var(--type-weight-label);
+  color: var(--text-primary);
+}
+
+.summary {
+  margin: 0;
+  font-family: var(--font-sans);
+  font-size: var(--type-size-body);
+  line-height: var(--type-line-body);
+  color: var(--text-secondary);
+}

package/ui/patterns/ActivityPattern/TaskDrawer.tsx

@@ -0,0 +1,186 @@
+"use client";
+
+import { Avatar } from "../../Avatar";
+import { Badge } from "../../Badge";
+import type { BadgeTone } from "../../Badge";
+import { Button } from "../../Button";
+import { Drawer } from "../../Drawer";
+import type { InsightCardTone } from "../../InsightCard";
+import { Progress } from "../../Progress";
+import styles from "./TaskDrawer.module.css";
+
+export interface TaskInsight {
+  id: string;
+  title: string;
+  description: string;
+  tone: InsightCardTone;
+  source: string;
+  owner: string;
+  ownerSrc?: string;
+  status: string;
+  statusTone: BadgeTone;
+  due: string;
+  summary: string;
+  progress: number;
+}
+
+export const TASK_INSIGHTS: TaskInsight[] = [
+  {
+    id: "qa-checklist",
+    title: "QA checklist is still blocked",
+    description: "Unassigned for 2 days. Assign an owner before Thursday's review.",
+    tone: "warning",
+    source: "From Open tasks",
+    owner: "Unassigned",
+    status: "Blocked",
+    statusTone: "danger",
+    due: "Thursday",
+    summary: "No owner. Legal sign-off and the last two device passes are still open.",
+    progress: 35,
+  },
+  {
+    id: "launch-brief",
+    title: "Launch brief is waiting on review",
+    description: "Maya left comments 2 hours ago. Close them before the freeze.",
+    tone: "info",
+    source: "From Open tasks",
+    owner: "Maya Chen",
+    ownerSrc: "/faces/maya-chen.jpg",
+    status: "In review",
+    statusTone: "warning",
+    due: "Tomorrow",
+    summary: "Copy is in review. Two comments on positioning still need a reply.",
+    progress: 72,
+  },
+  {
+    id: "release-notes",
+    title: "Release notes are ready to ship",
+    description: "Jordan marked this Ready. Confirm the changelog before tag.",
+    tone: "opportunity",
+    source: "From Open tasks",
+    owner: "Jordan Lee",
+    ownerSrc: "/faces/jordan-lee.jpg",
+    status: "Ready",
+    statusTone: "success",
+    due: "Today",
+    summary: "Draft is complete. Needs a final pass on the known-issues list.",
+    progress: 90,
+  },
+  {
+    id: "support-macros",
+    title: "Support macros need a pass",
+    description: "Alex updated the file 5 hours ago. Three replies are still in progress.",
+    tone: "neutral",
+    source: "From Open tasks",
+    owner: "Alex Rivera",
+    ownerSrc: "/faces/alex-rivera.jpg",
+    status: "In progress",
+    statusTone: "info",
+    due: "Friday",
+    summary: "Refund and delay macros are drafted. Escalation paths are not.",
+    progress: 55,
+  },
+  {
+    id: "user-research",
+    title: "User research needs synthesis",
+    description: "Eight interviews landed this week. Tag themes before Friday's readout.",
+    tone: "info",
+    source: "From Resources",
+    owner: "Iris Okafor",
+    ownerSrc: "/faces/iris-okafor.jpg",
+    status: "In progress",
+    statusTone: "info",
+    due: "Friday",
+    summary: "Notes are in. Themes and clips still need to land in the shared doc.",
+    progress: 48,
+  },
+  {
+    id: "at-risk-triage",
+    title: "At-risk items need triage",
+    description: "Five tagged At risk. Rank them before the freeze so owners can move.",
+    tone: "danger",
+    source: "From Tags",
+    owner: "Noah Williams",
+    ownerSrc: "/faces/noah-williams.jpg",
+    status: "Blocked",
+    statusTone: "danger",
+    due: "Tomorrow",
+    summary: "The list is stale. Two items already shipped and still carry the tag.",
+    progress: 20,
+  },
+  {
+    id: "invite-members",
+    title: "Invite members is still open",
+    description: "Three seats unused. Send invites so review comments have owners.",
+    tone: "warning",
+    source: "From Workspace",
+    owner: "Unassigned",
+    status: "Open",
+    statusTone: "warning",
+    due: "Friday",
+    summary: "Seats are provisioned. Nobody has sent the invites for design and QA.",
+    progress: 10,
+  },
+  {
+    id: "insights-share",
+    title: "Insights report is ready to share",
+    description: "Weekly digest is compiled. Send it before standup so the team can act.",
+    tone: "opportunity",
+    source: "From Insights",
+    owner: "Iris Okafor",
+    ownerSrc: "/faces/iris-okafor.jpg",
+    status: "Ready",
+    statusTone: "success",
+    due: "Today",
+    summary: "Charts are current. Needs a one-line takeaway on the at-risk tag.",
+    progress: 88,
+  },
+];
+
+export function TaskDrawer({
+  task,
+  onClose,
+}: {
+  task: TaskInsight | null;
+  onClose: () => void;
+}) {
+  const unassigned = task?.owner === "Unassigned";
+
+  return (
+    <Drawer
+      open={Boolean(task)}
+      title={task?.title ?? "Task"}
+      description={task ? `${task.status} · Due ${task.due}` : undefined}
+      onClose={onClose}
+      footer={
+        task ? (
+          <>
+            {unassigned ? (
+              <Button variant="primary" block onClick={onClose}>
+                Assign owner
+              </Button>
+            ) : null}
+            <Button variant="secondary" block onClick={onClose}>
+              Close
+            </Button>
+          </>
+        ) : null
+      }
+    >
+      {task ? (
+        <div className={styles.stack}>
+          <div className={styles.row}>
+            <Avatar name={task.owner} src={task.ownerSrc} size="md" />
+            <div className={styles.meta}>
+              <p className={styles.label}>Owner</p>
+              <p className={styles.value}>{task.owner}</p>
+            </div>
+            <Badge tone={task.statusTone}>{task.status}</Badge>
+          </div>
+          <p className={styles.summary}>{task.summary}</p>
+          <Progress value={task.progress} size="sm" label="Progress" showValue />
+        </div>
+      ) : null}
+    </Drawer>
+  );
+}

package/ui/patterns/ActivityPattern/index.ts

@@ -0,0 +1,2 @@
+export { ActivityPattern } from "./ActivityPattern";
+export type { ActivityPatternProps } from "./ActivityPattern";

package/ui/patterns/AssistantWorkspacePattern/AssistantWorkspacePattern.module.css

@@ -0,0 +1,16 @@
+.shell {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+.insights {
+  min-width: 0;
+  min-height: 0;
+}
+
+.rail {
+  min-width: 0;
+  min-height: 0;
+  display: grid;
+}