helixevo 0.2.37 → 0.2.39

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 All notable changes to HelixEvo are documented here.
 
+## [0.2.39] - 2026-03-23
+
+### Added
+- **Folder browser**: "Browse" button opens a folder picker modal
+  - Navigates the file system with clickable folders
+  - Projects auto-detected (📦 icon) by presence of package.json/README/etc
+  - Click a project folder to select it instantly
+  - "Up" button to navigate parent directories
+  - "Select This Folder" button for non-project directories
+- Server-side `/api/browse` endpoint for directory listing
+
+### Fixed
+- CSS border shorthand conflict warning in Projects page mode toggle
+- Quick-select path buttons and default clone directory updated to ~/HelixEvo
+
 ## [0.2.37] - 2026-03-23
 
 ### Added

package/dashboard/app/api/browse/route.ts

@@ -0,0 +1,66 @@
+import { NextResponse } from 'next/server'
+import { readdirSync, statSync, existsSync } from 'fs'
+import { join } from 'path'
+import { homedir } from 'os'
+
+export const dynamic = 'force-dynamic'
+
+function resolvePath(p: string): string {
+  if (p.startsWith('~')) return join(homedir(), p.slice(1))
+  return p
+}
+
+export async function GET(request: Request) {
+  const url = new URL(request.url)
+  const dir = url.searchParams.get('dir') ?? homedir()
+  const resolved = resolvePath(dir)
+
+  if (!existsSync(resolved)) {
+    return NextResponse.json({ error: 'Directory not found', path: resolved }, { status: 404 })
+  }
+
+  try {
+    const stat = statSync(resolved)
+    if (!stat.isDirectory()) {
+      return NextResponse.json({ error: 'Not a directory', path: resolved }, { status: 400 })
+    }
+
+    const items = readdirSync(resolved, { withFileTypes: true })
+      .filter(d => !d.name.startsWith('.') && d.name !== 'node_modules' && d.name !== '__pycache__')
+      .sort((a, b) => {
+        // Directories first, then files
+        if (a.isDirectory() && !b.isDirectory()) return -1
+        if (!a.isDirectory() && b.isDirectory()) return 1
+        return a.name.localeCompare(b.name)
+      })
+      .slice(0, 50)
+      .map(d => ({
+        name: d.name,
+        isDirectory: d.isDirectory(),
+        // Check if it looks like a project (has package.json, README, etc.)
+        isProject: d.isDirectory() && (
+          existsSync(join(resolved, d.name, 'package.json')) ||
+          existsSync(join(resolved, d.name, 'README.md')) ||
+          existsSync(join(resolved, d.name, 'Cargo.toml')) ||
+          existsSync(join(resolved, d.name, 'go.mod')) ||
+          existsSync(join(resolved, d.name, 'pyproject.toml'))
+        ),
+      }))
+
+    // Build display path (replace homedir with ~)
+    const displayPath = resolved.replace(homedir(), '~')
+
+    // Get parent directory
+    const parent = join(resolved, '..')
+
+    return NextResponse.json({
+      path: resolved,
+      displayPath,
+      parent: parent !== resolved ? parent : null,
+      items,
+    })
+  } catch (err: unknown) {
+    const message = err instanceof Error ? err.message : String(err)
+    return NextResponse.json({ error: message }, { status: 500 })
+  }
+}

package/dashboard/app/projects/client.tsx

@@ -30,16 +30,45 @@ const PIPELINE = [
   },
 ]
 
