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

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @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
+
+- e6c03dc: Значки шагов и заголовки раздумий (106): в простом виде — ряд значков у «Сделано N шагов» и список «значок + фраза» (`StepIcon`, `icon` в `stepPhrases`, `guessStepIcon`); `thoughtTitles` у службы чата — заголовок раздумья от провайдера или пересказ дешёвой моделью в фоне, хранится в части раздумья, в запрос основной модели не идёт, расход `thought_title`; договор скина 28 (`WorkStepsView.live.icon`, `done.items`, `icons`, `moreIcons`, `Reasoning.title`); фраза навыка с именем.
+
+### Patch Changes
+
+- Updated dependencies [e6c03dc]
+  - @ykurilov/agent-chat-react@0.69.0
+  - @ykurilov/agent-chat-skills@0.69.0
+  - @ykurilov/agent-chat-flows@0.69.0
+  - @ykurilov/agent-chat-mcp@0.69.0
+  - @ykurilov/agent-chat-messengers@0.69.0
+  - @ykurilov/agent-chat-sandbox@0.69.0
+
 ## 0.68.0
 
 ### Patch Changes

package/README.md

@@ -29,6 +29,10 @@ pnpm add @ykurilov/agent-chat-skin-tandem "@tandem/ui@npm:@ykurilov/tandem-ui@^0
 (`BranchSwitcher`), правка идёт на месте пузыря (`MessageEditor`). Строка с кнопками занимает прежний промежуток между сообщениями:
 высота сообщения не меняется. На телефоне кнопки видны без наведения.
 
+Простой вид работы агента (договор 28): рядом с «Сделано N шагов» — ряд значков шагов lucide (больше 8 — «+N»), в
+раскрытом списке у каждой строки свой значок, в живой строке значок текущего шага заменяет точку. Раздумье с заголовком
+от сервера показывает его вместо «Думал N сек», и в подробном виде тоже.
+
 Свои кнопки приложения под ответом (`messageActions`, договор скина версии 17) стоят в том же ряду, после копирования: с иконкой —
 кнопка-иконка с подсказкой, как копирование; без иконки — подпись текстом, как «Повторить». Пока обработчик идёт, кнопка неактивна.
 

package/dist/index.js

@@ -1907,10 +1907,10 @@ import { useChatLabels as useChatLabels30 } from "@ykurilov/agent-chat-react";
 import { ChevronDown as ChevronDown3 } from "lucide-react";
 import { useId as useId3 } from "react";
 import { jsx as jsx34, jsxs as jsxs31 } from "react/jsx-runtime";
