@mndrk/agx 2.0.25 → 2.0.26

package/cloud-runtime/standalone/app/globals.css

@@ -191,8 +191,8 @@ body {
    Scrollbar Styling
    ======================================== */
 ::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
+  width: 6px;
+  height: 6px;
 }
 
 ::-webkit-scrollbar-track {
@@ -200,50 +200,42 @@ body {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: rgba(15, 23, 42, 0.14);
-  border-radius: 999px;
-  border: 3px solid transparent;
-  background-clip: content-box;
-  transition: background var(--transition-fast);
+  background: #cbd5e1; /* slate-300 */
+  border-radius: 4px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: rgba(15, 23, 42, 0.24);
-  border: 3px solid transparent;
-  background-clip: content-box;
+  background: #94a3b8; /* slate-400 */
 }
 
 .scrollbar-thin::-webkit-scrollbar {
-  width: 8px;
+  width: 4px;
+  height: 4px;
 }
 
 .scrollbar-thin::-webkit-scrollbar-thumb {
-  background: rgba(15, 23, 42, 0.14);
-  border-radius: 999px;
-  border: 2px solid transparent;
-  background-clip: content-box;
+  background: #cbd5e1;
+  border-radius: 4px;
 }
 
 .scrollbar-thin::-webkit-scrollbar-thumb:hover {
-  background: rgba(15, 23, 42, 0.24);
-  border: 2px solid transparent;
-  background-clip: content-box;
+  background: #94a3b8;
 }
 
 .dark ::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.1);
+  background: #374151; /* gray-700 */
 }
 
 .dark ::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.2);
+  background: #4b5563; /* gray-600 */
 }
 
 .dark .scrollbar-thin::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.1);
+  background: #374151;
 }
 
 .dark .scrollbar-thin::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.2);
