agentic-ds-kit 0.1.0 → 0.2.0

package/ui/patterns/ActivityPattern/ActivityPattern.tsx

@@ -1,120 +0,0 @@
-"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

@@ -1,86 +0,0 @@
-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.tsx

@@ -1,186 +0,0 @@
-"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

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

package/ui/patterns/AssistantWorkspacePattern/AssistantWorkspacePattern.tsx

@@ -1,159 +0,0 @@
-"use client";
-
-import { useEffect, useRef, useState } from "react";
-import { Button } from "../../Button";
-import { Chat } from "../../Chat";
-import type { ChatMessage } from "../../Chat";
-import { InsightCard } from "../../InsightCard";
-import type { InsightCardTone } from "../../InsightCard";
-import { PageHeader } from "../../PageHeader";
-import type { PageHeaderProps } from "../../PageHeader";
-import { Section } from "../../Section";
-import styles from "./AssistantWorkspacePattern.module.css";
-
-interface Insight {
-  id: string;
-  title: string;
-  description: string;
-  tone: InsightCardTone;
-  source: string;
-  prompt: string;
-  reply: string;
-}
-
-const INSIGHTS: Insight[] = [
-  {
-    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",
-    prompt: "Why is QA blocked?",
-    reply: "QA checklist has no owner. Assign someone before Thursday so the last two device passes can close.",
-  },
-  {
-    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",
-    prompt: "Who should own invites?",
-    reply: "Seats are provisioned. Maya can send the design and QA invites from Invite members so comments have owners.",
-  },
-  {
-    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",
-    prompt: "Draft a standup update",
-    reply: "Release notes are Ready. Confirm the known-issues list, then tag. QA is still blocked and needs an owner today.",
-  },
-];
-
-const STARTER: ChatMessage[] = [
-  {
-    role: "assistant",
-    content: "I can explain a blocked task, suggest an owner, or draft a standup update.",
-  },
-];
-
-const SUGGESTIONS = INSIGHTS.map((insight) => insight.prompt);
-
-function replyFor(message: string): string {
-  const hit = INSIGHTS.find(
-    (insight) => insight.prompt.toLowerCase() === message.trim().toLowerCase() || insight.id === message,
-  );
-  if (hit) return hit.reply;
-  return `Got it — “${message}”. I can go deeper on owners or next steps.`;
-}
-
-export interface AssistantWorkspacePatternProps {
-  breadcrumbs?: PageHeaderProps["breadcrumbs"];
-}
-
-export function AssistantWorkspacePattern({ breadcrumbs }: AssistantWorkspacePatternProps) {
-  const [railOpen, setRailOpen] = useState(true);
-  const [messages, setMessages] = useState<ChatMessage[]>(STARTER);
-  const [thinking, setThinking] = useState(false);
-  const timerRef = useRef<number | null>(null);
-
-  useEffect(() => {
-    return () => {
-      if (timerRef.current !== null) window.clearTimeout(timerRef.current);
-    };
-  }, []);
-
-  function ask(prompt: string) {
-    const next = prompt.trim();
-    if (!next || thinking) return;
-    setRailOpen(true);
-    setMessages((current) => [...current, { role: "user", content: next }]);
-    setThinking(true);
-    if (timerRef.current !== null) window.clearTimeout(timerRef.current);
-    timerRef.current = window.setTimeout(() => {
-      setMessages((current) => [...current, { role: "assistant", content: replyFor(next) }]);
-      setThinking(false);
-      timerRef.current = null;
-    }, 1200);
-  }
-
-  return (
-    <div
-      className={`${railOpen ? "layout-workspace" : "layout-workspace layout-workspace--flush"} ${styles.shell}`}
-    >
-      <div className="layout-canvas">
-        <div className="layout-header">
-          <PageHeader
-            title="Insights"
-            subtitle="Recommendations for Sprint 24, with an assistant on the side."
-            breadcrumbs={breadcrumbs}
-            actions={
-              railOpen ? undefined : (
-                <Button variant="primary" size="md" iconStart="Sparkles" onClick={() => setRailOpen(true)}>
-                  Ask assistant
-                </Button>
-              )
-            }
-          />
-        </div>
-        <div className="layout-content">
-          <Section title="Recommended" description="Ask the assistant about a card, or send a prompt in the rail.">
-            <div className={`layout-split ${styles.insights}`}>
-              {INSIGHTS.map((insight) => (
-                <InsightCard
-                  key={insight.id}
-                  title={insight.title}
-                  description={insight.description}
-                  tone={insight.tone}
-                  source={insight.source}
-                  secondaryAction={{
-                    label: "Ask",
-                    onClick: () => ask(insight.prompt),
-                  }}
-                />
-              ))}
-            </div>
-          </Section>
-        </div>
-      </div>
-      {railOpen ? (
-        <aside className={styles.rail}>
-          <Chat
-            title="Assistant"
-            status="Sprint 24"
-            messages={messages}
-            suggestions={SUGGESTIONS}
-            placeholder="Ask about this sprint"
-            emptyState="Ask about a blocked task, a draft, or who should own the next review."
-            isThinking={thinking}
-            disabled={thinking}
-            onSend={ask}
-            onClose={() => setRailOpen(false)}
-            radius="none"
-          />
-        </aside>
-      ) : null}
-    </div>
-  );
-}

