@ai-matrx/coding-sessions 0.1.88 → 0.1.90

package/dist/react/index.js

@@ -5,6 +5,7 @@ import {
   useCallback as useCallback2,
   useContext as useContext3,
   useEffect as useEffect4,
+  useLayoutEffect,
   useMemo as useMemo4,
   useRef as useRef3,
   useState as useState6
@@ -2695,7 +2696,7 @@ function SessionView({ session, changesOpen, setChangesOpen }) {
           ) : null,
           messages.length === 0 && !live ? /* @__PURE__ */ jsx7("div", { className: "flex flex-1 items-center justify-center text-[13px] text-muted-foreground", children: session.origin === "takeover" ? "You've taken over this chat. Send a message to continue it." : "Nothing here yet." }) : /* @__PURE__ */ jsx7(ChatMessageList, { className: "min-h-0 flex-1", label: `Conversation: ${entry.title}` })
         ] }) }),
-        /* @__PURE__ */ jsxs7("div", { className: "mx-auto w-full max-w-[820px] px-4 pb-4", children: [
+        /* @__PURE__ */ jsxs7("div", { "data-cs-composer": true, className: "mx-auto w-full max-w-[820px] px-4 pb-4", children: [
           limited ? /* @__PURE__ */ jsxs7("div", { className: "mb-2 flex items-start gap-2 rounded-lg border border-warning/40 bg-warning/10 px-3 py-2 text-[12.5px]", children: [
             /* @__PURE__ */ jsx7(AlertIcon, { size: 15, className: "mt-0.5 shrink-0 text-warning" }),
             /* @__PURE__ */ jsxs7("span", { children: [
@@ -3284,52 +3285,62 @@ function Home({ onNew }) {
       /* @__PURE__ */ jsx7("kbd", { className: "cs-kbd", children: "\u2318/" }),
       " all shortcuts"
     ] }),
-    /* @__PURE__ */ jsx7("div", { className: "mt-6 flex flex-wrap justify-center gap-2 text-left", children: state.providers.data.map((p) => /* @__PURE__ */ jsxs7("div", { "data-provider-card": p.provider, className: "flex w-[260px] items-start gap-2.5 rounded-lg border border-border bg-card px-3 py-2.5", children: [
-      /* @__PURE__ */ jsx7(ProviderMark, { provider: p.provider, size: 16 }),
-      /* @__PURE__ */ jsxs7("div", { className: "min-w-0 flex-1 leading-5", children: [
-        /* @__PURE__ */ jsx7("span", { className: "block truncate text-[14px] font-semibold", children: p.label }),
-        p.ready ? /* @__PURE__ */ jsxs7("span", { className: "block truncate text-[12px] text-muted-foreground", children: [
-          "Ready",
-          p.plan ? ` on your ${p.plan} plan` : "",
-          p.billing === "api" ? " (API key, billed per use)" : ""
-        ] }) : null,
-        p.installed && p.version ? /* @__PURE__ */ jsxs7(
-          "span",
-          {
-            className: "block truncate text-[12px] text-muted-foreground",
-            title: newerWords(p) ?? p.binary?.path ?? void 0,
-            children: [
-              binaryWords(p),
-              p.binary?.newer ? ` \xB7 ${p.binary.newer.version} available` : ""
-            ]
-          }
-        ) : null,
-        p.ready ? null : /* @__PURE__ */ jsxs7("span", { className: "block text-muted-foreground", children: [
-          p.problem,
-          " ",
-          p.fix
-        ] })
-      ] }),
-      p.ready ? /* @__PURE__ */ jsx7(CheckIcon, { size: 15, className: "mt-0.5 text-success" }) : /* @__PURE__ */ jsx7(AlertIcon, { size: 15, className: "mt-0.5 text-warning" })
-    ] }, p.provider)) })
+    /* @__PURE__ */ jsx7("div", { className: "mt-6 flex flex-wrap justify-center gap-2 text-left", children: state.providers.data.map((p) => /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        "data-provider-card": p.provider,
+        title: p.installed && p.version ? [binaryWords(p), newerWords(p) ?? p.binary?.path].filter(Boolean).join(" \xB7 ") : void 0,
+        className: "flex w-[260px] items-start gap-2.5 rounded-lg border border-border bg-card px-3 py-2.5",
+        children: [
+          /* @__PURE__ */ jsx7(ProviderMark, { provider: p.provider, size: 16 }),
+          /* @__PURE__ */ jsxs7("div", { className: "min-w-0 flex-1 leading-5", children: [
+            /* @__PURE__ */ jsx7("span", { className: "block truncate text-[14px] font-semibold", children: p.label }),
+            p.ready ? /* @__PURE__ */ jsxs7("span", { className: "block truncate text-[12px] text-muted-foreground", children: [
+              "Ready",
+              p.plan ? ` on your ${p.plan} plan` : "",
+              p.billing === "api" ? " (API key, billed per use)" : ""
+            ] }) : /* @__PURE__ */ jsxs7("span", { className: "block text-[12px] text-muted-foreground", children: [
+              p.problem,
+              " ",
+              p.fix
+            ] })
+          ] }),
+          p.ready ? /* @__PURE__ */ jsx7(CheckIcon, { size: 15, className: "mt-0.5 text-success" }) : /* @__PURE__ */ jsx7(AlertIcon, { size: 15, className: "mt-0.5 text-warning" })
+        ]
+      },
+      p.provider
+    )) })
   ] }) });
 }
 function useToast() {
-  const [text, setText] = useState6(null);
+  const [current, setCurrent] = useState6(null);
   const timer = useRef3(null);
   useEffect4(() => () => {
     if (timer.current) clearTimeout(timer.current);
   }, []);
-  const show = useCallback2((next) => {
-    setText(next);
+  const show = useCallback2((next, sessionId = null) => {
+    setCurrent({ text: next, sessionId });
     if (timer.current) clearTimeout(timer.current);
-    timer.current = setTimeout(() => setText(null), 6e3);
+    timer.current = setTimeout(() => setCurrent(null), 6e3);
   }, []);
-  return [text, show];
+  const dismiss = useCallback2(() => {
+    if (timer.current) clearTimeout(timer.current);
+    setCurrent(null);
+  }, []);
+  return { text: current?.text ?? null, sessionId: current?.sessionId ?? null, show, dismiss };
 }
 function Toast({ text }) {
+  const ref = useRef3(null);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    const pane = el?.parentElement;
+    if (!el || !pane) return;
+    const composer = pane.querySelector("[data-cs-composer]");
+    const gap = composer ? pane.getBoundingClientRect().bottom - composer.getBoundingClientRect().top + 8 : 20;
+    el.style.setProperty("--cs-toast-bottom", `${Math.max(20, Math.round(gap))}px`);
+  }, [text]);
   if (!text) return null;
-  return /* @__PURE__ */ jsx7("div", { role: "status", className: "cs-toast", children: text });
+  return /* @__PURE__ */ jsx7("div", { ref, role: "status", "data-cs-toast": true, className: "cs-toast", children: text });
 }
 var SIDEBAR_DEFAULT = 300;
 var SIDEBAR_MIN = 220;
@@ -3432,7 +3443,14 @@ function ShortcutsDialog(props) {
   ] }) });
 }
 var BASE_TITLE = "Coding sessions";
