@atercates/claude-deck 0.2.1

package/components/Projects/DevServersSection.tsx

@@ -0,0 +1,140 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Plus, Trash2, Loader2, RefreshCw, Server } from "lucide-react";
+import type { DevServerConfig } from "./NewProjectDialog.types";
+
+interface DevServersSectionProps {
+  devServers: DevServerConfig[];
+  isDetecting: boolean;
+  workingDirectory: string;
+  onDetect: () => void;
+  onAdd: () => void;
+  onRemove: (id: string) => void;
+  onUpdate: (id: string, updates: Partial<DevServerConfig>) => void;
+}
+
+export function DevServersSection({
+  devServers,
+  isDetecting,
+  workingDirectory,
+  onDetect,
+  onAdd,
+  onRemove,
+  onUpdate,
+}: DevServersSectionProps) {
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <label className="flex items-center gap-2 text-sm font-medium">
+          <Server className="h-4 w-4" />
+          Dev Servers
+        </label>
+        <div className="flex gap-1">
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={onDetect}
+            disabled={
+              isDetecting || !workingDirectory || workingDirectory === "~"
+            }
+          >
+            {isDetecting ? (
+              <Loader2 className="mr-1 h-3 w-3 animate-spin" />
+            ) : (
+              <RefreshCw className="mr-1 h-3 w-3" />
+            )}
+            Detect
+          </Button>
+          <Button type="button" variant="outline" size="sm" onClick={onAdd}>
+            <Plus className="mr-1 h-3 w-3" />
+            Add
+          </Button>
+        </div>
+      </div>
+
+      {devServers.length === 0 ? (
+        <p className="text-muted-foreground py-2 text-sm">
+          No dev servers configured. Click Detect to auto-find or Add to
+          configure manually.
+        </p>
+      ) : (
+        <div className="space-y-2">
+          {devServers.map((ds) => (
+            <div key={ds.id} className="bg-accent/30 space-y-2 rounded-lg p-3">
+              <div className="flex items-center gap-2">
+                <Input
+                  value={ds.name}
+                  onChange={(e) => onUpdate(ds.id, { name: e.target.value })}
+                  placeholder="Server name"
+                  className="h-8 flex-1"
+                />
+                <Select
+                  value={ds.type}
+                  onValueChange={(v) =>
+                    onUpdate(ds.id, { type: v as "node" | "docker" })
+                  }
+                >
+                  <SelectTrigger className="h-8 w-24">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="node">Node</SelectItem>
+                    <SelectItem value="docker">Docker</SelectItem>
+                  </SelectContent>
+                </Select>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon-sm"
+                  onClick={() => onRemove(ds.id)}
+                  className="text-red-500 hover:text-red-600"
+                >
+                  <Trash2 className="h-3 w-3" />
+                </Button>
+              </div>
+              <Input
+                value={ds.command}
+                onChange={(e) => onUpdate(ds.id, { command: e.target.value })}
+                placeholder={
+                  ds.type === "docker" ? "Service name" : "npm run dev"
+                }
+                className="h-8"
+              />
+              <div className="flex gap-2">
+                <Input
+                  type="number"
+                  value={ds.port || ""}
+                  onChange={(e) =>
+                    onUpdate(ds.id, {
+                      port: e.target.value
+                        ? parseInt(e.target.value)
+                        : undefined,
+                    })
+                  }
+                  placeholder="Port (e.g., 3000)"
+                  className="h-8 w-32"
+                />
+                <Input
+                  value={ds.portEnvVar || ""}
+                  onChange={(e) =>
+                    onUpdate(ds.id, { portEnvVar: e.target.value })
+                  }
+                  placeholder="Port env var (e.g., PORT)"
+                  className="h-8 flex-1"
+                />
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/components/Projects/DirectoryField.tsx

@@ -0,0 +1,92 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Loader2, GitBranch, FolderOpen } from "lucide-react";
+import { FolderPicker } from "@/components/FolderPicker";
+import { useHomePath } from "@/hooks/useHomePath";
+
+interface DirectoryFieldProps {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  checkingDir: boolean;
+  isGitRepo: boolean;
+  recentDirs: string[];
+}
+
+export function DirectoryField({
+  label,
+  value,
+  onChange,
+  checkingDir,
+  isGitRepo,
+  recentDirs,
+}: DirectoryFieldProps) {
+  const [showPicker, setShowPicker] = useState(false);
+  const { toTildePath } = useHomePath();
+
+  const handleSelect = (absolutePath: string) => {
+    onChange(toTildePath(absolutePath));
+    setShowPicker(false);
+  };
+
+  return (
+    <>
+      <div className="space-y-2">
+        <label className="text-sm font-medium">{label}</label>
+        <div className="flex gap-2">
+          <div className="relative flex-1">
+            <Input
+              value={value}
+              onChange={(e) => onChange(e.target.value)}
+              placeholder="~/projects/my-app"
+            />
+            {checkingDir && (
+              <div className="absolute top-1/2 right-3 -translate-y-1/2">
+                <Loader2 className="text-muted-foreground h-4 w-4 animate-spin" />
+              </div>
+            )}
+          </div>
+          <Button
+            type="button"
+            variant="outline"
+            size="icon"
+            onClick={() => setShowPicker(true)}
+            title="Browse folders"
+          >
+            <FolderOpen className="h-4 w-4" />
+          </Button>
+        </div>
+        {isGitRepo && (
+          <p className="text-muted-foreground flex items-center gap-1 text-xs">
+            <GitBranch className="h-3 w-3" />
+            Git repository
+          </p>
+        )}
+        {recentDirs.length > 0 && (
+          <div className="flex flex-wrap gap-1 pt-1">
+            {recentDirs.map((dir) => (
+              <button
+                key={dir}
+                type="button"
+                onClick={() => onChange(dir)}
+                className="bg-muted/50 hover:bg-muted text-muted-foreground hover:text-foreground max-w-[200px] truncate rounded-full px-2 py-0.5 text-xs transition-colors"
+                title={dir}
+              >
+                {dir.replace(/^~\//, "").split("/").pop() || dir}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {showPicker && (
+        <FolderPicker
+          initialPath={value || "~"}
+          onSelect={handleSelect}
+          onClose={() => setShowPicker(false)}
+        />
+      )}
+    </>
+  );
+}

package/components/Projects/NewProjectDialog.tsx

@@ -0,0 +1,188 @@
+"use client";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Link, GitBranch, FolderPlus, Check } from "lucide-react";
+import type { AgentType } from "@/lib/providers";
+import {
+  AGENT_OPTIONS,
+  MODEL_OPTIONS,
+  CLONE_STEP,
+} from "./NewProjectDialog.types";
+import type { NewProjectDialogProps } from "./NewProjectDialog.types";
+import { useNewProjectForm } from "./hooks/useNewProjectForm";
+import { DevServersSection } from "./DevServersSection";
+import { DirectoryField } from "./DirectoryField";
+import {
+  CreatingOverlay,
+  type StepConfig,
+} from "@/components/NewSessionDialog/CreatingOverlay";
+
+const cloneSteps: StepConfig[] = [
+  { id: CLONE_STEP.CLONING, label: "Cloning repository", icon: GitBranch },
+  { id: CLONE_STEP.CREATING, label: "Creating project", icon: FolderPlus },
+  { id: CLONE_STEP.DONE, label: "Done", icon: Check },
+];
+
+export function NewProjectDialog({
+  open,
+  mode = "new",
+  onClose,
+  onCreated,
+}: NewProjectDialogProps) {
+  const form = useNewProjectForm(mode, onClose, onCreated);
+
+  return (
+    <Dialog open={open} onOpenChange={(o) => !o && form.handleClose()}>
+      <DialogContent className="max-h-[90vh] max-w-lg overflow-y-auto">
+        {form.isCloning && (
+          <CreatingOverlay
+            isWorktree={false}
+            step={form.cloneStep}
+            steps={cloneSteps}
+            hint="This may take a moment depending on the repository size"
+          />
+        )}
+        <DialogHeader>
+          <DialogTitle>
+            {form.isCloneMode ? "Clone from GitHub" : "New Project"}
+          </DialogTitle>
+        </DialogHeader>
+
+        <form onSubmit={form.handleSubmit} className="space-y-4">
+          {/* GitHub URL (clone mode only) */}
+          {form.isCloneMode && (
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Repository URL</label>
+              <div className="relative">
+                <Input
+                  value={form.githubUrl}
+                  onChange={(e) => form.handleGithubUrlChange(e.target.value)}
+                  placeholder="https://github.com/user/repo"
+                  autoFocus
+                />
+                <Link className="text-muted-foreground absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2" />
+              </div>
+            </div>
+          )}
+
+          {/* Project Name */}
+          <div className="space-y-2">
+            <label className="text-sm font-medium">
+              Project Name
+              {form.isCloneMode && (
+                <span className="text-muted-foreground ml-1 font-normal">
+                  (optional, derived from URL)
+                </span>
+              )}
+            </label>
+            <Input
+              value={form.name}
+              onChange={(e) => form.setName(e.target.value)}
+              placeholder={
+                form.isCloneMode
+                  ? "auto-detected from URL"
+                  : "my-awesome-project"
+              }
+              autoFocus={!form.isCloneMode}
+            />
+          </div>
+
+          {/* Working Directory */}
+          <DirectoryField
+            label={form.isCloneMode ? "Clone Into" : "Working Directory"}
+            value={form.workingDirectory}
+            onChange={form.setWorkingDirectory}
+            checkingDir={form.checkingDir}
+            isGitRepo={form.isGitRepo}
+            recentDirs={form.recentDirs}
+          />
+
+          {/* Agent Type */}
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Default Agent</label>
+            <Select
+              value={form.agentType}
+              onValueChange={(v) => form.setAgentType(v as AgentType)}
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {AGENT_OPTIONS.map((opt) => (
+                  <SelectItem key={opt.value} value={opt.value}>
+                    {opt.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Default Model */}
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Default Model</label>
+            <Select
+              value={form.defaultModel}
+              onValueChange={form.setDefaultModel}
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {MODEL_OPTIONS.map((opt) => (
+                  <SelectItem key={opt.value} value={opt.value}>
+                    {opt.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Dev Servers (hidden in clone mode) */}
+          {!form.isCloneMode && (
+            <DevServersSection
+              devServers={form.devServers}
+              isDetecting={form.isDetecting}
+              workingDirectory={form.workingDirectory}
+              onDetect={form.detectDevServers}
+              onAdd={form.addDevServer}
+              onRemove={form.removeDevServer}
+              onUpdate={form.updateDevServer}
+            />
+          )}
+
+          {form.error && <p className="text-sm text-red-500">{form.error}</p>}
+
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={form.handleClose}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={form.isPending || form.isCloning}>
+              {form.isCloning
+                ? "Cloning..."
+                : form.isPending
+                  ? "Creating..."
+                  : form.isCloneMode
+                    ? "Clone & Create"
+                    : "Create Project"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/components/Projects/NewProjectDialog.types.ts

@@ -0,0 +1,46 @@
+import type { AgentType } from "@/lib/providers";
+
+export const CLONE_STEP = {
+  IDLE: "idle",
+  CLONING: "cloning",
+  CREATING: "creating",
+  DONE: "done",
+} as const;
+
+export type CloneStep = (typeof CLONE_STEP)[keyof typeof CLONE_STEP];
+
+export interface DevServerConfig {
+  id: string;
+  name: string;
+  type: "node" | "docker";
+  command: string;
+  port?: number;
+  portEnvVar?: string;
+}
+
+export interface NewProjectDialogProps {
+  open: boolean;
+  mode?: "new" | "clone";
+  onClose: () => void;
+  onCreated: (projectId: string) => void;
+}
+
+export const RECENT_DIRS_KEY = "agentOS:recentDirectories";
+export const MAX_RECENT_DIRS = 5;
+
+export const AGENT_OPTIONS: { value: AgentType; label: string }[] = [
+  { value: "claude", label: "Claude Code" },
+];
+
+export const MODEL_OPTIONS = [
+  { value: "sonnet", label: "Sonnet" },
+  { value: "opus", label: "Opus" },
+  { value: "haiku", label: "Haiku" },
+];
+
+export function extractRepoName(url: string): string | null {
+  const match = url.match(
+    /(?:github\.com[/:][\w.-]+\/([\w.-]+?)(?:\.git)?|^([\w.-]+)\.git)$/
+  );
+  return match ? match[1] || match[2] || null : null;
+}