@alpaca-editor/core 1.0.4191 → 1.0.4192

package/dist/styles.css

@@ -71,12 +71,16 @@
     --color-indigo-800: oklch(39.8% 0.195 277.366);
     --color-indigo-950: oklch(25.7% 0.09 281.288);
     --color-violet-600: oklch(54.1% 0.281 293.009);
+    --color-purple-50: oklch(97.7% 0.014 308.299);
     --color-purple-100: oklch(94.6% 0.033 307.174);
     --color-purple-200: oklch(90.2% 0.063 306.703);
     --color-purple-400: oklch(71.4% 0.203 305.504);
     --color-purple-500: oklch(62.7% 0.265 303.9);
     --color-purple-600: oklch(55.8% 0.288 302.321);
     --color-purple-800: oklch(43.8% 0.218 303.724);
+    --color-pink-50: oklch(97.1% 0.014 343.198);
+    --color-pink-100: oklch(94.8% 0.028 342.258);
+    --color-pink-500: oklch(65.6% 0.241 354.308);
     --color-pink-600: oklch(59.2% 0.249 0.584);
     --color-rose-600: oklch(58.6% 0.253 17.585);
     --color-rose-700: oklch(51.4% 0.222 16.935);
@@ -103,7 +107,9 @@
     --container-md: 28rem;
     --container-lg: 32rem;
     --container-xl: 36rem;
+    --container-3xl: 48rem;
     --container-4xl: 56rem;
+    --container-5xl: 64rem;
     --container-6xl: 72rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
@@ -117,6 +123,8 @@
     --text-xl--line-height: calc(1.75 / 1.25);
     --text-2xl: 1.5rem;
     --text-2xl--line-height: calc(2 / 1.5);
+    --text-3xl: 1.875rem;
+    --text-3xl--line-height: calc(2.25 / 1.875);
     --text-4xl: 2.25rem;
     --text-4xl--line-height: calc(2.5 / 2.25);
     --font-weight-extralight: 200;
@@ -283,9 +291,6 @@
   .right-2 {
     right: calc(var(--spacing) * 2);
   }
-  .right-3 {
-    right: calc(var(--spacing) * 3);
-  }
   .right-4 {
     right: calc(var(--spacing) * 4);
   }
@@ -322,9 +327,6 @@
   .left-2 {
     left: calc(var(--spacing) * 2);
   }
-  .left-3 {
-    left: calc(var(--spacing) * 3);
-  }
   .left-\[-1000px\] {
     left: -1000px;
   }
@@ -418,6 +420,9 @@
   .my-2 {
     margin-block: calc(var(--spacing) * 2);
   }
+  .my-3 {
+    margin-block: calc(var(--spacing) * 3);
+  }
   .my-4 {
     margin-block: calc(var(--spacing) * 4);
   }
@@ -439,6 +444,9 @@
   .mt-6 {
     margin-top: calc(var(--spacing) * 6);
   }
+  .mt-8 {
+    margin-top: calc(var(--spacing) * 8);
+  }
   .mt-\[-3px\] {
     margin-top: -3px;
   }
@@ -493,6 +501,9 @@
   .mb-6 {
     margin-bottom: calc(var(--spacing) * 6);
   }
+  .mb-8 {
+    margin-bottom: calc(var(--spacing) * 8);
+  }
   .mb-\[-3px\] {
     margin-bottom: -3px;
   }
@@ -729,6 +740,9 @@
   .h-\[160px\] {
     height: 160px;
   }
+  .h-\[450px\] {
+    height: 450px;
+  }
   .h-\[600px\] {
     height: 600px;
   }
@@ -747,6 +761,9 @@
   .h-px {
     height: 1px;
   }
+  .h-screen {
+    height: 100vh;
+  }
   .max-h-\(--radix-dropdown-menu-content-available-height\) {
     max-height: var(--radix-dropdown-menu-content-available-height);
   }
@@ -972,6 +989,9 @@
   .w-\[400px\] {
     width: 400px;
   }
