@gntik-ai/templates 0.0.0-stage → 0.6.0

package/src/home-dashboard/data.ts

@@ -0,0 +1,66 @@
+import { KPI_ITEMS, PROJECT_ACTIVITY, type ActivityItem, type ChartCardRange, type KpiItem } from '@gntik-ai/blocks';
+import { BookOpen, KeyRound, Rocket, UserPlus, type LucideIcon } from '@gntik-ai/icons';
+import type { BreadcrumbItem } from '@gntik-ai/ui';
+
+/** A shortcut card in the "Quick actions" grid. */
+export interface QuickAction {
+  id: string;
+  title: string;
+  description: string;
+  icon: LucideIcon;
+  href?: string;
+}
+
+export interface RequestPoint {
+  day: string;
+  Requests: number;
+  Errors: number;
+}
+
+export const homeBreadcrumbs: BreadcrumbItem[] = [{ label: 'Overview' }];
+
+export const homeKpis: KpiItem[] = KPI_ITEMS;
+
+export const homeActivity: ActivityItem[] = PROJECT_ACTIVITY;
+
+export const homeQuickActions: QuickAction[] = [
+  { id: 'deploy', title: 'Deploy a service', description: 'Ship a new build from a branch or tag.', icon: Rocket },
+  { id: 'invite', title: 'Invite members', description: 'Add teammates and pick their role.', icon: UserPlus },
+  { id: 'api-key', title: 'Create an API key', description: 'Scoped keys for CI and integrations.', icon: KeyRound },
+  {
+    id: 'docs',
+    title: 'Read the docs',
+    description: 'Guides, API reference and examples.',
+    icon: BookOpen,
+    href: '#docs',
+  },
+];
+
+const DAYS7 = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+const DAYS30 = Array.from({ length: 30 }, (_, i) => `Day ${i + 1}`);
+
+const requestSeries = (labels: string[], base: number, step: number): RequestPoint[] =>
+  labels.map((day, i) => ({
+    day,
+    Requests: Math.round(base + step * i + ((i * 37) % 11) * 180),
+    Errors: Math.round(40 + ((i * 13) % 7) * 9),
+  }));
+
+/** Requests and errors per day, per range. */
+export const homeRequestsByRange: Record<string, RequestPoint[]> = {
+  '7d': requestSeries(DAYS7, 31_000, 1_200),
+  '30d': requestSeries(DAYS30, 28_000, 340),
+};
+
+export const homeRequestRanges: ChartCardRange[] = [
+  {
+    value: '7d',
+    label: '7d',
+    summary: { value: '271,480', delta: { value: '+12.4%', direction: 'up', sentiment: 'positive' } },
+  },
+  {
+    value: '30d',
+    label: '30d',
+    summary: { value: '1.08M', delta: { value: '+6.0%', direction: 'up', sentiment: 'positive' } },
+  },
+];

package/src/home-dashboard/template.meta.ts

@@ -0,0 +1,12 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'Home dashboard',
+  family: 'Overview',
+  priority: 'P1',
+  status: 'beta',
+  description:
+    'Workspace home in the console shell: page header, KPI row, cost and traffic charts, recent activity and quick-action cards.',
+  layout: 'SidebarLayout + Page',
+  blocks: ['app-sidebar', 'app-topbar', 'page-header', 'kpi-row', 'chart-card', 'activity-feed'],
+};

package/src/incident-board/Page.test.tsx

