@mndrk/agx 2.0.23 → 2.0.24

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

@@ -130,7 +130,7 @@ export default function TaskCard({ task, onClick, compact = false, onStatusChang
       tabIndex={0}
       onKeyDown={(e) => e.key === 'Enter' && onClick?.()}
       className={`group relative flex flex-col gap-1.5 sm:gap-2 p-2 sm:p-3 rounded-lg
-        bg-white border shadow-sm
+        bg-[var(--card-bg)] border shadow-sm
         transition-all duration-200 cursor-grab active:cursor-grabbing
         focus-visible:outline-2 focus-visible:outline-[var(--ring)] focus-visible:outline-offset-2
         ${relationship === 'active' ? 'border-primary ring-2 ring-primary/20 z-40' :
@@ -140,7 +140,7 @@ export default function TaskCard({ task, onClick, compact = false, onStatusChang
                 'border-[var(--card-border)] hover:shadow-md hover:border-[var(--primary-muted)] hover:ring-1 hover:ring-[var(--primary-muted)]'
         }
         ${task.status === 'failed' && relationship === 'none' ? 'border-red-200 bg-red-50/30 dark:bg-red-950/20' : ''}
-        ${task.status === 'completed' && relationship === 'none' ? 'opacity-75 bg-gray-50 dark:bg-gray-900/50' : ''}
+        ${task.status === 'completed' && relationship === 'none' ? 'opacity-75 bg-[var(--secondary)]' : ''}
       `}
     >
       <div className="flex items-start justify-between gap-2">
@@ -163,7 +163,7 @@ export default function TaskCard({ task, onClick, compact = false, onStatusChang
       <div className="flex items-center justify-between min-h-[16px]">
         <div className="flex items-center gap-2 text-[10px] text-[var(--muted-foreground)] flex-wrap">
           {task.priority !== undefined && task.priority > 0 && (
-            <span className={`px-1.5 py-0.5 rounded font-semibold bg-gray-100 ${task.priority === 0 ? 'text-[var(--primary)]' : ''}`}>
+            <span className={`px-1.5 py-0.5 rounded font-semibold bg-[var(--secondary)] ${task.priority === 0 ? 'text-[var(--primary)]' : ''}`}>
               P{task.priority}
             </span>
           )}

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

@@ -1,4 +1,5 @@
 import React, { useRef, useState } from "react";
+import DirectoryBrowser from "@/components/DirectoryBrowser";
 
 export interface WorkspaceRootsListProps {
   roots: string[];
@@ -16,6 +17,7 @@ export const WorkspaceRootsList: React.FC<WorkspaceRootsListProps> = ({
 }) => {
   const [inputValue, setInputValue] = useState("");
   const [inputVisible, setInputVisible] = useState(false);
+  const [browsing, setBrowsing] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
   const addBtnRef = useRef<HTMLButtonElement>(null);
 
@@ -27,6 +29,7 @@ export const WorkspaceRootsList: React.FC<WorkspaceRootsListProps> = ({
   const closeInput = () => {
     setInputVisible(false);
     setInputValue("");
+    setBrowsing(false);
     // Return focus to the add-folder button
     addBtnRef.current?.focus();
   };
@@ -53,16 +56,16 @@ export const WorkspaceRootsList: React.FC<WorkspaceRootsListProps> = ({
           {roots.map((root) => (
             <li
               key={root}
-              className="flex items-center justify-between gap-2 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2"
+              className="flex items-center justify-between gap-2 rounded-lg border border-[var(--border)] bg-[var(--app-shell-subtle)] px-3 py-2"
             >
-              <span className="truncate text-sm font-mono text-slate-700" title={root}>
+              <span className="truncate text-sm font-mono text-[var(--foreground)]" title={root}>
                 {root}
               </span>
               <button
                 type="button"
                 aria-label={`Remove ${root}`}
                 onClick={() => onRemove(root)}
-                className={`shrink-0 rounded text-xs font-medium text-slate-500 hover:text-red-600 hover:bg-red-50 px-2 py-1 transition-colors ${focusRing}`}
+                className={`shrink-0 rounded text-xs font-medium text-[var(--muted-foreground)] hover:text-red-600 hover:bg-red-50 px-2 py-1 transition-colors ${focusRing}`}
               >
                 Remove
               </button>
@@ -73,8 +76,8 @@ export const WorkspaceRootsList: React.FC<WorkspaceRootsListProps> = ({
 
       {/* Empty state */}
       {roots.length === 0 && !inputVisible && (
-        <div className="rounded-lg border border-dashed border-slate-300 bg-slate-50 px-4 py-6 text-center">
-          <p className="text-sm text-slate-500 mb-3">No workspace folders configured.</p>
+        <div className="rounded-lg border border-dashed border-[var(--border)] bg-[var(--app-shell-subtle)] px-4 py-6 text-center">
+          <p className="text-sm text-[var(--muted-foreground)] mb-3">No workspace folders configured.</p>
           <button
             type="button"
             onClick={openInput}
@@ -87,35 +90,54 @@ export const WorkspaceRootsList: React.FC<WorkspaceRootsListProps> = ({
 
       {/* Inline input row */}
       {inputVisible && (
-        <div className="flex flex-wrap gap-2 items-center" role="group" aria-label="Add workspace folder">
-          <label htmlFor="workspace-root-input" className="sr-only">
-            Folder path
-          </label>
-          <input
-            ref={inputRef}
-            id="workspace-root-input"
-            type="text"
-            value={inputValue}
-            onChange={(e) => setInputValue(e.target.value)}
-            onKeyDown={handleKeyDown}
-            placeholder="~/Projects"
-            autoFocus
-            className={`flex-1 min-w-0 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-mono text-slate-800 placeholder:text-slate-400 shadow-sm ${focusRing}`}
-          />
-          <button
-            type="button"
-            onClick={handleAdd}
-            className={`rounded-lg bg-indigo-600 px-3 py-2 text-sm font-semibold text-white hover:bg-indigo-500 transition-colors ${focusRing}`}
-          >
-            Add
-          </button>
-          <button
-            type="button"
-            onClick={closeInput}
-            className={`rounded-lg border border-slate-300 px-3 py-2 text-sm font-medium text-slate-600 hover:bg-slate-50 transition-colors ${focusRing}`}
-          >
-            Cancel
-          </button>
+        <div className="flex flex-col gap-2" role="group" aria-label="Add workspace folder">
+          <div className="flex flex-wrap gap-2 items-center">
+            <label htmlFor="workspace-root-input" className="sr-only">
+              Folder path
+            </label>
+            <input
+              ref={inputRef}
+              id="workspace-root-input"
+              type="text"
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="~/Projects"
+              autoFocus
+              className={`flex-1 min-w-0 rounded-lg border border-[var(--border)] bg-[var(--card-bg)] px-3 py-2 text-sm font-mono text-[var(--foreground)] placeholder:text-[var(--muted-foreground)] shadow-sm ${focusRing}`}
+            />
+            <button
+              type="button"
+              onClick={() => setBrowsing(!browsing)}
+              className={`rounded-lg border border-[var(--border)] px-3 py-2 text-sm font-medium text-[var(--muted-foreground)] hover:bg-[var(--app-shell-subtle)] transition-colors ${focusRing}`}
+            >
+              Browse
+            </button>
+            <button
+              type="button"
+              onClick={handleAdd}
+              className={`rounded-lg bg-indigo-600 px-3 py-2 text-sm font-semibold text-white hover:bg-indigo-500 transition-colors ${focusRing}`}
+            >
+              Add
+            </button>
+            <button
+              type="button"
+              onClick={closeInput}
+              className={`rounded-lg border border-[var(--border)] px-3 py-2 text-sm font-medium text-[var(--muted-foreground)] hover:bg-[var(--app-shell-subtle)] transition-colors ${focusRing}`}
+            >
+              Cancel
+            </button>
+          </div>
+          {browsing && (
+            <DirectoryBrowser
+              initialPath={inputValue || ""}
+              onSelect={(selectedPath) => {
+                setInputValue(selectedPath);
+                setBrowsing(false);
+              }}
+              onCancel={() => setBrowsing(false)}
+            />
+          )}
         </div>
       )}
 
@@ -125,7 +147,7 @@ export const WorkspaceRootsList: React.FC<WorkspaceRootsListProps> = ({
           ref={addBtnRef}
           type="button"
           onClick={openInput}
-          className={`self-start rounded-lg border border-slate-300 px-3 py-1.5 text-sm font-medium text-slate-600 hover:bg-slate-50 transition-colors ${focusRing}`}
+          className={`self-start rounded-lg border border-[var(--border)] px-3 py-1.5 text-sm font-medium text-[var(--muted-foreground)] hover:bg-[var(--app-shell-subtle)] transition-colors ${focusRing}`}
         >
           + Add folder
         </button>

package/cloud-runtime/standalone/components/chat-ui/AttachmentTray.tsx

@@ -31,7 +31,7 @@ export function AttachmentTray({ attachments, onRemove, onRetry }: Props) {
             className={`relative group flex items-center gap-2 rounded-lg border px-2.5 py-1.5 text-xs transition-all ${
               isFailed
                 ? "border-red-200 bg-red-50 text-red-700"
-                : "border-slate-200 bg-slate-50 text-slate-600"
+                : "border-[var(--border)] bg-[var(--app-shell-subtle)] text-[var(--muted-foreground)]"
             }`}
           >
             {/* Thumbnail or icon */}
@@ -42,11 +42,11 @@ export function AttachmentTray({ attachments, onRemove, onRetry }: Props) {
                 className="w-8 h-8 rounded object-cover shrink-0"
               />
             ) : (
-              <div className="w-8 h-8 rounded bg-slate-100 flex items-center justify-center shrink-0">
+              <div className="w-8 h-8 rounded bg-[var(--muted)] flex items-center justify-center shrink-0">
                 {isImage ? (
-                  <Image className="w-4 h-4 text-slate-400" />
+                  <Image className="w-4 h-4 text-[var(--muted-foreground)]" />
                 ) : (
-                  <FileText className="w-4 h-4 text-slate-400" />
+                  <FileText className="w-4 h-4 text-[var(--muted-foreground)]" />
                 )}
               </div>
             )}
@@ -56,13 +56,13 @@ export function AttachmentTray({ attachments, onRemove, onRetry }: Props) {
               {isFailed && att.error ? (
                 <div className="truncate text-[10px] text-red-500">{att.error}</div>
               ) : (
-                <div className="text-[10px] text-slate-400">{formatSize(att.size)}</div>
+                <div className="text-[10px] text-[var(--muted-foreground)]">{formatSize(att.size)}</div>
               )}
             </div>
 
             {/* Progress bar */}
             {isUploading && (
-              <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-slate-200 rounded-b-lg overflow-hidden">
+              <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-[var(--muted)] rounded-b-lg overflow-hidden">
                 <div
                   className="h-full bg-blue-500 transition-all"
                   style={{ width: `${att.progress}%` }}
@@ -85,7 +85,7 @@ export function AttachmentTray({ attachments, onRemove, onRetry }: Props) {
               <button
                 type="button"
                 onClick={() => onRemove(att.id)}
-                className="p-0.5 rounded hover:bg-slate-200 transition-colors"
+                className="p-0.5 rounded hover:bg-[var(--muted)] transition-colors"
                 title="Remove"
               >
                 <X className="w-3 h-3" />