@atercates/claude-deck 0.2.1

package/components/MessageInput.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { Button } from "./ui/button";
+import { Send, Square } from "lucide-react";
+
+interface MessageInputProps {
+  onSend: (message: string) => void;
+  onCancel?: () => void;
+  disabled?: boolean;
+  placeholder?: string;
+}
+
+export function MessageInput({
+  onSend,
+  onCancel,
+  disabled,
+  placeholder = "Send a message...",
+}: MessageInputProps) {
+  const [text, setText] = useState("");
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Auto-resize textarea
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = "auto";
+      textarea.style.height = Math.min(textarea.scrollHeight, 200) + "px";
+    }
+  }, [text]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (text.trim() && !disabled) {
+      onSend(text.trim());
+      setText("");
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit(e);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="border-border border-t p-4">
+      <div className="flex items-end gap-2">
+        <textarea
+          ref={textareaRef}
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          disabled={disabled}
+          rows={1}
+          className="bg-muted border-input placeholder:text-muted-foreground focus:ring-ring flex-1 resize-none rounded-lg border px-3 py-2 text-sm focus:ring-1 focus:outline-none disabled:opacity-50"
+        />
+
+        {disabled && onCancel ? (
+          <Button
+            type="button"
+            variant="destructive"
+            size="icon"
+            onClick={onCancel}
+          >
+            <Square className="h-4 w-4" />
+          </Button>
+        ) : (
+          <Button type="submit" disabled={!text.trim() || disabled}>
+            <Send className="h-4 w-4" />
+          </Button>
+        )}
+      </div>
+
+      <p className="text-muted-foreground mt-2 text-xs">
+        Press Enter to send, Shift+Enter for new line
+      </p>
+    </form>
+  );
+}

