@atercates/claude-deck 0.2.1

package/components/WorkerCard.tsx

@@ -0,0 +1,245 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "./ui/button";
+import { cn } from "@/lib/utils";
+import {
+  Circle,
+  Loader2,
+  AlertCircle,
+  CheckCircle,
+  XCircle,
+  Eye,
+  Send,
+  X,
+  ChevronDown,
+  ChevronRight,
+  GitBranch,
+} from "lucide-react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
+
+export type WorkerStatus =
+  | "pending"
+  | "running"
+  | "waiting"
+  | "idle"
+  | "completed"
+  | "failed"
+  | "dead";
+
+export interface WorkerInfo {
+  id: string;
+  name: string;
+  task: string;
+  status: WorkerStatus;
+  worktreePath: string | null;
+  branchName: string | null;
+  createdAt: string;
+}
+
+interface WorkerCardProps {
+  worker: WorkerInfo;
+  isExpanded?: boolean;
+  output?: string;
+  onToggleExpand?: () => void;
+  onViewOutput?: () => void;
+  onSendMessage?: (message: string) => void;
+  onKill?: () => void;
+  onAttach?: () => void;
+}
+
+const statusConfig: Record<
+  WorkerStatus,
+  { icon: typeof Circle; color: string; label: string }
+> = {
+  pending: { icon: Circle, color: "text-muted-foreground", label: "Pending" },
+  running: { icon: Loader2, color: "text-green-500", label: "Running" },
+  waiting: { icon: AlertCircle, color: "text-yellow-500", label: "Waiting" },
+  idle: { icon: Circle, color: "text-muted-foreground", label: "Idle" },
+  completed: { icon: CheckCircle, color: "text-green-500", label: "Completed" },
+  failed: { icon: XCircle, color: "text-red-500", label: "Failed" },
+  dead: { icon: XCircle, color: "text-red-500", label: "Dead" },
+};
+
+export function WorkerCard({
+  worker,
+  isExpanded = false,
+  output,
+  onToggleExpand,
+  onViewOutput,
+  onSendMessage,
+  onKill,
+  onAttach,
+}: WorkerCardProps) {
+  const [message, setMessage] = useState("");
+  const [showSendInput, setShowSendInput] = useState(false);
+
+  const config = statusConfig[worker.status];
+  const StatusIcon = config.icon;
+  const isActive = worker.status === "running" || worker.status === "waiting";
+
+  const handleSend = () => {
+    if (message.trim() && onSendMessage) {
+      onSendMessage(message.trim());
+      setMessage("");
+      setShowSendInput(false);
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        "bg-card rounded-lg border transition-colors",
+        isActive && "border-primary/30",
+        worker.status === "completed" && "border-green-500/30 bg-green-500/5",
+        worker.status === "failed" && "border-red-500/30 bg-red-500/5"
+      )}
+    >
+      {/* Header */}
+      <div
+        className="hover:bg-accent/30 flex cursor-pointer items-center gap-2 p-3"
+        onClick={onToggleExpand}
+      >
+        <button className="p-0.5">
+          {isExpanded ? (
+            <ChevronDown className="text-muted-foreground h-3 w-3" />
+          ) : (
+            <ChevronRight className="text-muted-foreground h-3 w-3" />
+          )}
+        </button>
+
+        <StatusIcon
+          className={cn(
+            "h-4 w-4 flex-shrink-0",
+            config.color,
+            worker.status === "running" && "animate-spin"
+          )}
+        />
+
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2">
+            <span className="truncate text-sm font-medium">{worker.name}</span>
+            <span
+              className={cn(
+                "rounded px-1.5 py-0.5 text-xs",
+                config.color,
+                "bg-current/10"
+              )}
+            >
+              {config.label}
+            </span>
+          </div>
+          {worker.branchName && (
+            <div className="text-muted-foreground mt-0.5 flex items-center gap-1 text-xs">
+              <GitBranch className="h-3 w-3" />
+              <span className="truncate">{worker.branchName}</span>
+            </div>
+          )}
+        </div>
+
+        {/* Quick actions */}
+        <div className="flex gap-1" onClick={(e) => e.stopPropagation()}>
+          {isActive && onAttach && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="ghost" size="icon-sm" onClick={onAttach}>
+                  <Eye className="h-3 w-3" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Attach to terminal</TooltipContent>
+            </Tooltip>
+          )}
+          {isActive && onKill && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  onClick={onKill}
+                  className="text-red-500 hover:text-red-400"
+                >
+                  <X className="h-3 w-3" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Kill worker</TooltipContent>
+            </Tooltip>
+          )}
+        </div>
+      </div>
+
+      {/* Expanded content */}
+      {isExpanded && (
+        <div className="border-border/50 space-y-2 border-t px-3 pb-3">
+          {/* Task */}
+          <div className="pt-2">
+            <div className="text-muted-foreground mb-1 text-xs">Task:</div>
+            <div className="bg-muted/30 rounded p-2 font-mono text-sm text-xs">
+              {worker.task}
+            </div>
+          </div>
+
+          {/* Output preview */}
+          {output && (
+            <div>
+              <div className="text-muted-foreground mb-1 text-xs">
+                Recent output:
+              </div>
+              <pre className="bg-muted/30 max-h-32 overflow-x-auto overflow-y-auto rounded p-2 font-mono text-xs whitespace-pre-wrap">
+                {output.slice(-500)}
+              </pre>
+            </div>
+          )}
+
+          {/* Actions */}
+          <div className="flex gap-2 pt-1">
+            {onViewOutput && (
+              <Button variant="outline" size="sm" onClick={onViewOutput}>
+                <Eye className="mr-1 h-3 w-3" />
+                Full output
+              </Button>
+            )}
+
+            {isActive && onSendMessage && !showSendInput && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setShowSendInput(true)}
+              >
+                <Send className="mr-1 h-3 w-3" />
+                Send input
+              </Button>
+            )}
+          </div>
+
+          {/* Send input form */}
+          {showSendInput && (
+            <div className="flex gap-2">
+              <input
+                type="text"
+                value={message}
+                onChange={(e) => setMessage(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") handleSend();
+                  if (e.key === "Escape") setShowSendInput(false);
+                }}
+                placeholder="Type message..."
+                className="bg-muted/50 focus:bg-muted focus:ring-primary/50 flex-1 rounded px-2 py-1 text-sm focus:ring-1 focus:outline-none"
+                autoFocus
+              />
+              <Button size="sm" onClick={handleSend}>
+                Send
+              </Button>
+              <Button
+                size="sm"
+                variant="ghost"
+                onClick={() => setShowSendInput(false)}
+              >
+                Cancel
+              </Button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/components/a/ABadge.tsx

@@ -0,0 +1,115 @@
+/**
+ * ABadge - Standard badge component for the design system
+ *
+ * A consistent badge for labels, statuses, and feature indicators.
+ *
+ * @example
+ * ```tsx
+ * // Simple badge
+ * <ABadge>Default</ABadge>
+ *
+ * // New feature indicator
+ * <ABadge variant="new">New</ABadge>
+ *
+ * // Beta indicator
+ * <ABadge variant="beta">Beta</ABadge>
+ *
+ * // Small size
+ * <ABadge size="sm" variant="new">New</ABadge>
+ * ```
+ */
+
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+export type ABadgeSize = "sm" | "md";
+export type ABadgeVariant =
+  | "default"
+  | "secondary"
+  | "destructive"
+  | "outline"
+  | "new"
+  | "beta"
+  | "pro"
+  | "waiting"
+  | "running"
+  | "idle";
+
+export interface ABadgeProps {
+  /** Badge content */
+  children: React.ReactNode;
+  /** Badge style variant */
+  variant?: ABadgeVariant;
+  /** Badge size */
+  size?: ABadgeSize;
+  /** Additional className */
+  className?: string;
+}
+
+const SIZE_CLASSES: Record<ABadgeSize, string> = {
+  sm: "h-4 px-1.5 py-0 text-[10px] leading-none",
+  md: "h-5 px-2 py-0 text-xs leading-none",
+};
+
+const VARIANT_CLASSES: Record<ABadgeVariant, string> = {
+  default: "",
+  secondary: "",
+  destructive: "",
+  outline: "",
+  new: "border-transparent bg-emerald-500/15 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-400",
+  beta: "border-transparent bg-amber-500/15 text-amber-600 dark:bg-amber-500/20 dark:text-amber-400",
+  pro: "border-transparent bg-violet-500/15 text-violet-600 dark:bg-violet-500/20 dark:text-violet-400",
+  waiting:
+    "border-transparent bg-yellow-500/15 text-yellow-600 dark:bg-yellow-500/20 dark:text-yellow-400",
+  running:
+    "border-transparent bg-green-500/15 text-green-600 dark:bg-green-500/20 dark:text-green-400",
+  idle: "border-transparent bg-gray-500/15 text-gray-600 dark:bg-gray-500/20 dark:text-gray-400",
+};
+
+const BASE_VARIANT_MAP: Record<
+  ABadgeVariant,
+  "default" | "secondary" | "destructive" | "outline"
+> = {
+  default: "default",
+  secondary: "secondary",
+  destructive: "destructive",
+  outline: "outline",
+  new: "secondary",
+  beta: "secondary",
+  pro: "secondary",
+  waiting: "secondary",
+  running: "secondary",
+  idle: "secondary",
+};
+
+export function ABadge({
+  children,
+  variant = "default",
+  size = "md",
+  className,
+}: ABadgeProps) {
+  const isCustomVariant = [
+    "new",
+    "beta",
+    "pro",
+    "waiting",
+    "running",
+    "idle",
+  ].includes(variant);
+
+  return (
+    <Badge
+      variant={BASE_VARIANT_MAP[variant]}
+      className={cn(
+        "flex items-center justify-center font-medium",
+        SIZE_CLASSES[size],
+        isCustomVariant && VARIANT_CLASSES[variant],
+        className
+      )}
+    >
+      {children}
+    </Badge>
+  );
+}

package/components/a/AButton.tsx

@@ -0,0 +1,163 @@
+/**
+ * AButton - Standard button component for the design system
+ *
+ * A consistent button with optional tooltip, loading state, and icon support.
+ *
+ * @example
+ * ```tsx
+ * // Simple button
+ * <AButton onClick={handleClick}>Save</AButton>
+ *
+ * // With icon
+ * <AButton icon={Plus} onClick={handleClick}>Add item</AButton>
+ *
+ * // With tooltip
+ * <AButton tooltip="Save changes" onClick={handleClick}>Save</AButton>
+ *
+ * // Loading state
+ * <AButton loading onClick={handleClick}>Saving...</AButton>
+ *
+ * // Ghost variant (no background/border)
+ * <AButton variant="ghost" onClick={handleClick}>Cancel</AButton>
+ * ```
+ */
+
+"use client";
+
+import { forwardRef } from "react";
+import type { LucideIcon } from "lucide-react";
+import { Loader2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { ATooltip } from "@/components/a/ATooltip";
+import { cn } from "@/lib/utils";
+
+export type AButtonSize = "sm" | "md" | "lg";
+export type AButtonVariant =
+  | "default"
+  | "ghost"
+  | "outline"
+  | "secondary"
+  | "destructive"
+  | "link";
+
+export interface AButtonProps extends Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  "children"
+> {
+  /** Button content */
+  children?: React.ReactNode;
+  /** Optional Lucide icon component (shown before text) */
+  icon?: LucideIcon;
+  /** Optional icon shown after text */
+  iconRight?: LucideIcon;
+  /** Optional tooltip text */
+  tooltip?: string;
+  /** Optional keyboard shortcut hint for tooltip */
+  shortcut?: string;
+  /** Tooltip position */
+  tooltipSide?: "top" | "right" | "bottom" | "left";
+  /** Loading state - shows spinner and disables button */
+  loading?: boolean;
+  /** Button size variant */
+  size?: AButtonSize;
+  /** Button style variant */
+  variant?: AButtonVariant;
+  /** Make the button take full width */
+  fullWidth?: boolean;
+  /** Additional className for the icon */
+  iconClassName?: string;
+  /** Additional className */
+  className?: string;
+}
+
+const SIZE_CLASSES: Record<AButtonSize, { button: string; icon: string }> = {
+  sm: { button: "h-7 px-2 text-xs", icon: "h-3.5 w-3.5" },
+  md: { button: "h-8 px-3 text-sm", icon: "h-4 w-4" },
+  lg: { button: "h-10 px-4 text-base", icon: "h-5 w-5" },
+};
+
+const VARIANT_MAP: Record<
+  AButtonVariant,
+  "default" | "ghost" | "outline" | "secondary" | "destructive" | "link"
+> = {
+  default: "default",
+  ghost: "ghost",
+  outline: "outline",
+  secondary: "secondary",
+  destructive: "destructive",
+  link: "link",
+};
+
+export const AButton = forwardRef<HTMLButtonElement, AButtonProps>(
+  (
+    {
+      children,
+      icon: Icon,
+      iconRight: IconRight,
+      tooltip,
+      shortcut,
+      tooltipSide = "bottom",
+      loading = false,
+      size = "md",
+      variant = "default",
+      fullWidth = false,
+      iconClassName,
+      className,
+      disabled,
+      ...props
+    },
+    ref
+  ) => {
+    const sizeClasses = SIZE_CLASSES[size];
+    const isDisabled = disabled || loading;
+
+    const button = (
+      <Button
+        ref={ref}
+        variant={VARIANT_MAP[variant]}
+        disabled={isDisabled}
+        className={cn(
+          sizeClasses.button,
+          fullWidth && "w-full",
+          variant === "ghost" &&
+            "border-0 shadow-none ring-0 focus:ring-0 focus-visible:ring-0",
+          className
+        )}
+        {...props}
+      >
+        {loading ? (
+          <Loader2 className={cn(sizeClasses.icon, "mr-2 animate-spin")} />
+        ) : Icon ? (
+          <Icon
+            className={cn(sizeClasses.icon, children && "mr-2", iconClassName)}
+          />
+        ) : null}
+
+        {children}
+
+        {IconRight && !loading && (
+          <IconRight
+            className={cn(sizeClasses.icon, children && "ml-2", iconClassName)}
+          />
+        )}
+      </Button>
+    );
+
+    if (tooltip) {
+      return (
+        <ATooltip
+          content={tooltip}
+          shortcut={shortcut}
+          side={tooltipSide}
+          disabled={isDisabled}
+        >
+          {button}
+        </ATooltip>
+      );
+    }
+
+    return button;
+  }
+);
+
+AButton.displayName = "AButton";

package/components/a/ADialog.tsx

@@ -0,0 +1,93 @@
+/**
+ * ADialog - Reusable dialog component for the design system
+ *
+ * A modal dialog with optional icon, header, scrollable content, and footer.
+ *
+ * @example
+ * ```tsx
+ * <ADialog
+ *   open={isOpen}
+ *   onOpenChange={setIsOpen}
+ *   title="Settings"
+ *   description="Manage your preferences"
+ *   icon={<Settings />}
+ *   footer={<Button>Save</Button>}
+ * >
+ *   <SettingsContent />
+ * </ADialog>
+ * ```
+ */
+
+"use client";
+
+import { ReactNode } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+
+export interface ADialogProps {
+  /** Controlled open state */
+  open: boolean;
+  /** Callback when open state changes */
+  onOpenChange: (open: boolean) => void;
+  /** Dialog title */
+  title: string;
+  /** Optional description below the title */
+  description?: string;
+  /** Optional icon to show next to title */
+  icon?: ReactNode;
+  /** Main content */
+  children: ReactNode;
+  /** Optional footer content (typically action buttons) */
+  footer?: ReactNode;
+  /** Maximum width class (default: "sm:max-w-lg") */
+  maxWidth?: string;
+  /** Additional className for the dialog content */
+  className?: string;
+  /** Additional className for the content container */
+  contentClassName?: string;
+}
+
+export function ADialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  icon,
+  children,
+  footer,
+  maxWidth = "sm:max-w-lg",
+  className,
+  contentClassName,
+}: ADialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className={cn(maxWidth, className)}>
+        <DialogHeader>
+          <div className="flex items-center gap-2">
+            {icon && (
+              <span className="text-foreground [&>svg]:h-5 [&>svg]:w-5">
+                {icon}
+              </span>
+            )}
+            <DialogTitle>{title}</DialogTitle>
+          </div>
+          {description && <DialogDescription>{description}</DialogDescription>}
+        </DialogHeader>
+
+        <div className={cn("py-4", contentClassName)}>{children}</div>
+
+        {footer && (
+          <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+            {footer}
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}