package/ui/patterns/AssistantWorkspacePattern/index.ts

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

package/ui/patterns/DashboardPattern/DashboardPattern.tsx

@@ -1,102 +0,0 @@
-"use client";
-
-import { DataTable } from "../../DataTable";
-import type { DataTableColumn, DataTableRow } from "../../DataTable";
-import { LineChart } from "../../LineChart";
-import { PageHeader } from "../../PageHeader";
-import type { PageHeaderProps } from "../../PageHeader";
-import { Scoreboard } from "../../Scoreboard";
-import { Section } from "../../Section";
-import type { ChartDatum } from "../../shared/chartMath";
-
-const SPRINT_METRICS = [
-  { label: "Weekly users", value: "1.44k", delta: "+6.2%", trend: "up" as const, hint: "vs last week", size: "lg" as const, badge: "Live", badgeTone: "success" as const },
-  { label: "Open tasks", value: "4", delta: "+1", trend: "up" as const, hint: "this sprint", size: "lg" as const, badge: "Sprint", badgeTone: "info" as const },
-  { label: "Blocked", value: "1", delta: "0", trend: "flat" as const, hint: "need owner", size: "lg" as const, badge: "At risk", badgeTone: "danger" as const },
-  { label: "Ready", value: "1", delta: "+1", trend: "up" as const, hint: "to ship", size: "lg" as const, badge: "Ship", badgeTone: "brand" as const },
-];
-
-const WEEKLY_USERS: ChartDatum[] = [
-  { label: "Mon", value: 1280 },
-  { label: "Tue", value: 1410 },
-  { label: "Wed", value: 1320 },
-  { label: "Thu", value: 1480 },
-  { label: "Fri", value: 1360 },
-  { label: "Sat", value: 1440 },
-  { label: "Sun", value: 1390 },
-];
-
-const TASK_COLUMNS: DataTableColumn[] = [
-  { key: "task", header: "Task", sortable: true },
-  { key: "owner", header: "Owner", sortable: true },
-  { key: "status", header: "Status", sortable: true },
-];
-
-const TASK_ROWS: DataTableRow[] = [
-  {
-    id: "launch-brief",
-    task: { type: "file", label: "Launch brief" },
-    owner: { type: "avatar", label: "Maya Chen", name: "Maya Chen", src: "/faces/maya-chen.jpg" },
-    status: { type: "badge", label: "In review", tone: "warning" },
-  },
-  {
-    id: "qa-checklist",
-    task: { type: "file", label: "QA checklist" },
-    owner: { type: "avatar", label: "Unassigned", name: "Unassigned" },
-    status: { type: "badge", label: "Blocked", tone: "danger" },
-  },
-  {
-    id: "release-notes",
-    task: { type: "file", label: "Release notes" },
-    owner: { type: "avatar", label: "Jordan Lee", name: "Jordan Lee", src: "/faces/jordan-lee.jpg" },
-    status: { type: "badge", label: "Ready", tone: "success" },
-  },
-  {
-    id: "support-macros",
-    task: { type: "file", label: "Support macros" },
-    owner: { type: "avatar", label: "Alex Rivera", name: "Alex Rivera", src: "/faces/alex-rivera.jpg" },
-    status: { type: "badge", label: "In progress", tone: "info" },
-  },
-];
-
-export function DashboardPattern({ breadcrumbs }: { breadcrumbs?: PageHeaderProps["breadcrumbs"] }) {
-  return (
-    <div className="layout-canvas layout-canvas--sticky-header">
-      <div className="layout-header">
-        <PageHeader
-          title="Overview"
-          subtitle="Workspace overview for the current team."
-          breadcrumbs={breadcrumbs}
-        />
-      </div>
-      <div className="layout-content">
-        <Section title="Sprint metrics">
-          <Scoreboard
-            className="layout-metrics layout-metrics--fixed-4"
-            aria-label="Sprint metrics"
-            items={SPRINT_METRICS}
-          />
-        </Section>
-        <Section title="Weekly users">
-          <LineChart data={WEEKLY_USERS} variant="line" showTable={false} />
-        </Section>
-        <Section title="Open tasks" description="4 items need attention">
-          <DataTable
-            caption="Sprint backlog"
-            selectable
-            toolbar
-            cellSize="sm"
-            searchPlaceholder="Search tasks..."
-            filters={[
-              { key: "status", label: "Status" },
-              { key: "owner", label: "Owner" },
-            ]}
-            columnSettings
-            columns={TASK_COLUMNS}
-            rows={TASK_ROWS}
-          />
-        </Section>
-      </div>
-    </div>
-  );
-}

package/ui/patterns/DashboardPattern/index.ts

@@ -1 +0,0 @@
-export { DashboardPattern } from "./DashboardPattern";

package/ui/patterns/DashboardPattern/patterns.module.css

@@ -1,6 +0,0 @@
-.pattern {
-  display: grid;
-  gap: var(--space-8);
-  width: 100%;
-  min-width: 0;
-}