feat(ui): extract shared Badge + Kbd primitives (U0.5)

libs/ui/src/index.ts

@@ -1,3 +1,8 @@
+// Primitives (U0.5)
+export { Badge } from './primitives/Badge';
+export type { BadgeProps } from './primitives/Badge';
+export { Kbd } from './primitives/Kbd';
+export type { KbdProps } from './primitives/Kbd';
 export { ThemeProvider, useTheme } from './theme/ThemeProvider';
 export type { Theme, ResolvedTheme, ThemeProviderProps } from './theme/ThemeProvider';
 export { AppShell } from './shell/AppShell';

libs/ui/src/primitives/Badge.css

@@ -0,0 +1,42 @@
+.ac-badge {
+  border-radius: 6px;
+  white-space: nowrap;
+}
+
+/* Dense card chip (was .ac-kanban__badge). */
+.ac-badge--sm {
+  display: inline-flex;
+  align-items: center;
+  min-height: 22px;
+  padding: 0 7px;
+  font-size: 10.5px;
+  font-weight: 780;
+}
+
+/* Detail / label badge (was .ac-task-detail__badge). */
+.ac-badge--md {
+  padding: 2px 8px;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.ac-badge--good {
+  color: var(--green);
+  background: var(--green-soft);
+}
+.ac-badge--info {
+  color: var(--blue);
+  background: var(--blue-soft);
+}
+.ac-badge--warn {
+  color: var(--amber);
+  background: var(--amber-soft);
+}
+.ac-badge--bad {
+  color: var(--red);
+  background: var(--red-soft);
+}
+.ac-badge--neutral {
+  color: var(--muted);
+  background: var(--rail);
+}

libs/ui/src/primitives/Badge.tsx

@@ -0,0 +1,33 @@
+import type { HTMLAttributes } from 'react';
+import type { BadgeTone } from '../client/types';
+import './Badge.css';
+
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  /** Semantic color; defaults to neutral. */
+  tone?: BadgeTone;
+  /** 'sm' for dense card chips, 'md' for detail/label badges. */
+  size?: 'sm' | 'md';
+}
+
+/**
+ * Tonal pill used across the board and detail screens (status chips, outcome
+ * badges). The tone colors are shared design tokens; `size` preserves the two
+ * historical sizings (dense card chip vs. detail badge). Remaining span
+ * attributes (className, aria-*, data-*, handlers) are forwarded.
+ */
+export function Badge({
+  tone = 'neutral',
+  size = 'md',
+  className,
+  children,
+  ...rest
+}: Readonly<BadgeProps>) {
+  const classes = `ac-badge ac-badge--${size} ac-badge--${tone}${
+    className ? ` ${className}` : ''
+  }`;
+  return (
+    <span className={classes} {...rest}>
+      {children}
+    </span>
+  );
+}

libs/ui/src/primitives/Kbd.css

@@ -0,0 +1,5 @@
+.ac-kbd {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 10.5px;
+  color: var(--quiet);
+}

libs/ui/src/primitives/Kbd.tsx

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from 'react';
+import './Kbd.css';
+
+export type KbdProps = HTMLAttributes<HTMLElement>;
+
+/**
+ * Inline keyboard-hint text (e.g. a "⌘K" shortcut label), rendered as the
+ * semantic <kbd> element. Remaining attributes are forwarded.
+ */
+export function Kbd({ className, children, ...rest }: Readonly<KbdProps>) {
+  return (
+    <kbd className={className ? `ac-kbd ${className}` : 'ac-kbd'} {...rest}>
+      {children}
+    </kbd>
+  );
+}

libs/ui/src/screens/BoardToolbar.css

@@ -44,11 +44,7 @@
   color: var(--muted);
 }
 
