@aion0/forge 0.2.0 → 0.2.2

package/components/DocsViewer.tsx

@@ -9,6 +9,7 @@ interface FileNode {
   name: string;
   path: string;
   type: 'file' | 'dir';
+  fileType?: 'md' | 'image' | 'other';
   children?: FileNode[];
 }
 
@@ -41,16 +42,20 @@ function TreeNode({ node, depth, selected, onSelect }: {
   }
 
   const isSelected = selected === node.path;
+  const canOpen = node.fileType === 'md' || node.fileType === 'image';
+
   return (
     <button
-      onClick={() => onSelect(node.path)}
+      onClick={() => canOpen && onSelect(node.path)}
       className={`w-full text-left flex items-center gap-1 px-1 py-0.5 rounded text-xs truncate ${
-        isSelected ? 'bg-[var(--accent)]/20 text-[var(--accent)]' : 'hover:bg-[var(--bg-tertiary)] text-[var(--text-secondary)]'
+        !canOpen ? 'text-[var(--text-secondary)]/40 cursor-default'
+        : isSelected ? 'bg-[var(--accent)]/20 text-[var(--accent)]'
+        : 'hover:bg-[var(--bg-tertiary)] text-[var(--text-secondary)]'
       }`}
       style={{ paddingLeft: depth * 12 + 16 }}
       title={node.path}
     >
-      {node.name.replace(/\.md$/, '')}
+      {node.fileType === 'image' ? '🖼 ' : ''}{node.name.replace(/\.md$/, '')}
     </button>
   );
 }
@@ -92,13 +97,30 @@ export default function DocsViewer() {
 
   useEffect(() => { fetchTree(activeRoot); }, [activeRoot, fetchTree]);
 
+  const [fileWarning, setFileWarning] = useState<string | null>(null);
+
   // Fetch file content
+  const isImageFile = (path: string) => /\.(png|jpg|jpeg|gif|svg|webp|bmp|ico|avif)$/i.test(path);
+
   const openFile = useCallback(async (path: string) => {
     setSelectedFile(path);
+    setFileWarning(null);
+
+    if (isImageFile(path)) {
+      setContent(null);
+      setLoading(false);
+      return; // images rendered directly via img tag
+    }
+
     setLoading(true);
     const res = await fetch(`/api/docs?root=${activeRoot}&file=${encodeURIComponent(path)}`);
     const data = await res.json();
-    setContent(data.content || null);
+    if (data.tooLarge) {
+      setContent(null);
+      setFileWarning(`File too large (${data.sizeLabel})`);
+    } else {
+      setContent(data.content || null);
+    }
     setLoading(false);
   }, [activeRoot]);
 
@@ -157,6 +179,18 @@ export default function DocsViewer() {
               </div>
             )}
 
+            {/* Header with refresh */}
+            <div className="px-3 py-1.5 border-b border-[var(--border)] flex items-center">
+              <span className="text-[10px] text-[var(--text-secondary)] truncate">{roots[activeRoot] || 'Docs'}</span>
+              <button
+                onClick={() => { fetchTree(activeRoot); if (selectedFile) openFile(selectedFile); }}
+                className="text-[9px] text-[var(--text-secondary)] hover:text-[var(--text-primary)] ml-auto shrink-0"
+                title="Refresh files"
+              >
+                ↻
+              </button>
+            </div>
+
             {/* Search */}
             <div className="p-2 border-b border-[var(--border)]">
               <input
