@assistkick/create 1.7.0 → 1.8.0

package/templates/assistkick-product-system/packages/frontend/src/components/ds/KanbanCard.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import {
-  Play, AlertTriangle, Lock, CircleDot, Copy, Check,
+  Play, AlertTriangle, Lock, CircleDot, Copy, Check, ChevronDown,
 } from 'lucide-react';
+import { KindBadge } from './KindBadge';
 
 /* ── Types ── */
 
@@ -13,36 +14,43 @@ export interface KanbanCardProps {
   kind?: string;
   rejectionCount: number;
   blocked: boolean;
-  /** Pipeline status string */
+  /** Workflow execution status string */
   pipeline: string;
-  /** Pipeline badge label (e.g. "Retry 2", "Running...") */
+  /** Status badge label (e.g. "Running", "Completed") */
   pipelineLabel?: string;
-  /** Tool call counts — { Read: 6, Tools: 11, Write: 3, Edit: 2 } */
-  toolCalls?: Record<string, number>;
-  /** Session meta pills — e.g. ["Ctx 17%", "19t", "$0.3948", "opus-4"] */
-  meta?: string[];
-  /** Stop reason (e.g. "end_turn", "max_turns") */
-  stopReason?: string;
   /** Number of issues / notes */
   issueCount: number;
   /** Issue button label override */
   issueLabel?: string;
   /** Show play button */
   showPlay?: boolean;
+  /** Show dropdown arrow next to play button for workflow selection */
+  showPlayDropdown?: boolean;
+  /** Show stop button (for epic cards when orchestrator is running) */
+  showStop?: boolean;
   /** Show resume button */
   showResume?: boolean;
   /** Whether copy was just triggered */
   copied?: boolean;
   /** Is this the currently-playing card in Play All */
   playAllActive?: boolean;
+  /** Name of the currently executing agent (when on a RunAgent node) */
+  agentName?: string | null;
+  /** Error message from a failed workflow execution */
+  errorMessage?: string | null;
+  /** Whether this card represents an epic node */
+  isEpic?: boolean;
 
   /* Callbacks */
   onClick?: () => void;
   onCopy?: () => void;
   onPlay?: () => void;
+  onPlayDropdown?: () => void;
+  onStop?: () => void;
   onResume?: () => void;
   onUnblock?: () => void;
   onIssuesClick?: () => void;
+  onMonitorClick?: () => void;
 
   /* Drag */
   draggable?: boolean;
@@ -50,57 +58,41 @@ export interface KanbanCardProps {
   onDragEnd?: (e: React.DragEvent) => void;
 }
 
-/* ── Pipeline style helpers ── */
+/* ── Status style helpers ── */
 
-function pipelineCls(status: string): string {
-  if (['developing', 'reviewing', 'testing', 'committing'].includes(status)) return 'bg-accent/10 text-accent animate-pulse';
+function statusCls(status: string): string {
+  if (status === 'running') return 'bg-accent/10 text-accent animate-pulse';
   switch (status) {
     case 'completed': return 'bg-emerald-500/10 text-emerald-400';
     case 'failed': return 'bg-error/10 text-error';
-    case 'blocked': return 'bg-error/10 text-error';
-    case 'interrupted': return 'bg-amber-500/10 text-amber-400';
     default: return 'bg-white/[0.06] text-content-muted';
   }
 }
 
-function pipelineIcon(status: string) {
-  if (['developing', 'reviewing', 'testing', 'committing'].includes(status)) return <CircleDot size={12} strokeWidth={2.5} />;
+function statusIcon(status: string) {
+  if (status === 'running') return <CircleDot size={12} strokeWidth={2.5} />;
   if (status === 'failed') return <AlertTriangle size={12} strokeWidth={2.5} />;
   return null;
 }
 
-/* ── Kind badge ── */
+/* ── Component ── */
 
-function KindBadge({ kind }: { kind: string }) {
-  if (!kind || kind === 'new') return null;
-  const cls = kind === 'improvement'
-    ? 'text-blue-400 bg-blue-400/15'
-    : 'text-amber-400 bg-amber-400/15';
-  return (
-    <span className={`rounded px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide ${cls}`}>
-      {kind}
-    </span>
-  );
-}
-
-/* ── Card component ── */
-
-export function KanbanCard({
+export const KanbanCard = ({
   id, name, pct, kind, rejectionCount, blocked, pipeline, pipelineLabel: pipLabel,
-  toolCalls, meta, stopReason, issueCount, issueLabel, showPlay, showResume, copied,
-  playAllActive,
-  onClick, onCopy, onPlay, onResume, onUnblock, onIssuesClick,
+  issueCount, issueLabel, showPlay, showPlayDropdown, showStop, showResume, copied,
+  playAllActive, agentName, errorMessage,
+  isEpic,
+  onClick, onCopy, onPlay, onPlayDropdown, onStop, onResume, onUnblock, onIssuesClick, onMonitorClick,
   draggable, onDragStart, onDragEnd,
-}: KanbanCardProps) {
+}: KanbanCardProps) => {
   const hasPipeline = pipeline !== 'idle' && !!pipLabel;
-  const hasTools = toolCalls && Object.values(toolCalls).some(v => v > 0);
-  const hasStatusRow = rejectionCount > 0 || hasPipeline || !!stopReason;
+  const hasStatusRow = rejectionCount > 0 || hasPipeline;
 
   const stripColor = blocked
     ? 'from-error/60 to-error/20'
     : rejectionCount >= 3
       ? 'from-error/40 to-amber-500/20'
-      : ['developing', 'reviewing', 'testing', 'committing'].includes(pipeline)
+      : pipeline === 'running'
         ? 'from-accent/60 to-accent/20'
         : pipeline === 'completed'
           ? 'from-emerald-400/60 to-emerald-400/20'
@@ -115,7 +107,12 @@ export function KanbanCard({
 
   return (
     <div
-      className="group relative shrink-0 overflow-hidden rounded-2xl bg-surface border border-edge shadow-lg shadow-black/10 backdrop-blur-sm transition-all duration-200 hover:border-content/15 hover:shadow-xl hover:shadow-black/15 cursor-pointer"
+      className={[
+        'group relative shrink-0 overflow-hidden rounded-2xl border shadow-lg shadow-black/10 backdrop-blur-sm transition-all duration-200 hover:border-content/15 hover:shadow-xl hover:shadow-black/15 cursor-pointer',
+        isEpic
+          ? 'bg-gradient-to-br from-accent/[0.06] to-accent/[0.02] border-accent/15'
+          : 'bg-surface border-edge',
+      ].join(' ')}
       draggable={draggable}
       onDragStart={onDragStart}
       onDragEnd={onDragEnd}
@@ -142,18 +139,37 @@ export function KanbanCard({
             <span className="flex items-center gap-1.5 rounded-full bg-error/15 px-2.5 py-1 text-[11px] font-bold text-error backdrop-blur">
               <Lock size={11} strokeWidth={2.5} /> Blocked
             </span>
-          ) : showPlay ? (
+          ) : showStop ? (
             <button
-              className="flex h-7 w-7 items-center justify-center rounded-full bg-accent/10 text-accent backdrop-blur transition-all hover:bg-accent hover:text-surface hover:shadow-[0_0_12px_-2px_var(--accent)] cursor-pointer"
-              title="Start automated development pipeline"
-              onClick={(e) => { e.stopPropagation(); onPlay?.(); }}
+              className="flex h-7 w-7 items-center justify-center rounded-full border border-error text-error text-[12px] hover:bg-error hover:text-surface transition-colors cursor-pointer"
+              title="Stop processing epic"
+              onClick={(e) => { e.stopPropagation(); onStop?.(); }}
             >
-              <Play size={12} strokeWidth={2.5} fill="currentColor" />
+              {'\u25A0'}
             </button>
+          ) : showPlay ? (
+            <div className="flex items-center">
+              <button
+                className="flex h-7 w-7 items-center justify-center rounded-full bg-accent/10 text-accent backdrop-blur transition-all hover:bg-accent hover:text-surface hover:shadow-[0_0_12px_-2px_var(--accent)] cursor-pointer"
+                title="Start default workflow"
+                onClick={(e) => { e.stopPropagation(); onPlay?.(); }}
+              >
+                <Play size={12} strokeWidth={2.5} fill="currentColor" />
+              </button>
+              {showPlayDropdown && (
+                <button
+                  className="flex h-7 w-5 items-center justify-center rounded-r-full text-accent/60 hover:text-accent transition-colors cursor-pointer"
+                  title="Choose workflow"
+                  onClick={(e) => { e.stopPropagation(); onPlayDropdown?.(); }}
+                >
+                  <ChevronDown size={12} strokeWidth={2.5} />
+                </button>
+              )}
+            </div>
           ) : showResume ? (
             <button
               className="flex h-7 w-7 items-center justify-center rounded-full bg-accent/10 text-accent backdrop-blur transition-all hover:bg-accent hover:text-surface hover:shadow-[0_0_12px_-2px_var(--accent)] cursor-pointer"
-              title="Resume pipeline from last completed step"
+              title="Resume workflow from last completed step"
               onClick={(e) => { e.stopPropagation(); onResume?.(); }}
             >
               <Play size={12} strokeWidth={2.5} fill="currentColor" />
@@ -164,6 +180,26 @@ export function KanbanCard({
         {/* Name */}
         <div className="mt-2.5 text-[14px] font-semibold leading-snug text-content">{name}</div>
 
+        {/* Agent tag — shows when a RunAgent node is executing */}
+        {agentName && (
+          <div className="mt-2 inline-flex items-center gap-1.5 rounded-full bg-accent/10 px-2.5 py-1 text-[10px] font-semibold text-accent animate-pulse backdrop-blur">
+            <CircleDot size={10} strokeWidth={2.5} />
+            {agentName}
+          </div>
+        )}
+
+        {/* Error tag — shows when workflow failed, clickable to open monitor */}
+        {errorMessage && pipeline === 'failed' && (
+          <button
+            className="mt-2 inline-flex items-center gap-1.5 rounded-full bg-error/10 px-2.5 py-1 text-[10px] font-semibold text-error backdrop-blur cursor-pointer transition-opacity hover:opacity-80"
+            title={errorMessage}
+            onClick={(e) => { e.stopPropagation(); onMonitorClick?.(); }}
+          >
+            <AlertTriangle size={10} strokeWidth={2.5} />
+            Error
+          </button>
+        )}
+
         {/* Spec disc */}
         <div className="mt-3 flex items-center gap-2">
           <svg width="22" height="22" viewBox="0 0 22 22" className="shrink-0 -rotate-90">
@@ -183,46 +219,26 @@ export function KanbanCard({
           <span className="font-mono text-[11px] text-content-secondary">{pct}%</span>
         </div>
 
-        {/* Stats pills */}
-        {(hasTools || hasStatusRow) && (
-          <div className="mt-3 space-y-1.5" onClick={(e) => e.stopPropagation()}>
-            {/* Tool calls row */}
-            {hasTools && (
-              <div className="flex gap-1">
-                {Object.entries(toolCalls!).filter(([, v]) => v > 0).map(([k, v]) => (
-                  <span key={k} className="flex-1 rounded-full bg-accent/10 py-1 text-center font-mono text-[10px] font-medium text-accent backdrop-blur">
-                    {k}: {v}
-                  </span>
-                ))}
-              </div>
-            )}
-            {/* Meta row */}
-            {meta && meta.length > 0 && (
-              <div className="flex gap-1">
-                {meta.map(t => (
-                  <span key={t} className="flex-1 rounded-full bg-white/[0.08] py-1 text-center font-mono text-[10px] text-content backdrop-blur">{t}</span>
-                ))}
-              </div>
-            )}
-            {/* Status row: rejected + pipeline + stop reason */}
-            {hasStatusRow && (
-              <div className="flex gap-1">
-                {rejectionCount > 0 && (
-                  <span className="flex-1 rounded-full bg-amber-400/15 py-1 text-center text-[10px] font-semibold text-amber-400 backdrop-blur">
-                    {rejectionCount}x rejected
-                  </span>
-                )}
-                {hasPipeline && (
-                  <span className={`flex-1 inline-flex items-center justify-center gap-1.5 rounded-full py-1 text-[10px] font-semibold backdrop-blur ${pipelineCls(pipeline)}`}>
-                    {pipelineIcon(pipeline)}
-                    {pipLabel}
-                  </span>
-                )}
-                {stopReason && (
-                  <span className="flex-1 rounded-full bg-accent-secondary/10 py-1 text-center font-mono text-[10px] text-accent-secondary backdrop-blur">{stopReason}</span>
-                )}
-              </div>
-            )}
+        {/* Status pills */}
+        {hasStatusRow && (
+          <div className="mt-3" onClick={(e) => e.stopPropagation()}>
+            <div className="flex gap-1">
+              {rejectionCount > 0 && (
+                <span className="flex-1 rounded-full bg-amber-400/15 py-1 text-center text-[10px] font-semibold text-amber-400 backdrop-blur">
+                  {rejectionCount}x rejected
+                </span>
+              )}
+              {hasPipeline && (
+                <button
+                  className={`flex-1 inline-flex items-center justify-center gap-1.5 rounded-full py-1 text-[10px] font-semibold backdrop-blur cursor-pointer transition-opacity hover:opacity-80 ${statusCls(pipeline)}`}
+                  onClick={(e) => { e.stopPropagation(); onMonitorClick?.(); }}
+                  title="Open workflow monitor"
+                >
+                  {statusIcon(pipeline)}
+                  {pipLabel}
+                </button>
+              )}
+            </div>
           </div>
         )}
 
@@ -251,4 +267,4 @@ export function KanbanCard({
       </div>
     </div>
   );
-}
+};

package/templates/assistkick-product-system/packages/frontend/src/components/ds/KanbanCardShowcase.tsx

@@ -1,216 +1,37 @@
-import React from 'react';
-import {
-  Play, AlertTriangle, Lock, CircleDot, Copy,
-} from 'lucide-react';
+import { CardGlass } from './CardGlass';
+import type { DemoCard } from './CardGlass';
 
 /* ── Demo data ── */
 
-interface DemoCard {
-  id: string;
-  name: string;
-  pct: number;
-  kind: 'new' | 'improvement' | 'bugfix';
-  rejections: number;
-  pipeline: 'idle' | 'active' | 'completed' | 'failed' | 'interrupted' | 'blocked';
-  blocked: boolean;
-  issues: number;
-  stage: 'in_progress' | 'in_review' | 'qa';
-  tools: { read: number; tools: number; write: number; edit: number };
-  ctx: string;
-  turns: number;
-  cost: string;
-  model: string;
-  stop: string;
-}
-
 const DEMO_CARDS: DemoCard[] = [
   {
     id: 'feat_0f2d6616', name: 'TailwindCSS Integration', pct: 100, kind: 'new',
     rejections: 1, pipeline: 'interrupted', blocked: false, issues: 1,
-    stage: 'in_review', tools: { read: 6, tools: 11, write: 0, edit: 0 },
-    ctx: '17%', turns: 19, cost: '$0.3948', model: 'opus-4', stop: 'end_turn',
+    stage: 'in_review',
   },
   {
     id: 'feat_a3c71b02', name: 'Auth Flow Redesign', pct: 72, kind: 'improvement',
     rejections: 0, pipeline: 'active', blocked: false, issues: 0,
-    stage: 'in_progress', tools: { read: 12, tools: 4, write: 3, edit: 7 },
-    ctx: '34%', turns: 26, cost: '$0.5120', model: 'sonnet-4', stop: '',
+    stage: 'in_progress',
   },
   {
     id: 'feat_9e45f1d8', name: 'WebSocket Events', pct: 45, kind: 'new',
     rejections: 3, pipeline: 'failed', blocked: false, issues: 3,
-    stage: 'qa', tools: { read: 2, tools: 8, write: 1, edit: 0 },
-    ctx: '9%', turns: 11, cost: '$0.1840', model: 'opus-4', stop: 'max_turns',
+    stage: 'qa',
   },
   {
     id: 'feat_b7d20cc4', name: 'Rate Limiter Middleware', pct: 88, kind: 'bugfix',
     rejections: 0, pipeline: 'idle', blocked: true, issues: 0,
-    stage: 'in_progress', tools: { read: 0, tools: 0, write: 0, edit: 0 },
-    ctx: '', turns: 0, cost: '', model: '', stop: '',
+    stage: 'in_progress',
   },
 ];
 
-/* ── Pipeline helpers ── */
-
-function pipelineStyle(status: DemoCard['pipeline']): string {
-  switch (status) {
-    case 'active': return 'bg-accent/10 text-accent animate-pulse';
-    case 'completed': return 'bg-emerald-500/10 text-emerald-400';
-    case 'failed': return 'bg-error/10 text-error';
-    case 'blocked': return 'bg-error/10 text-error';
-    case 'interrupted': return 'bg-amber-500/10 text-amber-400';
-    default: return '';
-  }
-}
-
-function pipelineLabel(status: DemoCard['pipeline'], rejections: number): string {
-  if (rejections >= 1 && status !== 'idle') return `Retry ${rejections + 1}`;
-  switch (status) {
-    case 'active': return 'Running...';
-    case 'completed': return 'Completed';
-    case 'failed': return 'Failed';
-    case 'blocked': return 'Blocked';
-    case 'interrupted': return 'Interrupted';
-    default: return '';
-  }
-}
-
-/* ── Kind badge ── */
-
-function KindBadge({ kind }: { kind: DemoCard['kind'] }) {
-  if (kind === 'new') return null;
-  const cls = kind === 'improvement'
-    ? 'text-blue-400 bg-blue-400/15'
-    : 'text-amber-400 bg-amber-400/15';
-  return (
-    <span className={`rounded px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide ${cls}`}>
-      {kind}
-    </span>
-  );
-}
-
-/* ── Glass Card ── */
-
-function CardGlass({ card }: { card: DemoCard }) {
-  const hasTools = Object.values(card.tools).some(v => v > 0);
-  const hasPipeline = card.pipeline !== 'idle';
-  const hasStatusRow = card.rejections > 0 || hasPipeline || card.stop;
-  const stripColor = card.blocked
-    ? 'from-error/60 to-error/20'
-    : card.rejections >= 3
-      ? 'from-error/40 to-amber-500/20'
-      : card.pipeline === 'active'
-        ? 'from-accent/60 to-accent/20'
-        : card.pipeline === 'completed'
-          ? 'from-emerald-400/60 to-emerald-400/20'
-          : 'from-edge to-transparent';
-
-  return (
-    <div className="group relative overflow-hidden rounded-2xl bg-surface border border-edge shadow-lg shadow-black/10 backdrop-blur-sm transition-all duration-200 hover:border-content/15 hover:shadow-xl hover:shadow-black/15">
-      <div className={`absolute left-0 top-0 h-full w-1 bg-gradient-to-b ${stripColor}`} />
-      <div className="p-5 pl-6">
-        {/* Header */}
-        <div className="flex items-center gap-2.5">
-          <span className="font-mono text-[12px] text-content-secondary">{card.id}</span>
-          <KindBadge kind={card.kind} />
-          <button className="flex h-6 w-6 items-center justify-center rounded-md bg-white/[0.08] text-content-secondary transition-colors hover:bg-white/15 hover:text-content cursor-pointer">
-            <Copy size={12} strokeWidth={2} />
-          </button>
-          <div className="flex-1" />
-          {card.blocked ? (
-            <span className="flex items-center gap-1.5 rounded-full bg-error/15 px-2.5 py-1 text-[11px] font-bold text-error backdrop-blur">
-              <Lock size={11} strokeWidth={2.5} /> Blocked
-            </span>
-          ) : card.pipeline === 'idle' ? (
-            <button className="flex h-7 w-7 items-center justify-center rounded-full bg-accent/10 text-accent backdrop-blur transition-all hover:bg-accent hover:text-surface hover:shadow-[0_0_12px_-2px_var(--accent)] cursor-pointer">
-              <Play size={12} strokeWidth={2.5} fill="currentColor" />
-            </button>
-          ) : null}
-        </div>
-
-        {/* Name */}
-        <div className="mt-3 text-[15px] font-semibold leading-snug text-content">{card.name}</div>
-
-        {/* Spec disc */}
-        <div className="mt-3.5 flex items-center gap-2.5">
-          <svg width="24" height="24" viewBox="0 0 24 24" className="shrink-0 -rotate-90">
-            <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" strokeWidth="2.5" className="text-white/5" />
-            <circle
-              cx="12" cy="12" r="10" fill="none" strokeWidth="2.5"
-              stroke="url(#specGrad)" strokeLinecap="round"
-              strokeDasharray={`${(card.pct / 100) * 2 * Math.PI * 10} ${2 * Math.PI * 10}`}
-            />
-            <defs>
-              <linearGradient id="specGrad" x1="0" y1="0" x2="1" y2="1">
-                <stop offset="0%" stopColor="var(--completeness-fill)" />
-                <stop offset="100%" stopColor="var(--accent)" stopOpacity="0.6" />
-              </linearGradient>
-            </defs>
-          </svg>
-          <span className="font-mono text-[12px] text-content-secondary">{card.pct}%</span>
-        </div>
-
-        {/* Stats — evenly spaced pills */}
-        {(hasTools || hasStatusRow) && (
-          <div className="mt-3.5 space-y-2">
-            {hasTools && (
-              <div className="flex gap-1.5">
-                {Object.entries(card.tools).filter(([, v]) => v > 0).map(([k, v]) => (
-                  <span key={k} className="flex-1 rounded-full bg-accent/10 py-1 text-center font-mono text-[11px] font-medium text-accent backdrop-blur">
-                    {k.charAt(0).toUpperCase() + k.slice(1)}: {v}
-                  </span>
-                ))}
-              </div>
-            )}
-            {hasTools && (
-              <div className="flex gap-1.5">
-                {[card.ctx && `Ctx ${card.ctx}`, card.turns > 0 && `${card.turns}t`, card.cost, card.model].filter(Boolean).map(t => (
-                  <span key={t as string} className="flex-1 rounded-full bg-white/[0.08] py-1 text-center font-mono text-[11px] text-content backdrop-blur">{t}</span>
-                ))}
-              </div>
-            )}
-            {hasStatusRow && (
-              <div className="flex gap-1.5">
-                {card.rejections > 0 && (
-                  <span className="flex-1 rounded-full bg-amber-400/15 py-1 text-center text-[11px] font-semibold text-amber-400 backdrop-blur">
-                    {card.rejections}x rejected
-                  </span>
-                )}
-                {hasPipeline && (
-                  <span className={`flex-1 inline-flex items-center justify-center gap-1.5 rounded-full py-1 text-[11px] font-semibold backdrop-blur ${pipelineStyle(card.pipeline)}`}>
-                    {card.pipeline === 'active' && <CircleDot size={12} strokeWidth={2.5} />}
-                    {card.pipeline === 'failed' && <AlertTriangle size={12} strokeWidth={2.5} />}
-                    {pipelineLabel(card.pipeline, card.rejections)}
-                  </span>
-                )}
-                {card.stop && (
-                  <span className="flex-1 rounded-full bg-accent-secondary/10 py-1 text-center font-mono text-[11px] text-accent-secondary backdrop-blur">{card.stop}</span>
-                )}
-              </div>
-            )}
-          </div>
-        )}
-
-        {/* Issues */}
-        <button className={[
-          'mt-3.5 w-full rounded-full border py-2 text-center text-[12px] font-mono backdrop-blur transition-all cursor-pointer',
-          card.issues > 0
-            ? 'border-white/10 text-content-secondary hover:border-accent/30 hover:text-accent'
-            : 'border-white/5 text-content-muted/50 hover:border-white/10 hover:text-content-muted',
-        ].join(' ')}>
-          {card.issues > 0 ? `${card.issues} issue${card.issues !== 1 ? 's' : ''} reported` : 'No issues'}
-        </button>
-      </div>
-    </div>
-  );
-}
-
-/* ── Showcase export ── */
+/* ── Component ── */
 
-export function KanbanCardShowcase() {
+export const KanbanCardShowcase = () => {
   return (
     <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
       {DEMO_CARDS.map(c => <CardGlass key={c.id} card={c} />)}
     </div>
   );
-}
+};

package/templates/assistkick-product-system/packages/frontend/src/components/ds/Kbd.tsx

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+}
+
+export const Kbd = ({ children }: Props) => (
+  <kbd className="inline-block px-1.5 py-px text-[11px] font-inherit bg-surface-raised border border-edge rounded text-content">
+    {children}
+  </kbd>
+);

package/templates/assistkick-product-system/packages/frontend/src/components/ds/KindBadge.tsx

@@ -0,0 +1,21 @@
+/* ── Types ── */
+
+interface Props {
+  kind: string;
+}
+
+/* ── Component ── */
+
+export const KindBadge = ({ kind }: Props) => {
+  if (!kind || kind === 'new') return null;
+
+  const cls = kind === 'improvement'
+    ? 'text-blue-400 bg-blue-400/15'
+    : 'text-amber-400 bg-amber-400/15';
+
+  return (
+    <span className={`rounded px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide ${cls}`}>
+      {kind}
+    </span>
+  );
+};