+interface BrowseItem { name: string; isDirectory: boolean; isProject: boolean }
+interface BrowseResult { path: string; displayPath: string; parent: string | null; items: BrowseItem[] }
+
 export default function ProjectsClient({ profiles, skillCount }: { profiles: ProjectProfile[]; skillCount: number }) {
   const [inputMode, setInputMode] = useState<InputMode>('local')
   const [projectPath, setProjectPath] = useState('')
   const [githubUrl, setGithubUrl] = useState('')
-  const [cloneDir, setCloneDir] = useState('~/projects')
+  const [cloneDir, setCloneDir] = useState('~/HelixEvo')
   const [setupState, setSetupState] = useState<SetupState>('idle')
   const [output, setOutput] = useState('')
   const outputRef = useRef<HTMLPreElement | null>(null)
   const abortRef = useRef<AbortController | null>(null)
 
+  // Folder browser state
+  const [showBrowser, setShowBrowser] = useState(false)
+  const [browseData, setBrowseData] = useState<BrowseResult | null>(null)
+  const [browseLoading, setBrowseLoading] = useState(false)
+
+  const browseTo = async (dir: string) => {
+    setBrowseLoading(true)
+    try {
+      const res = await fetch(`/api/browse?dir=${encodeURIComponent(dir)}`)
+      const data = await res.json()
+      if (data.error) return
+      setBrowseData(data)
+    } catch {}
+    setBrowseLoading(false)
+  }
+
+  const openBrowser = () => {
+    setShowBrowser(true)
+    browseTo('~')
+  }
+
+  const selectFolder = (path: string) => {
+    setProjectPath(path)
+    setShowBrowser(false)
+  }
+
   const effectivePath = inputMode === 'local' ? projectPath.trim() : ''
   const canStart = inputMode === 'local' ? !!projectPath.trim() : !!githubUrl.trim()
 
@@ -194,8 +223,11 @@ export default function ProjectsClient({ profiles, skillCount }: { profiles: Pro
             style={{
               padding: '7px 16px', fontSize: 12, fontWeight: 600, cursor: 'pointer',
               background: inputMode === 'github' ? 'var(--bg-card)' : 'var(--bg-section)',
-              border: `1px solid ${inputMode === 'github' ? 'var(--border-focus)' : 'var(--border)'}`,
-              borderRadius: '0 8px 8px 0', borderLeft: 'none',
+              borderTop: `1px solid ${inputMode === 'github' ? 'var(--border-focus)' : 'var(--border)'}`,
+              borderRight: `1px solid ${inputMode === 'github' ? 'var(--border-focus)' : 'var(--border)'}`,
+              borderBottom: `1px solid ${inputMode === 'github' ? 'var(--border-focus)' : 'var(--border)'}`,
+              borderLeft: 'none',
+              borderRadius: '0 8px 8px 0',
               color: inputMode === 'github' ? 'var(--text)' : 'var(--text-dim)',
             }}
           >
@@ -210,20 +242,41 @@ export default function ProjectsClient({ profiles, skillCount }: { profiles: Pro
               <label style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-dim)', display: 'block', marginBottom: 5 }}>
                 Project folder path
               </label>
-              <input
-                value={projectPath}
-                onChange={e => setProjectPath(e.target.value)}
-                placeholder="/path/to/your/project  or  .  or  ~/projects/myapp"
-                disabled={setupState === 'analyzing'}
-                style={{
-                  width: '100%', padding: '9px 14px',
-                  border: '1px solid var(--border)', borderRadius: 'var(--radius)',
-                  fontSize: 13, fontFamily: 'var(--font-mono)',
-                  background: 'var(--bg-input)', color: 'var(--text)',
-                }}
-              />
-              <div style={{ fontSize: 10, color: 'var(--text-muted)', marginTop: 4 }}>
-                Use <code style={{ fontSize: 9 }}>.</code> for the current directory, or an absolute path
+              <div style={{ display: 'flex', gap: 6 }}>
+                <input
+                  value={projectPath}
+                  onChange={e => setProjectPath(e.target.value)}
+                  placeholder="/path/to/your/project"
+                  disabled={setupState === 'analyzing'}
+                  style={{
+                    flex: 1, padding: '9px 14px',
+                    border: '1px solid var(--border)', borderRadius: 'var(--radius)',
+                    fontSize: 13, fontFamily: 'var(--font-mono)',
+                    background: 'var(--bg-input)', color: 'var(--text)',
+                  }}
+                />
+                <button onClick={openBrowser} disabled={setupState === 'analyzing'} style={{
+                  padding: '9px 14px', border: '1px solid var(--border)', borderRadius: 'var(--radius)',
+                  background: 'var(--bg-card)', cursor: 'pointer', fontSize: 12, fontWeight: 600,
+                  color: 'var(--text-secondary)', display: 'flex', alignItems: 'center', gap: 5,
+                  whiteSpace: 'nowrap',
+                }}>
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
+                  </svg>
+                  Browse
+                </button>
+              </div>
+              <div style={{ fontSize: 10, color: 'var(--text-muted)', marginTop: 6, display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
+                <span>Quick select:</span>
+                {['.', '~/Documents/GitHub', '~/Desktop', '~/HelixEvo', ...profiles.map(p => p.path).filter(p => !['.',  '~/Documents/GitHub', '~/Desktop', '~/HelixEvo'].includes(p))].map(p => (
+                  <button key={p} onClick={() => setProjectPath(p)} style={{
+                    padding: '1px 8px', fontSize: 10, background: projectPath === p ? 'var(--green-light)' : 'var(--bg-section)',
+                    border: `1px solid ${projectPath === p ? 'var(--green-border)' : 'var(--border-subtle)'}`,
+                    borderRadius: 4, cursor: 'pointer', color: projectPath === p ? 'var(--green)' : 'var(--text-dim)',
+                    fontFamily: 'var(--font-mono)',
+                  }}>{p}</button>
+                ))}
               </div>
             </div>
             {setupState !== 'analyzing' ? (
@@ -556,6 +609,102 @@ export default function ProjectsClient({ profiles, skillCount }: { profiles: Pro
           </div>
         </div>
       )}
+      {/* Folder Browser Modal */}
+      {showBrowser && (
+        <div style={{
+          position: 'fixed', inset: 0, zIndex: 9999,
+          background: 'rgba(0,0,0,0.3)', display: 'flex',
+          alignItems: 'center', justifyContent: 'center',
+        }} onClick={() => setShowBrowser(false)}>
+          <div onClick={e => e.stopPropagation()} style={{
+            width: 520, maxHeight: '70vh', background: 'var(--bg-card)',
+            borderRadius: 'var(--radius-xl)', boxShadow: 'var(--shadow-xl)',
+            border: '1px solid var(--border)', overflow: 'hidden',
+            display: 'flex', flexDirection: 'column',
+          }}>
+            {/* Header */}
+            <div style={{
+              padding: '14px 18px', borderBottom: '1px solid var(--border)',
+              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
+            }}>
+              <div>
+                <div style={{ fontSize: 14, fontWeight: 700 }}>Browse Folders</div>
+                <div style={{ fontSize: 11, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', marginTop: 2 }}>
+                  {browseData?.displayPath ?? '~'}
+                </div>
+              </div>
+              <div style={{ display: 'flex', gap: 6 }}>
+                {browseData?.parent && (
+                  <button onClick={() => browseTo(browseData.parent!)} style={{
+                    padding: '5px 10px', fontSize: 11, fontWeight: 600,
+                    background: 'var(--bg-section)', border: '1px solid var(--border)',
+                    borderRadius: 'var(--radius)', cursor: 'pointer', color: 'var(--text-secondary)',
+                  }}>
+                    ↑ Up
+                  </button>
+                )}
+                <button onClick={() => selectFolder(browseData?.path ?? '~')} style={{
+                  padding: '5px 12px', fontSize: 11, fontWeight: 600,
+                  background: 'var(--green)', color: '#fff', border: 'none',
+                  borderRadius: 'var(--radius)', cursor: 'pointer',
+                }}>
+                  Select This Folder
+                </button>
+                <button onClick={() => setShowBrowser(false)} style={{
+                  padding: '5px 10px', fontSize: 14, background: 'none',
+                  border: 'none', cursor: 'pointer', color: 'var(--text-dim)',
+                }}>
+                  &times;
+                </button>
+              </div>
+            </div>
+
+            {/* Content */}
+            <div style={{ overflow: 'auto', flex: 1, padding: '8px 0' }}>
+              {browseLoading ? (
+                <div style={{ padding: 24, textAlign: 'center', color: 'var(--text-dim)', fontSize: 12 }}>Loading...</div>
+              ) : browseData?.items.length === 0 ? (
+                <div style={{ padding: 24, textAlign: 'center', color: 'var(--text-dim)', fontSize: 12 }}>Empty directory</div>
+              ) : (
+                browseData?.items.map(item => (
+                  <div
+                    key={item.name}
+                    onClick={() => {
+                      if (item.isDirectory) {
+                        if (item.isProject) {
+                          selectFolder(browseData.path + '/' + item.name)
+                        } else {
+                          browseTo(browseData.path + '/' + item.name)
+                        }
+                      }
+                    }}
+                    style={{
+                      padding: '7px 18px', display: 'flex', alignItems: 'center', gap: 10,
+                      cursor: item.isDirectory ? 'pointer' : 'default',
+                      fontSize: 13, color: item.isDirectory ? 'var(--text)' : 'var(--text-dim)',
+                      background: item.isProject ? 'var(--green-light)' : 'transparent',
+                      borderLeft: item.isProject ? '3px solid var(--green)' : '3px solid transparent',
+                    }}
+                    onMouseOver={e => { if (item.isDirectory) (e.currentTarget.style.background = item.isProject ? 'var(--green-light)' : 'var(--bg-hover)') }}
+                    onMouseOut={e => { e.currentTarget.style.background = item.isProject ? 'var(--green-light)' : 'transparent' }}
+                  >
+                    <span style={{ fontSize: 14, width: 20, textAlign: 'center' }}>
+                      {item.isProject ? '📦' : item.isDirectory ? '📁' : '📄'}
+                    </span>
+                    <span style={{ flex: 1, fontWeight: item.isProject ? 600 : 400 }}>{item.name}</span>
+                    {item.isProject && (
+                      <span style={{ fontSize: 10, color: 'var(--green)', fontWeight: 600 }}>project</span>
+                    )}
+                    {item.isDirectory && !item.isProject && (
+                      <span style={{ fontSize: 10, color: 'var(--text-muted)' }}>&rarr;</span>
+                    )}
+                  </div>
+                ))
+              )}
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   )
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "helixevo",
-  "version": "0.2.37",
+  "version": "0.2.39",
   "description": "Self-evolving skill ecosystem for AI agents. Skills and projects co-evolve through multi-judge evaluation and a Pareto frontier.",
   "type": "module",
   "bin": {