@agent-native/core 0.80.11 → 0.81.0

package/corpus/templates/design/app/components/design/ReviewPanel.tsx

@@ -37,7 +37,6 @@ import { useState } from "react";
 
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { ScrollArea } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils";
 
@@ -393,7 +392,7 @@ function A11ySection({
   return (
     <section aria-labelledby="review-a11y-heading">
       {/* Section header */}
-      <div className="flex h-8 items-center justify-between px-3">
+      <div className="flex h-7 items-center justify-between">
         <div className="flex items-center gap-1.5">
           <IconShieldCheck className="size-3.5 text-muted-foreground" />
           <span
@@ -440,7 +439,7 @@ function A11ySection({
             size="sm"
             disabled={loading}
             onClick={onRunAudit}
-            className="h-6 px-2 text-[10px] text-muted-foreground hover:text-foreground"
+            className="h-6 gap-1 rounded-md px-1.5 text-[10px] text-muted-foreground hover:text-foreground"
           >
             {loading ? (
               <IconRefresh className="size-3 animate-spin" />
@@ -452,12 +451,12 @@ function A11ySection({
         )}
       </div>
 
-      <Separator className="mx-3" />
+      <Separator />
 
-      <div className="px-1 py-1">
+      <div className="py-1">
         {/* Error state */}
         {auditError && (
-          <div className="flex items-center gap-2 rounded px-2 py-1.5">
+          <div className="flex min-h-7 items-center gap-2 rounded-[5px] px-2">
             <IconAlertCircle className="size-3.5 shrink-0 text-destructive" />
             <span className="text-[11px] text-muted-foreground">
               {auditError}
@@ -467,23 +466,15 @@ function A11ySection({
 
         {/* Not yet run */}
         {notRun && (
-          <div className="flex flex-col items-center gap-2 py-5 text-center">
-            <IconShieldCheck className="size-5 text-muted-foreground/30" />
-            <p className="text-[11px] leading-snug text-muted-foreground/60">
-              No audit has been run yet.
-              {onRunAudit && (
-                <>
-                  {" "}
-                  Click <strong>Run</strong> to scan this design.
-                </>
-              )}
-            </p>
+          <div className="flex h-7 items-center gap-2 rounded-[5px] px-2 text-muted-foreground/55">
+            <IconShieldCheck className="size-3.5 shrink-0" />
+            <span className="truncate text-[11px]">Audit not run</span>
           </div>
         )}
 
         {/* Loading */}
         {loading && !hasFindings && (
-          <div className="flex items-center gap-2 px-2 py-3">
+          <div className="flex h-7 items-center gap-2 rounded-[5px] px-2">
             <IconRefresh className="size-3.5 animate-spin text-muted-foreground/50" />
             <span className="text-[11px] text-muted-foreground/60">
               Scanning…
@@ -493,7 +484,7 @@ function A11ySection({
 
         {/* All clear */}
         {!loading && !auditError && !notRun && !hasFindings && (
-          <div className="flex items-center gap-2 px-2 py-3">
+          <div className="flex h-7 items-center gap-2 rounded-[5px] px-2">
             <IconCheck className="size-3.5 text-emerald-500" />
             <span className="text-[11px] text-muted-foreground">
               No issues found.
@@ -518,7 +509,7 @@ function A11ySection({
 
         {/* Audit timestamp */}
         {auditedAt && (
-          <p className="mt-1.5 px-2 text-[10px] text-muted-foreground/40">
+          <p className="mt-1 px-2 text-[10px] text-muted-foreground/40">
             Last audited{" "}
             {new Date(auditedAt).toLocaleString(undefined, {
               dateStyle: "short",
@@ -551,7 +542,7 @@ function VersionLabel({
     <select
       value={value ?? ""}
       onChange={(e) => onChange(e.target.value || null)}
-      className="h-6 max-w-[120px] flex-1 truncate rounded border border-border bg-transparent px-1.5 text-[10px] text-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+      className="h-6 max-w-[120px] flex-1 truncate rounded-md border border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] px-1.5 text-[10px] text-foreground focus:outline-none focus:ring-1 focus:ring-[var(--design-editor-accent-color)]"
       aria-label={placeholder}
     >
       <option value="">{placeholder}</option>
@@ -567,7 +558,7 @@ function VersionLabel({
 function DiffRow({ entry }: { entry: VisualDiffEntry }) {
   const cfg = DIFF_KIND_CONFIG[entry.kind];
   return (
-    <div className="flex items-center gap-2 rounded px-2 py-1 hover:bg-accent/40">
+    <div className="flex h-7 items-center gap-2 rounded-[5px] px-2 hover:bg-[var(--design-editor-layer-hover-color)]">
       <Badge
         variant="outline"
         className={cn("h-4 shrink-0 px-1 text-[9px] font-medium", cfg.badge)}
@@ -604,7 +595,7 @@ function VisualDiffSection({
 
   return (
     <section aria-labelledby="review-diff-heading">
-      <div className="flex h-8 items-center gap-1.5 px-3">
+      <div className="flex h-7 items-center gap-1.5">
         <IconArrowsLeftRight className="size-3.5 text-muted-foreground" />
         <span
           id="review-diff-heading"
@@ -622,9 +613,9 @@ function VisualDiffSection({
         )}
       </div>
 
-      <Separator className="mx-3" />
+      <Separator />
 
-      <div className="px-3 py-2 space-y-2">
+      <div className="space-y-1.5 py-1">
         {/* Version selectors */}
         {hasVersions && (
           <div className="flex items-center gap-1.5">
@@ -649,7 +640,7 @@ function VisualDiffSection({
 
         {/* States */}
         {diffError && (
-          <div className="flex items-center gap-2">
+          <div className="flex h-7 items-center gap-2 rounded-[5px] px-2">
             <IconAlertCircle className="size-3.5 shrink-0 text-destructive" />
             <span className="text-[11px] text-muted-foreground">
               {diffError}
@@ -658,7 +649,7 @@ function VisualDiffSection({
         )}
 
         {loading && (
-          <div className="flex items-center gap-2">
+          <div className="flex h-7 items-center gap-2 rounded-[5px] px-2">
             <IconRefresh className="size-3.5 animate-spin text-muted-foreground/50" />
             <span className="text-[11px] text-muted-foreground/60">
               Comparing…
@@ -667,15 +658,13 @@ function VisualDiffSection({
         )}
 
         {!loading && !diffError && noVersionsSelected && !hasDiff && (
-          <p className="text-[11px] text-muted-foreground/50">
-            {hasVersions
-              ? "Select two versions above to see what changed."
-              : "No versions saved yet. Save a version to compare."}
-          </p>
+          <div className="flex h-7 items-center rounded-[5px] px-2 text-[11px] text-muted-foreground/55">
+            {hasVersions ? "Choose versions to diff" : "No versions yet"}
+          </div>
         )}
 
         {!loading && !diffError && !noVersionsSelected && !hasDiff && (
-          <div className="flex items-center gap-2">
+          <div className="flex h-7 items-center gap-2 rounded-[5px] px-2">
             <IconCheck className="size-3.5 text-emerald-500" />
             <span className="text-[11px] text-muted-foreground">
               No structural changes detected.
@@ -730,37 +719,29 @@ export function ReviewPanel({
 }: ReviewPanelProps) {
   return (
     <div
-      className={cn("flex flex-col overflow-hidden text-[11px]", className)}
+      className={cn("flex flex-col gap-2 text-[11px]", className)}
       data-testid="review-panel"
     >
-      <ScrollArea className="flex-1">
-        <div className="py-1">
-          <A11ySection
-            findings={findings}
-            loading={auditLoading}
-            auditedAt={auditedAt}
-            auditError={auditError}
-            onRunAudit={onRunAudit}
-            onFindingClick={onFindingClick}
-            fixSource={fixSource}
-            onFixApplied={onFixApplied}
-          />
-
-          <div className="my-2 mx-3">
-            <Separator />
-          </div>
-
-          <VisualDiffSection
-            diff={visualDiff}
-            versionOptions={versionOptions}
-            baseVersionId={baseVersionId}
-            compareVersionId={compareVersionId}
-            onVersionChange={onVersionChange}
-            loading={diffLoading}
-            diffError={diffError}
-          />
-        </div>
-      </ScrollArea>
+      <A11ySection
+        findings={findings}
+        loading={auditLoading}
+        auditedAt={auditedAt}
+        auditError={auditError}
+        onRunAudit={onRunAudit}
+        onFindingClick={onFindingClick}
+        fixSource={fixSource}
+        onFixApplied={onFixApplied}
+      />
+
+      <VisualDiffSection
+        diff={visualDiff}
+        versionOptions={versionOptions}
+        baseVersionId={baseVersionId}
+        compareVersionId={compareVersionId}
+        onVersionChange={onVersionChange}
+        loading={diffLoading}
+        diffError={diffError}
+      />
     </div>
   );
 }

package/corpus/templates/design/app/components/design/StatesPanel.tsx

@@ -157,10 +157,10 @@ function StateRow({
         if (e.key === "Enter" || e.key === " ") onSelect();
       }}
       className={cn(
-        "group flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 transition-colors",
+        "group flex h-7 cursor-pointer items-center gap-2 rounded-[5px] px-2 outline-none transition-colors focus-visible:ring-1 focus-visible:ring-[var(--design-editor-accent-color)]",
         isActive
-          ? "bg-primary/10 text-foreground"
-          : "text-muted-foreground hover:bg-accent hover:text-foreground",
+          ? "bg-[var(--design-editor-active-row-color)] text-foreground"
+          : "text-muted-foreground hover:bg-[var(--design-editor-layer-hover-color)] hover:text-foreground",
       )}
     >
       {/* Active indicator */}
@@ -172,7 +172,7 @@ function StateRow({
       />
 
       {/* Name */}
-      <span className="min-w-0 flex-1 truncate text-[12px] font-medium">
+      <span className="min-w-0 flex-1 truncate text-[12px] font-semibold">
         {row.name}
       </span>
 
@@ -241,14 +241,12 @@ export function StatesPanel({
 
   const createState = useActionMutation("create-design-state");
   const deleteState = useActionMutation("delete-design-state");
-  const setActiveBreakpoint = useActionMutation("set-active-breakpoint");
 
   const states = data?.states ?? [];
 
   // --- Breakpoint control ---
   const handleBreakpointClick = (id: string) => {
     onBreakpointSelect(id);
-    setActiveBreakpoint.mutate({ designId, breakpointId: id });
   };
 
   // --- Create state ---
@@ -269,11 +267,11 @@ export function StatesPanel({
   };
 
   return (
-    <div className="flex flex-col gap-3 px-3 py-3">
+    <div className="flex flex-col gap-2">
       {/* ── Responsive breakpoints ── */}
       <section aria-label="Breakpoints">
-        <div className="mb-1.5 flex items-center justify-between">
-          <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70">
+        <div className="mb-1 flex items-center justify-between">
+          <span className="text-[11px] font-medium text-muted-foreground">
             Responsive
           </span>
           {onAddBreakpoint && (
@@ -283,11 +281,11 @@ export function StatesPanel({
                   type="button"
                   variant="ghost"
                   size="icon"
-                  className="size-5 cursor-pointer text-muted-foreground/50 hover:text-foreground"
+                  className="size-6 cursor-pointer rounded-md text-muted-foreground hover:text-foreground"
                   onClick={onAddBreakpoint}
                   aria-label="Add breakpoint"
                 >
-                  <IconPlus className="size-3" />
+                  <IconPlus className="size-3.5" />
                 </Button>
               </TooltipTrigger>
               <TooltipContent>Add breakpoint</TooltipContent>
@@ -296,7 +294,7 @@ export function StatesPanel({
         </div>
 
         {/* Segmented control */}
-        <div className="flex h-7 overflow-hidden rounded-md border border-border">
+        <div className="flex h-7 min-w-0 overflow-hidden rounded-md bg-[var(--design-editor-control-bg)] p-0.5">
           {/* Auto = single-frame, all breakpoints */}
           <BreakpointButton
             id="auto"
@@ -343,29 +341,12 @@ export function StatesPanel({
             </>
           )}
         </div>
-
-        {/* Active-frame hint */}
-        {activeBreakpointId !== "auto" && (
-          <p className="mt-1 text-[10px] text-muted-foreground/60">
-            Edits in this frame write{" "}
-            <span className="font-mono font-semibold">
-              {activeBreakpointId === "bp-mobile"
-                ? "base:"
-                : activeBreakpointId === "bp-tablet"
-                  ? "md:"
-                  : activeBreakpointId === "bp-desktop"
-                    ? "xl:"
-                    : "breakpoint:"}
-            </span>{" "}
-            classes
-          </p>
-        )}
       </section>
 
       {/* ── Design states ── */}
       <section aria-label="Design states">
-        <div className="mb-1.5 flex items-center justify-between">
-          <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70">
+        <div className="mb-1 flex items-center justify-between">
+          <span className="text-[11px] font-medium text-muted-foreground">
             States
           </span>
           <div className="flex items-center gap-0.5">
@@ -376,11 +357,11 @@ export function StatesPanel({
                     type="button"
                     variant="ghost"
                     size="icon"
-                    className="size-5 cursor-pointer text-muted-foreground/50 hover:text-foreground"
+                    className="size-6 cursor-pointer rounded-md text-muted-foreground hover:text-foreground"
                     onClick={onCapture}
                     aria-label="Capture from running app"
                   >
-                    <IconCamera className="size-3" />
+                    <IconCamera className="size-3.5" />
                   </Button>
                 </TooltipTrigger>
                 <TooltipContent>Capture from running app</TooltipContent>
@@ -392,13 +373,13 @@ export function StatesPanel({
                   type="button"
                   variant="ghost"
                   size="icon"
-                  className="size-5 cursor-pointer text-muted-foreground/50 hover:text-foreground"
+                  className="size-6 cursor-pointer rounded-md text-muted-foreground hover:text-foreground"
                   onClick={() => refetch()}
                   aria-label="Refresh states"
                   disabled={isLoading}
                 >
                   <IconRefresh
-                    className={cn("size-3", isLoading && "animate-spin")}
+                    className={cn("size-3.5", isLoading && "animate-spin")}
                   />
                 </Button>
               </TooltipTrigger>
@@ -410,11 +391,11 @@ export function StatesPanel({
                   type="button"
                   variant="ghost"
                   size="icon"
-                  className="size-5 cursor-pointer text-muted-foreground/50 hover:text-foreground"
+                  className="size-6 cursor-pointer rounded-md text-muted-foreground hover:text-foreground"
                   onClick={() => setIsAdding(true)}
                   aria-label="Add state"
                 >
-                  <IconPlus className="size-3" />
+                  <IconPlus className="size-3.5" />
                 </Button>
               </TooltipTrigger>
               <TooltipContent>Add state</TooltipContent>
@@ -431,10 +412,10 @@ export function StatesPanel({
             if (e.key === "Enter" || e.key === " ") onStateSelect(null);
           }}
           className={cn(
-            "flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 transition-colors",
+            "flex h-7 cursor-pointer items-center gap-2 rounded-[5px] px-2 outline-none transition-colors focus-visible:ring-1 focus-visible:ring-[var(--design-editor-accent-color)]",
             activeStateId === null
-              ? "bg-primary/10 text-foreground"
-              : "text-muted-foreground hover:bg-accent hover:text-foreground",
+              ? "bg-[var(--design-editor-active-row-color)] text-foreground"
+              : "text-muted-foreground hover:bg-[var(--design-editor-layer-hover-color)] hover:text-foreground",
           )}
         >
           <div
@@ -443,7 +424,9 @@ export function StatesPanel({
               activeStateId === null ? "bg-primary" : "bg-muted-foreground/30",
             )}
           />
-          <span className="text-[12px] font-medium">Default</span>
+          <span className="min-w-0 flex-1 truncate text-[12px] font-semibold">
+            Default
+          </span>
           <span className="ml-auto text-[10px] text-muted-foreground/40">
             Live
           </span>
@@ -478,10 +461,9 @@ export function StatesPanel({
 
         {/* Empty state (no user-created states yet) */}
         {!isLoading && states.length === 0 && !isAdding && (
-          <p className="mt-2 text-center text-[11px] leading-snug text-muted-foreground/50">
-            Add states like Loading, Empty, or Error to preview different UI
-            variants.
-          </p>
+          <div className="mt-1 flex h-7 items-center rounded-[5px] px-2 text-[11px] text-muted-foreground/55">
+            No saved states
+          </div>
         )}
 
         {/* Inline add-state form */}
@@ -498,7 +480,7 @@ export function StatesPanel({
               value={newStateName}
               onChange={(e) => setNewStateName(e.target.value)}
               placeholder="State name…"
-              className="h-7 flex-1 rounded-md border border-border bg-background px-2 text-[12px] text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1 focus:ring-ring"
+              className="h-6 min-w-0 flex-1 rounded-md border border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] px-1.5 text-[11px] text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1 focus:ring-[var(--design-editor-accent-color)]"
               onKeyDown={(e) => {
                 if (e.key === "Escape") {
                   setIsAdding(false);
@@ -509,7 +491,7 @@ export function StatesPanel({
             <Button
               type="submit"
               size="sm"
-              className="h-7 cursor-pointer px-2.5 text-[11px]"
+              className="h-6 cursor-pointer px-2 text-[11px]"
               disabled={!newStateName.trim() || createState.isPending}
             >
               Add
@@ -518,7 +500,7 @@ export function StatesPanel({
               type="button"
               variant="ghost"
               size="sm"
-              className="h-7 cursor-pointer px-2 text-[11px]"
+              className="h-6 cursor-pointer px-2 text-[11px]"
               onClick={() => {
                 setIsAdding(false);
                 setNewStateName("");
@@ -528,15 +510,6 @@ export function StatesPanel({
             </Button>
           </form>
         )}
-
-        {/* Real-app capture CTA (inline, only when not already canCapture) */}
-        {!canCapture && (
-          <div className="mt-3 rounded-md border border-dashed border-border/60 bg-muted/30 px-3 py-2.5 text-center">
-            <p className="text-[11px] leading-snug text-muted-foreground/70">
-              Connect Builder to capture live app data and route states.
-            </p>
-          </div>
-        )}
       </section>
     </div>
   );
@@ -565,17 +538,17 @@ function BreakpointButton({
       onClick={onClick}
       aria-pressed={isActive}
       className={cn(
-        "flex flex-1 cursor-pointer items-center justify-center gap-1 px-1 text-[11px] font-medium transition-colors",
+        "flex min-w-0 flex-1 cursor-pointer items-center justify-center gap-1 rounded-[4px] px-1 text-[10px] font-semibold transition-colors",
         isActive
-          ? "bg-accent text-foreground"
-          : "text-muted-foreground/70 hover:bg-accent/50 hover:text-foreground",
+          ? "bg-[var(--design-editor-panel-bg)] text-foreground shadow-[0_0_0_1px_var(--design-editor-control-border),0_1px_2px_rgba(0,0,0,0.18)]"
+          : "text-muted-foreground hover:bg-[var(--design-editor-panel-raised-bg)] hover:text-foreground",
       )}
       title={widthPx ? `${label} (${widthPx}px)` : label}
     >
       {widthPx != null && (
         <BreakpointIcon widthPx={widthPx} className="shrink-0" />
       )}
-      <span className="hidden sm:inline">{label}</span>
+      <span className="min-w-0 truncate">{label}</span>
     </button>
   );
 }