package/components/NewClaudeSessionDialog.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Sparkles } from "lucide-react";
+import type { ClaudeProject } from "@/data/claude";
+
+const ADJECTIVES = [
+  "swift",
+  "bright",
+  "calm",
+  "bold",
+  "keen",
+  "vivid",
+  "crisp",
+  "warm",
+  "cool",
+  "sharp",
+];
+const NOUNS = [
+  "falcon",
+  "river",
+  "prism",
+  "cedar",
+  "spark",
+  "orbit",
+  "ridge",
+  "frost",
+  "coral",
+  "flint",
+];
+
+function generateName() {
+  const adj = ADJECTIVES[Math.floor(Math.random() * ADJECTIVES.length)];
+  const noun = NOUNS[Math.floor(Math.random() * NOUNS.length)];
+  return `${adj}-${noun}`;
+}
+
+interface NewClaudeSessionDialogProps {
+  open: boolean;
+  projectName: string;
+  projects?: ClaudeProject[];
+  onClose: () => void;
+  onConfirm: (name: string, cwd?: string, projectName?: string) => void;
+}
+
+export function NewClaudeSessionDialog({
+  open,
+  projectName,
+  projects,
+  onClose,
+  onConfirm,
+}: NewClaudeSessionDialogProps) {
+  const [name, setName] = useState("");
+  const [selectedProject, setSelectedProject] = useState(projectName);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (open) {
+      setName(generateName());
+      setSelectedProject(projectName);
+      setTimeout(() => {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+      }, 50);
+    }
+  }, [open, projectName]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const project = projects?.find((p) => p.name === selectedProject);
+    onConfirm(
+      name.trim() || generateName(),
+      project?.directory || undefined,
+      selectedProject || undefined
+    );
+  };
+
+  const showProjectSelector = projects && projects.length > 0 && !projectName;
+
+  return (
+    <Dialog open={open} onOpenChange={(o) => !o && onClose()}>
+      <DialogContent className="sm:max-w-sm">
+        <DialogHeader>
+          <DialogTitle className="text-base">New session</DialogTitle>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {showProjectSelector ? (
+            <div>
+              <label className="text-muted-foreground mb-2 block text-xs">
+                Project
+              </label>
+              <Select
+                value={selectedProject}
+                onValueChange={setSelectedProject}
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="Select a project" />
+                </SelectTrigger>
+                <SelectContent>
+                  {projects
+                    .filter((p) => !p.hidden && p.sessionCount > 0)
+                    .map((p) => (
+                      <SelectItem key={p.name} value={p.name}>
+                        {p.displayName}
+                      </SelectItem>
+                    ))}
+                </SelectContent>
+              </Select>
+            </div>
+          ) : (
+            projectName && (
+              <p className="text-muted-foreground text-xs">{projectName}</p>
+            )
+          )}
+          <div>
+            <div className="flex gap-2">
+              <Input
+                ref={inputRef}
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="Session name"
+                className="h-9"
+              />
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon-sm"
+                className="h-9 w-9 shrink-0"
+                onClick={() => setName(generateName())}
+              >
+                <Sparkles className="h-3.5 w-3.5" />
+              </Button>
+            </div>
+          </div>
+          <div className="flex justify-end gap-2">
+            <Button type="button" variant="ghost" size="sm" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              size="sm"
+              disabled={showProjectSelector && !selectedProject}
+            >
+              Create
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/components/NewSessionDialog/AdvancedSettings.tsx

@@ -0,0 +1,78 @@
+import { ChevronRight } from "lucide-react";
+import type { AgentType } from "@/lib/providers";
+import { getProviderDefinition } from "@/lib/providers";
+
+interface AdvancedSettingsProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  agentType: AgentType;
+  useTmux: boolean;
+  onUseTmuxChange: (checked: boolean) => void;
+  skipPermissions: boolean;
+  onSkipPermissionsChange: (checked: boolean) => void;
+}
+
+export function AdvancedSettings({
+  open,
+  onOpenChange,
+  agentType,
+  useTmux,
+  onUseTmuxChange,
+  skipPermissions,
+  onSkipPermissionsChange,
+}: AdvancedSettingsProps) {
+  const provider = getProviderDefinition(agentType);
+  const supportsAutoApprove = Boolean(provider.autoApproveFlag);
+
+  return (
+    <div className="border-border rounded-lg border">
+      <button
+        type="button"
+        onClick={() => onOpenChange(!open)}
+        className="text-muted-foreground hover:text-foreground flex w-full items-center gap-2 px-3 py-2 text-sm transition-colors"
+      >
+        <ChevronRight
+          className={`h-4 w-4 transition-transform ${open ? "rotate-90" : ""}`}
+        />
+        Advanced Settings
+      </button>
+      {open && (
+        <div className="space-y-3 border-t px-3 py-3">
+          <div className="flex items-center gap-2">
+            <input
+              type="checkbox"
+              id="useTmux"
+              checked={useTmux}
+              onChange={(e) => onUseTmuxChange(e.target.checked)}
+              className="border-border bg-background accent-primary h-4 w-4 rounded"
+            />
+            <label htmlFor="useTmux" className="cursor-pointer text-sm">
+              Use tmux session
+              <span className="text-muted-foreground ml-1">
+                (enables detach/attach)
+              </span>
+            </label>
+          </div>
+          <div className="flex items-center gap-2">
+            <input
+              type="checkbox"
+              id="skipPermissions"
+              checked={skipPermissions}
+              disabled={!supportsAutoApprove}
+              onChange={(e) => onSkipPermissionsChange(e.target.checked)}
+              className="border-border bg-background accent-primary h-4 w-4 rounded disabled:cursor-not-allowed disabled:opacity-50"
+            />
+            <label htmlFor="skipPermissions" className="cursor-pointer text-sm">
+              Auto-approve tool calls
+              <span className="text-muted-foreground ml-1">
+                {supportsAutoApprove
+                  ? `(${provider.autoApproveFlag})`
+                  : "(not supported)"}
+              </span>
+            </label>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/components/NewSessionDialog/AgentSelector.tsx

@@ -0,0 +1,37 @@
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import type { AgentType } from "@/lib/providers";
+import { AGENT_OPTIONS } from "./NewSessionDialog.types";
+
+interface AgentSelectorProps {
+  value: AgentType;
+  onChange: (value: AgentType) => void;
+}
+
+export function AgentSelector({ value, onChange }: AgentSelectorProps) {
+  return (
+    <div className="space-y-2">
+      <label className="text-sm font-medium">Agent</label>
+      <Select value={value} onValueChange={(v) => onChange(v as AgentType)}>
+        <SelectTrigger>
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {AGENT_OPTIONS.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              <span className="font-medium">{option.label}</span>
+              <span className="text-muted-foreground ml-2 text-xs">
+                {option.description}
+              </span>
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}

package/components/NewSessionDialog/CreatingOverlay.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import type { LucideIcon } from "lucide-react";
+import { Loader2, GitBranch, Package, FileCode, Check } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export interface StepConfig {
+  id: string;
+  label: string;
+  icon: LucideIcon;
+}
+
+interface CreatingOverlayProps {
+  isWorktree: boolean;
+  step: string;
+  /** Override default steps and hint text */
+  steps?: StepConfig[];
+  hint?: string;
+}
+
+const worktreeSteps: StepConfig[] = [
+  { id: "worktree", label: "Creating worktree", icon: GitBranch },
+  { id: "setup", label: "Setting up environment", icon: Package },
+  { id: "done", label: "Finalizing", icon: FileCode },
+];
+
+export function CreatingOverlay({
+  isWorktree,
+  step,
+  steps,
+  hint,
+}: CreatingOverlayProps) {
+  const baseClasses =
+    "fixed inset-0 z-[60] flex flex-col items-center justify-center gap-3 bg-background/95 backdrop-blur-sm";
+
+  const resolvedSteps = steps ?? (isWorktree ? worktreeSteps : null);
+
+  if (!resolvedSteps) {
+    return (
+      <div className={baseClasses}>
+        <Loader2 className="text-primary h-8 w-8 animate-spin" />
+        <p className="text-sm font-medium">Creating session...</p>
+      </div>
+    );
+  }
+
+  const currentIndex = resolvedSteps.findIndex((s) => s.id === step);
+
+  return (
+    <div className={cn(baseClasses, "gap-6")}>
+      <Loader2 className="text-primary h-8 w-8 animate-spin" />
+      <div className="space-y-3">
+        {resolvedSteps.map((s, index) => {
+          const Icon = s.icon;
+          const isComplete = index < currentIndex;
+          const isCurrent = index === currentIndex;
+
+          return (
+            <div
+              key={s.id}
+              className={cn(
+                "flex items-center gap-3 text-sm transition-colors",
+                isComplete && "text-muted-foreground",
+                isCurrent && "text-foreground font-medium",
+                !isComplete && !isCurrent && "text-muted-foreground/50"
+              )}
+            >
+              <div
+                className={cn(
+                  "flex h-6 w-6 items-center justify-center rounded-full",
+                  isComplete && "bg-primary/20 text-primary",
+                  isCurrent && "bg-primary text-primary-foreground",
+                  !isComplete && !isCurrent && "bg-muted"
+                )}
+              >
+                {isComplete ? (
+                  <Check className="h-3.5 w-3.5" />
+                ) : isCurrent ? (
+                  <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                ) : (
+                  <Icon className="h-3.5 w-3.5" />
+                )}
+              </div>
+              <span>{s.label}</span>
+            </div>
+          );
+        })}
+      </div>
+      <p className="text-muted-foreground text-xs">
+        {hint ?? "This may take a minute for large codebases"}
+      </p>
+    </div>
+  );
+}

package/components/NewSessionDialog/NewSessionDialog.types.ts

@@ -0,0 +1,136 @@
+import type { AgentType } from "@/lib/providers";
+import type { ProjectWithDevServers } from "@/lib/projects";
+
+// LocalStorage keys
+export const SKIP_PERMISSIONS_KEY = "agentOS:skipPermissions";
+export const AGENT_TYPE_KEY = "agentOS:defaultAgentType";
+export const RECENT_DIRS_KEY = "agentOS:recentDirectories";
+export const USE_TMUX_KEY = "agentOS:useTmux";
+export const MAX_RECENT_DIRS = 5;
+
+// Random feature name generator
+const ADJECTIVES = [
+  "swift",
+  "blue",
+  "bright",
+  "calm",
+  "cool",
+  "dark",
+  "fast",
+  "gold",
+  "green",
+  "happy",
+  "iron",
+  "jade",
+  "keen",
+  "light",
+  "loud",
+  "mint",
+  "neat",
+  "nice",
+  "pink",
+  "pure",
+  "quick",
+  "red",
+  "sage",
+  "sharp",
+  "slim",
+  "soft",
+  "warm",
+];
+
+const NOUNS = [
+  "falcon",
+  "river",
+  "storm",
+  "tiger",
+  "wave",
+  "cloud",
+  "flame",
+  "forest",
+  "garden",
+  "harbor",
+  "island",
+  "jungle",
+  "lake",
+  "meadow",
+  "ocean",
+  "peak",
+  "phoenix",
+  "rain",
+  "shadow",
+  "spark",
+  "star",
+  "stone",
+  "sun",
+  "thunder",
+  "tree",
+  "valley",
+  "wind",
+  "wolf",
+];
+
+export function generateFeatureName(): string {
+  const adj = ADJECTIVES[Math.floor(Math.random() * ADJECTIVES.length)];
+  const noun = NOUNS[Math.floor(Math.random() * NOUNS.length)];
+  return `${adj}-${noun}`;
+}
+
+// Git info from API
+export interface GitInfo {
+  isGitRepo: boolean;
+  branches: string[];
+  defaultBranch: string | null;
+  currentBranch: string | null;
+}
+
+// Agent type options
+export const AGENT_OPTIONS: {
+  value: AgentType;
+  label: string;
+  description: string;
+}[] = [
+  { value: "claude", label: "Claude Code", description: "Anthropic's CLI" },
+];
+
+// Props for main dialog
+export interface NewSessionDialogProps {
+  open: boolean;
+  projects: ProjectWithDevServers[];
+  selectedProjectId?: string;
+  onClose: () => void;
+  onCreated: (sessionId: string) => void;
+  onCreateProject?: (
+    name: string,
+    workingDirectory: string,
+    agentType: AgentType
+  ) => Promise<string | null>;
+}
+
+// Form state
+export interface NewSessionFormState {
+  name: string;
+  workingDirectory: string;
+  projectId: string | null;
+  agentType: AgentType;
+  skipPermissions: boolean;
+  useTmux: boolean;
+  initialPrompt: string;
+  // Worktree
+  useWorktree: boolean;
+  featureName: string;
+  baseBranch: string;
+  // Git
+  gitInfo: GitInfo | null;
+  checkingGit: boolean;
+  // UI
+  showNewProject: boolean;
+  newProjectName: string;
+  creatingProject: boolean;
+  advancedOpen: boolean;
+  // Submission
+  isLoading: boolean;
+  error: string | null;
+  // Recent
+  recentDirs: string[];
+}