@gntik-ai/templates 0.0.0-stage → 0.5.0

package/src/assistant-chat/data.ts

@@ -0,0 +1,71 @@
+import type { CitationSource, Suggestion } from '@gntik-ai/chat';
+import type { BreadcrumbItem } from '@gntik-ai/ui';
+
+/** Mock tool call the assistant runs before answering. */
+export interface AssistantTool {
+  name: string;
+  args: unknown;
+  result: unknown;
+  durationMs: number;
+}
+
+export const assistantSuggestions: Suggestion[] = [
+  { label: 'Summarise this week’s deployments', description: 'What shipped across projects and what rolled back' },
+  { label: 'Which invoices are still open?', description: 'Unpaid invoices from last month' },
+  { label: 'Who has admin access?', description: 'Members with an admin role' },
+  { label: 'Why did the last build fail?', description: 'Likely cause and a fix' },
+];
+
+export const assistantSources: CitationSource[] = [
+  {
+    title: 'Deployment history · web-app',
+    url: 'https://app.example.com/projects/web-app/deployments',
+    snippet: '14 deployments in the last 7 days, 1 rolled back.',
+  },
+  {
+    title: 'Rollback guide',
+    url: 'https://docs.example.com/deployments/rollback',
+    snippet: 'Roll back from the Deployments page or with the CLI.',
+  },
+  {
+    title: 'Health checks',
+    url: 'https://docs.example.com/deployments/health-checks',
+    snippet: 'A deployment is promoted only after every region reports healthy.',
+  },
+];
+
+export const assistantTool: AssistantTool = {
+  name: 'list_deployments',
+  args: { project: 'web-app', since: '7d' },
+  result: { count: 14, succeeded: 13, rolledBack: 1, latest: 'v3.2.0' },
+  durationMs: 600,
+};
+
+export const assistantReply = `This week **web-app** shipped 14 deployments:
+
+| Status | Count |
+| --- | --- |
+| Succeeded | 13 |
+| Rolled back | 1 |
+
+The rollback was \`v3.1.4\`: its health check failed in one region, so traffic stayed on the previous build.
+
+To pin the current release from the CLI:
+
+\`\`\`bash
+deploy pin --project web-app --version v3.2.0
+\`\`\`
+
+The [rollback guide](https://docs.example.com/deployments/rollback) has the full steps.`;
+
+export const assistantBreadcrumbs: BreadcrumbItem[] = [
+  { label: 'Acme Industries', href: '/overview' },
+  { label: 'Assistant' },
+];
+
+/** Splits text into small chunks to imitate token streaming. */
+export function chunkReply(text: string, size = 6): string[] {
+  const out: string[] = [];
+  for (let i = 0; i < text.length; i += size) out.push(text.slice(i, i + size));
+  return out;
+}

package/src/assistant-chat/template.meta.ts

@@ -0,0 +1,12 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'Assistant chat',
+  family: 'AI',
+  priority: 'P3',
+  status: 'experimental',
+  description:
+    'Workspace assistant in the console: @gntik-ai/chat ChatLayout with suggestions, ChatMessage turns, a ToolCallCard, a mock-streamed markdown reply with Citations, Stop / Retry / feedback and a ChatComposer; a details panel lists the context sources. Streaming timers are cleared on Stop and unmount.',
+  layout: 'SidebarLayout · Page · ChatLayout',
+  blocks: ['app-sidebar', 'app-topbar', 'page-header'],
+};

package/src/audit-log/Page.test.tsx

