@hachej/boring-agent 0.1.22 → 0.1.23

package/dist/front/index.js

@@ -4551,7 +4551,7 @@ function useAttachmentNotice(timeoutMs = 4e3) {
 
 // src/front/chatPanelComposerControls.tsx
 import { useState as useState19 } from "react";
-import { BotIcon, BrainIcon as BrainIcon2, CheckIcon as CheckIcon2, ChevronDownIcon as ChevronDownIcon5, EyeIcon, EyeOffIcon } from "lucide-react";
+import { CheckIcon as CheckIcon2, ChevronDownIcon as ChevronDownIcon5, EyeIcon, EyeOffIcon } from "lucide-react";
 import {
   Command as Command2,
   CommandEmpty as CommandEmpty2,
@@ -4603,6 +4603,33 @@ var THINKING_LEVEL_LABELS = {
   medium: "Med",
   high: "High"
 };
+function ThinkingLevelGlyph({ level }) {
+  const lit = level === "off" ? 0 : level === "low" ? 1 : level === "medium" ? 2 : 3;
+  return /* @__PURE__ */ jsx23(
+    "svg",
+    {
+      "aria-hidden": "true",
+      width: "14",
+      height: "14",
+      viewBox: "0 0 14 14",
+      fill: "none",
+      className: "shrink-0",
+      children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx23(
+        "rect",
+        {
+          x: 2 + i * 4,
+          y: 10 - i * 2,
+          width: "2",
+          height: 3 + i * 2,
+          rx: "0.5",
+          fill: "currentColor",
+          opacity: i < lit ? 1 : 0.25
+        },
+        i
+      ))
+    }
+  );
+}
 function ModelSelect({
   value,
   onChange,
@@ -4641,13 +4668,16 @@ function ModelSelect({
         "aria-label": "Model",
         className: cn(
           composerActionClass,
-          "w-auto max-w-[min(52vw,200px)] px-2 text-xs font-medium",
-          open && "bg-muted/60 text-foreground"
+          // Model is the only piece of state the composer carries between
+          // turns — give it a status-pill shape so it reads as data, not
+          // another tertiary control. The label is the signal; no icon
+          // (the bot/AI glyph was decoration, not information).
+          "w-auto max-w-[min(52vw,260px)] gap-1 rounded-full bg-muted/40 px-2.5 text-[12px] font-medium text-foreground/85 hover:bg-muted/70",
+          open && "bg-muted/70 text-foreground"
         ),
         children: [
-          /* @__PURE__ */ jsx23(BotIcon, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
           /* @__PURE__ */ jsx23("span", { className: "min-w-0 truncate", children: triggerLabel }),
-          /* @__PURE__ */ jsx23(ChevronDownIcon5, { className: "h-3 w-3 shrink-0 text-muted-foreground/60", "aria-hidden": "true" })
+          /* @__PURE__ */ jsx23(ChevronDownIcon5, { className: "h-3 w-3 shrink-0 text-muted-foreground/50", "aria-hidden": "true" })
         ]
       }
     ) }),
@@ -4657,7 +4687,7 @@ function ModelSelect({
         align: "start",
         sideOffset: 6,
         "data-boring-agent": "",
-        className: "w-[min(90vw,260px)] rounded-xl border-border/60 bg-popover p-1 shadow-xl",
+        className: "w-[min(92vw,340px)] rounded-xl border-border/60 bg-popover p-1 shadow-xl",
         children: /* @__PURE__ */ jsxs21(Command2, { children: [
           menuOptions.length > 8 && /* @__PURE__ */ jsx23(
             CommandInput2,
@@ -4686,7 +4716,13 @@ function ModelSelect({
                       },
                       className: cn(
                         "flex items-center gap-2 rounded-md px-2 py-1.5 text-[13px]",
-                        key === currentKey && "bg-accent text-accent-foreground"
+                        // Soften cmdk's full-saturation `data-[selected=true]:bg-accent`
+                        // (keyboard-cursor focus) to a subtle warm tint so the
+                        // active row doesn't read as a saturated tile in dark mode.
+                        "data-[selected=true]:bg-[color:oklch(from_var(--accent)_l_c_h/0.15)] data-[selected=true]:text-foreground",
+                        // The user's CURRENTLY-SELECTED model gets a neutral wash +
+                        // the CheckIcon (accent is reserved for primary CTA / focus).
+                        key === currentKey && "bg-foreground/[0.06] text-foreground"
                       ),
                       children: [
                         /* @__PURE__ */ jsx23(
@@ -4694,12 +4730,12 @@ function ModelSelect({
                           {
                             className: cn(
                               "h-3.5 w-3.5 shrink-0",
-                              key === currentKey ? "opacity-100" : "opacity-0"
+                              key === currentKey ? "text-[color:var(--accent)] opacity-100" : "opacity-0"
                             )
                           }
                         ),
                         /* @__PURE__ */ jsx23("span", { className: "truncate", children: label }),
-                        /* @__PURE__ */ jsx23("span", { className: "ml-auto shrink-0 text-[10px] text-muted-foreground/70", children: m.id })
+                        /* @__PURE__ */ jsx23("span", { className: "ml-auto shrink-0 text-[10px] text-muted-foreground/60", children: m.id })
                       ]
                     },
                     key
@@ -4733,12 +4769,17 @@ function ThinkingSelect({
           {
             "data-boring-agent-part": "thinking-select",
             "data-boring-state": disabled ? "disabled" : void 0,
-            className: cn(composerActionClass, "w-8 px-0"),
-            "aria-label": "Thinking level",
+            className: cn(
+              composerActionClass,
+              "w-8 px-0 [&>span[aria-hidden]]:hidden",
+              value !== "off" && "text-foreground"
+            ),
+            "aria-label": `Thinking level: ${THINKING_LEVEL_LABELS[value]}`,
+            title: `Thinking: ${THINKING_LEVEL_LABELS[value]}`,
             "data-testid": "thinking-select",
             children: [
               THINKING_LEVELS.map((level) => /* @__PURE__ */ jsx23("span", { "data-value": level, hidden: true }, level)),
-              /* @__PURE__ */ jsx23(BrainIcon2, { className: "h-3.5 w-3.5" })
+              /* @__PURE__ */ jsx23(ThinkingLevelGlyph, { level: value })
             ]
           }
         ),
@@ -4772,25 +4813,26 @@ function ThoughtVisibilityButton({
       variant: "ghost",
       size: "icon-sm",
       onClick: onToggle,
-      className: cn(composerActionClass, "w-8"),
+      className: cn(composerActionClass, "w-8", visible && "text-foreground"),
       "aria-pressed": visible,
       "aria-label": visible ? "Hide thoughts" : "Show thoughts",
       title: visible ? "Hide thoughts" : "Show thoughts",
-      children: /* @__PURE__ */ jsx23(Icon, { className: "h-3.5 w-3.5" })
+      children: /* @__PURE__ */ jsx23(Icon, { className: "h-3.5 w-3.5", strokeWidth: 1.75 })
     }
   );
 }
 
 // src/front/chatPanelKbdHints.tsx
+import { Kbd } from "@hachej/boring-ui-kit";
 import { jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
 function KbdHints() {
   return /* @__PURE__ */ jsxs22(
-    "kbd",
+    Kbd,
     {
       "aria-hidden": "true",
+      title: "Shift + Enter for newline",
       className: cn(
-        "hidden h-5 items-center gap-0.5 rounded-[var(--radius-sm)] border border-border/50",
-        "bg-background/50 px-1.5 font-mono text-[10px] text-muted-foreground/40",
+        "hidden gap-0.5 border-border/60 bg-muted/40 leading-none shadow-none",
         "sm:inline-flex"
       ),
       children: [
@@ -5750,8 +5792,8 @@ ${reasoningPart.text}`;
                               onChange: handleComposerChange,
                               onKeyDown: handleComposerKeyDown,
                               className: cn(
-                                "min-h-[48px] resize-none border-0 bg-transparent shadow-none",
-                                "px-4 py-3 text-[13px] leading-[1.55] placeholder:text-muted-foreground/50",
+                                "min-h-11 resize-none border-0 bg-transparent shadow-none",
+                                "px-4 py-2.5 text-[13px] leading-[1.55] placeholder:text-muted-foreground/45",
                                 "focus-visible:ring-0 focus-visible:ring-offset-0"
                               )
                             }
@@ -5809,7 +5851,7 @@ ${reasoningPart.text}`;
                                           // to earn the real estate. Becomes a Stop affordance
                                           // (square icon + aria-label="Stop") while the turn
                                           // streams.
-                                          "h-8 w-8 shrink-0 rounded-[var(--radius-lg)]",
+                                          "h-8 w-8 shrink-0 rounded-full",
                                           "bg-[color:var(--accent)] text-[color:var(--accent-foreground)]",
                                           "transition-all duration-150 ease-[cubic-bezier(0.22,1,0.36,1)]",
                                           "hover:shadow-[0_0_0_3px_oklch(from_var(--accent)_l_c_h/0.30)] hover:brightness-110 hover:scale-[1.04]",
@@ -5863,7 +5905,7 @@ function AttachmentButton({ disabled }) {
       className: cn(composerActionClass, "w-8"),
       "aria-label": "Attach files",
       title: disabled ? "Attachments are available after the current response finishes." : "Attach files",
-      children: /* @__PURE__ */ jsx25(PaperclipIcon2, { className: "h-4 w-4" })
+      children: /* @__PURE__ */ jsx25(PaperclipIcon2, { className: "h-3.5 w-3.5", strokeWidth: 1.75 })
     }
   );
 }

package/dist/front/styles.css

@@ -322,9 +322,6 @@
   .h-4 {
     height: calc(var(--spacing) * 4);
   }
-  .h-5 {
-    height: calc(var(--spacing) * 5);
-  }
   .h-6 {
     height: calc(var(--spacing) * 6);
   }
@@ -364,12 +361,12 @@
   .min-h-6 {
     min-height: calc(var(--spacing) * 6);
   }
+  .min-h-11 {
+    min-height: calc(var(--spacing) * 11);
+  }
   .min-h-16 {
     min-height: calc(var(--spacing) * 16);
   }
-  .min-h-\[48px\] {
-    min-height: 48px;
-  }
   .\!w-full {
     width: 100% !important;
   }
@@ -409,8 +406,8 @@
   .w-\[1\.5ch\] {
     width: 1.5ch;
   }
-  .w-\[min\(90vw\,260px\)\] {
-    width: min(90vw, 260px);
+  .w-\[min\(92vw\,340px\)\] {
+    width: min(92vw, 340px);
   }
   .w-auto {
     width: auto;
@@ -448,8 +445,8 @@
   .max-w-\[680px\] {
     max-width: 680px;
   }
-  .max-w-\[min\(52vw\,200px\)\] {
-    max-width: min(52vw, 200px);
+  .max-w-\[min\(52vw\,260px\)\] {
+    max-width: min(52vw, 260px);
   }
   .max-w-full {
     max-width: 100%;
@@ -951,12 +948,6 @@
   .bg-background {
     background-color: var(--background);
   }
-  .bg-background\/50 {
-    background-color: var(--background);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--background) 50%, transparent);
-    }
-  }
   .bg-background\/60 {
     background-color: var(--background);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1032,6 +1023,12 @@
       background-color: color-mix(in oklab, var(--color-emerald-500) 70%, transparent);
     }
   }
+  .bg-foreground\/\[0\.06\] {
+    background-color: var(--foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--foreground) 6%, transparent);
+    }
+  }
   .bg-muted {
     background-color: var(--muted);
   }
@@ -1053,6 +1050,12 @@
       background-color: color-mix(in oklab, var(--muted) 30%, transparent);
     }
   }
+  .bg-muted\/40 {
+    background-color: var(--muted);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--muted) 40%, transparent);
+    }
+  }
   .bg-muted\/50 {
     background-color: var(--muted);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1065,6 +1068,12 @@
       background-color: color-mix(in oklab, var(--muted) 60%, transparent);
     }
   }
+  .bg-muted\/70 {
+    background-color: var(--muted);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--muted) 70%, transparent);
+    }
+  }
   .bg-muted\/80 {
     background-color: var(--muted);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1330,6 +1339,10 @@
     --tw-leading: 1.55;
     line-height: 1.55;
   }
+  .leading-none {
+    --tw-leading: 1;
+    line-height: 1;
+  }
   .leading-normal {
     --tw-leading: var(--leading-normal);
     line-height: var(--leading-normal);
@@ -1436,9 +1449,6 @@
   .text-accent {
     color: var(--accent);
   }
-  .text-accent-foreground {
-    color: var(--accent-foreground);
-  }
   .text-accent\/80 {
     color: var(--accent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1824,11 +1834,11 @@
       color: var(--foreground);
     }
   }
-  .placeholder\:text-muted-foreground\/50 {
+  .placeholder\:text-muted-foreground\/45 {
     &::placeholder {
       color: var(--muted-foreground);
       @supports (color: color-mix(in lab, red, red)) {
-        color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
+        color: color-mix(in oklab, var(--muted-foreground) 45%, transparent);
       }
     }
   }
@@ -2053,6 +2063,16 @@
       }
     }
   }
+  .hover\:bg-muted\/70 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--muted);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--muted) 70%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-primary\/10 {
     &:hover {
       @media (hover: hover) {
@@ -2255,6 +2275,21 @@
       opacity: 50%;
     }
   }
+  .data-\[selected\=true\]\:bg-\[color\:oklch\(from_var\(--accent\)_l_c_h\/0\.15\)\] {
+    &[data-selected="true"] {
+      background-color: oklch(from var(--accent) l c h/0.15);
+    }
+  }
+  .data-\[selected\=true\]\:bg-accent {
+    &[data-selected="true"] {
+      background-color: var(--accent);
+    }
+  }
+  .data-\[selected\=true\]\:text-foreground {
+    &[data-selected="true"] {
+      color: var(--foreground);
+    }
+  }
   .data-\[state\=active\]\:after\:bg-\[color\:var\(--accent\)\] {
     &[data-state="active"] {
       &::after {
@@ -2493,6 +2528,11 @@
       background-color: transparent;
     }
   }
+  .\[\&\>span\[aria-hidden\]\]\:hidden {
+    &>span[aria-hidden] {
+      display: none;
+    }
+  }
   .\[\&\>svg\]\:size-2\.5 {
     &>svg {
       width: calc(var(--spacing) * 2.5);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hachej/boring-agent",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "type": "module",
   "license": "MIT",
   "description": "Pane-embeddable coding agent. Ships direct/local/vercel-sandbox execution modes behind one interface.",
@@ -75,7 +75,7 @@
     "use-stick-to-bottom": "^1.1.3",
     "yaml": "^2.8.3",
     "zod": "^3.25.76",
-    "@hachej/boring-ui-kit": "0.1.22"
+    "@hachej/boring-ui-kit": "0.1.23"
   },
   "devDependencies": {
     "@opentelemetry/api": "^1.9.1",