@mndrk/agx 2.0.32 → 2.0.34

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

@@ -3,6 +3,7 @@
 import { Task } from "./TaskCard";
 import { useEffect, useState, useMemo } from "react";
 import type { AgentProcessEntry } from "@/lib/agent-process-registry";
+import FloatingPanel from "@/components/FloatingPanel";
 
 const MAX_WORKERS = Number(process.env.NEXT_PUBLIC_AGX_MAX_WORKERS) || 10;
 
@@ -13,6 +14,7 @@ interface NowRunningPanelProps {
   onStop?: (taskId: string) => void;
   onRetry?: (taskId: string) => void;
   cancellingTaskId?: string | null;
+  panelId?: string;
 }
 
 export default function NowRunningPanel({
@@ -22,6 +24,7 @@ export default function NowRunningPanel({
   onStop,
   onRetry,
   cancellingTaskId,
+  panelId = "now-running-panel",
 }: NowRunningPanelProps) {
   // Active processes (spawning or running)
   const activeProcesses = useMemo(
@@ -61,8 +64,14 @@ export default function NowRunningPanel({
   if (runningTasks.length === 0) return null;
 
   return (
-    <div className="w-full bg-[var(--card-bg)] border-b border-[var(--border)] mb-6 animate-fade-in-down">
-      <div className="max-w-full overflow-x-auto no-scrollbar">
+    <FloatingPanel
+      panelId={panelId}
+      defaultBounds={{ x: 24, y: 120, width: 720, height: 248 }}
+      minWidth={420}
+      minHeight={180}
+      className="animate-fade-in-down"
+      bodyClassName="flex-1 overflow-auto"
+      titleBar={(
         <div className="flex items-center gap-4 p-3 sm:p-4 flex-wrap sm:flex-nowrap sm:min-w-max">
           <div className="flex flex-col justify-center pr-4 border-r border-[var(--border)]">
             <h3 className="text-sm font-bold text-[var(--foreground)] whitespace-nowrap flex items-center gap-2">
@@ -98,89 +107,90 @@ export default function NowRunningPanel({
               />
             </div>
           </div>
+        </div>
+      )}
+    >
+      <div className="max-w-full overflow-x-auto no-scrollbar p-3 sm:p-4">
+        <div className="flex items-center gap-3 flex-wrap">
+          {runningTasks.map((task) => {
+            const isStopping = task.id === cancellingTaskId;
+            return (
+              <div
+                key={task.id}
+                onClick={() => onTaskClick?.(task)}
+                className="group flex items-center gap-3 pl-3 pr-2 py-2 bg-[var(--background)] border border-[var(--border)] rounded-lg hover:border-[var(--primary)] transition-all cursor-pointer shadow-sm hover:shadow-md min-w-0 w-full sm:min-w-[280px] sm:w-auto"
+              >
+                <div className="w-6 h-6 sm:w-8 sm:h-8 rounded-full bg-[var(--muted)] flex items-center justify-center text-[10px] sm:text-xs font-bold border border-[var(--border)] shrink-0">
+                  {task.provider ? task.provider.substring(0, 2).toUpperCase() : "AG"}
+                </div>
 
-          <div className="flex items-center gap-3 flex-wrap">
-            {runningTasks.map((task) => {
-              const isStopping = task.id === cancellingTaskId;
-              return (
-                <div
-                  key={task.id}
-                  onClick={() => onTaskClick?.(task)}
-                  className="group flex items-center gap-3 pl-3 pr-2 py-2 bg-[var(--background)] border border-[var(--border)] rounded-lg hover:border-[var(--primary)] transition-all cursor-pointer shadow-sm hover:shadow-md min-w-0 w-full sm:min-w-[280px] sm:w-auto"
-                >
-                  {/* Agent Icon/Avatar */}
-                  <div className="w-6 h-6 sm:w-8 sm:h-8 rounded-full bg-[var(--muted)] flex items-center justify-center text-[10px] sm:text-xs font-bold border border-[var(--border)] shrink-0">
-                    {task.provider ? task.provider.substring(0, 2).toUpperCase() : "AG"}
+                <div className="flex flex-col flex-1 min-w-0">
+                  <div className="flex items-center justify-between text-xs mb-0.5">
+                    <span className="font-semibold text-[var(--foreground)] truncate max-w-[120px]">
+                      {task.provider || "Agent"} {task.model ? `• ${task.model}` : ""}
+                    </span>
+                    <span className="font-mono text-[var(--muted-foreground)]">
+                      {times[task.id] || "0m"}
+                    </span>
                   </div>
 
-                  <div className="flex flex-col flex-1 min-w-0">
-                    <div className="flex items-center justify-between text-xs mb-0.5">
-                      <span className="font-semibold text-[var(--foreground)] truncate max-w-[120px]">
-                        {task.provider || "Agent"} {task.model ? `• ${task.model}` : ""}
-                      </span>
-                      <span className="font-mono text-[var(--muted-foreground)]">
-                        {times[task.id] || "0m"}
-                      </span>
-                    </div>
-                    
-                    <div className="flex items-center justify-between gap-2">
-                      <span className="text-[11px] text-[var(--muted-foreground)] truncate max-w-[140px]">
-                        {task.title || task.content.substring(0, 30)}
-                      </span>
-                      {/* Tiny Progress Bar */}
-                      <div className="w-12 h-1 bg-[var(--muted)] rounded-full overflow-hidden">
-                        <div 
-                          className="h-full bg-[var(--primary)] animate-pulse rounded-full"
-                          style={{ width: `${Math.random() * 40 + 30}%` }} // Mock progress for now
-                        />
-                      </div>
+                  <div className="flex items-center justify-between gap-2">
+                    <span className="text-[11px] text-[var(--muted-foreground)] truncate max-w-[140px]">
+                      {task.title || task.content.substring(0, 30)}
+                    </span>
+                    <div className="w-12 h-1 bg-[var(--muted)] rounded-full overflow-hidden">
+                      <div
+                        className="h-full bg-[var(--primary)] animate-pulse rounded-full"
+                        style={{ width: `${Math.random() * 40 + 30}%` }}
+                      />
                     </div>
                   </div>
+                </div>
 
-                  {/* Actions (visible on hover) */}
-                  <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity pl-2 border-l border-[var(--border)]">
-                    <button
-                      type="button"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        if (isStopping) return;
-                        onStop?.(task.id);
-                      }}
-                      disabled={isStopping}
-                      className={`p-1 rounded transition-all ${isStopping ? "cursor-wait text-[var(--destructive)]/80 opacity-80" : "hover:bg-[var(--destructive)]/10 text-[var(--muted-foreground)] hover:text-[var(--destructive)]"}`}
-                      title={isStopping ? "Stopping..." : "Stop Task"}
-                    >
-                      {isStopping ? (
-                        <span className="inline-flex h-3 w-3 rounded-full border border-[var(--destructive)] border-t-transparent animate-spin" />
-                      ) : (
-                        <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
-                          <rect x="6" y="6" width="12" height="12" rx="2" />
-                        </svg>
-                      )}
-                    </button>
-                    <button
-                      type="button"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        onRetry?.(task.id);
-                      }}
-                      className="p-1 hover:bg-[var(--primary)]/10 text-[var(--muted-foreground)] hover:text-[var(--primary)] rounded"
-                      title="Retry / Restart"
-                    >
-                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
-                        <path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
-                        <path d="M3 3v5h5" />
-                        <path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" />
-                        <path d="M16 21h5v-5" />
+                <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity pl-2 border-l border-[var(--border)]">
+                  <button
+                    type="button"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      if (isStopping) return;
+                      onStop?.(task.id);
+                    }}
+                    disabled={isStopping}
+                    className={`p-1 rounded transition-all ${isStopping ? "cursor-wait text-[var(--destructive)]/80 opacity-80" : "hover:bg-[var(--destructive)]/10 text-[var(--muted-foreground)] hover:text-[var(--destructive)]"}`}
+                    title={isStopping ? "Stopping..." : "Stop Task"}
+                    data-no-panel-drag="true"
+                  >
+                    {isStopping ? (
+                      <span className="inline-flex h-3 w-3 rounded-full border border-[var(--destructive)] border-t-transparent animate-spin" />
+                    ) : (
+                      <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
+                        <rect x="6" y="6" width="12" height="12" rx="2" />
                       </svg>
-                    </button>
-                  </div>
+                    )}
+                  </button>
+                  <button
+                    type="button"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onRetry?.(task.id);
+                    }}
+                    className="p-1 hover:bg-[var(--primary)]/10 text-[var(--muted-foreground)] hover:text-[var(--primary)] rounded"
+                    title="Retry / Restart"
+                    data-no-panel-drag="true"
+                  >
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+                      <path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
+                      <path d="M3 3v5h5" />
+                      <path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" />
+                      <path d="M16 21h5v-5" />
+                    </svg>
+                  </button>
                 </div>
-              );
-            })}
-          </div>
+              </div>
+            );
+          })}
         </div>
       </div>
-    </div>
+    </FloatingPanel>
   );
 }

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