+  background: #4b5563;
 }
 
 .scrollbar-hide {
@@ -394,6 +386,10 @@ select:focus-visible {
 /* ========================================
    Card Styles
    ======================================== */
+.surface-card {
+  @apply bg-white border border-gray-200 hover:bg-gray-50 hover:border-gray-300 hover:shadow-sm dark:shadow-none dark:bg-gray-900/40 dark:border-gray-800 rounded-2xl dark:hover:bg-gray-900/60 dark:hover:border-gray-700 transition-all duration-200;
+}
+
 .card {
   background: var(--card-bg);
   border: 1px solid var(--card-border);
@@ -2752,3 +2748,10 @@ select:focus-visible {
   font-size: 0.6875rem;
   color: var(--text-muted);
 }
+
+/* ========================================
+   Surface Card (Prototype Style)
+   ======================================== */
+.surface-card {
+  @apply relative bg-white border border-gray-200 hover:bg-gray-50 hover:border-gray-300 shadow-sm dark:shadow-none dark:bg-gray-900/40 dark:border-gray-800 rounded-2xl dark:hover:bg-gray-900/60 dark:hover:border-gray-700 transition-all duration-200;
+}

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

@@ -0,0 +1,25 @@
+import React, { forwardRef } from 'react';
+
+export interface ActionToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+  // A wrapper for group-hover revealed actions
+}
+
+export const ActionToolbar = forwardRef<HTMLDivElement, ActionToolbarProps>(
+  ({ children, className = '', ...props }, ref) => {
+    const baseClasses = "absolute top-4 right-4 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200 bg-white border border-gray-200 shadow-md dark:shadow-lg dark:bg-gray-900 dark:border-gray-800 rounded-lg p-1";
+    
+    const classes = `${baseClasses} ${className}`.trim();
+
+    return (
+      <div ref={ref} className={classes} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+
+ActionToolbar.displayName = 'ActionToolbar';
+
+export const ActionToolbarDivider = () => (
+  <div className="w-px h-4 bg-gray-200 dark:bg-gray-800 mx-1" />
+);

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

@@ -0,0 +1,35 @@
+import React, { forwardRef } from 'react';
+
+export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'neutral' | 'primary' | 'destructive' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  ({ className = '', variant = 'neutral', size = 'md', children, ...props }, ref) => {
+    const baseClasses = "inline-flex items-center justify-center rounded-md transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] disabled:opacity-50 disabled:pointer-events-none";
+    
+    const sizeClasses = {
+      sm: "p-1 w-6 h-6",
+      md: "p-1.5 w-8 h-8",
+      lg: "p-2 w-10 h-10"
+    };
+
+    const variantClasses = {
+      neutral: "text-gray-500 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-800",
+      ghost: "text-[var(--muted-foreground)] hover:text-[var(--foreground)] hover:bg-[var(--muted)]",
+      primary: "text-[var(--primary)] hover:text-[var(--primary-foreground)] hover:bg-[var(--primary-hover)]",
+      destructive: "text-gray-500 hover:text-red-600 hover:bg-red-50 dark:text-gray-400 dark:hover:text-red-400 dark:hover:bg-red-400/10"
+    };
+
+    const classes = `${baseClasses} ${sizeClasses[size]} ${variantClasses[variant]} ${className}`.trim();
+
+    return (
+      <button ref={ref} className={classes} {...props}>
+        {children}
+      </button>
+    );
+  }
+);
+
+IconButton.displayName = 'IconButton';

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

@@ -27,8 +27,8 @@ export default function ProjectCard({ project, onEdit, onDelete, onClick, onMana
   return (
     <div 
       onClick={() => onClick?.(project)}
-      className={`p-5 rounded-2xl border border-[var(--card-border)] bg-[var(--card-bg)] shadow-sm space-y-4 transition-all
-        ${onClick ? "cursor-pointer hover:border-[var(--primary)] hover:shadow-md active:scale-[0.99]" : ""}`}
+      className={`p-5 surface-card space-y-4
+        ${onClick ? "cursor-pointer hover:border-gray-300 dark:hover:border-gray-700 hover:shadow-md active:scale-[0.99]" : ""}`}
     >
       <div className="flex items-start justify-between gap-4">
         <div>

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

@@ -129,15 +129,13 @@ export default function TaskCard({ task, onClick, compact = false, onStatusChang
       role="button"
       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-[var(--card-bg)] border shadow-sm
-        transition-all duration-200 cursor-grab active:cursor-grabbing
+      className={`group relative flex flex-col gap-1.5 sm:gap-2 p-2 sm:p-3 surface-card 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' :
           relationship === 'blocking' ? 'border-[var(--status-blocked)] bg-rose-50/30 dark:bg-rose-950/20 z-20' :
             relationship === 'dependent' ? 'border-[var(--status-in-progress)] bg-blue-50/30 dark:bg-blue-950/20 z-20' :
               relationship === 'dimmed' ? 'opacity-40 grayscale scale-[0.98]' :
-                '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-[var(--secondary)]' : ''}

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

@@ -485,7 +485,6 @@ export function Composer({
     onSend(messageText, maxRounds, ids, metas, pinnedParticipantId ?? undefined);
 
     editor.commands.clearContent();
-    setPinnedParticipantId(null);
     setThreadRefs([]);
     attachments.clear();
     fileAttachments.clearFilePaths();
@@ -516,10 +515,10 @@ export function Composer({
     <div className="pb-6">
       <div className="max-w-3xl mx-auto">
         <ComposerDropZone onDrop={attachments.stageFiles}>
-          <div className={`bg-[var(--app-shell-elevated)] rounded-2xl border border-[var(--app-shell-border)] shadow-[0_8px_30px_rgb(0,0,0,0.12)] dark:shadow-[0_8px_30px_rgb(0,0,0,0.5)] transition-all duration-300`}>
+          <div className="bg-white border border-gray-200 shadow-sm focus-within:border-gray-300 focus-within:ring-1 focus-within:ring-gray-300 dark:bg-gray-900 dark:border-gray-800 dark:shadow-lg dark:focus-within:border-gray-600 dark:focus-within:ring-gray-600 transition-all flex flex-col rounded-2xl">
           {/* Ship Mode header */}
           {onAutoModeChange && (
-            <div className={`relative overflow-hidden border-b transition-all duration-500 ${autoMode ? "border-orange-200/50 dark:border-orange-500/30" : "border-[var(--app-shell-border)]"}`}>
+            <div className={`relative overflow-hidden border-b transition-all duration-500 ${autoMode ? "border-orange-200/50 dark:border-orange-500/30" : "border-gray-100 dark:border-gray-800/60"}`}>
               {/* Animated gradient background when active */}
               <div
                 className={`absolute inset-0 transition-opacity duration-700 ${autoMode ? "opacity-100" : "opacity-0"}`}
@@ -576,7 +575,7 @@ export function Composer({
               </div>
             </div>
           )}
-          <div className="p-1.5 focus-within:ring-4 focus-within:ring-[var(--app-shell-border-strong)] transition-all">
+          <div className="p-1.5 transition-all">
 
             {attachments.staged.length > 0 && (
               <div className="mx-2 mt-2 mb-1">
@@ -678,7 +677,7 @@ export function Composer({
             </div>
 
             {/* Meta Footer */}
-            <div className="px-4 pb-2.5 pt-1 flex items-center justify-between border-t border-[var(--app-shell-border)] mt-1">
+            <div className="px-4 pb-2.5 pt-1 flex items-center justify-between border-t border-gray-100 dark:border-gray-800/60 mt-1 transition-colors">
               <div className="flex items-center gap-4">
                 {/* Turn Limit — progress bar + selector */}
                 <div className="flex items-center gap-2">

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

@@ -47,7 +47,7 @@ export function FileMentionPopoverItem({
 
   return (
     <div
-      className={`flex items-center gap-2 px-3 py-2 text-sm transition-colors ${
+      className={`flex items-center gap-2 px-3 py-2 text-sm transition-colors duration-200 ${
         isActive ? "bg-[var(--primary-muted)]" : "hover:bg-[var(--app-shell-subtle)]"
       }`}
     >
@@ -109,7 +109,7 @@ export function FileMentionPopoverItem({
       {isFolder && !isContentsMode && (
         <button
           type="button"
-          className="shrink-0 rounded px-1.5 py-0.5 text-xs text-[var(--muted-foreground)] hover:bg-[var(--muted)] hover:text-[var(--foreground)] transition-colors"
+          className="shrink-0 rounded px-1.5 py-0.5 text-xs text-[var(--muted-foreground)] hover:bg-[var(--muted)] hover:text-[var(--foreground)] transition-colors duration-200"
           title="Attach full directory contents instead of manifest"
           aria-label={`Attach full contents of ${displayPath}`}
           onMouseDown={(e) => e.preventDefault()}

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

@@ -12,6 +12,8 @@ import { Markdown } from "./Markdown";
 import { MessageAttachments } from "./MessageAttachments";
 import { TaskDraftCard } from "./TaskDraftCard";
 import { TaskStatusCard } from "./TaskStatusCard";
+import { ActionToolbar, ActionToolbarDivider } from "../ActionToolbar";
+import { IconButton } from "../IconButton";
 import { MessageSquare, Copy, Hash, Loader2, Trash2, User, Clock, Zap, ListTodo, CheckCircle2, Circle, Link, AtSign, Rocket } from "lucide-react";
 import { agentAvatarUrl } from "./ParticipantBar";
 import { stripMarkers } from "@/lib/chat-utils";
@@ -331,51 +333,56 @@ export function MessageList({
           }
 
           return (
-            <div key={msg.id} className={`max-w-2xl mx-auto bg-[var(--card-bg)] rounded-2xl border border-[var(--card-border)] shadow-sm mb-6 group transition-all hover:border-[var(--card-hover-border)] relative ${statusMenuMessageId === msg.id ? 'z-50' : ''}`}>
+            <div key={msg.id} className={`max-w-2xl mx-auto surface-card mb-6 group relative ${statusMenuMessageId === msg.id ? 'z-50' : ''}`}>
               {(onCopyThread || onAddToChat || onDeleteThreadRoot) && (
-                <div
-                  className="absolute top-4 right-4 z-10 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity"
-                >
+                <ActionToolbar className="z-10">
                   {onAddToChat && (
-                    <button
+                    <IconButton
                       type="button"
+                      variant="primary"
+                      size="sm"
                       onClick={() => onAddToChat(msg.id)}
-                      className="p-1.5 text-[var(--app-shell-muted)] hover:bg-[var(--primary-muted)] hover:text-[var(--primary)] rounded-md transition-colors"
                       title="Mention in chat"
                     >
                       <AtSign className="w-3.5 h-3.5" />
-                    </button>
+                    </IconButton>
                   )}
-                  <button
+                  <IconButton
                     type="button"
+                    variant="neutral"
+                    size="sm"
                     onClick={() => { navigator.clipboard.writeText(msg.id); }}
-                    className="p-1.5 text-[var(--app-shell-muted)] hover:bg-[var(--app-shell-subtle)] rounded-md transition-colors"
                     title="Copy message ID"
                   >
                     <Link className="w-3.5 h-3.5" />
-                  </button>
+                  </IconButton>
                   {onCopyThread && (
-                    <button
+                    <IconButton
                       type="button"
+                      variant="neutral"
+                      size="sm"
                       onClick={() => onCopyThread(msg.id)}
-                      className="p-1.5 text-[var(--app-shell-muted)] hover:bg-[var(--app-shell-subtle)] rounded-md transition-colors"
                       title="Copy thread as markdown"
                     >
                       <Copy className="w-3.5 h-3.5" />
-                    </button>
+                    </IconButton>
                   )}
                   {onDeleteThreadRoot && (
-                    <button
-                      type="button"
-                      onClick={() => onDeleteThreadRoot(msg.id)}
-                      disabled={isDeletingRoot}
-                      className="p-1.5 text-[var(--app-shell-muted)] hover:bg-[var(--destructive-muted)] hover:text-[var(--destructive)] rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-                      title="Delete this thread"
-                    >
-                      {isDeletingRoot ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Trash2 className="w-3.5 h-3.5" />}
-                    </button>
+                    <>
+                      <ActionToolbarDivider />
+                      <IconButton
+                        type="button"
+                        variant="destructive"
+                        size="sm"
+                        onClick={() => onDeleteThreadRoot(msg.id)}
+                        disabled={isDeletingRoot}
+                        title="Delete this thread"
+                      >
+                        {isDeletingRoot ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Trash2 className="w-3.5 h-3.5" />}
+                      </IconButton>
+                    </>
                   )}
-                </div>
+                </ActionToolbar>
               )}
               <div className="flex flex-col">
                 <div className="p-5">
@@ -495,18 +502,18 @@ export function MessageList({
                     )}
 
                     {/* Action Pills */}
-                    <div className="flex flex-wrap items-center gap-2 mt-2">
+                    <div className="flex flex-wrap items-center gap-2 pt-2 mt-2 border-t border-[var(--card-border)]">
                       {onSummarize && threadData && threadData.replyCount > 0 && (
                         <button
                           type="button"
                           onClick={() => onSummarize(msg.id)}
                           disabled={summarizingThreads?.has(msg.id)}
-                          className="flex items-center gap-1.5 px-3 py-1.5 bg-[var(--card-bg)] border border-[var(--card-border)] rounded-full text-xs font-bold text-[var(--muted-foreground)] hover:bg-[var(--app-shell-subtle)] transition-colors shadow-sm disabled:opacity-50"
+                          className="flex items-center gap-1.5 px-3 py-1.5 bg-[var(--app-shell-subtle)] hover:bg-[var(--item-hover-bg)] text-[var(--foreground)] border border-[var(--card-border)] text-xs font-medium rounded-lg transition-colors disabled:opacity-50"
                         >
                           {summarizingThreads?.has(msg.id) ? (
-                            <Loader2 className="w-3.5 h-3.5 animate-spin text-[var(--app-shell-muted)]" />
+                            <Loader2 className="w-3.5 h-3.5 animate-spin text-[var(--muted-foreground)]" />
                           ) : (
-                            <Clock className="w-3.5 h-3.5 text-[var(--app-shell-muted)]" />
+                            <Clock className="w-3.5 h-3.5 text-[var(--muted-foreground)]" />
                           )}
                           {summarizingThreads?.has(msg.id) ? "Summarizing\u2026" : "Summarize"}
                         </button>
@@ -517,29 +524,26 @@ export function MessageList({
                           type="button"
                           onClick={() => onCreateTasks(msg.id)}
                           disabled={extractingTasks?.has(msg.id)}
-                          className="flex items-center gap-1.5 px-3 py-1.5 bg-[var(--card-bg)] border border-[var(--card-border)] rounded-full text-xs font-bold text-[var(--muted-foreground)] hover:bg-[var(--app-shell-subtle)] transition-colors shadow-sm disabled:opacity-50"
+                          className="flex items-center gap-1.5 px-3 py-1.5 bg-[var(--app-shell-subtle)] hover:bg-[var(--item-hover-bg)] text-[var(--foreground)] border border-[var(--card-border)] text-xs font-medium rounded-lg transition-colors disabled:opacity-50"
                         >
                           {extractingTasks?.has(msg.id) ? (
-                            <Loader2 className="w-3.5 h-3.5 animate-spin text-[var(--app-shell-muted)]" />
+                            <Loader2 className="w-3.5 h-3.5 animate-spin text-[var(--muted-foreground)]" />
                           ) : (
-                            <ListTodo className="w-3.5 h-3.5 text-[var(--app-shell-muted)]" />
+                            <ListTodo className="w-3.5 h-3.5 text-[var(--muted-foreground)]" />
                           )}
                           {extractingTasks?.has(msg.id) ? "Extracting…" : taskDrafts?.[msg.id] ? "Re-extract tasks" : "Create tasks"}
                         </button>
                       )}
 
                       {threadData && threadData.replyCount > 0 && onOpenThread && (
-                        <button
-                          type="button"
-                          onClick={() => onOpenThread(msg.id)}
-                          className="flex items-center gap-2 px-3 py-1.5 bg-[var(--app-shell-subtle)] border border-[var(--app-shell-border)] rounded-full text-xs font-bold text-[var(--app-shell-muted)] hover:bg-[var(--item-hover-bg)] transition-colors"
-                        >
-                          <div className="flex -space-x-1.5">
+                        <div className="ml-auto flex items-center gap-2 cursor-pointer hover:opacity-80 transition-opacity" onClick={() => onOpenThread(msg.id)}>
+                          <span className="text-xs text-[var(--muted-foreground)] font-medium">{threadData.replyCount} replies</span>
+                          <div className="flex -space-x-2">
                             {threadData.participants.slice(0, 3).map((pid) => {
                               if (pid === 'user') {
                                 return (
-                                  <div key="user" className="w-4 h-4 rounded-full bg-[var(--app-shell-subtle)] flex items-center justify-center ring-1 ring-[var(--card-bg)]">
-                                    <User className="w-2.5 h-2.5 text-[var(--app-shell-muted)]" />
+                                  <div key="user" className="w-6 h-6 rounded-full bg-[var(--app-shell-subtle)] border-2 border-[var(--card-bg)] flex items-center justify-center z-10">
+                                    <User className="w-3 h-3 text-[var(--muted-foreground)]" />
                                   </div>
                                 );
                               }
@@ -547,17 +551,16 @@ export function MessageList({
                               return tp ? (
                                 <img
                                   key={pid}
-                                  src={agentAvatarUrl(pid, 16, tp.color)}
+                                  src={agentAvatarUrl(pid, 24, tp.color)}
                                   alt={tp.name}
-                                  className="w-4 h-4 rounded-full ring-1 ring-[var(--card-bg)]"
+                                  className="w-6 h-6 rounded-full border-2 border-[var(--card-bg)] object-cover z-10"
                                 />
                               ) : (
-                                <div key={pid} className="w-4 h-4 rounded-full bg-[var(--app-shell-subtle)] ring-1 ring-[var(--card-bg)]" />
+                                <div key={pid} className="w-6 h-6 rounded-full bg-[var(--app-shell-subtle)] border-2 border-[var(--card-bg)] z-10" />
                               );
                             })}
                           </div>
-                          <span>{threadData.replyCount} replies</span>
-                        </button>
+                        </div>
                       )}
                     </div>
 

package/cloud-runtime/standalone/styles/workspaceSidebar.css

@@ -39,6 +39,8 @@
    ────────────────────────────────────────────── */
 .workspace-sidebar__brand {
   padding: 0.875rem 0.75rem;
+  min-height: 3.5625rem;
+  box-sizing: border-box;
   border-bottom: 1px solid var(--app-shell-border);
   display: flex;
   align-items: center;