@assistkick/create 1.6.0 → 1.8.0

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

@@ -0,0 +1,270 @@
+import React from 'react';
+import {
+  Play, AlertTriangle, Lock, CircleDot, Copy, Check, ChevronDown,
+} from 'lucide-react';
+import { KindBadge } from './KindBadge';
+
+/* ── Types ── */
+
+export interface KanbanCardProps {
+  id: string;
+  name: string;
+  /** 0–100 */
+  pct: number;
+  kind?: string;
+  rejectionCount: number;
+  blocked: boolean;
+  /** Workflow execution status string */
+  pipeline: string;
+  /** Status badge label (e.g. "Running", "Completed") */
+  pipelineLabel?: 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;
+  onDragStart?: (e: React.DragEvent) => void;
+  onDragEnd?: (e: React.DragEvent) => void;
+}
+
+/* ── Status style helpers ── */
+
+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';
+    default: return 'bg-white/[0.06] text-content-muted';
+  }
+}
+
+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;
+}
+
+/* ── Component ── */
+
+export const KanbanCard = ({
+  id, name, pct, kind, rejectionCount, blocked, pipeline, pipelineLabel: pipLabel,
+  issueCount, issueLabel, showPlay, showPlayDropdown, showStop, showResume, copied,
+  playAllActive, agentName, errorMessage,
+  isEpic,
+  onClick, onCopy, onPlay, onPlayDropdown, onStop, onResume, onUnblock, onIssuesClick, onMonitorClick,
+  draggable, onDragStart, onDragEnd,
+}: KanbanCardProps) => {
+  const hasPipeline = pipeline !== 'idle' && !!pipLabel;
+  const hasStatusRow = rejectionCount > 0 || hasPipeline;
+
+  const stripColor = blocked
+    ? 'from-error/60 to-error/20'
+    : rejectionCount >= 3
+      ? 'from-error/40 to-amber-500/20'
+      : pipeline === 'running'
+        ? 'from-accent/60 to-accent/20'
+        : pipeline === 'completed'
+          ? 'from-emerald-400/60 to-emerald-400/20'
+          : playAllActive
+            ? 'from-accent/60 to-accent/20'
+            : 'from-edge to-transparent';
+
+  const handleCardClick = (e: React.MouseEvent) => {
+    if ((e.target as HTMLElement).closest('button')) return;
+    onClick?.();
+  };
+
+  return (
+    <div
+      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}
+      onClick={handleCardClick}
+      data-feature-id={id}
+    >
+      {/* Left accent strip */}
+      <div className={`absolute left-0 top-0 h-full w-1 bg-gradient-to-b ${stripColor}`} />
+
+      <div className="p-4 pl-5">
+        {/* Header */}
+        <div className="flex items-center gap-2">
+          <span className="font-mono text-[12px] text-content-secondary">{id}</span>
+          <KindBadge kind={kind || 'new'} />
+          <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"
+            title="Copy feature ID and name"
+            onClick={(e) => { e.stopPropagation(); onCopy?.(); }}
+          >
+            {copied ? <Check size={12} strokeWidth={2.5} className="text-emerald-400" /> : <Copy size={12} strokeWidth={2} />}
+          </button>
+          <div className="flex-1" />
+          {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>
+          ) : showStop ? (
+            <button
+              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?.(); }}
+            >
+              {'\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 workflow from last completed step"
+              onClick={(e) => { e.stopPropagation(); onResume?.(); }}
+            >
+              <Play size={12} strokeWidth={2.5} fill="currentColor" />
+            </button>
+          ) : null}
+        </div>
+
+        {/* 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">
+            <circle cx="11" cy="11" r="9" fill="none" stroke="currentColor" strokeWidth="2.5" className="text-white/5" />
+            <circle
+              cx="11" cy="11" r="9" fill="none" strokeWidth="2.5"
+              stroke="url(#specGrad)" strokeLinecap="round"
+              strokeDasharray={`${(pct / 100) * 2 * Math.PI * 9} ${2 * Math.PI * 9}`}
+            />
+            <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-[11px] text-content-secondary">{pct}%</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>
+        )}
+
+        {/* Unblock */}
+        {blocked && (
+          <button
+            className="mt-3 w-full rounded-full border border-error/30 py-1.5 text-center text-[11px] font-mono text-error backdrop-blur transition-all hover:bg-error/10 cursor-pointer"
+            onClick={(e) => { e.stopPropagation(); onUnblock?.(); }}
+          >
+            Unblock
+          </button>
+        )}
+
+        {/* Issues */}
+        <button
+          className={[
+            'mt-3 w-full rounded-full border py-1.5 text-center text-[11px] font-mono backdrop-blur transition-all cursor-pointer',
+            issueCount > 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(' ')}
+          onClick={(e) => { e.stopPropagation(); onIssuesClick?.(); }}
+        >
+          {issueLabel}
+        </button>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,37 @@
+import { CardGlass } from './CardGlass';
+import type { DemoCard } from './CardGlass';
+
+/* ── Demo data ── */
+
+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',
+  },
+  {
+    id: 'feat_a3c71b02', name: 'Auth Flow Redesign', pct: 72, kind: 'improvement',
+    rejections: 0, pipeline: 'active', blocked: false, issues: 0,
+    stage: 'in_progress',
+  },
+  {
+    id: 'feat_9e45f1d8', name: 'WebSocket Events', pct: 45, kind: 'new',
+    rejections: 3, pipeline: 'failed', blocked: false, issues: 3,
+    stage: 'qa',
+  },
+  {
+    id: 'feat_b7d20cc4', name: 'Rate Limiter Middleware', pct: 88, kind: 'bugfix',
+    rejections: 0, pipeline: 'idle', blocked: true, issues: 0,
+    stage: 'in_progress',
+  },
+];
+
+/* ── Component ── */
+
+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>
+  );
+};

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