-function TandemReasoning({ text, streaming, durationMs, open, onOpenChange }) {
+function TandemReasoning({ text, streaming, durationMs, title: thoughtTitle, open, onOpenChange }) {
   const labels = useChatLabels30();
   const contentId = useId3();
-  const title = streaming ? /* @__PURE__ */ jsx34(TandemThinkingLabel, {}) : durationMs === null ? labels.reasoningRunning : labels.reasoningDone(Math.max(1, Math.round(durationMs / 1e3)));
+  const title = streaming ? /* @__PURE__ */ jsx34(TandemThinkingLabel, {}) : thoughtTitle ? thoughtTitle : durationMs === null ? labels.reasoningRunning : labels.reasoningDone(Math.max(1, Math.round(durationMs / 1e3)));
   return /* @__PURE__ */ jsxs31("div", { className: "mb-2 not-first:mt-3", children: [
     /* @__PURE__ */ jsxs31(
       Button20,
@@ -2775,23 +2775,99 @@ function StatusMark2({ status }) {
 }
 
 // src/work-steps.tsx
-import { Button as Button29, cn as cn12 } from "@tandem/ui";
+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 { jsx as jsx51, jsxs as jsxs42 } from "react/jsx-runtime";
+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";
+import { BookOpen, Bookmark, Bot, Brain as Brain2, Camera, CircleCheck, Clock as Clock2, Eye, Film as Film2, Globe, Image, Pencil as Pencil4, Plug, Search, SquareTerminal, Wrench } from "lucide-react";
+import { jsx as jsx51 } from "react/jsx-runtime";
+var ICONS = {
+  thinking: Brain2,
+  read: Eye,
+  edit: Pencil4,
+  search: Search,
+  web: Globe,
+  skill: BookOpen,
+  mcp: Plug,
+  image: Image,
+  video: Film2,
+  check: CircleCheck,
+  snapshot: Camera,
+  run: SquareTerminal,
+  memory: Bookmark,
+  helper: Bot,
+  task: Clock2,
+  tool: Wrench
+};
+function TandemStepIcon({ icon, className }) {
+  const known = Object.hasOwn(ICONS, icon) ? icon : "tool";
+  const Icon = ICONS[known];
+  return /* @__PURE__ */ jsx51(Icon, { "aria-hidden": "true", "data-step-icon": known, className: cn12("size-3.5 shrink-0", className), strokeWidth: 1.75 });
+}
+
+// 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: [
-      /* @__PURE__ */ jsx51("span", { "aria-hidden": "true", className: "size-1.5 shrink-0 rounded-full bg-[var(--action)] motion-safe:animate-pulse" }),
-      /* @__PURE__ */ jsx51("span", { "aria-hidden": "true", "data-work-phrase": true, className: "min-w-0 truncate motion-safe:animate-[tandem-fade-in_var(--motion-fast)_ease-out]", children: view.phrase }, view.phrase),
-      /* @__PURE__ */ jsx51("span", { role: "status", className: "sr-only", children: labels.workView.live(labels.workView.stepRunning) })
+      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" }),
+      /* @__PURE__ */ jsx52("span", { "aria-hidden": "true", "data-work-phrase": true, className: "min-w-0 truncate motion-safe:animate-[tandem-fade-in_var(--motion-fast)_ease-out]", children: view.phrase }, view.phrase),
+      /* @__PURE__ */ jsx52("span", { role: "status", className: "sr-only", children: labels.workView.live(labels.workView.stepRunning) })
     ] });
   }
-  const { steps, count, open, onOpenChange } = view;
-  return /* @__PURE__ */ jsxs42("div", { className: "mb-2 not-first:mt-3", children: [
+  const { steps, count, open, onOpenChange, items, icons = [], moreIcons = 0 } = view;
+  const list = items ?? steps.map((step) => ({ ...step, icon: void 0 }));
+  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,
       {
@@ -2800,14 +2876,30 @@ function TandemWorkSteps(view) {
         "aria-expanded": open,
         "aria-controls": listId,
         onClick: () => onOpenChange(!open),
-        className: "-ml-2 h-7 gap-1 px-2 text-xs font-medium text-[var(--foreground-muted)]",
+        className: "-ml-2 h-7 max-w-full min-w-0 gap-1 px-2 text-xs font-medium text-[var(--foreground-muted)]",
         children: [
-          labels.workView.stepsDone(count),
-          /* @__PURE__ */ jsx51(ChevronDown6, { "aria-hidden": "true", className: cn12("size-3.5 transition-transform duration-[var(--motion-fast)]", open && "rotate-180") })
+          /* @__PURE__ */ jsx52("span", { className: "shrink-0", children: labels.workView.stepsDone(count) }),
+          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") })
         ]
       }
     ),
-    /* @__PURE__ */ jsx51("ol", { id: listId, hidden: !open, className: "mt-1 space-y-1 border-l-2 border-[var(--border)] pl-3 text-xs leading-5 text-[var(--foreground-muted)]", children: open && steps.map((step, index) => /* @__PURE__ */ jsx51("li", { "data-work-step": true, "data-failed": String(step.failed), className: cn12("min-w-0 break-words [overflow-wrap:anywhere]", step.failed && "text-[var(--foreground-subtle)] line-through decoration-[var(--border)]"), children: step.phrase }, index)) })
+    /* @__PURE__ */ jsx52("ol", { id: listId, hidden: !open, className: "mt-1 space-y-1 border-l-2 border-[var(--border)] pl-3 text-xs leading-5 text-[var(--foreground-muted)]", children: open && list.map((step, index) => /* @__PURE__ */ jsxs42(
+      "li",
+      {
+        "data-work-step": true,
+        "data-failed": String(step.failed),
+        className: cn13("flex min-w-0 items-start gap-1.5 break-words [overflow-wrap:anywhere]", step.failed && "text-[var(--foreground-subtle)] line-through decoration-[var(--border)]"),
+        children: [
+          step.icon && /* @__PURE__ */ jsx52(TandemStepIcon, { icon: step.icon, className: "mt-[3px] text-[var(--foreground-subtle)]" }),
+          /* @__PURE__ */ jsx52("span", { className: "min-w-0", children: step.phrase })
+        ]
+      },
+      index
+    )) })
   ] });
 }