jettypod 4.4.118 → 4.4.121

package/apps/dashboard/components/OnboardingWelcome.tsx

@@ -0,0 +1,213 @@
+
+import { useState, useCallback } from 'react';
+import { m, AnimatePresence, useReducedMotion } from 'framer-motion';
+import type { WorkItem } from '@/lib/db';
+import { shadow } from '@/lib/shadows';
+import { Button } from '@/components/ui/Button';
+import { TypeIcon } from '@/components/TypeIcon';
+
+interface OnboardingWelcomeProps {
+  onboardingItems: WorkItem[];
+  onStartChore: (id: number, title: string) => void;
+}
+
+const REVEAL_EASE = [0.22, 1, 0.36, 1] as const;
+
+export function OnboardingWelcome({ onboardingItems, onStartChore }: OnboardingWelcomeProps) {
+  const prefersReducedMotion = useReducedMotion();
+  const [phase, setPhase] = useState<'welcome' | 'transitioning' | 'revealed'>('welcome');
+
+  const handleLetsGo = useCallback(() => {
+    setPhase('transitioning');
+  }, []);
+
+  const handleExitComplete = useCallback(() => {
+    setPhase('revealed');
+  }, []);
+
+  const handleStartChore = useCallback((item: WorkItem) => {
+    onStartChore(item.id, item.title);
+  }, [onStartChore]);
+
+  const hasItems = onboardingItems.length > 0;
+  const isRevealed = phase === 'revealed';
+  const dur = prefersReducedMotion ? 0.05 : undefined;
+
+  return (
+    <div
+      className={`h-full flex justify-center overflow-hidden relative ${isRevealed ? 'items-start pt-16' : 'items-center pt-0'}`}
+      style={{ transition: prefersReducedMotion ? 'none' : 'padding-top 0.8s cubic-bezier(0.22, 1, 0.36, 1)' }}
+    >
+      <div className="flex items-start gap-12">
+        {/* Primary column — starts as single centered column, narrows to left column on reveal */}
+        <m.div
+          className="shrink-0 flex flex-col"
+          animate={{ width: isRevealed ? 340 : 480 }}
+          initial={false}
+          transition={{ duration: dur ?? 0.8, ease: REVEAL_EASE }}
+        >
+          {/* Greeting + intro — fade out on "Let's go" */}
+          <AnimatePresence onExitComplete={handleExitComplete}>
+            {phase === 'welcome' && (
+              <>
+                <m.div
+                  key="greeting"
+                  className="text-base leading-relaxed mb-4"
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -5, transition: { duration: dur ?? 0.25 } }}
+                  transition={{ duration: dur ?? 0.4, delay: prefersReducedMotion ? 0 : 0.2 }}
+                >
+                  Ahoy. Welcome to your new project.
+                </m.div>
+
+                <m.div
+                  key="intro"
+                  className="text-base leading-relaxed mb-4"
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -5, transition: { duration: dur ?? 0.25 } }}
+                  transition={{ duration: dur ?? 0.4, delay: prefersReducedMotion ? 0 : 0.6 }}
+                >
+                  Here&rsquo;s what we&rsquo;ll work through:
+                </m.div>
+              </>
+            )}
+          </AnimatePresence>
+
+          {/* Epic label — appears above cards on reveal */}
+          <AnimatePresence>
+            {isRevealed && (
+              <m.div
+                key="epic-label"
+                className="flex items-center gap-1.5 text-xs font-semibold text-muted-foreground mb-2.5 uppercase tracking-wide"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ duration: dur ?? 0.3, delay: prefersReducedMotion ? 0 : 0.3 }}
+              >
+                <TypeIcon type="epic" className="w-4 h-4 inline" />
+                <span>Project Planning</span>
+              </m.div>
+            )}
+          </AnimatePresence>
+
+          {/* Cards — SAME DOM elements throughout, never unmount */}
+          {onboardingItems.map((item, i) => {
+            const isFirst = i === 0;
+            return (
+              <m.div
+                key={item.id}
+                className="bg-white dark:bg-zinc-900 border-2 border-zinc-200 dark:border-zinc-700 rounded-xl px-3.5 py-3 mb-2 flex items-center justify-between"
+                style={{
+                  boxShadow: isRevealed && isFirst
+                    ? `${shadow.sm}, 0 0 0 3px rgba(129,157,159,0.35)`
+                    : shadow.sm,
+                  animation: isRevealed && isFirst ? 'onboarding-pulse-glow 2s ease-in-out infinite' : undefined,
+                }}
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{
+                  duration: dur ?? 0.4,
+                  delay: prefersReducedMotion ? 0 : 0.8 + i * 0.1,
+                }}
+              >
+                <div className="flex items-center gap-2.5">
+                  <TypeIcon type="chore" className="w-5 h-5 inline" />
+                  <span className="text-sm font-medium leading-snug">{item.title}</span>
+                </div>
+
+                {/* Start button — grows in after cards settle */}
+                {isRevealed && (
+                  <m.div
+                    initial={{ opacity: 0, scale: 0.9 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    transition={{ duration: dur ?? 0.3, delay: prefersReducedMotion ? 0 : 0.5 }}
+                  >
+                    {isFirst ? (
+                      <button
+                        onClick={() => handleStartChore(item)}
+                        className="px-3 py-1 text-[11px] font-semibold rounded-sm border-2 border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 text-muted-foreground cursor-pointer whitespace-nowrap"
+                        style={{ animation: 'onboarding-pulse-bg 2s ease-in-out infinite' }}
+                      >
+                        start
+                      </button>
+                    ) : (
+                      <button
+                        disabled
+                        className="px-3 py-1 text-[11px] font-semibold rounded-sm border-2 border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 text-muted-foreground opacity-40 cursor-default whitespace-nowrap"
+                      >
+                        start
+                      </button>
+                    )}
+                  </m.div>
+                )}
+              </m.div>
+            );
+          })}
+
+          {/* Let's go button — fades out with greeting */}
+          <AnimatePresence>
+            {phase === 'welcome' && (
+              <m.div
+                key="button"
+                className="flex gap-2 mt-2"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0, transition: { duration: dur ?? 0.15 } }}
+                transition={{ duration: dur ?? 0.4, delay: prefersReducedMotion ? 0 : 1.0 + onboardingItems.length * 0.1 }}
+              >
+                <Button onClick={handleLetsGo} size="sm">
+                  Let&rsquo;s go
+                </Button>
+              </m.div>
+            )}
+          </AnimatePresence>
+        </m.div>
+
+        {/* Conversation column — expands in from right on reveal */}
+        {isRevealed && (
+          <m.div
+            className="shrink-0 overflow-hidden"
+            initial={{ width: 0 }}
+            animate={{ width: 480 }}
+            transition={{ duration: dur ?? 0.8, ease: REVEAL_EASE }}
+          >
+            <div className="w-[480px] flex flex-col gap-4">
+              <m.div
+                className="text-base leading-relaxed"
+                initial={{ opacity: 0, x: 20 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ duration: dur ?? 0.5, delay: prefersReducedMotion ? 0 : 0.3 }}
+              >
+                Each card is a short conversation &mdash; we&rsquo;ll knock them out one at a time.
+              </m.div>
+
+              {hasItems && (
+                <m.div
+                  className="text-sm leading-normal px-3.5 py-2.5 bg-yellow-50 border-2 border-yellow-200 rounded-lg"
+                  initial={{ opacity: 0, y: 8 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: dur ?? 0.4, delay: prefersReducedMotion ? 0 : 0.6 }}
+                >
+                  👈 Click <strong>start</strong> on the first card to begin.
+                </m.div>
+              )}
+            </div>
+          </m.div>
+        )}
+      </div>
+
+      {/* Keyframe animations for the highlighted card */}
+      <style>{`
+        @keyframes onboarding-pulse-glow {
+          0%, 100% { box-shadow: ${shadow.sm}, 0 0 0 0px rgba(129,157,159,0); }
+          50% { box-shadow: ${shadow.sm}, 0 0 0 3px rgba(129,157,159,0.35); }
+        }
+        @keyframes onboarding-pulse-bg {
+          0%, 100% { background: #ffffff; }
+          50% { background: rgba(129,157,159,0.12); border-color: rgba(129,157,159,0.4); color: #3d4d4e; }
+        }
+      `}</style>
+    </div>
+  );
+}