+  .w-\[700px\] {
+    width: 700px;
+  }
   .w-auto {
     width: auto;
   }
@@ -981,9 +1001,15 @@
   .w-full {
     width: 100%;
   }
+  .max-w-3xl {
+    max-width: var(--container-3xl);
+  }
   .max-w-4xl {
     max-width: var(--container-4xl);
   }
+  .max-w-5xl {
+    max-width: var(--container-5xl);
+  }
   .max-w-6xl {
     max-width: var(--container-6xl);
   }
@@ -1005,9 +1031,15 @@
   .max-w-\[90vw\] {
     max-width: 90vw;
   }
+  .max-w-\[200px\] {
+    max-width: 200px;
+  }
   .max-w-\[240px\] {
     max-width: 240px;
   }
+  .max-w-\[300px\] {
+    max-width: 300px;
+  }
   .max-w-\[320px\] {
     max-width: 320px;
   }
@@ -1062,12 +1094,18 @@
   .min-w-\[16px\] {
     min-width: 16px;
   }
+  .min-w-\[80px\] {
+    min-width: 80px;
+  }
   .min-w-\[90px\] {
     min-width: 90px;
   }
   .min-w-\[120px\] {
     min-width: 120px;
   }
+  .min-w-\[150px\] {
+    min-width: 150px;
+  }
   .min-w-\[450px\] {
     min-width: 450px;
   }
@@ -1303,6 +1341,9 @@
   .content-start {
     align-content: flex-start;
   }
+  .items-baseline {
+    align-items: baseline;
+  }
   .items-center {
     align-items: center;
   }
@@ -1816,6 +1857,12 @@
   .bg-blue-50 {
     background-color: var(--color-blue-50);
   }
+  .bg-blue-50\/50 {
+    background-color: color-mix(in srgb, oklch(97% 0.014 254.604) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-blue-50) 50%, transparent);
+    }
+  }
   .bg-blue-100 {
     background-color: var(--color-blue-100);
   }
@@ -2091,6 +2138,25 @@
     --tw-gradient-from: var(--color-gray-50);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .from-purple-50\/30 {
+    --tw-gradient-from: color-mix(in srgb, oklch(97.7% 0.014 308.299) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-gradient-from: color-mix(in oklab, var(--color-purple-50) 30%, transparent);
+    }
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+  .from-purple-100 {
+    --tw-gradient-from: var(--color-purple-100);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+  .via-pink-50\/20 {
+    --tw-gradient-via: color-mix(in srgb, oklch(97.1% 0.014 343.198) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-gradient-via: color-mix(in oklab, var(--color-pink-50) 20%, transparent);
+    }
+    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
   .to-amber-50\/30 {
     --tw-gradient-to: color-mix(in srgb, oklch(98.7% 0.022 95.277) 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2098,6 +2164,13 @@
     }
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .to-blue-50\/30 {
+    --tw-gradient-to: color-mix(in srgb, oklch(97% 0.014 254.604) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-gradient-to: color-mix(in oklab, var(--color-blue-50) 30%, transparent);
+    }
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
   .to-gray-50\/30 {
     --tw-gradient-to: color-mix(in srgb, oklch(98.5% 0.002 247.839) 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2105,6 +2178,10 @@
     }
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .to-pink-100 {
+    --tw-gradient-to: var(--color-pink-100);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
   .to-purple-500 {
     --tw-gradient-to: var(--color-purple-500);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -2283,9 +2360,6 @@
   .pr-8 {
     padding-right: calc(var(--spacing) * 8);
   }
-  .pr-10 {
-    padding-right: calc(var(--spacing) * 10);
-  }
   .pb-1 {
     padding-bottom: calc(var(--spacing) * 1);
   }
@@ -2313,12 +2387,12 @@
   .pl-8 {
     padding-left: calc(var(--spacing) * 8);
   }
-  .pl-10 {
-    padding-left: calc(var(--spacing) * 10);
-  }
   .text-center {
     text-align: center;
   }
+  .text-end {
+    text-align: end;
+  }
   .text-left {
     text-align: left;
   }
@@ -2332,6 +2406,10 @@
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
   }
+  .text-3xl {
+    font-size: var(--text-3xl);
+    line-height: var(--tw-leading, var(--text-3xl--line-height));
+  }
   .text-4xl {
     font-size: var(--text-4xl);
     line-height: var(--tw-leading, var(--text-4xl--line-height));
@@ -2371,6 +2449,9 @@
   .text-\[10px\] {
     font-size: 10px;
   }
+  .text-\[11px\] {
+    font-size: 11px;
+  }
   .text-\[12px\] {
     font-size: 12px;
   }
@@ -2464,6 +2545,9 @@
   .text-blue-300 {
     color: var(--color-blue-300);
   }
+  .text-blue-400 {
+    color: var(--color-blue-400);
+  }
   .text-blue-500 {
     color: var(--color-blue-500);
   }
@@ -2650,6 +2734,9 @@
   .opacity-0 {
     opacity: 0%;
   }
+  .opacity-20 {
+    opacity: 20%;
+  }
   .opacity-40 {
     opacity: 40%;
   }
@@ -2881,6 +2968,22 @@
       }
     }
   }
+  .group-hover\:from-purple-500 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        --tw-gradient-from: var(--color-purple-500);
+        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      }
+    }
+  }
+  .group-hover\:to-pink-500 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        --tw-gradient-to: var(--color-pink-500);
+        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      }
+    }
+  }
   .group-hover\:text-blue-500 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -2888,6 +2991,13 @@
       }
     }
   }