@@ -0,0 +1,58 @@
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../test/a11y';
+import AuditLogPage, { auditEventsToCsv, filterAuditEvents } from './Page';
+import { auditEvents } from './data';
+
+const ALL = { start: null, end: null };
+
+describe('AuditLogPage', () => {
+  it('renders filters, date range and the events table', { timeout: 15000 }, async () => {
+    render(<AuditLogPage />);
+    expect(screen.getByRole('main')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 1, name: 'Audit log' })).toBeInTheDocument();
+    expect(screen.getByRole('search', { name: 'Filters' })).toBeInTheDocument();
+    const table = screen.getByRole('table');
+    expect(within(table).getAllByRole('row')).toHaveLength(auditEvents.length + 1);
+    await expectNoAxeViolations();
+  });
+
+  it('searches, opens a diff and exports the filtered events', { timeout: 15000 }, async () => {
+    const onExport = vi.fn();
+    render(<AuditLogPage onExport={onExport} />);
+    await userEvent.type(screen.getByRole('searchbox', { name: 'Search' }), 'project.');
+    const table = screen.getByRole('table');
+    expect(within(table).getAllByRole('row')).toHaveLength(3);
+
+    await userEvent.click(screen.getByRole('button', { name: 'View changes for project.update on web-app' }));
+    const dialog = await screen.findByRole('dialog');
+    expect(within(dialog).getByText(/"region": "eu-central-1"/)).toBeInTheDocument();
+    await userEvent.keyboard('{Escape}');
+
+    await userEvent.click(screen.getAllByRole('button', { name: 'Export CSV' })[0]!);
+    expect(onExport).toHaveBeenCalledWith([
+      expect.objectContaining({ id: 'evt_9f21' }),
+      expect.objectContaining({ id: 'evt_9ec0' }),
+    ]);
+  });
+
+  it('filters by field (OR within, AND across) and writes CSV', () => {
+    const rows = filterAuditEvents(
+      auditEvents,
+      '',
+      [
+        { field: 'result', value: 'failed' },
+        { field: 'result', value: 'denied' },
+      ],
+      ALL,
+    );
+    expect(rows.map((e) => e.id)).toEqual(['evt_9f0a', 'evt_9ef3']);
+    expect(auditEventsToCsv(rows).split('\n')[0]).toBe('time,actor,email,action,resource,target,ip,result');
+  });
+
+  it('takes the heading copy from props', { timeout: 15000 }, () => {
+    render(<AuditLogPage title="Tenant activity" description="Changes across this tenant." />);
+    expect(screen.getByRole('heading', { level: 1, name: 'Tenant activity' })).toBeInTheDocument();
+    expect(screen.getByText('Changes across this tenant.')).toBeInTheDocument();
+  });
+});

package/src/audit-log/Page.tsx

