@evolve.labs/devflow 0.8.0

package/web/app/globals.css

@@ -0,0 +1,160 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 221.2 83.2% 53.3%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 48%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  @apply bg-transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  @apply bg-muted-foreground/20 rounded-full;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  @apply bg-muted-foreground/40;
+}
+
+/* Monaco editor adjustments */
+.monaco-editor {
+  @apply rounded-md;
+}
+
+/* Monaco editor line highlight animation */
+.highlight-line-animation {
+  background-color: rgba(168, 85, 247, 0.3) !important;
+  animation: highlight-fade 2s ease-out forwards;
+}
+
+.highlight-line-margin {
+  background-color: rgba(168, 85, 247, 0.8) !important;
+  width: 3px !important;
+  margin-left: 3px;
+  animation: highlight-fade 2s ease-out forwards;
+}
+
+@keyframes highlight-fade {
+  0% {
+    background-color: rgba(168, 85, 247, 0.5);
+  }
+  100% {
+    background-color: transparent;
+  }
+}
+
+/* File tree hover effects */
+.file-node:hover {
+  @apply bg-accent;
+}
+
+.file-node.selected {
+  @apply bg-accent text-accent-foreground;
+}
+
+/* Chat message streaming cursor */
+.streaming-cursor::after {
+  content: '▌';
+  @apply animate-pulse text-primary;
+}
+
+/* Terminal styles */
+.xterm {
+  @apply p-2;
+}
+
+.xterm-screen canvas {
+  image-rendering: pixelated;
+  image-rendering: crisp-edges;
+}
+
+.xterm-viewport {
+  overflow-y: auto !important;
+}
+
+/* Resizable panels */
+.resizable-handle {
+  @apply bg-transparent hover:bg-primary/20 transition-colors;
+}
+
+.resizable-handle:active {
+  @apply bg-primary/40;
+}
+
+/* Hide scrollbar utility */
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+/* Responsive text utilities */
+@layer utilities {
+  .text-responsive {
+    font-size: clamp(0.75rem, 2vw, 0.875rem);
+  }
+}

