@mndrk/agx 2.0.23 → 2.0.24

package/cloud-runtime/standalone/components/ContextMenu.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import React, { useEffect, useState, useRef, useCallback } from "react";
+
+export interface ContextMenuItem {
+  label: string;
+  icon?: React.ReactNode;
+  shortcut?: string;
+  action: () => void;
+  destructive?: boolean;
+  divider?: boolean;
+}
+
+interface ContextMenuProps {
+  items: ContextMenuItem[];
+  children: React.ReactNode;
+}
+
+export function ContextMenu({ items, children }: ContextMenuProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [focusIndex, setFocusIndex] = useState(-1);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  const close = useCallback(() => {
+    setIsOpen(false);
+    setFocusIndex(-1);
+  }, []);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleClickOutside = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        close();
+      }
+    };
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        close();
+        return;
+      }
+
+      const actionItems = items.filter((item) => !item.divider);
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setFocusIndex((prev) => (prev + 1) % actionItems.length);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setFocusIndex((prev) => (prev - 1 + actionItems.length) % actionItems.length);
+      } else if (e.key === "Enter" && focusIndex >= 0) {
+        e.preventDefault();
+        actionItems[focusIndex]?.action();
+        close();
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen, close, focusIndex, items]);
+
+  // Reposition if menu would overflow viewport
+  useEffect(() => {
+    if (!isOpen || !menuRef.current) return;
+    const rect = menuRef.current.getBoundingClientRect();
+    let { x, y } = position;
+    if (rect.right > window.innerWidth - 8) x = window.innerWidth - rect.width - 8;
+    if (rect.bottom > window.innerHeight - 8) y = window.innerHeight - rect.height - 8;
+    if (x !== position.x || y !== position.y) setPosition({ x, y });
+  }, [isOpen, position]);
+
+  const handleContextMenu = (e: React.MouseEvent) => {
+    e.preventDefault();
+    setPosition({ x: e.clientX, y: e.clientY });
+    setFocusIndex(-1);
+    setIsOpen(true);
+  };
+
+  let actionIndex = -1;
+
+  return (
+    <>
+      <div onContextMenu={handleContextMenu} className="w-full h-full">
+        {children}
+      </div>
+
+      {isOpen && (
+        <div
+          ref={menuRef}
+          style={{ top: position.y, left: position.x }}
+          className="context-menu"
+        >
+          {items.map((item, index) => {
+            if (item.divider) {
+              return <div key={index} className="context-menu__divider" />;
+            }
+            actionIndex++;
+            const isFocused = actionIndex === focusIndex;
+            return (
+              <button
+                key={index}
+                onClick={() => {
+                  item.action();
+                  close();
+                }}
+                className={`context-menu__item ${item.destructive ? "context-menu__item--destructive" : ""} ${isFocused ? "context-menu__item--focused" : ""}`}
+              >
+                {item.icon && <span className="context-menu__icon">{item.icon}</span>}
+                <span className="context-menu__label">{item.label}</span>
+                {item.shortcut && <span className="context-menu__shortcut">{item.shortcut}</span>}
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </>
+  );
+}

package/cloud-runtime/standalone/components/DaemonBar.tsx

@@ -73,18 +73,18 @@ export default function DaemonBar() {
   const running = status.running;
 
   return (
-    <div className="flex items-center gap-3 py-2 text-xs text-slate-500">
+    <div className="flex items-center gap-3 py-2 text-xs text-[var(--muted-foreground)]">
       {/* Status dot + label */}
       <button
         type="button"
         onClick={toggle}
         disabled={loading}
-        className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full border border-slate-200 hover:border-slate-300 transition-colors disabled:opacity-50"
+        className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full border border-[var(--border)] hover:border-[var(--border)] transition-colors disabled:opacity-50"
       >
         <span
-          className={`w-1.5 h-1.5 rounded-full ${running ? "bg-emerald-500" : "bg-slate-300"}`}
+          className={`w-1.5 h-1.5 rounded-full ${running ? "bg-emerald-500" : "bg-[var(--app-shell-soft-text)]"}`}
         />
-        <span className="font-medium text-slate-600">
+        <span className="font-medium text-[var(--muted-foreground)]">
           {loading ? "..." : running ? "Daemon running" : "Daemon stopped"}
         </span>
       </button>
@@ -92,23 +92,23 @@ export default function DaemonBar() {
       {running && (
         <>
           {/* Worker count with +/- */}
-          <div className="inline-flex items-center rounded-full border border-slate-200 overflow-hidden">
+          <div className="inline-flex items-center rounded-full border border-[var(--border)] overflow-hidden">
             <button
               type="button"
               onClick={() => scale(-1)}
               disabled={loading || status.targetWorkers <= 1}
-              className="px-1.5 py-0.5 hover:bg-slate-100 transition-colors disabled:opacity-30 text-slate-400"
+              className="px-1.5 py-0.5 hover:bg-[var(--muted)] transition-colors disabled:opacity-30 text-[var(--muted-foreground)]"
             >
               -
             </button>
-            <span className="px-2 py-0.5 font-mono text-slate-600 border-x border-slate-200">
+            <span className="px-2 py-0.5 font-mono text-[var(--muted-foreground)] border-x border-[var(--border)]">
               {status.activeWorkers}/{status.targetWorkers}w
             </span>
             <button
               type="button"
               onClick={() => scale(1)}
               disabled={loading || status.targetWorkers >= status.maxWorkers}
-              className="px-1.5 py-0.5 hover:bg-slate-100 transition-colors disabled:opacity-30 text-slate-400"
+              className="px-1.5 py-0.5 hover:bg-[var(--muted)] transition-colors disabled:opacity-30 text-[var(--muted-foreground)]"
             >
               +
             </button>
@@ -116,7 +116,7 @@ export default function DaemonBar() {
 
           {/* Uptime */}
           {status.startedAt && (
-            <span className="text-slate-400">
+            <span className="text-[var(--muted-foreground)]">
               up since {new Date(status.startedAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
             </span>
           )}

package/cloud-runtime/standalone/components/DirectoryBrowser.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+interface DirEntry {
+  name: string;
+  path: string;
+}
+
+interface BrowseResult {
+  current: string;
+  parent: string | null;
+  dirs: DirEntry[];
+}
+
+export default function DirectoryBrowser({
+  initialPath,
+  onSelect,
+  onCancel,
+}: {
+  initialPath: string;
+  onSelect: (path: string) => void;
+  onCancel: () => void;
+}) {
+  const [browsePath, setBrowsePath] = useState(initialPath || "");
+  const [result, setResult] = useState<BrowseResult | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  const fetchDir = useCallback(async (dirPath: string) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const params = dirPath ? `?path=${encodeURIComponent(dirPath)}` : "";
+      const res = await fetch(`/api/filesystem/browse${params}`);
+      const data = await res.json();
+      if (!res.ok) {
+        setError(data.error || "Failed to browse");
+        return;
+      }
+      setResult(data);
+      setBrowsePath(data.current);
+      listRef.current?.scrollTo(0, 0);
+    } catch {
+      setError("Failed to connect");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchDir(initialPath || "");
+  }, []);
+
+  return (
+    <div className="rounded-xl border border-[var(--card-border)] bg-[var(--card-bg)] overflow-hidden shadow-lg">
+      {/* Path bar */}
+      <div className="flex items-center gap-2 px-3 py-2 border-b border-[var(--card-border)] bg-[var(--muted)]/30">
+        <input
+          value={browsePath}
+          onChange={(e) => setBrowsePath(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") fetchDir(browsePath);
+          }}
+          className="input text-xs flex-1 py-1"
+          placeholder="Enter path..."
+        />
+        <button
+          type="button"
+          onClick={() => fetchDir(browsePath)}
+          className="text-[10px] font-bold uppercase tracking-wider text-[var(--primary)] hover:underline px-2 py-1 shrink-0"
+        >
+          Go
+        </button>
+      </div>
+
+      {/* Directory listing */}
+      <div ref={listRef} className="max-h-48 overflow-y-auto">
+        {loading && (
+          <div className="px-3 py-4 text-xs text-[var(--muted-foreground)] text-center">Loading...</div>
+        )}
+        {error && (
+          <div className="px-3 py-4 text-xs text-[var(--destructive)] text-center">{error}</div>
+        )}
+        {!loading && result && (
+          <div className="py-1">
+            {result.parent && (
+              <button
+                type="button"
+                onClick={() => fetchDir(result.parent!)}
+                className="w-full text-left px-3 py-1.5 text-sm hover:bg-[var(--muted)]/50 transition-colors flex items-center gap-2"
+              >
+                <span className="text-[var(--muted-foreground)]">↑</span>
+                <span className="text-[var(--muted-foreground)]">..</span>
+              </button>
+            )}
+            {result.dirs.length === 0 && !result.parent && (
+              <div className="px-3 py-3 text-xs text-[var(--muted-foreground)] text-center">No subdirectories</div>
+            )}
+            {result.dirs.map((dir) => (
+              <button
+                key={dir.path}
+                type="button"
+                onClick={() => fetchDir(dir.path)}
+                className="w-full text-left px-3 py-1.5 text-sm hover:bg-[var(--muted)]/50 transition-colors flex items-center gap-2"
+              >
+                <span className="text-[var(--muted-foreground)]">📁</span>
+                <span className="truncate">{dir.name}</span>
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Actions */}
+      <div className="flex items-center justify-between px-3 py-2 border-t border-[var(--card-border)] bg-[var(--muted)]/30">
+        <span className="text-[10px] text-[var(--muted-foreground)] truncate max-w-[60%]">
+          {result?.current || browsePath}
+        </span>
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            onClick={onCancel}
+            className="text-xs font-medium text-[var(--muted-foreground)] hover:underline px-2 py-1"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={() => onSelect(result?.current || browsePath)}
+            className="text-xs font-bold text-[var(--primary)] hover:underline px-2 py-1"
+          >
+            Select
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/cloud-runtime/standalone/components/FirstRunModal/index.tsx

@@ -111,23 +111,23 @@ export const FirstRunModal: React.FC<FirstRunModalProps> = ({
         aria-modal="true"
         aria-labelledby={headingId}
         aria-describedby={descId}
-        className="relative w-full max-w-lg rounded-xl bg-white shadow-xl ring-1 ring-slate-200 flex flex-col max-h-[90vh] min-w-0"
+        className="relative w-full max-w-lg rounded-xl bg-[var(--card-bg)] shadow-xl ring-1 ring-[var(--border)] flex flex-col max-h-[90vh] min-w-0"
       >
         {/* Header */}
-        <div className="px-4 sm:px-6 pt-5 sm:pt-6 pb-4 border-b border-slate-100">
+        <div className="px-4 sm:px-6 pt-5 sm:pt-6 pb-4 border-b border-[var(--border)]">
           <h2
             id={headingId}
-            className="text-lg font-semibold text-slate-900 leading-snug"
+            className="text-lg font-semibold text-[var(--foreground)] leading-snug"
           >
             Set up your workspace
           </h2>
           <p
             id={descId}
-            className="mt-1 text-sm text-slate-500 leading-relaxed"
+            className="mt-1 text-sm text-[var(--muted-foreground)] leading-relaxed"
           >
             Add one or more folders where you keep your projects. agx-chat will
             use these to suggest files when you type{" "}
-            <code className="rounded bg-slate-100 px-1 py-0.5 text-xs font-mono text-slate-700">
+            <code className="rounded bg-[var(--muted)] px-1 py-0.5 text-xs font-mono text-[var(--foreground)]">
               @filename
             </code>
             .
@@ -140,7 +140,7 @@ export const FirstRunModal: React.FC<FirstRunModalProps> = ({
           <section aria-labelledby="first-run-roots-heading">
             <h3
               id="first-run-roots-heading"
-              className="text-sm font-semibold text-slate-700 mb-3"
+              className="text-sm font-semibold text-[var(--foreground)] mb-3"
             >
               Workspace folders
             </h3>
@@ -169,11 +169,11 @@ export const FirstRunModal: React.FC<FirstRunModalProps> = ({
           {/* Home search consent */}
           <section
             aria-labelledby="first-run-consent-heading"
-            className="border-t border-slate-100 pt-5"
+            className="border-t border-[var(--border)] pt-5"
           >
             <h3
               id="first-run-consent-heading"
-              className="text-sm font-semibold text-slate-700 mb-3"
+              className="text-sm font-semibold text-[var(--foreground)] mb-3"
             >
               Home directory search
             </h3>
@@ -186,11 +186,11 @@ export const FirstRunModal: React.FC<FirstRunModalProps> = ({
         </div>
 
         {/* Footer */}
-        <div className="px-4 sm:px-6 py-4 border-t border-slate-100 flex flex-col-reverse sm:flex-row justify-between gap-3">
+        <div className="px-4 sm:px-6 py-4 border-t border-[var(--border)] flex flex-col-reverse sm:flex-row justify-between gap-3">
           <button
             type="button"
             onClick={handleSkip}
-            className="text-sm text-slate-500 hover:text-slate-700 underline underline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-400 rounded"
+            className="text-sm text-[var(--muted-foreground)] hover:text-[var(--foreground)] underline underline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--border)] rounded"
           >
             Skip for now
           </button>

package/cloud-runtime/standalone/components/KanbanBoard.tsx

@@ -503,21 +503,21 @@ function StageColumn({
       data-testid={stage}
       className={`
         w-full xl:flex-shrink-0 xl:w-80 flex flex-col min-h-0
-        bg-slate-100/40 rounded-2xl border border-slate-200/50 shadow-inner overflow-hidden
+        bg-[var(--muted)]/40 rounded-2xl border border-[var(--border)]/50 shadow-inner overflow-hidden
         transition-all duration-200
         ${isOver ? 'ring-2 ring-[var(--primary)] ring-opacity-30 bg-[var(--primary-muted)]/10' : ''}
       `}
       style={{ animationDelay: `${index * 50}ms` }}
     >
       {/* Glassmorphic Column Header */}
-      <div className="p-4 flex items-center justify-between bg-white/30 backdrop-blur-sm border-b border-slate-200/20">
+      <div className="p-4 flex items-center justify-between bg-[var(--card-bg)]/30 backdrop-blur-sm border-b border-[var(--border)]/20">
         <div className="flex items-center gap-3">
           <span className="text-lg">{config.icon}</span>
-          <h3 className="font-bold text-[11px] uppercase tracking-widest text-slate-500">
+          <h3 className="font-bold text-[11px] uppercase tracking-widest text-[var(--muted-foreground)]">
             {config.label}
           </h3>
         </div>
-        <span className="text-[10px] font-bold text-slate-400 bg-white px-2 py-0.5 rounded-full border border-slate-100">
+        <span className="text-[10px] font-bold text-[var(--muted-foreground)] bg-[var(--card-bg)] px-2 py-0.5 rounded-full border border-[var(--border)]">
           {tasks.length}
         </span>
       </div>
@@ -598,10 +598,10 @@ function FlatColumnContent({ stage, tasks, allTasks, selectedTaskId, setSelected
           <button
             onClick={(e) => { e.stopPropagation(); handleAddClick(); }}
             disabled={isCreating}
-            className="w-full py-2.5 rounded-xl border border-dashed border-slate-200 text-slate-300 text-[10px] font-bold uppercase tracking-widest hover:bg-white hover:border-indigo-200 hover:text-indigo-400 transition-all flex items-center justify-center gap-2 mb-1"
+            className="w-full py-2.5 rounded-xl border border-dashed border-[var(--border)] text-[var(--muted-foreground)] text-[10px] font-bold uppercase tracking-widest hover:bg-[var(--card-bg)] hover:border-indigo-200 hover:text-indigo-400 transition-all flex items-center justify-center gap-2 mb-1"
           >
             {isCreating ? (
-              <span className="spinner w-3 h-3 border-2 border-slate-300 border-t-indigo-400 rounded-full" />
+              <span className="spinner w-3 h-3 border-2 border-[var(--border)] border-t-indigo-400 rounded-full" />
             ) : (
               <>
                 <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
@@ -616,7 +616,7 @@ function FlatColumnContent({ stage, tasks, allTasks, selectedTaskId, setSelected
 
         {/* Inline editable placeholder */}
         {isAdding && (
-          <div className="bg-white border-2 border-indigo-400 rounded-xl p-3 shadow-lg shadow-indigo-50 mb-1" onClick={(e) => e.stopPropagation()}>
+          <div className="bg-[var(--card-bg)] border-2 border-indigo-400 rounded-xl p-3 shadow-lg shadow-indigo-50 mb-1" onClick={(e) => e.stopPropagation()}>
             <input
               ref={inputRef}
               type="text"
@@ -631,9 +631,9 @@ function FlatColumnContent({ stage, tasks, allTasks, selectedTaskId, setSelected
                 else handleSave();
               }}
               placeholder="Task title..."
-              className="w-full text-sm font-medium text-slate-800 bg-transparent outline-none placeholder:text-slate-300"
+              className="w-full text-sm font-medium text-[var(--foreground)] bg-transparent outline-none placeholder:text-[var(--muted-foreground)]"
             />
-            <p className="text-[10px] text-slate-400 mt-1">Press Enter to create · Esc to cancel</p>
+            <p className="text-[10px] text-[var(--muted-foreground)] mt-1">Press Enter to create · Esc to cancel</p>
           </div>
         )}
 

package/cloud-runtime/standalone/components/OfflineIndicator.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { WifiOff, Wifi } from "lucide-react";
+
+interface OfflineIndicatorProps {
+  /** Custom check interval in milliseconds (default: 30000) */
+  checkInterval?: number;
+  /** Custom endpoint to check (default: /api/health) */
+  checkEndpoint?: string;
+  /** Show reconnecting status when coming back online */
+  showReconnecting?: boolean;
+}
+
+/**
+ * Offline indicator that shows when the app loses connection to the backend.
+ * Displays a subtle banner at the top of the screen.
+ */
+export function OfflineIndicator({
+  checkInterval = 30000,
+  checkEndpoint = "/api/health",
+  showReconnecting = true,
+}: OfflineIndicatorProps) {
+  const [isOnline, setIsOnline] = useState(true);
+  const [isReconnecting, setIsReconnecting] = useState(false);
+  const [lastOnlineTime, setLastOnlineTime] = useState<Date | null>(null);
+
+  useEffect(() => {
+    let checkTimer: NodeJS.Timeout;
+    let reconnectAttempts = 0;
+    const maxReconnectAttempts = 5;
+    const reconnectDelay = 2000;
+
+    const checkConnection = async () => {
+      try {
+        const response = await fetch(checkEndpoint, {
+          method: "HEAD",
+          cache: "no-store",
+        });
+
+        if (response.ok) {
+          setIsOnline(true);
+          setIsReconnecting(false);
+          setLastOnlineTime(new Date());
+          reconnectAttempts = 0;
+        } else {
+          setIsOnline(false);
+        }
+      } catch {
+        setIsOnline(false);
+      }
+    };
+
+    const handleOffline = () => {
+      setIsOnline(false);
+      setLastOnlineTime(new Date());
+    };
+
+    const handleOnline = () => {
+      setIsReconnecting(true);
+      checkConnection();
+    };
+
+    // Listen for browser online/offline events
+    window.addEventListener("offline", handleOffline);
+    window.addEventListener("online", handleOnline);
+
+    // Periodic health checks
+    checkTimer = setInterval(checkConnection, checkInterval);
+
+    // Initial check
+    checkConnection();
+
+    return () => {
+      window.removeEventListener("offline", handleOffline);
+      window.removeEventListener("online", handleOnline);
+      clearInterval(checkTimer);
+    };
+  }, [checkEndpoint, checkInterval]);
+
+  // Don't render anything when online
+  if (isOnline && !isReconnecting) {
+    return null;
+  }
+
+  return (
+    <div
+      className="fixed top-0 left-0 right-0 z-[100] px-4 py-2 flex items-center justify-center gap-2 text-sm font-medium animate-fade-in-down"
+      style={{
+        background: isOnline
+          ? "var(--success-muted)"
+          : "var(--destructive-muted)",
+        color: isOnline ? "var(--success)" : "var(--destructive)",
+        borderBottom: `1px solid ${isOnline ? "var(--status-completed-border)" : "var(--status-failed-border)"}`,
+      }}
+    >
+      {isOnline ? (
+        <>
+          <Wifi size={14} />
+          <span>Reconnected</span>
+        </>
+      ) : (
+        <>
+          <WifiOff size={14} />
+          <span>Offline</span>
+          {lastOnlineTime && (
+            <span className="opacity-70">
+              — Last synced {formatTimeAgo(lastOnlineTime)}
+            </span>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+
+function formatTimeAgo(date: Date): string {
+  const seconds = Math.floor((Date.now() - date.getTime()) / 1000);
+
+  if (seconds < 60) return "just now";
+  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
+  if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
+  return `${Math.floor(seconds / 86400)}d ago`;
+}
+
+// Add the animation keyframe to globals.css or inline
+const styles = `
+@keyframes fade-in-down {
+  from {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+`;
+
+// Inject styles if not already present
+if (typeof document !== "undefined") {
+  const styleId = "offline-indicator-styles";
+  if (!document.getElementById(styleId)) {
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.textContent = styles;
+    document.head.appendChild(style);
+  }
+}

package/cloud-runtime/standalone/components/ProjectModal.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback, useEffect, useRef, useState } from "react";
 import { ProjectWithRepos } from "@/hooks/useProjects";
+import DirectoryBrowser from "@/components/DirectoryBrowser";
 
 export interface ProjectFormState {
   name: string;
@@ -135,6 +136,7 @@ function ProjectFormFields({
   onRemoveRepo: (index: number) => void;
 }) {
   const [expandedRepoIndexes, setExpandedRepoIndexes] = useState<number[]>([]);
+  const [browsingRepoIndex, setBrowsingRepoIndex] = useState<number | null>(null);
   const previousRepoCountRef = useRef(0);
 
   useEffect(() => {
@@ -266,13 +268,35 @@ function ProjectFormFields({
                     className="input text-sm"
                     disabled={isSubmitting}
                   />
-                  <input
-                    value={repo.path}
-                    onChange={(e) => onRepoChange(index, "path", e.target.value)}
-                    placeholder="Local path (mandatory)"
-                    className="input text-sm"
-                    disabled={isSubmitting}
-                  />
+                  <div className="flex items-center gap-2">
+                    <input
+                      value={repo.path}
+                      onChange={(e) => onRepoChange(index, "path", e.target.value)}
+                      placeholder="Local path (mandatory)"
+                      className="input text-sm flex-1"
+                      disabled={isSubmitting}
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setBrowsingRepoIndex(browsingRepoIndex === index ? null : index)}
+                      className="px-3 py-2 rounded-xl border border-[var(--card-border)] bg-[var(--muted)]/30 hover:bg-[var(--muted)]/60 transition-colors text-xs font-semibold text-[var(--muted-foreground)] whitespace-nowrap"
+                      disabled={isSubmitting}
+                    >
+                      Browse
+                    </button>
+                  </div>
+                  {browsingRepoIndex === index && (
+                    <div className="md:col-span-2">
+                      <DirectoryBrowser
+                        initialPath={repo.path || ""}
+                        onSelect={(selectedPath) => {
+                          onRepoChange(index, "path", selectedPath);
+                          setBrowsingRepoIndex(null);
+                        }}
+                        onCancel={() => setBrowsingRepoIndex(null)}
+                      />
+                    </div>
+                  )}
                   <div className="md:col-span-2">
                     <textarea
                       value={repo.notes}
@@ -381,7 +405,7 @@ export default function ProjectModal({
                 {projectGeneratedKnowledge.length > 0 ? (
                   <div className="mt-3 space-y-2">
                     {projectGeneratedKnowledge.slice(0, 5).map((item) => (
-                      <div key={item.id} className="rounded-xl border border-[var(--card-border)] bg-white px-3 py-2 text-sm text-[var(--foreground)]">
+                      <div key={item.id} className="rounded-xl border border-[var(--card-border)] bg-[var(--card-bg)] px-3 py-2 text-sm text-[var(--foreground)]">
                         <div>{item.content}</div>
                         {item.created_at ? (
                           <div className="mt-1 text-[11px] text-[var(--muted-foreground)]">{new Date(item.created_at).toLocaleString()}</div>