@ykurilov/agent-chat-skin-tandem 0.69.0 → 0.69.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @ykurilov/agent-chat-skin-tandem
 
+## 0.69.1
+
+### Patch Changes
+
+- 857777b: Ряд значков шагов в Тандеме — по настоящей ширине строки, «+N» всегда помещается, не вылезает за край узкой колонки; модели заголовков раздумий уходит не больше 1200 знаков раздумья (начало и конец) — длинный заголовок вдвое дешевле.
+- @ykurilov/agent-chat-flows@0.69.1
+  - @ykurilov/agent-chat-mcp@0.69.1
+  - @ykurilov/agent-chat-messengers@0.69.1
+  - @ykurilov/agent-chat-sandbox@0.69.1
+  - @ykurilov/agent-chat-skills@0.69.1
+  - @ykurilov/agent-chat-react@0.69.1
+
 ## 0.69.0
 
 ### Minor Changes

package/dist/index.js

@@ -2778,7 +2778,7 @@ function StatusMark2({ status }) {
 import { Button as Button29, cn as cn13 } from "@tandem/ui";
 import { useChatLabels as useChatLabels43 } from "@ykurilov/agent-chat-react";
 import { ChevronDown as ChevronDown6 } from "lucide-react";
-import { useId as useId13 } from "react";
+import { useId as useId13, useLayoutEffect as useLayoutEffect4, useRef as useRef12, useState as useState8 } from "react";
 
 // src/step-icon.tsx
 import { cn as cn12 } from "@tandem/ui";
@@ -2810,9 +2810,50 @@ function TandemStepIcon({ icon, className }) {
 
 // src/work-steps.tsx
 import { jsx as jsx52, jsxs as jsxs42 } from "react/jsx-runtime";
+var GAP_PX = 4;
+function visibleStepIcons(available, total, plusWidthOf, iconPx = 14) {
+  const iconsWidth = (count) => count * iconPx + Math.max(0, count - 1) * GAP_PX;
+  if (iconsWidth(total) <= available) return total;
+  for (let count = total - 1; count > 0; count--) if (iconsWidth(count) + GAP_PX + plusWidthOf(total - count) <= available) return count;
+  return plusWidthOf(total) <= available ? 0 : null;
+}
+function useIconRowSpace() {
+  const lineRef = useRef12(null);
+  const rowRef = useRef12(null);
+  const [measured, setMeasured] = useState8(null);
+  useLayoutEffect4(() => {
+    const line = lineRef.current;
+    if (!line || typeof ResizeObserver === "undefined") return;
+    const measure = () => {
+      const button = line.firstElementChild;
+      const row = rowRef.current;
+      if (!button || !row || line.clientWidth === 0) return;
+      const rest = button.getBoundingClientRect().width - row.getBoundingClientRect().width;
+      const icon = row.querySelector("svg")?.getBoundingClientRect().width;
+      const more = row.querySelector("[data-step-icons-more]");
+      const moreText = more?.textContent ?? "";
+      setMeasured((previous) => {
+        const next = {
+          space: Math.max(0, line.clientWidth - rest - 4),
+          iconPx: icon || previous?.iconPx || 16,
+          // Знак «+N» с запасом в 1 px: «+N» всегда влезает.
+          charPx: more && moreText ? more.getBoundingClientRect().width / moreText.length + 1 : previous?.charPx ?? 8
+        };
+        return previous && previous.space === next.space && previous.iconPx === next.iconPx && previous.charPx === next.charPx ? previous : next;
+      });
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(line);
+    if (rowRef.current) observer.observe(rowRef.current);
+    return () => observer.disconnect();
+  }, []);
+  return { lineRef, rowRef, measured };
+}
 function TandemWorkSteps(view) {
   const labels = useChatLabels43();
   const listId = useId13();
+  const { lineRef, rowRef, measured } = useIconRowSpace();
   if (view.state === "live") {
     return /* @__PURE__ */ jsxs42("div", { "data-work-live": true, className: "mb-2 flex h-7 min-w-0 items-center gap-2 last:mb-0 text-xs font-medium text-[var(--foreground-muted)] not-first:mt-3", children: [
       view.icon ? /* @__PURE__ */ jsx52(TandemStepIcon, { icon: view.icon, className: "text-[var(--action)] motion-safe:animate-pulse" }) : /* @__PURE__ */ jsx52("span", { "aria-hidden": "true", className: "size-1.5 shrink-0 rounded-full bg-[var(--action)] motion-safe:animate-pulse" }),
@@ -2822,7 +2863,11 @@ function TandemWorkSteps(view) {
   }
   const { steps, count, open, onOpenChange, items, icons = [], moreIcons = 0 } = view;
   const list = items ?? steps.map((step) => ({ ...step, icon: void 0 }));
-  return /* @__PURE__ */ jsxs42("div", { className: "mb-2 not-first:mt-3", children: [
+  const total = icons.length + moreIcons;
+  const fitting = measured && visibleStepIcons(measured.space, total, (count2) => labels.workView.moreSteps(count2).length * measured.charPx, measured.iconPx);
+  const shown = measured === null ? icons.length : fitting === null ? 0 : Math.min(icons.length, fitting);
+  const hidden = fitting === null && measured !== null ? 0 : total - shown;
+  return /* @__PURE__ */ jsxs42("div", { ref: lineRef, className: "mb-2 min-w-0 not-first:mt-3", children: [
     /* @__PURE__ */ jsxs42(
       Button29,
       {
@@ -2834,9 +2879,9 @@ function TandemWorkSteps(view) {
         className: "-ml-2 h-7 max-w-full min-w-0 gap-1 px-2 text-xs font-medium text-[var(--foreground-muted)]",
         children: [
           /* @__PURE__ */ jsx52("span", { className: "shrink-0", children: labels.workView.stepsDone(count) }),
-          icons.length > 0 && /* @__PURE__ */ jsxs42("span", { "data-step-icons": true, "aria-hidden": "true", className: "ml-1 flex min-w-0 items-center gap-1 overflow-hidden text-[var(--foreground-subtle)]", children: [
-            icons.map((icon, index) => /* @__PURE__ */ jsx52(TandemStepIcon, { icon }, index)),
-            moreIcons > 0 && /* @__PURE__ */ jsx52("span", { className: "shrink-0 tabular-nums", children: labels.workView.moreSteps(moreIcons) })
+          icons.length > 0 && /* @__PURE__ */ jsxs42("span", { ref: rowRef, "data-step-icons": true, "aria-hidden": "true", className: "ml-1 flex min-w-0 items-center gap-1 overflow-hidden text-[var(--foreground-subtle)]", children: [
+            icons.slice(0, shown).map((icon, index) => /* @__PURE__ */ jsx52(TandemStepIcon, { icon }, index)),
+            hidden > 0 && /* @__PURE__ */ jsx52("span", { "data-step-icons-more": true, className: "shrink-0 tabular-nums", children: labels.workView.moreSteps(hidden) })
           ] }),
           /* @__PURE__ */ jsx52(ChevronDown6, { "aria-hidden": "true", className: cn13("size-3.5 shrink-0 transition-transform duration-[var(--motion-fast)]", open && "rotate-180") })
         ]