@@ -219,7 +253,22 @@ export default function DocsViewer() {
           </div>
 
           {/* Content */}
-          {selectedFile && content ? (
+          {fileWarning ? (
+            <div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">
+              <div className="text-center space-y-2">
+                <div className="text-3xl">⚠️</div>
+                <p className="text-sm">{fileWarning}</p>
+              </div>
+            </div>
+          ) : selectedFile && isImageFile(selectedFile) ? (
+            <div className="flex-1 overflow-auto flex items-center justify-center p-6 bg-[var(--bg-tertiary)]">
+              <img
+                src={`/api/docs?root=${activeRoot}&image=${encodeURIComponent(selectedFile)}`}
+                alt={selectedFile}
+                className="max-w-full max-h-full object-contain rounded shadow-lg"
+              />
+            </div>
+          ) : selectedFile && content ? (
             <div className="flex-1 overflow-y-auto px-8 py-6">
               {loading ? (
                 <div className="text-xs text-[var(--text-secondary)]">Loading...</div>

package/components/NewTaskModal.tsx

@@ -35,7 +35,7 @@ export default function NewTaskModal({
 }: {
   onClose: () => void;
   onCreate: (data: TaskData) => void;
-  editTask?: { id: string; projectName: string; prompt: string; priority: number; mode: TaskMode };
+  editTask?: { id: string; projectName: string; prompt: string; priority: number; mode: TaskMode; scheduledAt?: string };
 }) {
   const [projects, setProjects] = useState<Project[]>([]);
   const [selectedProject, setSelectedProject] = useState(editTask?.projectName || '');
@@ -60,9 +60,9 @@ export default function NewTaskModal({
   const [autoSessionId, setAutoSessionId] = useState<string | null>(null);
 
   // Scheduling
-  const [scheduleMode, setScheduleMode] = useState<'now' | 'delay' | 'time'>('now');
+  const [scheduleMode, setScheduleMode] = useState<'now' | 'delay' | 'time'>(editTask?.scheduledAt ? 'time' : 'now');
   const [delayMinutes, setDelayMinutes] = useState(30);
-  const [scheduledTime, setScheduledTime] = useState('');
+  const [scheduledTime, setScheduledTime] = useState(editTask?.scheduledAt ? new Date(editTask.scheduledAt).toISOString().slice(0, 16) : '');
 
   useEffect(() => {
     fetch('/api/projects').then(r => r.json()).then((p: Project[]) => {
@@ -88,15 +88,15 @@ export default function NewTaskModal({
       .catch(() => setSessions([]));
   }, [selectedProject]);
 
-  const getScheduledAt = (): string | undefined => {
-    if (scheduleMode === 'now') return undefined;
+  const getScheduledAt = (): string | null | undefined => {
+    if (scheduleMode === 'now') return editTask ? null : undefined;  // null clears existing schedule
     if (scheduleMode === 'delay') {
       return new Date(Date.now() + delayMinutes * 60_000).toISOString();
     }
     if (scheduleMode === 'time' && scheduledTime) {
       return new Date(scheduledTime).toISOString();
     }
-    return undefined;
+    return editTask ? null : undefined;
   };
 
   const handleSubmit = (e: React.FormEvent) => {
@@ -110,7 +110,7 @@ export default function NewTaskModal({
       projectName: selectedProject,
       prompt: taskMode === 'monitor' ? `Monitor session ${selectedSessionId}` : prompt.trim(),
       priority,
-      scheduledAt: getScheduledAt(),
+      scheduledAt: getScheduledAt() ?? undefined,
       mode: taskMode,
     };
 

package/components/PreviewPanel.tsx

@@ -0,0 +1,154 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+export default function PreviewPanel() {
+  const [port, setPort] = useState(0);
+  const [inputPort, setInputPort] = useState('');
+  const [tunnelUrl, setTunnelUrl] = useState<string | null>(null);
+  const [status, setStatus] = useState<string>('stopped');
+  const [error, setError] = useState('');
+  const [isRemote, setIsRemote] = useState(false);
+
+  useEffect(() => {
+    setIsRemote(!['localhost', '127.0.0.1'].includes(window.location.hostname));
+    fetch('/api/preview')
+      .then(r => r.json())
+      .then(d => {
+        if (d.port) {
+          setPort(d.port);
+          setInputPort(String(d.port));
+          setTunnelUrl(d.url || null);
+          setStatus(d.status || 'stopped');
+        }
+      })
+      .catch(() => {});
+  }, []);
+
+  const handleStart = async () => {
+    const p = parseInt(inputPort);
+    if (!p || p < 1 || p > 65535) {
+      setError('Invalid port');
+      return;
+    }
+    setError('');
+    setStatus('starting');
+    try {
+      const res = await fetch('/api/preview', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ port: p }),
+      });
+      const data = await res.json();
+      if (data.error) {
+        setError(data.error);
+        setStatus('error');
+      } else {
+        setPort(data.port);
+        setTunnelUrl(data.url || null);
+        setStatus(data.status || 'running');
+      }
+    } catch {
+      setError('Failed to start tunnel');
+      setStatus('error');
+    }
+  };
+
+  const handleStop = async () => {
+    await fetch('/api/preview', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ action: 'stop' }),
+    });
+    setPort(0);
+    setTunnelUrl(null);
+    setStatus('stopped');
+  };
+
+  // What to show in iframe: tunnel URL for remote, localhost for local
+  const previewSrc = isRemote
+    ? tunnelUrl
+    : port ? `http://localhost:${port}` : null;
+
+  return (
+    <div className="flex-1 flex flex-col min-h-0">
+      {/* Control bar */}
+      <div className="px-4 py-2 border-b border-[var(--border)] flex items-center gap-3 shrink-0 flex-wrap">
+        <span className="text-[11px] font-semibold text-[var(--text-primary)]">Preview</span>
+
+        <input
+          type="number"
+          value={inputPort}
+          onChange={e => setInputPort(e.target.value)}
+          onKeyDown={e => e.key === 'Enter' && handleStart()}
+          placeholder="Port"
+          className="w-24 text-xs bg-[var(--bg-tertiary)] border border-[var(--border)] rounded px-2 py-1 text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent)] font-mono"
+        />
+
+        {status === 'stopped' || status === 'error' ? (
+          <button
+            onClick={handleStart}
+            disabled={!inputPort}
+            className="text-[10px] px-3 py-1 bg-[var(--accent)] text-white rounded hover:opacity-90 disabled:opacity-50"
+          >
+            Start Tunnel
+          </button>
+        ) : status === 'starting' ? (
+          <span className="text-[10px] text-yellow-400">Starting tunnel...</span>
+        ) : (
+          <>
+            <span className="text-[10px] text-green-400">● localhost:{port}</span>
+            {tunnelUrl && (
+              <button
+                onClick={() => { navigator.clipboard.writeText(tunnelUrl); }}
+                className="text-[10px] text-green-400 hover:text-green-300 truncate max-w-[250px]"
+                title={`Click to copy: ${tunnelUrl}`}
+              >
+                {tunnelUrl.replace('https://', '')}
+              </button>
+            )}
+            <a
+              href={previewSrc || '#'}
+              target="_blank"
+              rel="noopener"
+              className="text-[10px] text-[var(--accent)] hover:underline"
+            >
+              Open ↗
+            </a>
+            <button
+              onClick={handleStop}
+              className="text-[10px] text-red-400 hover:text-red-300"
+            >
+              Stop
+            </button>
+          </>
+        )}
+
+        {error && <span className="text-[10px] text-red-400">{error}</span>}
+      </div>
+
+      {/* Preview iframe */}
+      {previewSrc && status === 'running' ? (
+        <iframe
+          src={previewSrc}
+          className="flex-1 w-full border-0 bg-white"
+          title="Preview"
+        />
+      ) : (
+        <div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">
+          <div className="text-center space-y-3 max-w-md">
+            <p className="text-sm">Preview a local dev server</p>
+            <p className="text-xs">Enter the port of your running dev server and click Start Tunnel.</p>
+            <p className="text-xs">A dedicated Cloudflare Tunnel will be created for that port, giving it its own public URL — no path prefix issues.</p>
+            <div className="text-[10px] text-left bg-[var(--bg-tertiary)] rounded p-3 space-y-1">
+              <p>1. Start your dev server: <code className="text-[var(--accent)]">npm run dev</code></p>
+              <p>2. Enter its port (e.g. <code className="text-[var(--accent)]">4321</code>)</p>
+              <p>3. Click <strong>Start Tunnel</strong></p>
+              <p>4. Share the generated URL — it maps directly to your dev server</p>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}