@@ -0,0 +1,284 @@
+import {
+  DataTable,
+  DateRangeFilter,
+  FilterBar,
+  NoResultsEmpty,
+  PageHeader,
+  type ActiveFilter,
+  type DataTableColumn,
+  type FilterField,
+} from '@gntik-ai/blocks';
+import { Download, FileDiff } from '@gntik-ai/icons';
+import {
+  Avatar,
+  Button,
+  CodeBlock,
+  Drawer,
+  DrawerBody,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+  Page,
+  StatusTag,
+  Timestamp,
+  type BreadcrumbItem,
+  type DateRange,
+} from '@gntik-ai/ui';
+import { useState } from 'react';
+import { ConsoleShell, type ConsoleShellProps } from '../shared/ConsoleShell';
+import { auditBreadcrumbs, auditEvents, auditFilterFields, auditResultStatuses, type AuditEvent } from './data';
+
+export interface AuditLogProps {
+  /** Page heading (default "Audit log"). */
+  title: string;
+  /** Line under the heading. */
+  description: string;
+  events: AuditEvent[];
+  filterFields: FilterField[];
+  /** Initial date range; defaults to the last 7 days. */
+  defaultRange: DateRange;
+  /** Reference "today" for the date presets. */
+  today: Date;
+  /** Called with the filtered events; defaults to downloading them as CSV. */
+  onExport: (events: AuditEvent[]) => void;
+  breadcrumbs: BreadcrumbItem[];
+  currentHref: string;
+  /** ConsoleShell props (app nav, user, workspaces, sidebar footer, topbar…). */
+  shell: Omit<ConsoleShellProps, 'children'>;
+}
+
+const DAY = 86_400_000;
+const startOfDay = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+
+const fieldValue = (e: AuditEvent, field: string) =>
+  field === 'actor' ? e.actor.name : field === 'resource' ? e.resource : field === 'result' ? e.result : '';
+
+/** Applies the search text, the filter chips (OR within a field, AND across fields) and the date range. */
+export function filterAuditEvents(
+  events: readonly AuditEvent[],
+  query: string,
+  filters: readonly ActiveFilter[],
+  range: DateRange,
+) {
+  const q = query.trim().toLowerCase();
+  const fields = [...new Set(filters.map((f) => f.field))];
+  const from = range.start ? startOfDay(range.start).getTime() : -Infinity;
+  const to = range.end ? startOfDay(range.end).getTime() + DAY : Infinity;
+  return events.filter((e) => {
+    if (q && ![e.actor.name, e.actor.email, e.action, e.target].some((v) => v.toLowerCase().includes(q))) return false;
+    if (!fields.every((field) => filters.some((f) => f.field === field && f.value === fieldValue(e, field))))
+      return false;
+    const t = e.at.getTime();
+    return t >= from && t < to;
+  });
+}
+
+const csvCell = (v: string) => (/[",\n]/.test(v) ? `"${v.replace(/"/g, '""')}"` : v);
+
+/** CSV of the events (time, actor, action, resource, target, ip, result). */
+export function auditEventsToCsv(events: readonly AuditEvent[]) {
+  const head = ['time', 'actor', 'email', 'action', 'resource', 'target', 'ip', 'result'];
+  const rows = events.map((e) => [
+    e.at.toISOString(),
+    e.actor.name,
+    e.actor.email,
+    e.action,
+    e.resource,
+    e.target,
+    e.ip,
+    e.result,
+  ]);
+  return [head, ...rows].map((r) => r.map(csvCell).join(',')).join('\n');
+}
+
+function downloadCsv(events: AuditEvent[]) {
+  if (typeof URL.createObjectURL !== 'function') return;
+  const url = URL.createObjectURL(new Blob([auditEventsToCsv(events)], { type: 'text/csv' }));
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = 'audit-log.csv';
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+/** Audit log: ConsoleShell + Page with FilterBar + DateRangeFilter, an events DataTable and a diff drawer. */
+export default function AuditLogPage(props: Partial<AuditLogProps>) {
+  const {
+    events = auditEvents,
+    filterFields = auditFilterFields,
+    defaultRange,
+    today,
+    onExport = downloadCsv,
+    breadcrumbs = auditBreadcrumbs,
+    currentHref = '/activity',
+    title = 'Audit log',
+    description = 'Every change made in this workspace: who did it, when, from where and what changed.',
+    shell,
+  } = props;
+  const [query, setQuery] = useState('');
+  const [filters, setFilters] = useState<ActiveFilter[]>([]);
+  const [range, setRange] = useState<DateRange>(() => {
+    if (defaultRange) return defaultRange;
+    const t = today ?? new Date();
+    return { start: new Date(t.getTime() - 6 * DAY), end: t };
+  });
+  const [diffEvent, setDiffEvent] = useState<AuditEvent | null>(null);
+
+  const rows = filterAuditEvents(events, query, filters, range);
+
+  const columns: DataTableColumn<AuditEvent>[] = [
+    {
+      id: 'at',
+      header: 'Time',
+      accessor: (e) => e.at,
+      cell: (e) => <Timestamp value={e.at} format="absolute" className="font-mono text-[12px]" />,
+      sortable: true,
+      hideable: false,
+      headClassName: 'w-44',
+    },
+    {
+      id: 'actor',
+      header: 'Actor',
+      accessor: (e) => e.actor.name,
+      cell: (e) => (
+        <span className="flex items-center gap-2">
+          <Avatar name={e.actor.name} size="xs" />
+          <span className="min-w-0">
+            <span className="block truncate font-medium">{e.actor.name}</span>
+            <span className="block truncate text-[11.5px] text-muted-foreground">{e.actor.email}</span>
+          </span>
+        </span>
+      ),
+      sortable: true,
+    },
+    { id: 'action', header: 'Action', accessor: (e) => e.action, sortable: true, className: 'font-mono text-[12px]' },
+    {
+      id: 'target',
+      header: 'Target',
+      accessor: (e) => e.target,
+      cell: (e) => <span className="font-medium">{e.target}</span>,
+    },
+    {
+      id: 'ip',
+      header: 'IP address',
+      accessor: (e) => e.ip,
+      defaultHidden: true,
+      className: 'font-mono text-[12px] text-muted-foreground',
+    },
+    {
+      id: 'result',
+      header: 'Result',
+      accessor: (e) => e.result,
+      cell: (e) => <StatusTag status={e.result} statuses={auditResultStatuses} />,
+      sortable: true,
+    },
+    {
+      id: 'changes',
+      header: 'Changes',
+      align: 'right',
+      cell: (e) =>
+        e.diff ? (
+          <Button
+            size="sm"
+            variant="ghost"
+            icon={FileDiff}
+            aria-label={`View changes for ${e.action} on ${e.target}`}
+            onClick={() => setDiffEvent(e)}
+          >
+            Diff
+          </Button>
+        ) : (
+          <span className="text-[12px] text-muted-foreground">—</span>
+        ),
+    },
+  ];
+
+  return (
+    <ConsoleShell breadcrumbs={breadcrumbs} currentHref={currentHref} {...shell}>
+      <Page
+        width="wide"
+        header={
+          <PageHeader
+            breadcrumbs={null}
+            title={title}
+            description={description}
+            status=""
+            meta={[]}
+            tabs={null}
+            actions={[
+              {
+                label: 'Export CSV',
+                icon: Download,
+                variant: 'secondary',
+                disabled: rows.length === 0,
+                onClick: () => onExport(rows),
+              },
+            ]}
+          />
+        }
+      >
+        <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
+          <FilterBar
+            className="min-w-0 flex-1"
+            fields={filterFields}
+            views={[]}
+            query={query}
+            onQueryChange={setQuery}
+            filters={filters}
+            onFiltersChange={setFilters}
+            placeholder="Search actor, action or target…"
+            resultCount={rows.length}
+          />
+          <DateRangeFilter value={range} onValueChange={setRange} today={today} label="Event date" />
+        </div>
+        <DataTable<AuditEvent>
+          caption="Audit events"
+          rows={rows}
+          columns={columns}
+          getRowLabel={(e) => `${e.action} on ${e.target}`}
+          selectable={false}
+          defaultSort={{ columnId: 'at', direction: 'descending' }}
+          defaultDensity="compact"
+          emptyState={
+            <NoResultsEmpty
+              entity="events"
+              query={query}
+              filterCount={filters.length}
+              onClearFilters={() => setFilters([])}
+              onClearSearch={() => setQuery('')}
+            />
+          }
+        />
+      </Page>
+      <Drawer open={diffEvent !== null} onOpenChange={(open) => !open && setDiffEvent(null)}>
+        <DrawerContent size="lg">
+          {diffEvent && (
+            <>
+              <DrawerHeader>
+                <DrawerTitle>
+                  <span className="font-mono">{diffEvent.action}</span> · {diffEvent.target}
+                </DrawerTitle>
+                <DrawerDescription>
+                  By {diffEvent.actor.name} from <span className="font-mono">{diffEvent.ip}</span> ·{' '}
+                  <Timestamp value={diffEvent.at} format="absolute" />
+                </DrawerDescription>
+              </DrawerHeader>
+              <DrawerBody>
+                <CodeBlock
+                  code={diffEvent.diff ?? ''}
+                  language="diff"
+                  filename={`${diffEvent.id}.diff`}
+                  label={`Changes for ${diffEvent.action}`}
+                  highlightLines={(diffEvent.diff ?? '')
+                    .split('\n')
+                    .flatMap((l, i) => (l.startsWith('+') ? [i + 1] : []))}
+                />
+              </DrawerBody>
+            </>
+          )}
+        </DrawerContent>
+      </Drawer>
+    </ConsoleShell>
+  );
+}

package/src/audit-log/data.ts

@@ -0,0 +1,133 @@
+import type { FilterField } from '@gntik-ai/blocks';
+import type { BreadcrumbItem, StatusDefinition } from '@gntik-ai/ui';
+
+export type AuditResult = 'succeeded' | 'failed' | 'denied';
+
+export interface AuditEvent {
+  id: string;
+  at: Date;
+  actor: { name: string; email: string };
+  /** Dotted action key, e.g. "project.update". */
+  action: string;
+  /** Kind of resource touched (filter field). */
+  resource: string;
+  /** The resource instance, e.g. "web-app". */
+  target: string;
+  ip: string;
+  result: AuditResult;
+  /** Unified diff of the change; absent for events without a payload change. */
+  diff?: string;
+}
+
+export const auditResultStatuses: Record<string, StatusDefinition> = {
+  denied: { label: 'Denied', tone: 'warning' },
+};
+
+const MIN = 60_000;
+const HOUR = 60 * MIN;
+const NOW = Date.now();
+
+const dana = { name: 'Dana Whitfield', email: 'dana@example.com' };
+const sam = { name: 'Sam Patel', email: 'sam@example.com' };
+const lee = { name: 'Lee Chen', email: 'lee@example.com' };
+const bot = { name: 'Deploy bot', email: 'bot@example.com' };
+
+/** Neutral audit trail, newest first, all within the last 6 days. */
+export const auditEvents: AuditEvent[] = [
+  {
+    id: 'evt_9f21',
+    at: new Date(NOW - 6 * MIN),
+    actor: dana,
+    action: 'project.update',
+    resource: 'Project',
+    target: 'web-app',
+    ip: '203.0.113.24',
+    result: 'succeeded',
+    diff: ' {\n   "name": "web-app",\n-  "region": "eu-west-1",\n+  "region": "eu-central-1",\n-  "autoscale": false\n+  "autoscale": true\n }',
+  },
+  {
+    id: 'evt_9f1c',
+    at: new Date(NOW - 48 * MIN),
+    actor: sam,
+    action: 'member.role.update',
+    resource: 'Member',
+    target: 'lee@example.com',
+    ip: '198.51.100.7',
+    result: 'succeeded',
+    diff: ' {\n   "member": "lee@example.com",\n-  "role": "viewer"\n+  "role": "developer"\n }',
+  },
+  {
+    id: 'evt_9f0a',
+    at: new Date(NOW - 3 * HOUR),
+    actor: lee,
+    action: 'billing.plan.update',
+    resource: 'Billing',
+    target: 'Acme Industries',
+    ip: '192.0.2.81',
+    result: 'denied',
+  },
+  {
+    id: 'evt_9ef3',
+    at: new Date(NOW - 7 * HOUR),
+    actor: bot,
+    action: 'deployment.create',
+    resource: 'Deployment',
+    target: 'orders-api build 212',
+    ip: '10.0.4.12',
+    result: 'failed',
+  },
+  {
+    id: 'evt_9ee8',
+    at: new Date(NOW - 26 * HOUR),
+    actor: dana,
+    action: 'api_key.create',
+    resource: 'API key',
+    target: 'ci-pipeline',
+    ip: '203.0.113.24',
+    result: 'succeeded',
+    diff: '+{\n+  "name": "ci-pipeline",\n+  "scopes": ["deployments:write"],\n+  "expiresIn": "90d"\n+}',
+  },
+  {
+    id: 'evt_9ed1',
+    at: new Date(NOW - 2 * 24 * HOUR),
+    actor: sam,
+    action: 'member.invite',
+    resource: 'Member',
+    target: 'riley@example.com',
+    ip: '198.51.100.7',
+    result: 'succeeded',
+  },
+  {
+    id: 'evt_9ec0',
+    at: new Date(NOW - 3 * 24 * HOUR),
+    actor: dana,
+    action: 'project.delete',
+    resource: 'Project',
+    target: 'legacy-site',
+    ip: '203.0.113.24',
+    result: 'succeeded',
+    diff: '-{\n-  "name": "legacy-site",\n-  "region": "us-east-1"\n-}',
+  },
+  {
+    id: 'evt_9eb4',
+    at: new Date(NOW - 5 * 24 * HOUR),
+    actor: lee,
+    action: 'api_key.revoke',
+    resource: 'API key',
+    target: 'old-ci',
+    ip: '192.0.2.81',
+    result: 'succeeded',
+  },
+];
+
+export const auditFilterFields: FilterField[] = [
+  { id: 'actor', label: 'Actor', options: [dana.name, sam.name, lee.name, bot.name] },
+  { id: 'resource', label: 'Resource', options: ['Project', 'Member', 'Deployment', 'API key', 'Billing'] },
+  { id: 'result', label: 'Result', options: ['succeeded', 'failed', 'denied'] },
+];
+
+export const auditBreadcrumbs: BreadcrumbItem[] = [
+  { label: 'Acme Industries', href: '/overview' },
+  { label: 'Settings', href: '/settings' },
+  { label: 'Audit log' },
+];

package/src/audit-log/template.meta.ts

@@ -0,0 +1,12 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'Audit log',
+  family: 'Work',
+  priority: 'P2',
+  status: 'beta',
+  description:
+    'Workspace audit trail: FilterBar (search, actor / resource / result filters) and DateRangeFilter over a DataTable of events with actor, action, target and result; a drawer shows the change diff (CodeBlock); export to CSV.',
+  layout: 'SidebarLayout · Page',
+  blocks: ['app-sidebar', 'app-topbar', 'page-header', 'filter-bar', 'date-range-filter', 'data-table', 'empty-states'],
+};

package/src/board/Lane.tsx

@@ -0,0 +1,117 @@
+import { CalendarClock, GripVertical } from '@gntik-ai/icons';
+import { Avatar, Badge, cn, Timestamp } from '@gntik-ai/ui';
+import type { DragEvent, KeyboardEvent } from 'react';
+import { priorityLabels, priorityTones, type BoardCard, type BoardColumn } from './data';
+
+export interface LaneProps {
+  column: BoardColumn;
+  cards: BoardCard[];
+  headingId: string;
+  instructionsId: string;
+  grabbedId: string | null;
+  draggingId: string | null;
+  isDropTarget: boolean;
+  register: (id: string) => (el: HTMLButtonElement | null) => void;
+  onOpen: (id: string) => void;
+  onCardKeyDown: (id: string) => (e: KeyboardEvent<HTMLButtonElement>) => void;
+  onCardKeyUp: (e: KeyboardEvent<HTMLButtonElement>) => void;
+  onDragStart: (id: string) => (e: DragEvent<HTMLElement>) => void;
+  onDragEnd: () => void;
+  onDragOver: (e: DragEvent<HTMLElement>) => void;
+  onDrop: (e: DragEvent<HTMLElement>) => void;
+}
+
+/** One board column: heading with count and a list of draggable card buttons. */
+export function Lane({
+  column,
+  cards,
+  headingId,
+  instructionsId,
+  grabbedId,
+  draggingId,
+  isDropTarget,
+  register,
+  onOpen,
+  onCardKeyDown,
+  onCardKeyUp,
+  onDragStart,
+  onDragEnd,
+  onDragOver,
+  onDrop,
+}: LaneProps) {
+  return (
+    <section
+      aria-labelledby={headingId}
+      onDragOver={onDragOver}
+      onDrop={onDrop}
+      data-drop-target={isDropTarget || undefined}
+      className="flex w-72 shrink-0 flex-col rounded-xl border border-border bg-secondary/40 data-[drop-target]:border-primary/60 data-[drop-target]:bg-accent/40"
+    >
+      <h2 id={headingId} className="flex items-center gap-2 px-3.5 pt-3 pb-2 text-[13px] font-semibold text-foreground">
+        {column.title}
+        <span className="font-mono text-[11px] font-normal text-muted-foreground">
+          {cards.length}
+          <span className="sr-only"> cards</span>
+        </span>
+      </h2>
+      <ul className="flex min-h-24 flex-1 flex-col gap-2 px-2 pb-2">
+        {cards.map((card, index) => (
+          <li key={card.id} data-card-index={index}>
+            <button
+              ref={register(card.id)}
+              type="button"
+              draggable
+              aria-describedby={instructionsId}
+              aria-pressed={grabbedId === card.id}
+              onClick={() => onOpen(card.id)}
+              onKeyDown={onCardKeyDown(card.id)}
+              onKeyUp={onCardKeyUp}
+              onDragStart={onDragStart(card.id)}
+              onDragEnd={onDragEnd}
+              className={cn(
+                'group flex w-full cursor-grab flex-col gap-2 rounded-lg border border-border bg-card p-3 text-start shadow-sm transition-colors motion-reduce:transition-none hover:border-primary/40 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring',
+                'aria-pressed:border-primary aria-pressed:bg-accent',
+                draggingId === card.id && 'opacity-50',
+              )}
+            >
+              <span className="flex items-start gap-2">
+                <span className="min-w-0 flex-1 text-[13px] leading-snug font-medium text-foreground">
+                  {card.title}
+                </span>
+                <GripVertical size={14} aria-hidden className="mt-0.5 shrink-0 text-muted-foreground" />
+              </span>
+              <span className="flex flex-wrap items-center gap-1.5">
+                <span className="font-mono text-[11px] text-muted-foreground">{card.id}</span>
+                <Badge size="sm" tone={priorityTones[card.priority]}>
+                  {priorityLabels[card.priority]}
+                </Badge>
+                {card.labels.map((l) => (
+                  <Badge key={l} size="sm" variant="outline">
+                    {l}
+                  </Badge>
+                ))}
+              </span>
+              <span className="flex items-center justify-between gap-2 text-[11.5px] text-muted-foreground">
+                <span className="inline-flex items-center gap-1">
+                  {card.due && (
+                    <>
+                      <CalendarClock size={12} aria-hidden />
+                      <span className="sr-only">Due </span>
+                      <Timestamp
+                        value={card.due}
+                        format="absolute"
+                        tooltip={false}
+                        dateOptions={{ month: 'short', day: 'numeric' }}
+                      />
+                    </>
+                  )}
+                </span>
+                <Avatar size="xs" name={card.assignee} />
+              </span>
+            </button>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}