+  .group-hover\:text-white {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        color: var(--color-white);
+      }
+    }
+  }
   .group-hover\:opacity-100 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -2949,6 +3059,11 @@
       color: var(--foreground);
     }
   }
+  .placeholder\:text-blue-400 {
+    &::placeholder {
+      color: var(--color-blue-400);
+    }
+  }
   .placeholder\:text-muted-foreground {
     &::placeholder {
       color: var(--muted-foreground);
@@ -3027,6 +3142,13 @@
       }
     }
   }
+  .hover\:scale-\[1\.02\] {
+    &:hover {
+      @media (hover: hover) {
+        scale: 1.02;
+      }
+    }
+  }
   .hover\:border-blue-300 {
     &:hover {
       @media (hover: hover) {
@@ -3034,6 +3156,13 @@
       }
     }
   }
+  .hover\:border-blue-500 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-blue-500);
+      }
+    }
+  }
   .hover\:border-gray-300 {
     &:hover {
       @media (hover: hover) {
@@ -3117,6 +3246,13 @@
       }
     }
   }
+  .hover\:bg-blue-100 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-blue-100);
+      }
+    }
+  }
   .hover\:bg-blue-200 {
     &:hover {
       @media (hover: hover) {
@@ -3346,6 +3482,16 @@
       }
     }
   }
+  .hover\:bg-white\/50 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #fff 50%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-white\/60 {
     &:hover {
       @media (hover: hover) {
@@ -3531,6 +3677,11 @@
       border-color: var(--color-blue-500);
     }
   }
+  .focus\:border-blue-600 {
+    &:focus {
+      border-color: var(--color-blue-600);
+    }
+  }
   .focus\:bg-\[\#f6eeff\] {
     &:focus {
       background-color: #f6eeff;
@@ -3541,6 +3692,11 @@
       background-color: var(--accent);
     }
   }
+  .focus\:bg-blue-100 {
+    &:focus {
+      background-color: var(--color-blue-100);
+    }
+  }
   .focus\:text-accent-foreground {
     &:focus {
       color: var(--accent-foreground);
@@ -3568,6 +3724,14 @@
       --tw-ring-color: var(--color-blue-500);
     }
   }
+  .focus\:ring-blue-500\/30 {
+    &:focus {
+      --tw-ring-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-blue-500) 30%, transparent);
+      }
+    }
+  }
   .focus\:ring-ring {
     &:focus {
       --tw-ring-color: var(--ring);
@@ -3660,6 +3824,11 @@
       }
     }
   }