@@ -0,0 +1,207 @@
+import React, { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { Search } from 'lucide-react';
+
+export interface NavItem {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  description?: string;
+  href?: string;
+}
+
+export interface NavBarSidekickProps {
+  /** Navigation items shown in the segmented control */
+  items: NavItem[];
+  /** Currently active item id — controlled externally */
+  activeId?: string;
+  /** Called when a nav item is selected */
+  onNavigate?: (id: string) => void;
+  /** Left-side brand / project slot */
+  brand?: React.ReactNode;
+  /** Content between the segmented control and the right-side actions */
+  center?: React.ReactNode;
+  /** Right-side actions rendered before the search trigger */
+  actions?: React.ReactNode;
+  /** Far-right trailing element (avatar, etc.) */
+  trailing?: React.ReactNode;
+}
+
+export const NavBarSidekick = ({
+  items, activeId, onNavigate, brand, center, actions, trailing,
+}: NavBarSidekickProps) => {
+  const navigate = useNavigate();
+
+  // Fallback to internal state when no external activeId is provided (design system demo mode)
+  const [internalActive, setInternalActive] = useState(items[0]?.id ?? '');
+  const active = activeId ?? internalActive;
+
+  const [cmdOpen, setCmdOpen] = useState(false);
+  const [cmdQuery, setCmdQuery] = useState('');
+
+  const filteredItems = cmdQuery
+    ? items.filter((i) =>
+        i.label.toLowerCase().includes(cmdQuery.toLowerCase()) ||
+        (i.description?.toLowerCase().includes(cmdQuery.toLowerCase()) ?? false))
+    : items;
+
+  const handleSelect = (id: string) => {
+    if (onNavigate) {
+      onNavigate(id);
+    } else {
+      setInternalActive(id);
+    }
+  };
+
+  return (
+    <nav className="bg-surface-alt">
+      {/* Top bar */}
+      <div className="flex items-center gap-3 px-5 py-2">
+        {brand && <div className="mr-1 shrink-0">{brand}</div>}
+
+        {/* Segmented control */}
+        <div className="flex items-center rounded-xl bg-surface p-1 border border-edge">
+          {items.map((item) => {
+            const isActive = active === item.id;
+            const classes = [
+              'flex items-center gap-1.5 rounded-lg px-3.5 py-1.5',
+              'text-[12px] font-semibold uppercase tracking-wider',
+              'transition-all duration-150 cursor-pointer outline-none no-underline',
+              isActive
+                ? 'bg-accent text-surface shadow-sm'
+                : 'text-content-muted hover:text-content hover:bg-surface-raised',
+            ].join(' ');
+            const style = isActive ? { boxShadow: '0 2px 8px -2px var(--accent)' } : {};
+            const children = (
+              <>
+                {item.icon && <span className="flex items-center">{item.icon}</span>}
+                {item.label}
+              </>
+            );
+
+            return item.href ? (
+              <Link
+                key={item.id}
+                to={item.href}
+                className={classes}
+                style={style}
+              >
+                {children}
+              </Link>
+            ) : (
+              <button
+                key={item.id}
+                onClick={() => handleSelect(item.id)}
+                className={classes}
+                style={style}
+              >
+                {children}
+              </button>
+            );
+          })}
+        </div>
+
+        <div className="flex-1">
+          {center}
+        </div>
+
+        {/* Actions slot */}
+        {actions}
+
+        {/* Command palette trigger */}
+        <button
+          data-cmd-trigger
+          onClick={() => { setCmdOpen(!cmdOpen); setCmdQuery(''); }}
+          className={[
+            'flex items-center gap-2 rounded-lg border px-3 py-1.5',
+            'text-[12px] transition-all duration-150 cursor-pointer outline-none',
+            cmdOpen
+              ? 'border-accent/40 bg-surface text-content'
+              : 'border-edge text-content-muted hover:border-content/20 hover:text-content-secondary',
+          ].join(' ')}
+        >
+          <Search size={13} strokeWidth={2} />
+          <span className="hidden sm:inline">Search</span>
+          <kbd className="hidden sm:inline-flex items-center rounded border border-edge bg-surface-raised px-1.5 py-0.5 text-[10px] font-mono text-content-muted">
+            /
+          </kbd>
+        </button>
+
+        {trailing && <div className="ml-1 shrink-0">{trailing}</div>}
+      </div>
+
+      {/* Command palette dropdown */}
+      {cmdOpen && (
+        <div className="border-t border-edge bg-surface px-5 py-3">
+          <input
+            autoFocus
+            value={cmdQuery}
+            onChange={(e) => setCmdQuery(e.target.value)}
+            placeholder="Type to search pages..."
+            className="w-full bg-transparent text-[13px] text-content outline-none placeholder:text-content-muted"
+            onKeyDown={(e) => {
+              if (e.key === 'Escape') { setCmdOpen(false); setCmdQuery(''); }
+              if (e.key === 'Enter' && filteredItems.length > 0) {
+                const first = filteredItems[0];
+                if (first.href) {
+                  navigate(first.href);
+                } else {
+                  handleSelect(first.id);
+                }
+                setCmdOpen(false);
+                setCmdQuery('');
+              }
+            }}
+          />
+          {cmdQuery && (
+            <div className="mt-2 flex flex-col gap-1">
+              {filteredItems.length === 0 ? (
+                <div className="py-2 text-[12px] text-content-muted">No results</div>
+              ) : (
+                filteredItems.map((item) => {
+                  const cmdClasses = [
+                    'flex items-center gap-3 rounded-lg px-3 py-2 text-left no-underline',
+                    'text-[13px] transition-colors duration-100 cursor-pointer outline-none',
+                    active === item.id
+                      ? 'bg-accent/10 text-accent'
+                      : 'text-content-secondary hover:bg-surface-raised hover:text-content',
+                  ].join(' ');
+                  const cmdChildren = (
+                    <>
+                      {item.icon && <span className="flex items-center">{item.icon}</span>}
+                      <div>
+                        <div className="font-medium">{item.label}</div>
+                        {item.description && (
+                          <div className="text-[11px] text-content-muted">{item.description}</div>
+                        )}
+                      </div>
+                    </>
+                  );
+
+                  return item.href ? (
+                    <Link
+                      key={item.id}
+                      to={item.href}
+                      onClick={() => { setCmdOpen(false); setCmdQuery(''); }}
+                      className={cmdClasses}
+                    >
+                      {cmdChildren}
+                    </Link>
+                  ) : (
+                    <button
+                      key={item.id}
+                      onClick={() => { handleSelect(item.id); setCmdOpen(false); setCmdQuery(''); }}
+                      className={cmdClasses}
+                    >
+                      {cmdChildren}
+                    </button>
+                  );
+                })
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </nav>
+  );
+};