-.ac-toolbar__kbd {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 10.5px;
-  color: var(--quiet);
-}
+/* The ⌘K hint uses the shared <Kbd> primitive. */
 
 /* The groups are fieldsets for semantics; reset the UA chrome. */
 .ac-toolbar__filters {

libs/ui/src/screens/BoardToolbar.tsx

@@ -1,4 +1,5 @@
 import type { ChangeEvent } from 'react';
+import { Kbd } from '../primitives/Kbd';
 import './BoardToolbar.css';
 
 export interface BoardToolbarFilter {
@@ -70,9 +71,7 @@ export function BoardToolbar({
             aria-label={searchLabel ?? searchPlaceholder}
             onChange={handleSearch}
           />
-          {searchShortcut != null && (
-            <span className="ac-toolbar__kbd">{searchShortcut}</span>
-          )}
+          {searchShortcut != null && <Kbd>{searchShortcut}</Kbd>}
         </div>
       )}
       {filters != null && filters.length > 0 && (

libs/ui/src/screens/KanbanBoard.css

@@ -101,22 +101,7 @@
   flex-wrap: wrap;
 }
 
-.ac-kanban__badge {
-  display: inline-flex;
-  align-items: center;
-  min-height: 22px;
-  padding: 0 7px;
-  border-radius: 6px;
-  font-size: 10.5px;
-  font-weight: 780;
-  white-space: nowrap;
-}
-
-.ac-kanban__badge--good { color: var(--green); background: var(--green-soft); }
-.ac-kanban__badge--info { color: var(--blue); background: var(--blue-soft); }
-.ac-kanban__badge--warn { color: var(--amber); background: var(--amber-soft); }
-.ac-kanban__badge--bad { color: var(--red); background: var(--red-soft); }
-.ac-kanban__badge--neutral { color: var(--muted); background: var(--rail); }
+/* Status chip + outcome badges use the shared <Badge size="sm"> primitive. */
 
 .ac-kanban__card-meta {
   display: flex;

libs/ui/src/screens/KanbanBoard.tsx

@@ -1,5 +1,6 @@
 import { Fragment } from 'react';
 import type { KeyboardEvent } from 'react';
+import { Badge } from '../primitives/Badge';
 import type { TaskStatus, UiTask } from '../client/types';
 import './KanbanBoard.css';
 
@@ -81,11 +82,9 @@ function KanbanCard({ task, onSelect }: KanbanCardProps) {
       <div className="ac-kanban__card-top">
         <span className="ac-kanban__card-id">{task.id}</span>
         {task.statusChip != null && (
-          <span
-            className={`ac-kanban__badge ac-kanban__badge--${task.statusChip.tone ?? 'neutral'}`}
-          >
+          <Badge tone={task.statusChip.tone ?? 'neutral'} size="sm">
             {task.statusChip.label}
-          </span>
+          </Badge>
         )}
       </div>
       <h3 className="ac-kanban__card-title">{task.title}</h3>
@@ -100,12 +99,13 @@ function KanbanCard({ task, onSelect }: KanbanCardProps) {
       {task.badges != null && task.badges.length > 0 && (
         <div className="ac-kanban__card-badges">
           {task.badges.map((badge) => (
-            <span
+            <Badge
               key={`${badge.tone ?? 'neutral'}:${badge.label}`}
-              className={`ac-kanban__badge ac-kanban__badge--${badge.tone ?? 'neutral'}`}
+              tone={badge.tone ?? 'neutral'}
+              size="sm"
             >
               {badge.label}
-            </span>
+            </Badge>
           ))}
         </div>
       )}

libs/ui/src/screens/TaskDetail.css

@@ -80,17 +80,7 @@
   flex-wrap: wrap;
   gap: 6px;
 }
-.ac-task-detail__badge {
-  font-size: 11px;
-  font-weight: 600;
-  padding: 2px 8px;
-  border-radius: 6px;
-}
-.ac-task-detail__badge--good { color: var(--green); background: var(--green-soft); }
-.ac-task-detail__badge--info { color: var(--blue); background: var(--blue-soft); }
-.ac-task-detail__badge--warn { color: var(--amber); background: var(--amber-soft); }
-.ac-task-detail__badge--bad { color: var(--red); background: var(--red-soft); }
-.ac-task-detail__badge--neutral { color: var(--muted); background: var(--rail); }
+/* Badges use the shared <Badge size="md"> primitive. */
 
 .ac-task-detail__desc {
   margin: 0;

libs/ui/src/screens/TaskDetail.tsx

@@ -1,3 +1,4 @@
+import { Badge } from '../primitives/Badge';
 import type { TaskStatus, UiTaskDetail } from '../client/types';
 import './TaskDetail.css';
 
@@ -95,12 +96,13 @@ function TaskDetailBody({ task, statusLabels }: Readonly<TaskDetailBodyProps>) {
       {task.badges != null && task.badges.length > 0 && (
         <div className="ac-task-detail__badges">
           {task.badges.map((badge) => (
-            <span
+            <Badge
               key={`${badge.tone ?? 'neutral'}:${badge.label}`}
-              className={`ac-task-detail__badge ac-task-detail__badge--${badge.tone ?? 'neutral'}`}
+              tone={badge.tone ?? 'neutral'}
+              size="md"
             >
               {badge.label}
-            </span>
+            </Badge>
           ))}
         </div>
       )}