+  .active\:scale-\[0\.98\] {
+    &:active {
+      scale: 0.98;
+    }
+  }
   .disabled\:pointer-events-none {
     &:disabled {
       pointer-events: none;
@@ -3977,6 +4146,11 @@
       margin-top: calc(var(--spacing) * 6);
     }
   }
+  .md\:mt-12 {
+    @media (width >= 48rem) {
+      margin-top: calc(var(--spacing) * 12);
+    }
+  }
   .md\:mt-18 {
     @media (width >= 48rem) {
       margin-top: calc(var(--spacing) * 18);
@@ -3987,6 +4161,11 @@
       margin-bottom: calc(var(--spacing) * 5);
     }
   }
+  .md\:mb-12 {
+    @media (width >= 48rem) {
+      margin-bottom: calc(var(--spacing) * 12);
+    }
+  }
   .md\:mb-20 {
     @media (width >= 48rem) {
       margin-bottom: calc(var(--spacing) * 20);
@@ -4007,6 +4186,11 @@
       display: table-cell;
     }
   }
+  .md\:h-14 {
+    @media (width >= 48rem) {
+      height: calc(var(--spacing) * 14);
+    }
+  }
   .md\:h-64 {
     @media (width >= 48rem) {
       height: calc(var(--spacing) * 64);
@@ -4042,6 +4226,11 @@
       width: calc(var(--spacing) * 8);
     }
   }