@@ -0,0 +1,77 @@
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../test/a11y';
+import IncidentBoardPage from './Page';
+import { applyVisibleMove, formatAge, triageColumns } from './data';
+
+const column = (name: RegExp) => screen.getByRole('region', { name });
+const status = () =>
+  screen
+    .getAllByRole('status')
+    .map((s) => s.textContent?.trim() ?? '')
+    .join(' ');
+
+describe('IncidentBoardPage', () => {
+  it('renders the header, KPIs, filters and the board by stage', { timeout: 15000 }, async () => {
+    render(<IncidentBoardPage />);
+    expect(screen.getByRole('main')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 1, name: 'Incident board' })).toBeInTheDocument();
+    expect(screen.getAllByRole('button', { name: 'Declare incident' })[0]).toBeInTheDocument();
+    const kpis = screen.getByLabelText('Incident summary');
+    expect(within(kpis).getByText('Open incidents').nextElementSibling).toHaveTextContent('5');
+    expect(screen.getByRole('group', { name: 'Incidents by stage' })).toBeInTheDocument();
+    for (const stage of ['Triage', 'Investigating', 'Mitigated', 'Resolved'])
+      expect(screen.getByRole('heading', { level: 2, name: new RegExp(stage) })).toBeInTheDocument();
+    const card = within(column(/Triage/)).getByRole('button', { name: /INC-3120/ });
+    expect(card).toHaveTextContent('SEV1');
+    expect(card).toHaveTextContent('Unassigned');
+    expect(card).toHaveTextContent('12m');
+    await expectNoAxeViolations();
+  });
+
+  it('moves a card with the keyboard, announces it and reports the move', { timeout: 15000 }, async () => {
+    const user = userEvent.setup();
+    const onMove = vi.fn();
+    render(<IncidentBoardPage onMove={onMove} />);
+    within(column(/Triage/))
+      .getByRole('button', { name: /INC-3120/ })
+      .focus();
+    await user.keyboard(' {ArrowRight} ');
+    expect(within(column(/Investigating/)).getByRole('button', { name: /INC-3120/ })).toBeInTheDocument();
+    expect(status()).toMatch(/INC-3120 Checkout latency above 2 s, SEV1 dropped at position \d of 3 in Investigating/);
+    expect(onMove).toHaveBeenCalledWith(
+      expect.objectContaining({ cardId: 'INC-3120', fromColumnId: 'triage', toColumnId: 'investigating' }),
+      expect.any(Array),
+    );
+  });
+
+  it('filters the board and opens the details drawer', { timeout: 15000 }, async () => {
+    const user = userEvent.setup();
+    render(<IncidentBoardPage />);
+    await user.type(screen.getByRole('searchbox'), 'webhook');
+    const board = screen.getByRole('group', { name: 'Incidents by stage' });
+    expect(within(board).getAllByRole('button', { name: /INC-\d+/ })).toHaveLength(1);
+    await user.click(screen.getByRole('button', { name: /INC-3111/ }));
+    const drawer = await screen.findByRole('dialog', { name: 'Webhook deliveries delayed' });
+    expect(within(drawer).getByText('Linus Ortega')).toBeInTheDocument();
+    expect(within(drawer).getByText('SEV2')).toBeInTheDocument();
+  });
+
+  it('maps a move on the filtered board to full-board indices', () => {
+    const visible = triageColumns.map((c) => ({ ...c, cards: c.cards.filter((i) => i.severity === 'sev2') }));
+    const { columns, move } = applyVisibleMove(triageColumns, visible, {
+      cardId: 'INC-3111',
+      fromColumnId: 'investigating',
+      fromIndex: 0,
+      toColumnId: 'resolved',
+      toIndex: 0,
+    });
+    expect(move).toMatchObject({ fromIndex: 1, toIndex: 1 });
+    expect(columns.find((c) => c.id === 'resolved')?.cards.map((i) => i.id)).toEqual([
+      'INC-3097',
+      'INC-3111',
+      'INC-3092',
+    ]);
+    expect(formatAge(0, 3 * 60 * 60_000 + 5 * 60_000)).toBe('3h 5m');
+  });
+});

package/src/incident-board/Page.tsx