package/web/app/ide/layout.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useProjectStore } from '@/lib/stores/projectStore';
+
+export default function IDELayout({ children }: { children: React.ReactNode }) {
+  const router = useRouter();
+  const { projects, restoreProjects } = useProjectStore();
+  const [restoring, setRestoring] = useState(true);
+
+  useEffect(() => {
+    if (projects.length > 0) {
+      // Already have projects loaded
+      setRestoring(false);
+      return;
+    }
+
+    // Try to restore from persisted state
+    restoreProjects().then(() => {
+      const current = useProjectStore.getState();
+      if (current.projects.length === 0) {
+        // No projects could be restored, redirect to home
+        router.push('/');
+      } else {
+        setRestoring(false);
+      }
+    });
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (restoring && projects.length === 0) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-[#0a0a0f]">
+        <div className="text-center space-y-4">
+          <div className="animate-spin w-8 h-8 border-2 border-purple-500 border-t-transparent rounded-full mx-auto" />
+          <p className="text-gray-400">Loading projects...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return <>{children}</>;
+}

package/web/app/ide/page.tsx

@@ -0,0 +1,216 @@
+'use client';
+
+import { useEffect, useCallback } from 'react';
+import { useProjectStore } from '@/lib/stores/projectStore';
+import { useUIStore } from '@/lib/stores/uiStore';
+import { useSettingsStore } from '@/lib/stores/settingsStore';
+import { EditorPanel } from '@/components/editor/EditorPanel';
+import { SpecsPanel } from '@/components/specs/SpecsPanel';
+import { TerminalPanel } from '@/components/terminal/TerminalPanel';
+import { GitPanel } from '@/components/git/GitPanel';
+import { DashboardPanel } from '@/components/dashboard/DashboardPanel';
+import { StatusBar } from '@/components/layout/StatusBar';
+import { ResizeHandle } from '@/components/ui/ResizeHandle';
+import { QuickOpen } from '@/components/modals/QuickOpen';
+import { GlobalSearch } from '@/components/modals/GlobalSearch';
+import { CommandPalette } from '@/components/modals/CommandPalette';
+import { RecentFiles } from '@/components/modals/RecentFiles';
+import { SettingsPanel } from '@/components/settings/SettingsPanel';
+import { AutopilotPanel } from '@/components/autopilot/AutopilotPanel';
+import { AutopilotConfigModal } from '@/components/autopilot/AutopilotConfigModal';
+import { ProjectSelector } from '@/components/projects/ProjectSelector';
+import { SkipLinks } from '@/components/ui/SkipLinks';
+import { useKeyboardShortcuts } from '@/hooks/useKeyboardShortcuts';
+import {
+  FileText,
+  Terminal,
+  LayoutDashboard,
+  Zap,
+  Settings,
+  GitBranch
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export default function IDEPage() {
+  const { currentProject, projects, activeProjectPath } = useProjectStore();
+  const { openSettings } = useSettingsStore();
+  const projectPaths = projects.map(p => p.path);
+
+  // Initialize keyboard shortcuts
+  useKeyboardShortcuts();
+
+  const {
+    sidebarVisible,
+    sidebarWidth,
+    activePanel,
+    setActivePanel,
+    terminalVisible,
+    terminalHeight,
+    terminalMaximized,
+    toggleSidebar,
+    toggleTerminal,
+    toggleTerminalMaximized,
+    setSidebarWidth,
+    setTerminalHeight,
+  } = useUIStore();
+
+  // Resize handlers
+  const handleSidebarResize = useCallback((delta: number) => {
+    setSidebarWidth(sidebarWidth + delta);
+  }, [sidebarWidth, setSidebarWidth]);
+
+  const sidebarItems = [
+    { id: 'specs', icon: FileText, label: 'Specs' },
+    { id: 'git', icon: GitBranch, label: 'Source Control' },
+    { id: 'dashboard', icon: LayoutDashboard, label: 'Dashboard' },
+  ] as const;
+
+  return (
+    <div className="h-screen flex flex-col bg-[#0a0a0f] text-white overflow-hidden">
+      {/* Skip Links for accessibility */}
+      <SkipLinks />
+
+      {/* Main Content */}
+      <div className="flex-1 flex overflow-hidden" role="main">
+        {/* Activity Bar */}
+        <div className="w-12 bg-[#08080c] border-r border-white/10 flex flex-col items-center py-2">
+          {/* Logo */}
+          <div className="w-8 h-8 bg-gradient-to-br from-purple-500 to-purple-700 rounded-lg flex items-center justify-center mb-4">
+            <Zap className="w-4 h-4 text-white" />
+          </div>
+
+          {/* Nav Items */}
+          <div className="flex-1 flex flex-col gap-1">
+            {sidebarItems.map((item) => (
+              <button
+                key={item.id}
+                onClick={() => {
+                  if (activePanel === item.id && sidebarVisible) {
+                    toggleSidebar();
+                  } else {
+                    setActivePanel(item.id);
+                    if (!sidebarVisible) toggleSidebar();
+                  }
+                }}
+                className={cn(
+                  'w-10 h-10 flex items-center justify-center rounded-lg transition-colors',
+                  activePanel === item.id && sidebarVisible
+                    ? 'bg-purple-500/20 text-purple-400'
+                    : 'text-gray-500 hover:text-white hover:bg-white/5'
+                )}
+                title={item.label}
+              >
+                <item.icon className="w-5 h-5" />
+              </button>
+            ))}
+          </div>
+
+          {/* Bottom Actions */}
+          <div className="flex flex-col gap-1">
+            <button
+              onClick={toggleTerminal}
+              className={cn(
+                'w-10 h-10 flex items-center justify-center rounded-lg transition-colors',
+                terminalVisible
+                  ? 'bg-purple-500/20 text-purple-400'
+                  : 'text-gray-500 hover:text-white hover:bg-white/5'
+              )}
+              title="Terminal"
+            >
+              <Terminal className="w-5 h-5" />
+            </button>
+            <button
+              onClick={openSettings}
+              className="w-10 h-10 flex items-center justify-center rounded-lg text-gray-500 hover:text-white hover:bg-white/5 transition-colors"
+              title="Settings (Cmd+,)"
+            >
+              <Settings className="w-5 h-5" />
+            </button>
+          </div>
+        </div>
+
+        {/* Sidebar Panel */}
+        {sidebarVisible && (
+          <>
+            <aside
+              id="main-sidebar"
+              className="h-full bg-[#0a0a0f] flex-shrink-0 overflow-hidden flex flex-col"
+              style={{ width: sidebarWidth }}
+              aria-label="Sidebar"
+            >
+              {/* Project Selector */}
+              <div className="px-2 pt-2 pb-1 flex-shrink-0">
+                <ProjectSelector />
+              </div>
+
+              {/* Panel Content */}
+              <div className="flex-1 min-h-0 overflow-hidden">
+              {activePanel === 'git' && currentProject && (
+                <GitPanel projectPath={currentProject.path} />
+              )}
+              {activePanel === 'specs' && projectPaths.length > 0 && (
+                <SpecsPanel projectPaths={projectPaths} activeProjectPath={activeProjectPath} />
+              )}
+              {activePanel === 'dashboard' && currentProject && (
+                <DashboardPanel projectPath={currentProject.path} />
+              )}
+              </div>
+            </aside>
+            {/* Sidebar Resize Handle */}
+            <ResizeHandle
+              direction="horizontal"
+              side="right"
+              onResize={handleSidebarResize}
+              className="bg-white/5 hover:bg-purple-500/30"
+            />
+          </>
+        )}
+
+        {/* Editor + Terminal Area */}
+        <div className="flex-1 min-w-0 flex flex-col">
+          {/* Editor */}
+          <div
+            id="main-editor"
+            className={cn(
+              'flex-1 min-h-0',
+              terminalVisible && !terminalMaximized && 'pb-0'
+            )}
+            tabIndex={-1}
+          >
+            <EditorPanel />
+          </div>
+
+          {/* Terminal */}
+          {terminalVisible && currentProject && (
+            <TerminalPanel
+              projectPath={currentProject.path}
+              isMaximized={terminalMaximized}
+              onToggleMaximize={toggleTerminalMaximized}
+              onClose={toggleTerminal}
+              height={terminalHeight}
+              onHeightChange={setTerminalHeight}
+            />
+          )}
+        </div>
+      </div>
+
+      {/* Status Bar */}
+      <StatusBar />
+
+      {/* Modals */}
+      <QuickOpen />
+      <GlobalSearch />
+      <CommandPalette />
+      <RecentFiles />
+      <SettingsPanel />
+
+      {/* Autopilot */}
+      {currentProject && (
+        <>
+          <AutopilotConfigModal projectPath={currentProject.path} />
+          <AutopilotPanel />
+        </>
+      )}
+    </div>
+  );
+}

package/web/app/layout.tsx

@@ -0,0 +1,34 @@
+import type { Metadata } from 'next';
+import { Inter, JetBrains_Mono } from 'next/font/google';
+import { Toaster } from '@/components/ui/Toaster';
+import './globals.css';
+
+const inter = Inter({
+  subsets: ['latin'],
+  variable: '--font-inter',
+});
+
+const jetbrainsMono = JetBrains_Mono({
+  subsets: ['latin'],
+  variable: '--font-mono',
+});
+
+export const metadata: Metadata = {
+  title: 'DevFlow IDE',
+  description: 'Spec-driven development IDE powered by AI agents',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" className="dark">
+      <body className={`${inter.variable} ${jetbrainsMono.variable} font-sans antialiased`}>
+        {children}
+        <Toaster />
+      </body>
+    </html>
+  );
+}