+  .md\:w-14 {
+    @media (width >= 48rem) {
+      width: calc(var(--spacing) * 14);
+    }
+  }
   .md\:w-64 {
     @media (width >= 48rem) {
       width: calc(var(--spacing) * 64);
@@ -4087,6 +4276,11 @@
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
   }
+  .md\:grid-cols-4 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
   .md\:flex-row {
     @media (width >= 48rem) {
       flex-direction: row;
@@ -4102,6 +4296,11 @@
       justify-content: center;
     }
   }
+  .md\:gap-4 {
+    @media (width >= 48rem) {
+      gap: calc(var(--spacing) * 4);
+    }
+  }
   .md\:gap-10 {
     @media (width >= 48rem) {
       gap: calc(var(--spacing) * 10);
@@ -4137,6 +4336,11 @@
       padding-block: calc(var(--spacing) * 2);
     }
   }
+  .md\:py-12 {
+    @media (width >= 48rem) {
+      padding-block: calc(var(--spacing) * 12);
+    }
+  }
   .md\:pt-0 {
     @media (width >= 48rem) {
       padding-top: calc(var(--spacing) * 0);
@@ -4152,6 +4356,18 @@
       padding-left: calc(var(--spacing) * 4);
     }
   }
+  .md\:text-4xl {
+    @media (width >= 48rem) {
+      font-size: var(--text-4xl);
+      line-height: var(--tw-leading, var(--text-4xl--line-height));
+    }
+  }
+  .md\:text-base {
+    @media (width >= 48rem) {
+      font-size: var(--text-base);
+      line-height: var(--tw-leading, var(--text-base--line-height));
+    }
+  }
   .md\:text-lg {
     @media (width >= 48rem) {
       font-size: var(--text-lg);
@@ -5489,6 +5705,22 @@ html, body {
 [data-side="right"].slide-in-from-left-2 {
   animation-name: slide-in-from-left;
 }
+::view-transition-old(.slide-fade-in) {
+  animation: 200ms cubic-bezier(0.4, 0, 0.2, 1) both fade-out;
+}
+::view-transition-new(.slide-fade-in) {
+  animation: 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-fade-in-animation;
+}
+@keyframes slide-fade-in-animation {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 @property --tw-border-spacing-x {
   syntax: "<length>";
   inherits: false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpaca-editor/core",
-  "version": "1.0.4191",
+  "version": "1.0.4192",
   "publishConfig": {
     "access": "public"
   },

package/src/agents-view/AgentCard.tsx

@@ -114,12 +114,7 @@ export function AgentCard({
             {agent.totalCost !== undefined && agent.totalCost > 0 && (
               <div className="flex items-center gap-2">
                 <span className="font-medium">Cost:</span>
-                <span>${agent.totalCost.toFixed(4)}</span>
-                {agent.totalTokensUsed !== undefined && (
-                  <span className="text-gray-400">
-                    ({agent.totalTokensUsed.toLocaleString()} tokens)
-                  </span>
-                )}
+                <span>${agent.totalCost.toFixed(2)}</span>
               </div>
             )}
           </div>

package/src/agents-view/AgentsView.tsx

@@ -8,11 +8,13 @@ import {
   deleteAgent,
 } from "../editor/services/agentService";
 import { cn } from "../lib/utils";
-import { RefreshCw, Search, XCircle } from "lucide-react";
+import { RefreshCw } from "lucide-react";
 import { SimpleIconButton } from "../editor/ui/SimpleIconButton";
+import { FilterInput } from "../components/FilterInput";
 import { useEditContext } from "../editor/client/editContext";
 import { AgentCard } from "./AgentCard";
 import { ProfileAgentsGroup } from "./ProfileAgentsGroup";
+import { Checkbox } from "../components/ui/checkbox";
 
 /**
  * Agents overview view that displays active agents at the top
@@ -208,16 +210,16 @@ export function AgentsView() {
   };
 
   const handleResumeAgent = (agent: Agent) => {
-    editContext?.switchView("page-editor");
+    // Ensure agents panel is visible, but don't switch views
     editContext?.setShowAgentsPanel?.(true);
-    // Delay for panel mount, then dispatch event to open existing agent
+    // Delay briefly for any UI updates, then dispatch event to open existing agent
     setTimeout(() => {
       window.dispatchEvent(
         new CustomEvent("editor:openAgent", {
           detail: { agentId: agent.id },
         }),
       );
-    }, 500);
+    }, 100);
   };
 
   const handleCloseAgent = async (agentId: string, agentName: string) => {
@@ -315,7 +317,7 @@ export function AgentsView() {
       <div className="flex-shrink-0 border-b border-gray-200 bg-white p-4">
         <div className="mb-3 flex items-center justify-between">
           <div>
-            <h2 className="text-lg font-semibold text-gray-900">Agents</h2>
+            <h2 className="text-md font-semibold text-dark">Agents</h2>
             <p className="text-xs text-gray-500">
               {totalActiveCount} active, {totalClosedCount} closed ({totalCount}{" "}
               total)
@@ -340,38 +342,24 @@ export function AgentsView() {
         {/* Filter Toggle */}
         <div className="mb-3">
           <label className="flex cursor-pointer items-center gap-2 text-sm">
-            <input
-              type="checkbox"
+            <Checkbox
               checked={showOnlyMyAgents}
-              onChange={(e) => setShowOnlyMyAgents(e.target.checked)}
-              className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+              onCheckedChange={(checked) =>
+                setShowOnlyMyAgents(checked === true)
+              }
             />
             <span className="text-gray-700">Show only my agents</span>
           </label>
         </div>
 
         {/* Search */}
-        <div className="relative">
-          <Search
-            className="absolute top-1/2 left-3 size-4 -translate-y-1/2 text-gray-400"
-            strokeWidth={1}
-          />
-          <input
-            type="text"
-            placeholder="Search by name or description..."
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            className="w-full rounded border border-gray-200 py-2 pr-10 pl-10 text-sm focus:border-blue-500 focus:outline-none"
-          />
-          {searchTerm && (
-            <button
-              onClick={() => setSearchTerm("")}
-              className="absolute top-1/2 right-3 -translate-y-1/2 text-gray-400 hover:text-gray-600"
-            >
-              <XCircle className="size-4" strokeWidth={1} />
-            </button>
-          )}
-        </div>
+        <FilterInput
+          value={searchTerm}
+          onChange={setSearchTerm}
+          placeholder="Search by name or description..."
+          loading={loading && !initialLoad}
+          size="md"
+        />
       </div>
 
       {/* Content */}