agentic-ds-kit 0.1.0

package/ui/patterns/AssistantWorkspacePattern/AssistantWorkspacePattern.tsx

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

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

package/ui/patterns/DashboardPattern/DashboardPattern.tsx

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

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

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

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

package/ui/patterns/EmptyFirstRunPattern/EmptyFirstRunPattern.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import { useId, useState, type FormEvent } from "react";
+import { Button } from "../../Button";
+import { ButtonGroup } from "../../ButtonGroup";
+import { Empty } from "../../Empty";
+import { Field } from "../../Field";
+import { Input } from "../../Input";
+import { Modal } from "../../Modal";
+import { PageHeader } from "../../PageHeader";
+import type { PageHeaderProps } from "../../PageHeader";
+import { Toast } from "../../Toast";
+
+export interface EmptyFirstRunPatternProps {
+  breadcrumbs?: PageHeaderProps["breadcrumbs"];
+  onCreate?: (payload: { title: string }) => void;
+}
+
+export function EmptyFirstRunPattern({ breadcrumbs, onCreate }: EmptyFirstRunPatternProps) {
+  const uid = useId();
+  const titleId = `${uid}-title`;
+  const [open, setOpen] = useState(false);
+  const [title, setTitle] = useState("");
+  const [titleError, setTitleError] = useState<string | undefined>();
+  const [toastOpen, setToastOpen] = useState(false);
+  const [createdTitle, setCreatedTitle] = useState("");
+
+  function close() {
+    setOpen(false);
+    setTitleError(undefined);
+  }
+
+  function create() {
+    const nextTitle = title.trim();
+    if (!nextTitle) {
+      setTitleError("Enter a study name.");
+      return;
+    }
+
+    onCreate?.({ title: nextTitle });
+    setCreatedTitle(nextTitle);
+    setTitle("");
+    setTitleError(undefined);
+    setOpen(false);
+    setToastOpen(true);
+  }
+
+  function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    create();
+  }
+
+  return (
+    <div className="layout-canvas layout-canvas--sticky-header">
+      <div className="layout-header">
+        <PageHeader
+          title="User research"
+          subtitle="Interview notes and findings for Sprint 24."
+          breadcrumbs={breadcrumbs}
+        />
+      </div>
+      <div className="layout-content">
+        <Empty
+          title="No studies yet"
+          description="Add the first study so launch comments have evidence."
+          icon="User"
+          outlined
+          actions={
+            <Button variant="primary" size="md" onClick={() => setOpen(true)}>
+              New study
+            </Button>
+          }
+        />
+      </div>
+      <Modal
+        open={open}
+        title="New study"
+        description="Name the study. Notes can come later."
+        size="md"
+        onClose={close}
+        footer={
+          <ButtonGroup ariaLabel="Study actions">
+            <Button variant="secondary" size="md" onClick={close}>
+              Cancel
+            </Button>
+            <Button variant="primary" size="md" onClick={create}>
+              Create study
+            </Button>
+          </ButtonGroup>
+        }
+      >
+        <form onSubmit={handleSubmit}>
+          <Field
+            label="Title"
+            htmlFor={titleId}
+            hint="Something the team will recognize"
+            error={titleError}
+          >
+            <Input
+              id={titleId}
+              iconStart="Search"
+              placeholder="Launch interview round"
+              value={title}
+              onChange={(value) => {
+                setTitle(value);
+                if (titleError) setTitleError(undefined);
+              }}
+            />
+          </Field>
+        </form>
+      </Modal>
+      <Toast
+        open={toastOpen}
+        title="Study added"
+        description={
+          createdTitle ? `We'll keep “${createdTitle}” in User research.` : undefined
+        }
+        status="success"
+        duration={3000}
+        onClose={() => setToastOpen(false)}
+        onOpenChange={setToastOpen}
+      />
+    </div>
+  );
+}

package/ui/patterns/EmptyFirstRunPattern/index.ts

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

package/ui/patterns/InboxPattern/InboxPattern.module.css