-function useRunFinishedNotices(openSessionId, show) {
+function useRunFinishedNotices(openSessionId, toast) {
+  const { show, dismiss, sessionId: toastSession } = toast;
+  const state = useCodingSessionsState();
+  useEffect4(() => {
+    if (!toastSession) return;
+    const run = state.runs[toastSession];
+    if (openSessionId === toastSession || run && (run.status === "starting" || run.status === "running")) dismiss();
+  }, [toastSession, openSessionId, state.runs, dismiss]);
   const client = useCodingSessionsClient();
   const unseen = useRef3(0);
   const openRef = useRef3(openSessionId);
@@ -3461,7 +3479,7 @@ function useRunFinishedNotices(openSessionId, show) {
           };
         }
       } else if (openRef.current !== run.sessionId && run.status !== "stopped") {
-        show(sentence);
+        show(sentence, run.sessionId);
       }
     });
     return () => {
@@ -3501,7 +3519,8 @@ function Shell() {
   const [changesOpen, setChangesOpen] = useState6(false);
   const [found, setFound] = useState6({});
   const [theme, setTheme] = useTheme();
-  const [toast, showToast] = useToast();
+  const toast = useToast();
+  const showToast = toast.show;
   const layout = useSidebarLayout();
   const searchRef = useRef3(null);
   const select = useCallback2((next) => {
@@ -3513,7 +3532,7 @@ function Shell() {
     window.addEventListener("hashchange", onHash);
     return () => window.removeEventListener("hashchange", onHash);
   }, []);
-  useRunFinishedNotices(selection.kind === "session" ? selection.id : null, showToast);
+  useRunFinishedNotices(selection.kind === "session" ? selection.id : null, toast);
   const session = selection.kind === "session" ? state.sessions.data.find((s) => s.id === selection.id) ?? null : null;
   const discovered = selection.kind === "discovered" ? state.discovered.data.find((d) => d.providerSessionId === selection.id) ?? found[`${selection.provider}:${selection.id}`] ?? null : null;
   const run = session ? state.runs[session.id] : void 0;
@@ -3663,7 +3682,10 @@ function Shell() {
         ),
         /* @__PURE__ */ jsx7(Resizer, { width: layout.width, setWidth: layout.setWidth })
       ] }),
-      /* @__PURE__ */ jsx7("main", { className: "flex min-w-0 flex-1", children: main })
+      /* @__PURE__ */ jsxs7("main", { className: "relative flex min-w-0 flex-1", children: [
+        main,
+        /* @__PURE__ */ jsx7(Toast, { text: toast.text })
+      ] })
     ] }),
     /* @__PURE__ */ jsx7(
       NewSessionDialog,
@@ -3676,8 +3698,7 @@ function Shell() {
         }
       }
     ),
-    /* @__PURE__ */ jsx7(ShortcutsDialog, { open: shortcutsOpen, onOpenChange: setShortcutsOpen }),
-    /* @__PURE__ */ jsx7(Toast, { text: toast })
+    /* @__PURE__ */ jsx7(ShortcutsDialog, { open: shortcutsOpen, onOpenChange: setShortcutsOpen })
   ] }) });
 }
 function CodingSessionsApp({ transport }) {