@@ -211,16 +211,21 @@ function ProjectFormFields({
 
       <div className="space-y-4">
         <div className="flex items-center justify-between border-b border-[var(--card-border)] pb-2">
-          <h3 className="text-sm font-bold uppercase tracking-widest text-[var(--muted-foreground)]">
-            Repositories
-          </h3>
+          <div>
+            <h3 className="text-sm font-bold uppercase tracking-widest text-[var(--muted-foreground)]">
+              Folders
+            </h3>
+            <p className="text-[11px] text-[var(--muted-foreground)] mt-0.5">
+              Code repos, doc folders, design assets, config directories — any path your team needs access to.
+            </p>
+          </div>
           <button
             type="button"
             onClick={onAddRepo}
-            className="text-xs font-semibold text-[var(--primary)] hover:underline"
+            className="text-xs font-semibold text-[var(--primary)] hover:underline flex-shrink-0"
             disabled={isSubmitting}
           >
-            + Add Repository
+            + Add Folder
           </button>
         </div>
         <div className="space-y-4">
@@ -228,10 +233,10 @@ function ProjectFormFields({
             <div key={index} className="p-4 rounded-2xl border border-[var(--card-border)] bg-[var(--muted)]/20 space-y-3 relative group">
               <div className="flex items-center justify-between">
                 <div>
-                  <div className="text-xs font-bold text-[var(--foreground)] uppercase">Repo #{index + 1}</div>
+                  <div className="text-xs font-bold text-[var(--foreground)] uppercase">Folder #{index + 1}</div>
                   {isEditingProject && !isRepoExpanded(index) ? (
                     <div className="mt-1 text-sm text-[var(--muted-foreground)]">
-                      <div>{repo.name || "Unnamed repository"}</div>
+                      <div>{repo.name || "Unnamed folder"}</div>
                       <div className="truncate">{repo.path || "No local path set"}</div>
                     </div>
                   ) : null}
@@ -264,7 +269,7 @@ function ProjectFormFields({
                   <input
                     value={repo.name}
                     onChange={(e) => onRepoChange(index, "name", e.target.value)}
-                    placeholder="Name (e.g. Frontend)"
+                    placeholder="Name (e.g. Frontend, API Docs, Design System)"
                     className="input text-sm"
                     disabled={isSubmitting}
                   />
@@ -272,13 +277,25 @@ function ProjectFormFields({
                     <input
                       value={repo.path}
                       onChange={(e) => onRepoChange(index, "path", e.target.value)}
-                      placeholder="Local path (mandatory)"
+                      placeholder="Local path to folder"
                       className="input text-sm flex-1"
                       disabled={isSubmitting}
                     />
                     <button
                       type="button"
-                      onClick={() => setBrowsingRepoIndex(browsingRepoIndex === index ? null : index)}
+                      onClick={async () => {
+                        try {
+                          const res = await fetch("/api/filesystem/pick-folder", { method: "POST" });
+                          const data = await res.json();
+                          if (data.path) {
+                            onRepoChange(index, "path", data.path);
+                          }
+                          // If cancelled, do nothing
+                        } catch {
+                          // Fallback to inline browser if native picker fails
+                          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}
                     >
@@ -301,7 +318,7 @@ function ProjectFormFields({
                     <textarea
                       value={repo.notes}
                       onChange={(e) => onRepoChange(index, "notes", e.target.value)}
-                      placeholder="Repo-specific rules and notes (placeholder for conventions, constraints, ownership, deploy notes...)"
+                      placeholder="Notes for this folder — e.g. coding conventions, deploy steps, ownership, doc standards..."
                       className="input text-sm w-full min-h-24 resize-y"
                       disabled={isSubmitting}
                     />
@@ -387,7 +404,7 @@ export default function ProjectModal({
               {editingProject ? "Edit Project" : "Create New Project"}
             </h2>
             <p className="text-xs text-[var(--muted-foreground)] mt-0.5">
-              {editingProject ? "Update your project settings and repositories." : "Define a new project and connect repositories."}
+              {editingProject ? "Update your project settings and folders." : "Define a new project and connect folders."}
             </p>
           </div>
           <button onClick={onClose} className="p-2 rounded-xl hover:bg-[var(--muted)]/50 transition-colors">