@@ -0,0 +1,40 @@
+.detail {
+  display: grid;
+  gap: var(--space-stack-lg);
+}
+
+.meta {
+  display: flex;
+  align-items: center;
+  gap: var(--space-inline-md);
+  min-width: 0;
+}
+
+.copy {
+  min-width: 0;
+  flex: 1;
+}
+
+.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);
+}
+
+.body {
+  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/InboxPattern/InboxPattern.tsx

@@ -0,0 +1,192 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Avatar } from "../../Avatar";
+import { Badge } from "../../Badge";
+import { Button } from "../../Button";
+import { Cell } from "../../Cell";
+import { Empty } from "../../Empty";
+import { PageHeader } from "../../PageHeader";
+import type { PageHeaderProps } from "../../PageHeader";
+import { Scoreboard } from "../../Scoreboard";
+import { Section } from "../../Section";
+import { Table } from "../../Table";
+import { Tabs } from "../../Tabs";
+import { Toast } from "../../Toast";
+import { filterMessages, INBOX, type InboxMessage } from "./inbox-data";
+import { InboxReplyDrawer } from "./InboxReplyDrawer";
+import styles from "./InboxPattern.module.css";
+
+const COLUMNS = [
+  { key: "from", header: "From", emphasis: true },
+  { key: "subject", header: "Subject" },
+  { key: "kind", header: "Type" },
+  { key: "when", header: "When" },
+  { key: "open", header: "" },
+];
+
+function InboxTable({
+  messages,
+  onOpen,
+}: {
+  messages: InboxMessage[];
+  onOpen: (id: string) => void;
+}) {
+  return (
+    <Table
+      caption="Inbox"
+      size="sm"
+      emptyLabel="No messages in this filter."
+      columns={COLUMNS}
+      rows={messages.map((item) => ({
+        from: <Cell type="avatar" size="sm" name={item.from} src={item.fromSrc} label={item.from} />,
+        subject: item.subject,
+        kind: <Badge tone={item.kindTone} size="sm">{item.kind}</Badge>,
+        when: item.when,
+        open: (
+          <Button variant="tertiary" size="sm" onClick={() => onOpen(item.id)}>
+            Open
+          </Button>
+        ),
+      }))}
+    />
+  );
+}
+
+export interface InboxPatternProps {
+  breadcrumbs?: PageHeaderProps["breadcrumbs"];
+}
+
+export function InboxPattern({ breadcrumbs }: InboxPatternProps) {
+  const [messages, setMessages] = useState(INBOX);
+  const [tab, setTab] = useState("all");
+  const [selectedId, setSelectedId] = useState<string | null>(INBOX[0]?.id ?? null);
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [toastOpen, setToastOpen] = useState(false);
+
+  const selected = messages.find((item) => item.id === selectedId) ?? null;
+  const unread = messages.filter((item) => item.unread).length;
+
+  useEffect(() => {
+    const next = filterMessages(messages, tab);
+    if (selectedId && next.some((item) => item.id === selectedId)) return;
+    setSelectedId(next[0]?.id ?? null);
+    setDrawerOpen(false);
+  }, [selectedId, tab, messages]);
+
+  function archive(id: string) {
+    setMessages((current) => current.filter((item) => item.id !== id));
+    setDrawerOpen(false);
+  }
+
+  function openMessage(id: string) {
+    setSelectedId(id);
+    setDrawerOpen(true);
+  }
+
+  function sendReply() {
+    if (!selected) return;
+    setMessages((current) =>
+      current.map((item) => (item.id === selected.id ? { ...item, unread: false } : item)),
+    );
+    setToastOpen(true);
+  }
+
+  return (
+    <div className="layout-canvas layout-canvas--sticky-header">
+      <div className="layout-header">
+        <PageHeader
+          title="Inbox"
+          subtitle="Replies, mentions, and requests waiting on you."
+          breadcrumbs={breadcrumbs}
+        />
+      </div>
+      <div className="layout-content">
+        <Section title="At a glance">
+          <Scoreboard
+            className="layout-metrics layout-metrics--fixed-4"
+            aria-label="Inbox this week"
+            items={[
+              { label: "Unread", value: String(unread), delta: `+${unread}`, trend: "up" as const, hint: "need a look", size: "lg" as const, badge: "Live", badgeTone: "danger" as const },
+              { label: "Mentions", value: String(messages.filter((item) => item.kind === "Mention").length), delta: "+1", trend: "up" as const, hint: "this sprint", size: "lg" as const, badge: "You", badgeTone: "brand" as const },
+              { label: "Requests", value: String(messages.filter((item) => item.kind === "Request").length), delta: "+2", trend: "up" as const, hint: "this sprint", size: "lg" as const, badge: "Review", badgeTone: "warning" as const },
+              { label: "Open", value: String(messages.length), delta: "0", trend: "flat" as const, hint: "in inbox", size: "lg" as const, badge: "Sprint", badgeTone: "info" as const },
+            ]}
+          />
+        </Section>
+        <Section title="Messages" description={`${unread} unread`}>
+          <Tabs
+            ariaLabel="Inbox type"
+            variant="line"
+            size="md"
+            value={tab}
+            onChange={setTab}
+            items={[
+              { id: "all", label: "All", content: <InboxTable messages={filterMessages(messages, "all")} onOpen={openMessage} /> },
+              { id: "unread", label: "Unread", content: <InboxTable messages={filterMessages(messages, "unread")} onOpen={openMessage} /> },
+              { id: "mentions", label: "Mentions", content: <InboxTable messages={filterMessages(messages, "mentions")} onOpen={openMessage} /> },
+              { id: "requests", label: "Requests", content: <InboxTable messages={filterMessages(messages, "requests")} onOpen={openMessage} /> },
+            ]}
+          />
+        </Section>
+        <Section
+          title={selected?.subject ?? "Message"}
+          description={selected ? `${selected.from} · ${selected.when}` : "Select a row"}
+          actions={
+            selected ? (
+              <>
+                <Button variant="secondary" size="sm" onClick={() => archive(selected.id)}>
+                  Archive
+                </Button>
+                <Button
+                  variant={drawerOpen ? "secondary" : "primary"}
+                  size="sm"
+                  onClick={() => openMessage(selected.id)}
+                >
+                  Reply
+                </Button>
+              </>
+            ) : undefined
+          }
+        >
+          {selected ? (
+            <div className={styles.detail}>
+              <div className={styles.meta}>
+                <Avatar name={selected.from} src={selected.fromSrc} size="md" />
+                <div className={styles.copy}>
+                  <p className={styles.label}>From</p>
+                  <p className={styles.value}>{selected.from}</p>
+                </div>
+                <Badge tone={selected.kindTone}>{selected.kind}</Badge>
+              </div>
+              <p className={styles.body}>{selected.body}</p>
+            </div>
+          ) : (
+            <Empty
+              title="No message selected"
+              description="Open a row to read it here."
+              icon="Mail"
+              outlined
+            />
+          )}
+        </Section>
+      </div>
+      <InboxReplyDrawer
+        key={selected?.id ?? "none"}
+        message={selected}
+        open={drawerOpen}
+        onClose={() => setDrawerOpen(false)}
+        onSend={sendReply}
+      />
+      <Toast
+        open={toastOpen}
+        title="Reply sent"
+        description="It will show up in the thread."
+        status="success"
+        duration={3000}
+        onClose={() => setToastOpen(false)}
+        onOpenChange={setToastOpen}
+      />
+    </div>
+  );
+}