@firstlovecenter/ai-chat 0.2.1 → 0.2.2

package/CHANGELOG.md

@@ -5,6 +5,15 @@ All notable changes to `@firstlovecenter/ai-chat` are documented here.
 The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and the project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.2.2] — 2026-05-08
+
+### Added
+
+- **Live elapsed counter while the agent is thinking** — the inline thinking indicator now shows `Thinking… (Xs)` with a live ticker that advances every second. Suppresses sub-second values (no flicker on instant responses).
+- **Final duration after the action buttons** — once the agent marks a turn done, the wall-clock duration appears to the right of the Copy / Retry buttons (`5s`, `1m`, `2m 30s` style). Restored history (sessions loaded from the DB) shows nothing here since durations weren't persisted.
+
+The new `AnswerState.startedAt` and `AnswerState.durationMs` fields are stamped at submit-time and on every `done: true` flip respectively. Format helper `formatDuration(ms)` produces `Xs`, `Xm`, or `Xm Ys`.
+
 ## [0.2.1] — 2026-05-08
 
 ### Fixed
@@ -70,6 +79,7 @@ Initial public release on npm under `@firstlovecenter/ai-chat`.
 - Dual ESM + CJS output via `tsup` with full `.d.ts` (and `.d.cts`) generation.
 - UI bundle gets a post-build `'use client';` directive injection (tsup otherwise strips module-level directives during bundling, breaking RSC consumers that import the UI from a server file).
 
+[0.2.2]: https://github.com/firstlovecenter/flc-ai-chat/compare/v0.2.1...v0.2.2
 [0.2.1]: https://github.com/firstlovecenter/flc-ai-chat/compare/v0.2.0...v0.2.1
 [0.2.0]: https://github.com/firstlovecenter/flc-ai-chat/compare/v0.1.1...v0.2.0
 [0.1.1]: https://github.com/firstlovecenter/flc-ai-chat/compare/v0.1.0...v0.1.1

package/dist/ui/index.cjs

@@ -544,6 +544,14 @@ function AiLineChart({
     ))
   ] }) }) });
 }
+function formatDuration(ms) {
+  if (ms < 0) ms = 0;
+  const totalSec = Math.round(ms / 1e3);
+  if (totalSec < 60) return `${totalSec}s`;
+  const m = Math.floor(totalSec / 60);
+  const s = totalSec % 60;
+  return s === 0 ? `${m}m` : `${m}m ${s}s`;
+}
 var PROVIDER_LABELS = {
   claude: "Claude",
   grok: "Grok",
@@ -718,7 +726,7 @@ function AiChat({
       }
       setAnswers((prev) => [
         ...prev,
-        { question: trimmed, blocks: [], done: false }
+        { question: trimmed, blocks: [], done: false, startedAt: Date.now() }
       ]);
       const ac = new AbortController();
       abortRef.current = ac;
@@ -739,6 +747,7 @@ function AiChat({
           (prev) => updateLast(prev, (a) => ({
             ...a,
             done: true,
+            durationMs: a.startedAt != null ? Date.now() - a.startedAt : void 0,
             error: { code: "NETWORK", message }
           }))
         );
@@ -750,6 +759,7 @@ function AiChat({
           (prev) => updateLast(prev, (a) => ({
             ...a,
             done: true,
+            durationMs: a.startedAt != null ? Date.now() - a.startedAt : void 0,
             error: { code: "NO_BODY", message: "No response stream." }
           }))
         );
@@ -776,6 +786,7 @@ function AiChat({
           (prev) => updateLast(prev, (a) => ({
             ...a,
             done: true,
+            durationMs: a.startedAt != null ? Date.now() - a.startedAt : void 0,
             error: { code: "STREAM", message }
           }))
         );
@@ -808,7 +819,7 @@ function AiChat({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "aside",
       {
-        "aria-hidden": !sidebarOpen,
+        inert: !sidebarOpen,
         className: cn(
           "absolute inset-y-0 left-0 z-20 flex w-72 max-w-[85vw] flex-col border-r border-border bg-sidebar text-sidebar-foreground shadow-lg transition-transform duration-200 ease-out",
           sidebarOpen ? "translate-x-0" : "-translate-x-full"
@@ -1074,6 +1085,14 @@ function AnswerView({
   }, [answer.blocks, answer.error]);
   const showActions = answer.done && (answer.blocks.length > 0 || answer.error != null);
   const isThinking = !answer.done && answer.blocks.length === 0 && !answer.error;
+  const [, forceTick] = React.useState(0);
+  React.useEffect(() => {
+    if (answer.done || answer.startedAt == null) return;
+    const id = window.setInterval(() => forceTick((n) => n + 1), 1e3);
+    return () => window.clearInterval(id);
+  }, [answer.done, answer.startedAt]);
+  const liveElapsed = answer.startedAt != null ? Date.now() - answer.startedAt : null;
+  const finalDuration = answer.durationMs;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -1092,7 +1111,12 @@ function AnswerView({
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-7 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "size-4" }) }),
           /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex items-center text-sm text-muted-foreground", children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "mr-1 inline size-3.5 animate-spin" }),
-            "Thinking\u2026"
+            "Thinking\u2026",
+            liveElapsed != null && liveElapsed >= 1e3 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-1 tabular-nums", children: [
+              "(",
+              formatDuration(liveElapsed),
+              ")"
+            ] })
           ] })
         ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "size-4" }) }),
@@ -1125,6 +1149,14 @@ function AnswerView({
                   className: "inline-flex size-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground",
                   children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { className: "size-4" })
                 }
+              ),
+              finalDuration != null && finalDuration >= 1e3 && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "ml-1 text-xs text-muted-foreground tabular-nums",
+                  title: "Time taken to generate this response",
+                  children: formatDuration(finalDuration)
+                }
               )
             ] })
           ] })
@@ -1330,7 +1362,13 @@ function handleEvent(raw, setAnswers) {
       })
     );
   } else if (event === "done") {
-    setAnswers((prev) => updateLast(prev, (a) => ({ ...a, done: true })));
+    setAnswers(
+      (prev) => updateLast(prev, (a) => ({
+        ...a,
+        done: true,
+        durationMs: a.startedAt != null ? Date.now() - a.startedAt : void 0
+      }))
+    );
   } else if (event === "error") {
     setAnswers(
       (prev) => updateLast(prev, (a) => ({