package/apps/dashboard/components/PlaceholderCard.tsx

@@ -1,10 +1,9 @@
-'use client';
 
-import { motion } from 'framer-motion';
+import { m } from 'framer-motion';
 
 export function PlaceholderCard() {
   return (
-    <motion.div
+    <m.div
       data-testid="drag-placeholder"
       initial={{ opacity: 0, scaleX: 0.3 }}
       animate={{ opacity: 1, scaleX: 1 }}
@@ -13,7 +12,7 @@ export function PlaceholderCard() {
       style={{
         height: 3,
         borderRadius: 2,
-        background: 'linear-gradient(90deg, transparent, rgb(99, 102, 241), transparent)',
+        background: 'linear-gradient(90deg, transparent, #819D9F, transparent)',
         margin: '2px 8px',
       }}
     />

package/apps/dashboard/components/ProjectSwitcher.tsx

@@ -1,8 +1,8 @@
-'use client';
 
 import { useState, useRef, useEffect } from 'react';
 import { createPortal } from 'react-dom';
-import type { RecentProject } from '@/lib/db-bridge';
+import { isTauri, project } from '@/lib/tauri-bridge';
+import type { RecentProject } from '@/lib/tauri-bridge';
 
 interface ProjectSwitcherProps {
   projectName: string;
@@ -13,21 +13,21 @@ export function ProjectSwitcher({ projectName }: ProjectSwitcherProps) {
   const [recentProjects, setRecentProjects] = useState<RecentProject[]>([]);
   const [dropdownPosition, setDropdownPosition] = useState<{ top: number; left: number } | null>(null);
   const [error, setError] = useState<string | null>(null);
-  const [isElectron, setIsElectron] = useState(false);
+  const [isTauriApp, setIsTauriApp] = useState(false);
   const buttonRef = useRef<HTMLButtonElement>(null);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
-  // Detect Electron after mount to avoid hydration mismatch
+  // Detect Tauri after mount to avoid hydration mismatch
   useEffect(() => {
-    setIsElectron(!!window.electronAPI?.isElectron);
+    setIsTauriApp(isTauri());
   }, []);
 
   // Load recent projects when dropdown opens
   useEffect(() => {
-    if (isOpen && isElectron) {
-      window.electronAPI!.project.getRecent().then(setRecentProjects);
+    if (isOpen && isTauriApp) {
+      project.getRecent().then(setRecentProjects);
     }
-  }, [isOpen, isElectron]);
+  }, [isOpen, isTauriApp]);
 
   // Calculate dropdown position when opening
   useEffect(() => {
@@ -57,18 +57,18 @@ export function ProjectSwitcher({ projectName }: ProjectSwitcherProps) {
     }
   }, [isOpen]);
 
-  const handleProjectClick = async (project: RecentProject) => {
+  const handleProjectClick = async (p: RecentProject) => {
     setError(null);
     setIsOpen(false);
     try {
-      const result = await window.electronAPI!.project.openRecent(project.path);
+      const result = await project.openRecent(p.path);
       if (result.success) {
         window.location.reload();
       } else {
-        setError(`Failed to switch to "${project.name}". The project may no longer exist.`);
+        setError(`Failed to switch to "${p.name}". The project may no longer exist.`);
       }
     } catch {
-      setError(`Failed to switch to "${project.name}". The project may no longer exist.`);
+      setError(`Failed to switch to "${p.name}". The project may no longer exist.`);
     }
   };
 
@@ -76,7 +76,7 @@ export function ProjectSwitcher({ projectName }: ProjectSwitcherProps) {
     setError(null);
     setIsOpen(false);
     try {
-      const result = await window.electronAPI!.project.newProject();
+      const result = await project.newProject();
       if (result.success) {
         window.location.reload();
       }
@@ -89,7 +89,7 @@ export function ProjectSwitcher({ projectName }: ProjectSwitcherProps) {
     setError(null);
     setIsOpen(false);
     try {
-      const result = await window.electronAPI!.project.openDialog();
+      const result = await project.openDialog();
       if (result.success) {
         window.location.reload();
       }
@@ -99,10 +99,10 @@ export function ProjectSwitcher({ projectName }: ProjectSwitcherProps) {
     }
   };
 
-  // Non-Electron: render static pill (no switching possible)
-  if (!isElectron) {
+  // Non-Tauri: render static pill (no switching possible)
+  if (!isTauriApp) {
     return (
-      <span className="px-2.5 py-1 text-sm bg-zinc-100 text-zinc-600 rounded-full border border-zinc-200 dark:bg-zinc-800 dark:text-zinc-400 dark:border-zinc-700">
+      <span className="px-5 py-1.5 text-base bg-zinc-100 text-zinc-600 rounded-full border-2 border-zinc-200 dark:bg-zinc-800 dark:text-zinc-400 dark:border-zinc-700">
         {projectName}
       </span>
     );
@@ -111,43 +111,43 @@ export function ProjectSwitcher({ projectName }: ProjectSwitcherProps) {
   const dropdownContent = (
     <div
       ref={dropdownRef}
-      className="fixed z-50 bg-white dark:bg-zinc-800 rounded-lg shadow-lg border border-zinc-200 dark:border-zinc-700 py-1 min-w-[200px] max-w-[320px]"
+      className="fixed z-50 bg-white dark:bg-zinc-800 rounded-lg shadow-lg py-1.5 min-w-[200px] max-w-[320px]"
       style={{
         top: dropdownPosition?.top ?? 0,
         left: dropdownPosition?.left ?? 0,
       }}
     >
       {/* Current project */}
-      <div className="px-3 py-2 text-sm text-zinc-400 dark:text-zinc-500 flex items-center gap-2">
+      <div className="px-4 py-3 text-base text-zinc-400 dark:text-zinc-500 flex items-center gap-3">
         <span className="w-1.5 h-1.5 rounded-full bg-green-500 flex-shrink-0" />
         <span className="truncate">{projectName}</span>
       </div>
 
       {/* Other recent projects */}
       {recentProjects.filter(p => p.name !== projectName).length > 0 && (
-        <div className="px-3 pt-2 pb-1 text-xs font-medium text-zinc-400 dark:text-zinc-500 uppercase tracking-wider">Recent</div>
+        <div className="px-4 pt-3 pb-1.5 text-base font-medium text-zinc-400 dark:text-zinc-500 uppercase tracking-wider">Recent</div>
       )}
       {recentProjects
         .filter(p => p.name !== projectName)
         .slice(0, 4)
-        .map((project) => (
+        .map((p) => (
           <button
-            key={project.path}
-            onClick={() => handleProjectClick(project)}
-            className="w-full px-3 py-2 text-left text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 flex items-center gap-2"
+            key={p.path}
+            onClick={() => handleProjectClick(p)}
+            className="w-full px-4 py-3 text-left text-base text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 flex items-center gap-3"
           >
             <span className="w-1.5 h-1.5 flex-shrink-0" />
-            <span className="truncate">{project.name}</span>
+            <span className="truncate">{p.name}</span>
           </button>
         ))}
 
       {/* Divider */}
-      <div className="border-t border-zinc-200 dark:border-zinc-700 my-1" />
+      <div className="border-t border-zinc-200 dark:border-zinc-700 my-1.5" />
 
       {/* New Project action */}
       <button
         onClick={handleNewProject}
-        className="w-full px-3 py-2 text-left text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 flex items-center gap-2"
+        className="w-full px-4 py-3 text-left text-base text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 flex items-center gap-3"
       >
         <svg className="w-3.5 h-3.5 text-zinc-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
           <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
@@ -158,7 +158,7 @@ export function ProjectSwitcher({ projectName }: ProjectSwitcherProps) {
       {/* Open Project action */}
       <button
         onClick={handleOpenProject}
-        className="w-full px-3 py-2 text-left text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 flex items-center gap-2"
+        className="w-full px-4 py-3 text-left text-base text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 flex items-center gap-3"
       >
         <svg className="w-3.5 h-3.5 text-zinc-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
           <path strokeLinecap="round" strokeLinejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
@@ -173,7 +173,7 @@ export function ProjectSwitcher({ projectName }: ProjectSwitcherProps) {
       <button
         ref={buttonRef}
         onClick={() => { setError(null); setIsOpen(!isOpen); }}
-        className="px-2.5 py-1 text-sm bg-zinc-100 text-zinc-600 rounded-full border border-zinc-200 hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-400 dark:border-zinc-700 dark:hover:bg-zinc-700 transition-colors cursor-pointer flex items-center gap-1"
+        className="px-5 py-1.5 text-base bg-zinc-100 text-zinc-600 rounded-full border-2 border-zinc-200 hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-400 dark:border-zinc-700 dark:hover:bg-zinc-700 transition-colors duration-200 ease-out cursor-pointer flex items-center gap-1.5"
       >
         {projectName}
         <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -182,7 +182,7 @@ export function ProjectSwitcher({ projectName }: ProjectSwitcherProps) {
       </button>
 
       {error && (
-        <div className="absolute top-full left-0 mt-1 px-2.5 py-1.5 text-xs text-red-700 bg-red-50 border border-red-200 rounded-lg dark:text-red-400 dark:bg-red-900/20 dark:border-red-800 whitespace-nowrap">
+        <div className="absolute top-full left-0 mt-1 px-3 py-2 text-xs text-red-700 bg-red-50 border-2 border-red-200 rounded-lg dark:text-red-400 dark:bg-red-900/20 dark:border-red-800 whitespace-nowrap">
           {error}
         </div>
       )}

package/apps/dashboard/components/PrototypeTimeline.tsx

@@ -1,7 +1,8 @@
-'use client';
 
 import { useState, useEffect } from 'react';
-import type { PrototypeDashboardData, Prototype } from '@/lib/prototypes';
+import type { PrototypeDashboardData, Prototype } from '@/lib/db';
+import { shell } from '@/lib/tauri-bridge';
+import { invoke } from '@/lib/tauri';
 
 interface PrototypeCardProps {
   prototype: Prototype;
@@ -19,30 +20,30 @@ function PrototypeCard({ prototype, isSelected, onSelect, compact }: PrototypeCa
   return (
     <div
       onClick={onSelect}
-      className={`flex bg-white border rounded-lg overflow-hidden cursor-pointer transition-colors ${
-        isSelected ? 'border-blue-500 bg-blue-50' : 'border-zinc-200 hover:border-zinc-400'
+      className={`flex bg-white rounded-lg overflow-hidden cursor-pointer transition-colors duration-200 ease-out ${
+        isSelected ? 'border-2 border-[#819D9F] bg-[#e8f0f0]' : ''
       }`}
     >
       {/* Date column */}
-      <div className="w-12 shrink-0 bg-zinc-100 flex flex-col items-center justify-center py-2 px-1 border-r border-zinc-200">
+      <div className="w-12 shrink-0 bg-zinc-100 flex flex-col items-center justify-center py-3 px-1.5 border-r border-zinc-200">
         <span className="text-base font-semibold text-zinc-900 leading-none">{day}</span>
         <span className="text-[10px] text-zinc-500 uppercase leading-none mt-0.5">{weekday}</span>
       </div>
 
       {/* Content */}
-      <div className="flex-1 py-2 px-3">
-        <div className="flex items-center gap-2">
-          <span className="font-medium text-sm text-zinc-900 truncate">{prototype.title}</span>
+      <div className="flex-1 py-3 px-4">
+        <div className="flex items-center gap-3">
+          <span className="font-medium text-base text-zinc-900 truncate">{prototype.title}</span>
           {prototype.files.length > 1 && (
-            <span className="text-[10px] px-1.5 py-0.5 bg-green-100 text-green-700 rounded-full whitespace-nowrap">
+            <span className="text-[10px] px-2 py-1 bg-green-100 text-green-700 rounded-full whitespace-nowrap">
               {prototype.files.length} opts
             </span>
           )}
         </div>
         {!compact && (
-          <div className="flex items-center gap-2 text-xs">
+          <div className="flex items-center gap-3 text-base">
             {prototype.feature ? (
-              <span className="text-blue-600">#{prototype.feature.id}</span>
+              <span className="text-[#5a7d7f]">#{prototype.feature.id}</span>
             ) : (
               <span className="text-zinc-500">Research</span>
             )}
@@ -66,7 +67,7 @@ function MonthGroup({ month, prototypes, selectedId, onSelect, compact }: MonthG
   return (
     <div className="mb-4">
       {/* Month header */}
-      <div className="flex items-center gap-2 mb-2">
+      <div className="flex items-center gap-3 mb-3">
         <span className="text-[10px] font-semibold text-zinc-500 uppercase tracking-wider">
           {month}
         </span>
@@ -74,7 +75,7 @@ function MonthGroup({ month, prototypes, selectedId, onSelect, compact }: MonthG
       </div>
 
       {/* Prototype cards */}
-      <div className="space-y-1.5">
+      <div className="space-y-2">
         {prototypes.map(prototype => (
           <PrototypeCard
             key={prototype.id}
@@ -89,15 +90,6 @@ function MonthGroup({ month, prototypes, selectedId, onSelect, compact }: MonthG
   );
 }
 
-// Convert absolute file path to API URL
-// e.g., /Users/.../prototypes/feature-123/file.html -> /api/prototypes/feature-123/file.html
-function filePathToApiUrl(filePath: string): string {
-  const prototypesIndex = filePath.indexOf('/prototypes/');
-  if (prototypesIndex === -1) return filePath;
-  const relativePath = filePath.slice(prototypesIndex + '/prototypes/'.length);
-  return `/api/prototypes/${relativePath}`;
-}
-
 interface PreviewPanelProps {
   prototype: Prototype;
   onClose: () => void;
@@ -107,41 +99,52 @@ function PreviewPanel({ prototype, onClose }: PreviewPanelProps) {
   // Find first previewable file (HTML preferred)
   const getDefaultFile = () => prototype.files.find(f => f.type === 'html') || prototype.files[0];
   const [selectedFile, setSelectedFile] = useState(getDefaultFile);
+  const [fileContent, setFileContent] = useState<string | null>(null);
+  const [loadError, setLoadError] = useState<string | null>(null);
 
   // Reset selected file when prototype changes
   useEffect(() => {
     setSelectedFile(getDefaultFile());
   }, [prototype.id]);
 
+  // Load file content via Tauri IPC
+  useEffect(() => {
+    if (!selectedFile) return;
+    setFileContent(null);
+    setLoadError(null);
+    invoke<string>('read_prototype_file', { path: selectedFile.path })
+      .then(setFileContent)
+      .catch((err) => setLoadError(String(err)));
+  }, [selectedFile?.path]);
+
   // Check if file is previewable in iframe
   const previewableTypes = ['html', 'htm', 'txt', 'md', 'json', 'js', 'ts', 'css'];
   const isPreviewable = selectedFile && previewableTypes.includes(selectedFile.type);
-  const previewUrl = selectedFile ? filePathToApiUrl(selectedFile.path) : null;
 
   const handleOpen = () => {
-    if (window.electronAPI?.shell?.openPath && selectedFile) {
-      window.electronAPI.shell.openPath(selectedFile.path);
+    if (selectedFile) {
+      shell.openPath(selectedFile.path);
     }
   };
 
   return (
-    <div className="flex flex-col h-full bg-white border border-zinc-200 rounded-lg overflow-hidden">
+    <div className="flex flex-col h-full bg-white rounded-lg overflow-hidden">
       {/* Header */}
-      <div className="flex items-center justify-between p-4 border-b border-zinc-200">
+      <div className="flex items-center justify-between p-6 border-b border-zinc-200">
         <div>
           <h3 className="font-semibold text-zinc-900">{prototype.title}</h3>
-          <p className="text-sm text-zinc-500">{selectedFile?.name || prototype.description}</p>
+          <p className="text-base text-zinc-500">{selectedFile?.name || prototype.description}</p>
         </div>
         <div className="flex items-center gap-2">
           <button
             onClick={handleOpen}
-            className="px-3 py-1.5 text-xs bg-zinc-100 border border-zinc-300 rounded text-zinc-700 hover:border-blue-500 hover:text-blue-600 transition-colors"
+            className="px-4 py-2 text-base bg-zinc-100 border border-zinc-300 rounded text-zinc-700 hover:border-[#819D9F] hover:text-[#5a7d7f] transition-colors duration-200 ease-out"
           >
             Open
           </button>
           <button
             onClick={onClose}
-            className="p-2 text-zinc-400 hover:text-zinc-700 transition-colors"
+            className="p-2 text-zinc-400 hover:text-zinc-700 transition-colors duration-200 ease-out"
           >
             <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
@@ -152,16 +155,16 @@ function PreviewPanel({ prototype, onClose }: PreviewPanelProps) {
 
       {/* File selector */}
       {prototype.files.length > 1 && (
-        <div className="px-4 py-2 border-b border-zinc-200">
-          <div className="flex flex-wrap gap-2">
+        <div className="px-5 py-3 border-b border-zinc-200">
+          <div className="flex flex-wrap gap-3">
             {prototype.files.map(file => (
               <button
                 key={file.path}
                 onClick={() => setSelectedFile(file)}
-                className={`px-2 py-1 text-xs rounded transition-colors ${
+                className={`px-3 py-1.5 text-base rounded transition-colors duration-200 ease-out ${
                   selectedFile?.path === file.path
-                    ? 'bg-blue-600 text-white'
-                    : 'bg-zinc-100 border border-zinc-300 text-zinc-700 hover:border-blue-500'
+                    ? 'bg-[#819D9F] text-white'
+                    : 'bg-zinc-100 border border-zinc-300 text-zinc-700 hover:border-[#819D9F]'
                 }`}
               >
                 {file.name}
@@ -173,25 +176,43 @@ function PreviewPanel({ prototype, onClose }: PreviewPanelProps) {
 
       {/* Preview content - 75% zoom using transform scale */}
       <div className="flex-1 overflow-hidden">
-        {previewUrl && isPreviewable ? (
+        {loadError ? (
+          <div className="flex items-center justify-center h-full text-red-500">
+            <div className="text-center">
+              <p className="mb-3">Failed to load preview</p>
+              <p className="text-base">{loadError}</p>
+            </div>
+          </div>
+        ) : fileContent && isPreviewable ? (
           <div className="w-full h-full overflow-hidden">
-            <iframe
-              key={previewUrl}
-              src={previewUrl}
-              className="border-0 bg-white origin-top-left"
-              style={{
-                width: '133.33%',
-                height: '133.33%',
-                transform: 'scale(0.75)',
-              }}
-              title={`Preview: ${selectedFile?.name}`}
-            />
+            {selectedFile && ['html', 'htm'].includes(selectedFile.type) ? (
+              <iframe
+                key={selectedFile.path}
+                srcDoc={fileContent}
+                className="border-0 bg-white origin-top-left"
+                style={{
+                  width: '133.33%',
+                  height: '133.33%',
+                  transform: 'scale(0.75)',
+                }}
+                sandbox="allow-scripts allow-same-origin"
+                title={`Preview: ${selectedFile.name}`}
+              />
+            ) : (
+              <pre className="p-6 text-sm font-mono text-zinc-700 overflow-auto h-full whitespace-pre-wrap">
+                {fileContent}
+              </pre>
+            )}
+          </div>
+        ) : fileContent === null && !loadError ? (
+          <div className="flex items-center justify-center h-full text-zinc-400">
+            Loading...
           </div>
         ) : (
           <div className="flex items-center justify-center h-full text-zinc-500">
             <div className="text-center">
-              <p className="mb-2">Cannot preview this file type</p>
-              <p className="text-sm">{selectedFile?.name}</p>
+              <p className="mb-3">Cannot preview this file type</p>
+              <p className="text-base">{selectedFile?.name}</p>
             </div>
           </div>
         )}
@@ -233,9 +254,9 @@ export function PrototypeTimeline({ data }: PrototypeTimelineProps) {
     : null;
 
   return (
-    <div className="flex gap-4">
+    <div className="flex gap-6">
       {/* Timeline list */}
-      <div className={`${selectedPrototype ? 'w-[320px] shrink-0' : 'w-full'} transition-all`}>
+      <div className={`${selectedPrototype ? 'w-[320px] shrink-0' : 'w-full'} transition-[width] duration-200 ease-out`}>
         {months.map(month => (
           <MonthGroup
             key={month}