@@ -0,0 +1,263 @@
+import { FilterBar, KpiRow, PageHeader, type ActiveFilter, type FilterField } from '@gntik-ai/blocks';
+import { Download, Plus } from '@gntik-ai/icons';
+import {
+  Avatar,
+  Drawer,
+  DrawerBody,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+  HStack,
+  KanbanBoard,
+  LiveAnnouncer,
+  Page,
+  SimpleSelect,
+  Stack,
+  StatusTag,
+  Text,
+  Timestamp,
+  useAnnounce,
+  type BreadcrumbItem,
+  type KanbanColumn,
+  type KanbanMove,
+} from '@gntik-ai/ui';
+import { useState } from 'react';
+import { ConsoleShell, type ConsoleShellProps } from '../shared/ConsoleShell';
+import {
+  applyVisibleMove,
+  formatAge,
+  matchesTriage,
+  triageBreadcrumbs,
+  triageColumns,
+  triageFilterFields,
+  triageKpis,
+  triageNow,
+  triageSeverities,
+  type TriageIncident,
+} from './data';
+
+export interface IncidentBoardProps {
+  title: string;
+  description: string;
+  /** Initial columns (stages) and incident cards. */
+  defaultColumns: KanbanColumn<TriageIncident>[];
+  filterFields: FilterField[];
+  defaultFilters: ActiveFilter[];
+  /** Clock for the card ages (epoch ms). */
+  now: number;
+  /** Fires after a card moves (drag, keyboard or the drawer's status select), in full-board indices. */
+  onMove: (move: KanbanMove, columns: KanbanColumn<TriageIncident>[]) => void;
+  /** Initially open incident (details drawer). */
+  defaultOpenId: string | null;
+  onDeclare: () => void;
+  onExport: () => void;
+  breadcrumbs: BreadcrumbItem[];
+  currentHref: string;
+  shell: Omit<ConsoleShellProps, 'children'>;
+}
+
+type Handlers = 'onMove' | 'onDeclare' | 'onExport';
+type BoardProps = Omit<IncidentBoardProps, 'breadcrumbs' | 'currentHref' | 'shell' | Handlers> &
+  Partial<Pick<IncidentBoardProps, Handlers>>;
+
+function IncidentCard({ incident, now }: { incident: TriageIncident; now: number }) {
+  return (
+    <span className="grid gap-2">
+      <span className="text-[13px] leading-5 font-medium text-foreground">{incident.title}</span>
+      <span className="flex flex-wrap items-center gap-x-2 gap-y-1">
+        <StatusTag status={incident.severity} statuses={triageSeverities} size="sm" />
+        <span className="font-mono text-[11px] text-muted-foreground">{incident.id}</span>
+      </span>
+      <span className="flex items-center justify-between gap-2 text-[12px] text-muted-foreground">
+        <span className="flex min-w-0 items-center gap-1.5">
+          <Avatar size="xs" name={incident.owner} aria-hidden />
+          <span className="truncate">{incident.owner}</span>
+        </span>
+        <span className="font-mono tabular-nums">
+          <span className="sr-only">Age </span>
+          {formatAge(incident.openedAt, now)}
+        </span>
+      </span>
+    </span>
+  );
+}
+
+function IncidentBoard({
+  title,
+  description,
+  defaultColumns,
+  filterFields,
+  defaultFilters,
+  now,
+  onMove,
+  defaultOpenId,
+  onDeclare,
+  onExport,
+}: BoardProps) {
+  const announce = useAnnounce();
+  const [columns, setColumns] = useState(defaultColumns);
+  const [query, setQuery] = useState('');
+  const [filters, setFilters] = useState<ActiveFilter[]>(defaultFilters);
+  const [openId, setOpenId] = useState<string | null>(defaultOpenId);
+
+  const visible = columns.map((c) => ({ ...c, cards: c.cards.filter((i) => matchesTriage(i, query, filters)) }));
+  const shown = visible.reduce((n, c) => n + c.cards.length, 0);
+  const openColumn = columns.find((c) => c.cards.some((i) => i.id === openId));
+  const open = openColumn?.cards.find((i) => i.id === openId);
+
+  const commit = (next: KanbanColumn<TriageIncident>[], move: KanbanMove) => {
+    setColumns(next);
+    onMove?.(move, next);
+  };
+
+  const moveFromDrawer = (incident: TriageIncident, toColumnId: string) => {
+    const from = columns.find((c) => c.cards.some((i) => i.id === incident.id));
+    const to = columns.find((c) => c.id === toColumnId);
+    if (!from || !to || from.id === to.id) return;
+    const result = applyVisibleMove(columns, columns, {
+      cardId: incident.id,
+      fromColumnId: from.id,
+      fromIndex: from.cards.findIndex((i) => i.id === incident.id),
+      toColumnId: to.id,
+      toIndex: to.cards.length,
+    });
+    commit(result.columns, result.move);
+    announce(`${incident.title} moved to ${to.title}.`);
+  };
+
+  return (
+    <>
+      <Page
+        width="full"
+        header={
+          <PageHeader
+            breadcrumbs={null}
+            title={title}
+            description={description}
+            status=""
+            meta={[]}
+            tabs={null}
+            actions={[
+              { label: 'Export', icon: Download, variant: 'secondary', onClick: onExport },
+              { label: 'Declare incident', icon: Plus, variant: 'primary', onClick: onDeclare },
+            ]}
+          />
+        }
+      >
+        <Stack gap={5}>
+          <KpiRow items={triageKpis(columns)} variant="strip" showTrends={false} label="Incident summary" />
+          <FilterBar
+            fields={filterFields}
+            views={[]}
+            query={query}
+            onQueryChange={setQuery}
+            filters={filters}
+            onFiltersChange={setFilters}
+            placeholder="Search id, title, service or owner…"
+            resultCount={shown}
+          />
+          <KanbanBoard<TriageIncident>
+            label="Incidents by stage"
+            headingLevel={2}
+            emptyText="No incidents"
+            columns={visible}
+            onMove={(move) => {
+              const result = applyVisibleMove(columns, visible, move);
+              commit(result.columns, result.move);
+            }}
+            getCardLabel={(i) => `${i.id} ${i.title}, ${triageSeverities[i.severity].label}`}
+            onCardOpen={(i) => setOpenId(i.id)}
+            renderCard={(i) => <IncidentCard incident={i} now={now} />}
+          />
+        </Stack>
+      </Page>
+      <Drawer open={open != null} onOpenChange={(next) => !next && setOpenId(null)}>
+        <DrawerContent size="md">
+          {open && openColumn && (
+            <>
+              <DrawerHeader>
+                <DrawerTitle>{open.title}</DrawerTitle>
+                <DrawerDescription>
+                  {open.id} · {open.service}
+                </DrawerDescription>
+              </DrawerHeader>
+              <DrawerBody>
+                <Stack gap={5}>
+                  <HStack gap={2} wrap>
+                    <StatusTag status={open.severity} statuses={triageSeverities} />
+                    <Text as="span" variant="caption" tone="muted">
+                      Open for {formatAge(open.openedAt, now)}
+                    </Text>
+                  </HStack>
+                  <Text variant="supporting">{open.summary}</Text>
+                  <dl className="grid grid-cols-[7rem_1fr] items-center gap-x-4 gap-y-3 text-[13px]">
+                    <dt className="text-muted-foreground">Stage</dt>
+                    <dd>
+                      <SimpleSelect
+                        aria-label="Stage"
+                        size="sm"
+                        items={columns.map((c) => ({ value: c.id, label: c.title }))}
+                        value={openColumn.id}
+                        onValueChange={(v) => v && moveFromDrawer(open, v)}
+                        className="w-44"
+                      />
+                    </dd>
+                    <dt className="text-muted-foreground">Owner</dt>
+                    <dd className="flex items-center gap-2 text-foreground">
+                      <Avatar size="xs" name={open.owner} aria-hidden />
+                      {open.owner}
+                    </dd>
+                    <dt className="text-muted-foreground">Service</dt>
+                    <dd className="font-mono text-foreground">{open.service}</dd>
+                    <dt className="text-muted-foreground">Declared</dt>
+                    <dd className="text-foreground">
+                      <Timestamp value={open.openedAt} format="absolute" tooltip={false} />
+                    </dd>
+                  </dl>
+                </Stack>
+              </DrawerBody>
+            </>
+          )}
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+}
+
+/** Incident triage board: KPI summary, FilterBar and a KanbanBoard by stage with keyboard moves and a details Drawer. */
+export default function IncidentBoardPage(props: Partial<IncidentBoardProps>) {
+  const {
+    title = 'Incident board',
+    description = 'Triage incidents by stage. Drag a card, or focus it and press Space to pick it up; Enter opens the details.',
+    defaultColumns = triageColumns,
+    filterFields = triageFilterFields,
+    defaultFilters = [],
+    now = triageNow,
+    onMove,
+    defaultOpenId = null,
+    onDeclare,
+    onExport,
+    breadcrumbs = triageBreadcrumbs,
+    currentHref = '/incidents',
+    shell,
+  } = props;
+  return (
+    <ConsoleShell breadcrumbs={breadcrumbs} currentHref={currentHref} {...shell}>
+      <LiveAnnouncer>
+        <IncidentBoard
+          title={title}
+          description={description}
+          defaultColumns={defaultColumns}
+          filterFields={filterFields}
+          defaultFilters={defaultFilters}
+          now={now}
+          onMove={onMove}
+          defaultOpenId={defaultOpenId}
+          onDeclare={onDeclare}
+          onExport={onExport}
+        />
+      </LiveAnnouncer>
+    </ConsoleShell>
+  );
+}

package/src/incident-board/data.ts

@@ -0,0 +1,220 @@
+import type { ActiveFilter, FilterField, KpiItem } from '@gntik-ai/blocks';
+import {
+  moveKanbanCard,
+  type BreadcrumbItem,
+  type KanbanCard,
+  type KanbanColumn,
+  type KanbanMove,
+  type StatusDefinition,
+} from '@gntik-ai/ui';
+
+export type TriageSeverity = 'sev1' | 'sev2' | 'sev3';
+export type TriageStage = 'triage' | 'investigating' | 'mitigated' | 'resolved';
+
+/** One incident card on the triage board. */
+export interface TriageIncident extends KanbanCard {
+  severity: TriageSeverity;
+  service: string;
+  owner: string;
+  /** Epoch ms when the incident was declared. */
+  openedAt: number;
+  summary: string;
+}
+
+export const triageSeverities: Record<TriageSeverity, StatusDefinition> = {
+  sev1: { label: 'SEV1', tone: 'destructive' },
+  sev2: { label: 'SEV2', tone: 'warning' },
+  sev3: { label: 'SEV3', tone: 'info' },
+};
+
+export const triageStageLabels: Record<TriageStage, string> = {
+  triage: 'Triage',
+  investigating: 'Investigating',
+  mitigated: 'Mitigated',
+  resolved: 'Resolved',
+};
+
+export const UNASSIGNED = 'Unassigned';
+
+/** Compact age ("45m", "3h 10m", "2d 4h") of an incident opened at `openedAt`. */
+export function formatAge(openedAt: number, now: number): string {
+  const minutes = Math.max(0, Math.floor((now - openedAt) / 60_000));
+  if (minutes < 60) return `${minutes}m`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return minutes % 60 ? `${hours}h ${minutes % 60}m` : `${hours}h`;
+  const days = Math.floor(hours / 24);
+  return hours % 24 ? `${days}d ${hours % 24}h` : `${days}d`;
+}
+
+const MIN = 60_000;
+/** Fixture clock: ages are computed against this instant. */
+export const triageNow = Date.now();
+const ago = (minutes: number) => triageNow - minutes * MIN;
+
+const incident = (
+  id: string,
+  title: string,
+  severity: TriageSeverity,
+  service: string,
+  owner: string,
+  minutesAgo: number,
+  summary: string,
+): TriageIncident => ({ id, title, severity, service, owner, openedAt: ago(minutesAgo), summary });
+
+export const triageColumns: KanbanColumn<TriageIncident>[] = [
+  {
+    id: 'triage',
+    title: triageStageLabels.triage,
+    cards: [
+      incident(
+        'INC-3120',
+        'Checkout latency above 2 s',
+        'sev1',
+        'payments-api',
+        UNASSIGNED,
+        12,
+        'p95 latency on checkout doubled after the 14:00 deploy; error budget burning at 6×.',
+      ),
+      incident(
+        'INC-3118',
+        'Search results missing new items',
+        'sev3',
+        'search-index',
+        UNASSIGNED,
+        95,
+        'Items created in the last hour do not appear in search; indexing lag is growing.',
+      ),
+    ],
+  },
+  {
+    id: 'investigating',
+    title: triageStageLabels.investigating,
+    cards: [
+      incident(
+        'INC-3115',
+        'Elevated 5xx on the API gateway',
+        'sev1',
+        'api-gateway',
+        'Ada Park',
+        48,
+        'One availability zone returns 502s for 4% of requests; traffic shift in progress.',
+      ),
+      incident(
+        'INC-3111',
+        'Webhook deliveries delayed',
+        'sev2',
+        'webhooks',
+        'Linus Ortega',
+        190,
+        'Delivery queue depth at 40k; workers restart on an out-of-memory error.',
+      ),
+    ],
+  },
+  {
+    id: 'mitigated',
+    title: triageStageLabels.mitigated,
+    cards: [
+      incident(
+        'INC-3104',
+        'Sign-in emails bouncing',
+        'sev2',
+        'auth-service',
+        'Grace Kim',
+        420,
+        'Mail provider rate limit hit; traffic moved to the backup sender.',
+      ),
+    ],
+  },
+  {
+    id: 'resolved',
+    title: triageStageLabels.resolved,
+    cards: [
+      incident(
+        'INC-3097',
+        'Dashboard charts not loading',
+        'sev3',
+        'analytics',
+        'Mei Chen',
+        1500,
+        'A stale CDN asset broke the chart bundle; cache purged and a fix deployed.',
+      ),
+      incident(
+        'INC-3092',
+        'Billing worker stuck on retries',
+        'sev2',
+        'billing-worker',
+        'Ada Park',
+        2900,
+        'A malformed invoice blocked the queue; it was skipped and the parser fixed.',
+      ),
+    ],
+  },
+];
+
+const services = [...new Set(triageColumns.flatMap((c) => c.cards.map((i) => i.service)))].sort();
+const owners = [...new Set(triageColumns.flatMap((c) => c.cards.map((i) => i.owner)))].sort();
+
+export const triageFilterFields: FilterField[] = [
+  { id: 'severity', label: 'Severity', options: Object.values(triageSeverities).map((s) => s.label) },
+  { id: 'service', label: 'Service', options: services },
+  { id: 'owner', label: 'Owner', options: owners },
+];
+
+/** Filter value of an incident for a FilterBar field id. */
+export function triageFieldValue(i: TriageIncident, field: string): string | undefined {
+  if (field === 'severity') return triageSeverities[i.severity].label;
+  if (field === 'service') return i.service;
+  if (field === 'owner') return i.owner;
+  return undefined;
+}
+
+/** True when the incident matches the search text and every filtered field (OR within a field). */
+export function matchesTriage(i: TriageIncident, query: string, filters: readonly ActiveFilter[]): boolean {
+  const q = query.trim().toLowerCase();
+  if (q && ![i.id, i.title, i.service, i.owner].some((v) => v.toLowerCase().includes(q))) return false;
+  const byField = new Map<string, string[]>();
+  for (const f of filters) byField.set(f.field, [...(byField.get(f.field) ?? []), f.value]);
+  return [...byField].every(([field, values]) => values.includes(triageFieldValue(i, field) ?? ''));
+}
+
+/** KPI tiles computed from the board. */
+export function triageKpis(columns: KanbanColumn<TriageIncident>[]): KpiItem[] {
+  const cards = (id: string) => columns.find((c) => c.id === id)?.cards ?? [];
+  const open = columns.filter((c) => c.id !== 'resolved').flatMap((c) => c.cards);
+  return [
+    { id: 'open', label: 'Open incidents', value: String(open.length) },
+    { id: 'sev1', label: 'Open SEV1', value: String(open.filter((i) => i.severity === 'sev1').length) },
+    { id: 'unassigned', label: 'Unassigned', value: String(open.filter((i) => i.owner === UNASSIGNED).length) },
+    { id: 'resolved', label: 'Resolved', value: String(cards('resolved').length) },
+  ];
+}
+
+export const triageBreadcrumbs: BreadcrumbItem[] = [
+  { label: 'Acme Industries', href: '/overview' },
+  { label: 'Incidents' },
+];
+
+/**
+ * Maps a move made on the filtered (visible) board onto the full board: the card lands before the
+ * visible card it was dropped on, or after the last visible one. Returns the new columns and the
+ * move in full-board indices.
+ */
+export function applyVisibleMove<T extends KanbanCard>(
+  full: KanbanColumn<T>[],
+  visible: KanbanColumn<T>[],
+  move: KanbanMove,
+): { columns: KanbanColumn<T>[]; move: KanbanMove } {
+  const cardsOf = (cols: KanbanColumn<T>[], id: string) => cols.find((c) => c.id === id)?.cards ?? [];
+  const fromIndex = cardsOf(full, move.fromColumnId).findIndex((c) => c.id === move.cardId);
+  const destVisible = cardsOf(visible, move.toColumnId).filter((c) => c.id !== move.cardId);
+  const destFull = cardsOf(full, move.toColumnId).filter((c) => c.id !== move.cardId);
+  const anchor = destVisible[move.toIndex];
+  const last = destVisible[destVisible.length - 1];
+  const toIndex = anchor
+    ? destFull.findIndex((c) => c.id === anchor.id)
+    : last
+      ? destFull.findIndex((c) => c.id === last.id) + 1
+      : destFull.length;
+  const fullMove = { ...move, fromIndex, toIndex };
+  return { columns: moveKanbanCard(full, fullMove), move: fullMove };
+}

package/src/incident-board/template.meta.ts

@@ -0,0 +1,12 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'Incident board',
+  family: 'Overview',
+  priority: 'P3',
+  status: 'experimental',
+  description:
+    'Incident triage Kanban in the console: page header with Export / Declare incident, a KPI strip (open, SEV1, unassigned, resolved), a FilterBar (search, severity, service, owner) and a KanbanBoard by stage (Triage · Investigating · Mitigated · Resolved) whose cards show severity, owner and age; pointer and keyboard moves with live announcements, and a details Drawer whose stage select also moves the card.',
+  layout: 'SidebarLayout · Page',
+  blocks: ['app-sidebar', 'app-topbar', 'page-header', 'kpi-row', 'filter-bar'],
+};