@evolve.labs/devflow 0.8.0

package/web/app/page.tsx

@@ -0,0 +1,303 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useProjectStore } from '@/lib/stores/projectStore';
+import {
+  FolderOpen,
+  Clock,
+  Zap,
+  FileText,
+  Cpu,
+  Terminal,
+  GitBranch,
+  Sparkles,
+  ArrowRight,
+  CheckCircle2,
+  Bot
+} from 'lucide-react';
+
+export default function HomePage() {
+  const router = useRouter();
+  const { addProject, recentProjects, isLoading, error: storeError } = useProjectStore();
+  const [projectPath, setProjectPath] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  const displayError = error || storeError;
+
+  const handleOpenProject = async (path?: string) => {
+    const targetPath = path || projectPath;
+    if (!targetPath.trim()) {
+      setError('Please enter a project path');
+      return;
+    }
+
+    setError(null);
+
+    try {
+      await addProject(targetPath.trim());
+
+      // Check if project was added successfully
+      const state = useProjectStore.getState();
+      if (state.error) {
+        setError(state.error);
+        return;
+      }
+
+      router.push('/ide');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to open project');
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-[#0a0a0f] text-white">
+      {/* Header */}
+      <header className="border-b border-white/10 bg-[#0a0a0f]/80 backdrop-blur-sm sticky top-0 z-50">
+        <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="w-8 h-8 bg-gradient-to-br from-purple-500 to-purple-700 rounded-lg flex items-center justify-center">
+              <Zap className="w-5 h-5 text-white" />
+            </div>
+            <span className="text-xl font-semibold">DevFlow</span>
+            <span className="text-xs bg-purple-500/20 text-purple-300 px-2 py-0.5 rounded-full">
+              Beta
+            </span>
+          </div>
+          <nav className="flex items-center gap-6 text-sm text-gray-400">
+            <a href="#features" className="hover:text-white transition-colors">Features</a>
+            <a href="https://github.com/anthropics/claude-code" target="_blank" rel="noopener noreferrer" className="hover:text-white transition-colors">Docs</a>
+            <a href="https://github.com/evolve-labs-cloud/dexter-devflow" target="_blank" rel="noopener noreferrer" className="hover:text-white transition-colors">GitHub</a>
+          </nav>
+        </div>
+      </header>
+
+      {/* Hero Section */}
+      <section className="relative overflow-hidden">
+        {/* Background gradient */}
+        <div className="absolute inset-0 bg-gradient-to-b from-purple-900/20 via-transparent to-transparent" />
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-purple-600/10 rounded-full blur-3xl" />
+
+        <div className="relative max-w-7xl mx-auto px-6 py-24 text-center">
+          <h1 className="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-white via-purple-200 to-purple-400 bg-clip-text text-transparent">
+            Spec-Driven Development
+          </h1>
+          <p className="text-xl text-gray-400 max-w-2xl mx-auto mb-12">
+            Transform ideas into production code with AI agents.
+            From requirements to implementation, guided by specifications.
+          </p>
+
+          {/* Open Project Card */}
+          <div className="max-w-xl mx-auto bg-[#12121a] border border-white/10 rounded-2xl p-6 shadow-2xl">
+            <div className="flex items-center gap-2 mb-4">
+              <FolderOpen className="w-5 h-5 text-purple-400" />
+              <span className="font-medium">Open Project</span>
+            </div>
+
+            <div className="flex gap-2 mb-3">
+              <input
+                type="text"
+                value={projectPath}
+                onChange={(e) => setProjectPath(e.target.value)}
+                onKeyDown={(e) => e.key === 'Enter' && handleOpenProject()}
+                placeholder="/path/to/your/project"
+                className="flex-1 px-4 py-3 bg-[#0a0a0f] border border-white/10 rounded-xl text-white placeholder-gray-500 focus:outline-none focus:border-purple-500 focus:ring-1 focus:ring-purple-500 transition-all"
+                suppressHydrationWarning
+                autoComplete="off"
+                data-form-type="other"
+              />
+              <button
+                onClick={() => handleOpenProject()}
+                disabled={isLoading}
+                className="px-6 py-3 bg-purple-600 hover:bg-purple-500 text-white font-medium rounded-xl disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center gap-2"
+              >
+                {isLoading ? (
+                  <span className="animate-spin">⏳</span>
+                ) : (
+                  <>
+                    Open
+                    <ArrowRight className="w-4 h-4" />
+                  </>
+                )}
+              </button>
+            </div>
+
+            {displayError && (
+              <p className="text-sm text-red-400 text-left">{displayError}</p>
+            )}
+
+            {/* Recent Projects */}
+            {recentProjects.length > 0 && (
+              <div className="mt-4 pt-4 border-t border-white/10">
+                <div className="flex items-center gap-2 text-sm text-gray-500 mb-2">
+                  <Clock className="w-4 h-4" />
+                  Recent
+                </div>
+                <div className="space-y-1">
+                  {recentProjects.map((project, i) => (
+                    <button
+                      key={i}
+                      onClick={() => handleOpenProject(project.path)}
+                      className="w-full text-left px-3 py-2 text-sm text-gray-400 hover:text-white hover:bg-white/5 rounded-lg transition-colors truncate"
+                    >
+                      {project.name}
+                      <span className="text-gray-600 ml-2 text-xs">{project.path}</span>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </section>
+
+      {/* Workflow Section */}
+      <section id="features" className="py-24 border-t border-white/5">
+        <div className="max-w-7xl mx-auto px-6">
+          <h2 className="text-3xl font-bold text-center mb-4">
+            From Idea to Production
+          </h2>
+          <p className="text-gray-400 text-center mb-16 max-w-2xl mx-auto">
+            DevFlow guides your development through structured phases,
+            ensuring clarity and quality at every step.
+          </p>
+
+          <div className="grid md:grid-cols-3 gap-6">
+            {/* Requirements */}
+            <div className="bg-[#12121a] border border-white/10 rounded-2xl p-6 hover:border-purple-500/50 transition-colors group">
+              <div className="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
+                <FileText className="w-6 h-6 text-blue-400" />
+              </div>
+              <h3 className="text-xl font-semibold mb-2">1. Requirements</h3>
+              <p className="text-gray-400 text-sm mb-4">
+                Transform natural language into structured specs with EARS notation.
+                Clear acceptance criteria before any code.
+              </p>
+              <div className="flex items-center gap-2 text-sm text-blue-400">
+                <Bot className="w-4 h-4" />
+                @strategist
+              </div>
+            </div>
+
+            {/* Design */}
+            <div className="bg-[#12121a] border border-white/10 rounded-2xl p-6 hover:border-purple-500/50 transition-colors group">
+              <div className="w-12 h-12 bg-purple-500/20 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
+                <Cpu className="w-6 h-6 text-purple-400" />
+              </div>
+              <h3 className="text-xl font-semibold mb-2">2. Design</h3>
+              <p className="text-gray-400 text-sm mb-4">
+                Generate architecture decisions, tech stack recommendations,
+                and implementation plans based on your codebase.
+              </p>
+              <div className="flex items-center gap-2 text-sm text-purple-400">
+                <Bot className="w-4 h-4" />
+                @architect
+              </div>
+            </div>
+
+            {/* Implementation */}
+            <div className="bg-[#12121a] border border-white/10 rounded-2xl p-6 hover:border-purple-500/50 transition-colors group">
+              <div className="w-12 h-12 bg-amber-500/20 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
+                <Terminal className="w-6 h-6 text-amber-400" />
+              </div>
+              <h3 className="text-xl font-semibold mb-2">3. Implementation</h3>
+              <p className="text-gray-400 text-sm mb-4">
+                Execute discrete, dependency-sequenced tasks.
+                AI agents write code following your specs.
+              </p>
+              <div className="flex items-center gap-2 text-sm text-amber-400">
+                <Bot className="w-4 h-4" />
+                @builder
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Features Grid */}
+      <section className="py-24 border-t border-white/5 bg-[#08080c]">
+        <div className="max-w-7xl mx-auto px-6">
+          <h2 className="text-3xl font-bold text-center mb-16">
+            Powerful Features
+          </h2>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
+            <FeatureCard
+              icon={<Sparkles className="w-5 h-5" />}
+              title="Autopilot Mode"
+              description="Autonomous task execution without step-by-step guidance"
+            />
+            <FeatureCard
+              icon={<GitBranch className="w-5 h-5" />}
+              title="Git Integration"
+              description="Automatic commits with meaningful messages"
+            />
+            <FeatureCard
+              icon={<Bot className="w-5 h-5" />}
+              title="AI Agents"
+              description="Specialized agents for each development phase"
+            />
+            <FeatureCard
+              icon={<CheckCircle2 className="w-5 h-5" />}
+              title="Quality Assurance"
+              description="Built-in code review and testing"
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section className="py-24 border-t border-white/5">
+        <div className="max-w-4xl mx-auto px-6 text-center">
+          <h2 className="text-3xl font-bold mb-4">
+            Ready to transform your workflow?
+          </h2>
+          <p className="text-gray-400 mb-8">
+            Start building with spec-driven development today.
+          </p>
+          <div className="flex items-center justify-center gap-4">
+            <button
+              onClick={() => document.querySelector('input')?.focus()}
+              className="px-8 py-3 bg-purple-600 hover:bg-purple-500 text-white font-medium rounded-xl transition-colors"
+            >
+              Open a Project
+            </button>
+            <a
+              href="https://github.com/evolve-labs-cloud/dexter-devflow"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="px-8 py-3 border border-white/20 hover:border-white/40 text-white font-medium rounded-xl transition-colors"
+            >
+              View Documentation
+            </a>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="border-t border-white/10 py-8">
+        <div className="max-w-7xl mx-auto px-6 flex items-center justify-between text-sm text-gray-500">
+          <div className="flex items-center gap-2">
+            <Zap className="w-4 h-4 text-purple-400" />
+            DevFlow v0.7.0
+          </div>
+          <div>
+            Powered by Evolve Labs
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}
+
+function FeatureCard({ icon, title, description }: { icon: React.ReactNode; title: string; description: string }) {
+  return (
+    <div className="bg-[#12121a] border border-white/10 rounded-xl p-4 hover:border-purple-500/30 transition-colors">
+      <div className="w-10 h-10 bg-purple-500/10 rounded-lg flex items-center justify-center text-purple-400 mb-3">
+        {icon}
+      </div>
+      <h3 className="font-medium mb-1">{title}</h3>
+      <p className="text-sm text-gray-500">{description}</p>
+    </div>
+  );
+}

package/web/components/agents/AgentIcons.tsx

@@ -0,0 +1,281 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+
+interface AgentIconProps {
+  className?: string;
+  size?: number;
+}
+
+// Strategist - Chart/Strategy icon with rising bars
+export function StrategistIcon({ className, size = 24 }: AgentIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <defs>
+        <linearGradient id="strategist-grad" x1="0%" y1="100%" x2="100%" y2="0%">
+          <stop offset="0%" stopColor="#3B82F6" />
+          <stop offset="100%" stopColor="#60A5FA" />
+        </linearGradient>
+      </defs>
+      {/* Rising bars */}
+      <rect x="3" y="14" width="4" height="7" rx="1" fill="url(#strategist-grad)" />
+      <rect x="10" y="10" width="4" height="11" rx="1" fill="url(#strategist-grad)" />
+      <rect x="17" y="5" width="4" height="16" rx="1" fill="url(#strategist-grad)" />
+      {/* Trend line */}
+      <path
+        d="M4 12L11 7L19 3"
+        stroke="url(#strategist-grad)"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      {/* Arrow head */}
+      <path
+        d="M16 3H19V6"
+        stroke="url(#strategist-grad)"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+// Architect - Blueprint/Building blocks icon
+export function ArchitectIcon({ className, size = 24 }: AgentIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <defs>
+        <linearGradient id="architect-grad" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" stopColor="#8B5CF6" />
+          <stop offset="100%" stopColor="#A78BFA" />
+        </linearGradient>
+      </defs>
+      {/* Main structure */}
+      <path
+        d="M12 2L3 7V17L12 22L21 17V7L12 2Z"
+        stroke="url(#architect-grad)"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fill="none"
+      />
+      {/* Inner lines */}
+      <path
+        d="M12 22V12"
+        stroke="url(#architect-grad)"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+      <path
+        d="M21 7L12 12L3 7"
+        stroke="url(#architect-grad)"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+      {/* Center dot */}
+      <circle cx="12" cy="12" r="2" fill="url(#architect-grad)" />
+    </svg>
+  );
+}
+
+// System Designer - Gear/Infrastructure icon
+export function SystemDesignerIcon({ className, size = 24 }: AgentIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <defs>
+        <linearGradient id="sysdesigner-grad" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" stopColor="#06B6D4" />
+          <stop offset="100%" stopColor="#22D3EE" />
+        </linearGradient>
+      </defs>
+      {/* Gear outer */}
+      <path
+        d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
+        stroke="url(#sysdesigner-grad)"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fill="none"
+      />
+      <path
+        d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z"
+        stroke="url(#sysdesigner-grad)"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fill="none"
+      />
+    </svg>
+  );
+}
+
+// Builder - Hammer/Construction icon
+export function BuilderIcon({ className, size = 24 }: AgentIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <defs>
+        <linearGradient id="builder-grad" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" stopColor="#F59E0B" />
+          <stop offset="100%" stopColor="#FBBF24" />
+        </linearGradient>
+      </defs>
+      {/* Hammer head */}
+      <path
+        d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
+        stroke="url(#builder-grad)"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fill="none"
+      />
+      {/* Accent */}
+      <circle cx="10" cy="10" r="1.5" fill="url(#builder-grad)" />
+    </svg>
+  );
+}
+
+// Guardian - Shield with checkmark icon
+export function GuardianIcon({ className, size = 24 }: AgentIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <defs>
+        <linearGradient id="guardian-grad" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" stopColor="#10B981" />
+          <stop offset="100%" stopColor="#34D399" />
+        </linearGradient>
+      </defs>
+      {/* Shield outline */}
+      <path
+        d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"
+        stroke="url(#guardian-grad)"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fill="none"
+      />
+      {/* Checkmark */}
+      <path
+        d="M9 12l2 2 4-4"
+        stroke="url(#guardian-grad)"
+        strokeWidth="2.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+// Chronicler - Book/Document with pen icon
+export function ChroniclerIcon({ className, size = 24 }: AgentIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <defs>
+        <linearGradient id="chronicler-grad" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" stopColor="#EC4899" />
+          <stop offset="100%" stopColor="#F472B6" />
+        </linearGradient>
+      </defs>
+      {/* Book */}
+      <path
+        d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"
+        stroke="url(#chronicler-grad)"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"
+        stroke="url(#chronicler-grad)"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fill="none"
+      />
+      {/* Lines on page */}
+      <path
+        d="M8 7h8M8 11h6M8 15h4"
+        stroke="url(#chronicler-grad)"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+// Map agent ID to icon component
+export const AgentIconMap: Record<string, React.FC<AgentIconProps>> = {
+  strategist: StrategistIcon,
+  architect: ArchitectIcon,
+  'system-designer': SystemDesignerIcon,
+  builder: BuilderIcon,
+  guardian: GuardianIcon,
+  chronicler: ChroniclerIcon,
+};
+
+// Generic AgentIcon component
+export function AgentIcon({
+  agentId,
+  className,
+  size = 24,
+}: AgentIconProps & { agentId: string }) {
+  const IconComponent = AgentIconMap[agentId];
+
+  if (!IconComponent) {
+    return (
+      <div
+        className={cn(
+          'flex items-center justify-center rounded-lg bg-gray-500/20 text-gray-400',
+          className
+        )}
+        style={{ width: size, height: size }}
+      >
+        ?
+      </div>
+    );
+  }
+
+  return <IconComponent className={className} size={size} />;
+}