@nivaro/react 0.3.40 → 0.3.42

package/dist/shared/components/ActivityEntry.js

@@ -0,0 +1,154 @@
+import { jsxs as m, jsx as e, Fragment as w } from "react/jsx-runtime";
+import { useQuery as b } from "@tanstack/react-query";
+import { ChevronDown as S, ChevronRight as A, Eye as C, KeyRound as D, Bot as L, Upload as j, Workflow as _, Clock as I, Cog as R } from "lucide-react";
+import { useState as T, useMemo as u } from "react";
+import { useOptionalNivaroClient as q } from "../context.js";
+import { renderActivityGroupSentence as B, renderActivitySentence as U, actorName as W, groupActivity as E, activityLabelRefs as K, actorOf as Z, activityWhy as G } from "../lib/activity-sentence.js";
+import { post as J } from "../lib/commands.js";
+import { cn as f } from "../lib/utils.js";
+import { AgentBadge as M } from "./AgentBadge.js";
+import { UserAvatar as Q } from "./UserAvatar.js";
+function z(a) {
+  if (!a) return null;
+  const t = new Date(a);
+  return Number.isNaN(t.getTime()) ? null : {
+    short: (/* @__PURE__ */ new Date()).toDateString() === t.toDateString() ? t.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" }) : t.toLocaleString([], {
+      month: "short",
+      day: "numeric",
+      hour: "numeric",
+      minute: "2-digit"
+    }),
+    full: t.toLocaleString()
+  };
+}
+const F = "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-slate-100 text-slate-500 dark:bg-muted dark:text-slate-300";
+function H({ entry: a, name: t }) {
+  const i = Z(a).kind, n = i === "view_as" ? /* @__PURE__ */ e(C, { className: "h-3.5 w-3.5" }) : i === "api_key" ? /* @__PURE__ */ e(D, { className: "h-3.5 w-3.5" }) : i === "mcp" ? /* @__PURE__ */ e(L, { className: "h-3.5 w-3.5" }) : i === "import" ? /* @__PURE__ */ e(j, { className: "h-3.5 w-3.5" }) : i === "flow" ? /* @__PURE__ */ e(_, { className: "h-3.5 w-3.5" }) : i === "cron" ? /* @__PURE__ */ e(I, { className: "h-3.5 w-3.5" }) : i === "system" ? /* @__PURE__ */ e(R, { className: "h-3.5 w-3.5" }) : null;
+  if (n)
+    return /* @__PURE__ */ e("span", { className: F, "data-activity-actor": i, "aria-hidden": !0, children: n });
+  const l = t.split(" ").map((c) => c[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
+  return /* @__PURE__ */ e(
+    Q,
+    {
+      userId: a.user ?? a.user_id ?? null,
+      className: "h-6 w-6",
+      fallback: /* @__PURE__ */ e("span", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-nvr-cyan/10 text-[10px] font-semibold text-nvr-navy dark:text-nvr-cyan", children: l })
+    }
+  );
+}
+function O({ entry: a }) {
+  const t = G(a);
+  return !t.reason && !t.note && !t.approval ? null : /* @__PURE__ */ m("span", { className: "mt-0.5 block space-y-0.5 text-[11.5px] text-slate-500 dark:text-slate-400", children: [
+    t.note && /* @__PURE__ */ m("span", { className: "block truncate italic", "data-activity-why": "note", "data-tip": t.note, children: [
+      "“",
+      t.note,
+      "”"
+    ] }),
+    t.reason && /* @__PURE__ */ m("span", { className: "block truncate", "data-activity-why": "reason", "data-tip": t.reason, children: [
+      "Reason: ",
+      t.reason
+    ] }),
+    t.approval && /* @__PURE__ */ m("span", { className: "block truncate", "data-activity-why": "approval", children: [
+      "Approval: ",
+      t.approval
+    ] })
+  ] });
+}
+function y({
+  entry: a,
+  labels: t,
+  group: i,
+  onOpen: n,
+  actions: l,
+  showTime: c = !0,
+  className: o
+}) {
+  const [r, v] = T(!1), s = i && i.length > 1 ? i : null, h = s ? B(s, t) : U(a, t), x = W(a, t), p = z(a.timestamp), N = !!n || !!s, k = () => {
+    s ? v((d) => !d) : n == null || n(a);
+  };
+  return /* @__PURE__ */ m("div", { className: f("min-w-0", o), "data-activity-entry": a.id ?? "", children: [
+    /* @__PURE__ */ m("div", { className: "flex w-full items-start gap-2.5 rounded-md px-2 py-2", children: [
+      /* @__PURE__ */ e(H, { entry: a, name: x }),
+      /* @__PURE__ */ m("span", { className: "min-w-0 flex-1 text-[12.5px] leading-5 text-slate-700 dark:text-slate-200", children: [
+        N ? /* @__PURE__ */ m(
+          "button",
+          {
+            type: "button",
+            onClick: k,
+            "aria-expanded": s ? r : void 0,
+            className: "inline-flex max-w-full items-start gap-1 text-left hover:underline",
+            children: [
+              s && (r ? /* @__PURE__ */ e(S, { className: "mt-[3px] h-3.5 w-3.5 shrink-0 text-slate-400" }) : /* @__PURE__ */ e(A, { className: "mt-[3px] h-3.5 w-3.5 shrink-0 text-slate-400" })),
+              /* @__PURE__ */ e("span", { "data-activity-sentence": !0, children: h })
+            ]
+          }
+        ) : /* @__PURE__ */ e("span", { "data-activity-sentence": !0, children: h }),
+        !s && /* @__PURE__ */ e(O, { entry: a })
+      ] }),
+      /* @__PURE__ */ e(M, { label: a.via_agent }),
+      c && p && /* @__PURE__ */ e(
+        "span",
+        {
+          className: "shrink-0 pt-px text-[11px] tabular-nums text-slate-400",
+          "data-tip": p.full,
+          children: p.short
+        }
+      ),
+      l && /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center gap-1", children: l })
+    ] }),
+    s && r && /* @__PURE__ */ e("div", { className: "ml-[18px] border-l border-slate-200 pl-3 dark:border-border", children: s.map((d, g) => /* @__PURE__ */ e(
+      y,
+      {
+        entry: d,
+        labels: t,
+        onOpen: n,
+        showTime: c
+      },
+      String(d.id ?? g)
+    )) })
+  ] });
+}
+function rt({
+  entries: a,
+  labels: t,
+  onOpen: i,
+  actionsFor: n,
+  empty: l,
+  className: c
+}) {
+  const o = u(() => E(a), [a]);
+  return o.length === 0 ? /* @__PURE__ */ e(w, { children: l ?? null }) : /* @__PURE__ */ e("div", { className: f("divide-y divide-slate-100 dark:divide-border", c), children: o.map((r) => /* @__PURE__ */ e(
+    y,
+    {
+      entry: r.entries[0],
+      group: r.entries.length > 1 ? r.entries : void 0,
+      labels: t,
+      onOpen: i,
+      actions: n == null ? void 0 : n(r)
+    },
+    r.key
+  )) });
+}
+function st(a, t = {}) {
+  const i = q(), n = u(() => K(a), [a]), l = u(() => JSON.stringify(n), [n]), c = n.refs.length === 0 && n.users.length === 0 && n.collections.length === 0, { data: o } = b({
+    queryKey: ["activity-labels", l],
+    queryFn: async () => (await i.request(J("/activity/labels", n))).data,
+    enabled: !!i && !c && t.enabled !== !1,
+    staleTime: 6e4,
+    retry: !1
+  });
+  return u(() => {
+    let r = null;
+    try {
+      r = Intl.DateTimeFormat().resolvedOptions().timeZone ?? null;
+    } catch {
+      r = null;
+    }
+    return o ? { ...o, timeZone: r } : void 0;
+  }, [o]);
+}
+export {
+  y as ActivityEntry,
+  rt as ActivityFeed,
+  st as useActivityLabels
+};

package/dist/shared/components/AudienceConfirmPanel.js

@@ -0,0 +1,98 @@
+import { jsxs as s, jsx as d } from "react/jsx-runtime";
+import { cn as i } from "../lib/utils.js";
+function x(e) {
+  var l;
+  const a = e, r = a != null && a.response && "data" in a.response ? a.response.data : a == null ? void 0 : a.response;
+  return (((l = a == null ? void 0 : a.response) == null ? void 0 : l.status) ?? (a == null ? void 0 : a.status)) !== 409 || (r == null ? void 0 : r.code) !== "AUDIENCE_CONFIRM_REQUIRED" || !r.audience ? null : r.audience;
+}
+function c(e) {
+  if (e.includes_everyone) return `Saving this tells everyone (${e.count} people).`;
+  const a = `${e.count} ${e.count === 1 ? "person" : "people"}`;
+  if (e.includes_roles.length > 0) {
+    const r = e.includes_roles.map((n) => n.name).join(", ");
+    return `Saving this tells ${a}, including the whole ${r} role${e.includes_roles.length > 1 ? "s" : ""}.`;
+  }
+  return `Saving this tells ${a} — more than ${e.threshold}.`;
+}
+function h({
+  preview: e,
+  onConfirm: a,
+  onCancel: r,
+  busy: n = !1,
+  confirmLabel: l = "Confirm and save",
+  className: m
+}) {
+  const o = Math.max(0, e.count - e.external_addresses - e.sample.length);
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      role: "alert",
+      "data-audience-confirm": !0,
+      className: i(
+        "rounded-lg border border-amber-200 bg-amber-50 px-3.5 py-3 text-[12.5px] text-amber-900 dark:border-amber-400/30 dark:bg-amber-400/10 dark:text-amber-200",
+        m
+      ),
+      children: [
+        /* @__PURE__ */ d("p", { className: "font-semibold", children: c(e) }),
+        e.includes_roles.length > 0 && /* @__PURE__ */ d("div", { className: "mt-2 flex flex-wrap gap-1.5", children: e.includes_roles.map((t) => /* @__PURE__ */ s(
+          "span",
+          {
+            className: "rounded-full border border-amber-300 bg-white px-2 py-0.5 text-[11.5px] font-medium text-amber-800 dark:border-amber-400/40 dark:bg-amber-400/10 dark:text-amber-200",
+            children: [
+              "Whole role: ",
+              t.name,
+              " (",
+              t.members,
+              ")"
+            ]
+          },
+          t.id
+        )) }),
+        e.sample.length > 0 && /* @__PURE__ */ s("p", { className: "mt-2 leading-relaxed text-amber-800 dark:text-amber-200/90", children: [
+          e.sample.map((t) => t.name).join(", "),
+          o > 0 && /* @__PURE__ */ s("span", { className: "font-medium", children: [
+            " and ",
+            o,
+            " more"
+          ] }),
+          e.external_addresses > 0 && /* @__PURE__ */ s("span", { children: [
+            " ",
+            "(+ ",
+            e.external_addresses,
+            " outside address",
+            e.external_addresses === 1 ? "" : "es",
+            ")"
+          ] })
+        ] }),
+        e.notes.length > 0 && /* @__PURE__ */ d("ul", { className: "mt-2 list-disc space-y-0.5 pl-4 text-[11.5px] text-amber-700 dark:text-amber-300/80", children: e.notes.map((t) => /* @__PURE__ */ d("li", { children: t }, t)) }),
+        /* @__PURE__ */ s("div", { className: "mt-3 flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ d(
+            "button",
+            {
+              type: "button",
+              disabled: n,
+              onClick: a,
+              className: "h-8 rounded-md bg-nvr-cyan px-3 text-[12.5px] font-medium text-white disabled:opacity-50",
+              children: n ? "Saving…" : l
+            }
+          ),
+          /* @__PURE__ */ d(
+            "button",
+            {
+              type: "button",
+              disabled: n,
+              onClick: r,
+              className: "h-8 rounded-md border border-amber-300 bg-white px-3 text-[12.5px] font-medium text-amber-800 hover:bg-amber-100 disabled:opacity-50 dark:border-amber-400/40 dark:bg-transparent dark:text-amber-200 dark:hover:bg-amber-400/15",
+              children: "Cancel"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  h as AudienceConfirmPanel,
+  x as audienceConfirmFromError,
+  c as audienceSummary
+};

package/dist/shared/components/BackgroundRunOffer.js

@@ -1,29 +1,37 @@
-import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import { AlertCircle as g, Timer as h, Loader2 as b } from "lucide-react";
-import { useState as v, useEffect as k } from "react";
-import { useBackgroundRun as w, clock as o, runProgress as y } from "../lib/background-runs.js";
-import { cn as u } from "../lib/utils.js";
-function _({
-  className: s,
-  ...f
+import { jsx as t, jsxs as a } from "react/jsx-runtime";
+import { AlertCircle as h, Timer as b, Loader2 as v } from "lucide-react";
+import { useState as w, useEffect as k } from "react";
+import { useSlowReason as y } from "../hooks/useSlowReason.js";
+import { useBackgroundRun as N, clock as d, runProgress as S } from "../lib/background-runs.js";
+import { cn as c } from "../lib/utils.js";
+import { SlowNoticeView as R } from "./SlowNotice.js";
+function X({
+  className: r,
+  ...n
 }) {
-  var p, m;
-  const e = w(f), d = (p = e.run) != null && p.started_at ? Date.parse(e.run.started_at) : null, [x, c] = v(() => Date.now());
+  var f, x;
+  const e = N(n), s = y({
+    pending: n.pending && e.phase !== "running" && e.phase !== "done",
+    request: n.request,
+    label: n.label
+  }), p = (f = e.run) != null && f.started_at ? Date.parse(e.run.started_at) : null, [g, m] = w(() => Date.now());
   if (k(() => {
     if (e.phase !== "running") return;
-    c(Date.now());
-    const r = setInterval(() => c(Date.now()), 1e3);
-    return () => clearInterval(r);
-  }, [e.phase]), e.phase === "idle" || e.phase === "done") return null;
+    m(Date.now());
+    const l = setInterval(() => m(Date.now()), 1e3);
+    return () => clearInterval(l);
+  }, [e.phase]), e.phase === "done") return null;
+  if (e.phase === "idle")
+    return s.slow ? /* @__PURE__ */ t(R, { reason: s, className: r }) : null;
   if (e.phase === "error")
     return /* @__PURE__ */ a(
       "div",
       {
         "data-background-run": "error",
         role: "alert",
-        className: u("flex flex-wrap items-center gap-x-2 gap-y-1 text-[12px]", s),
+        className: c("flex flex-wrap items-center gap-x-2 gap-y-1 text-[12px]", r),
         children: [
-          /* @__PURE__ */ t(g, { className: "h-3.5 w-3.5 shrink-0 text-rose-500" }),
+          /* @__PURE__ */ t(h, { className: "h-3.5 w-3.5 shrink-0 text-rose-500" }),
           /* @__PURE__ */ t("span", { className: "min-w-0 text-rose-700 dark:text-rose-300", children: e.error ?? "The background run failed." }),
           /* @__PURE__ */ t(
             "button",
@@ -38,13 +46,13 @@ function _({
       }
     );
   if (e.phase === "running") {
-    const r = d ? Math.max(0, x - d) : 0, i = ((m = e.run) == null ? void 0 : m.expected_ms) ?? null, n = y(r, i);
+    const l = p ? Math.max(0, g - p) : 0, u = ((x = e.run) == null ? void 0 : x.expected_ms) ?? null, i = S(l, u);
     return /* @__PURE__ */ a(
       "div",
       {
         "data-background-run": "running",
         "aria-live": "polite",
-        className: u("flex w-full min-w-0 flex-col gap-1.5", s),
+        className: c("flex w-full min-w-0 flex-col gap-1.5", r),
         children: [
           /* @__PURE__ */ t(
             "div",
@@ -53,13 +61,13 @@ function _({
               "aria-label": "Background run",
               "aria-valuemin": 0,
               "aria-valuemax": 100,
-              "aria-valuenow": n == null ? void 0 : Math.round(n * 100),
+              "aria-valuenow": i == null ? void 0 : Math.round(i * 100),
               className: "relative h-1 w-full overflow-hidden rounded-full bg-slate-100 dark:bg-slate-800",
-              children: n == null ? /* @__PURE__ */ t("div", { className: "nvr-bgrun-sweep absolute inset-y-0 left-0 w-1/3 rounded-full bg-nvr-cyan/70" }) : /* @__PURE__ */ t(
+              children: i == null ? /* @__PURE__ */ t("div", { className: "nvr-bgrun-sweep absolute inset-y-0 left-0 w-1/3 rounded-full bg-nvr-cyan/70" }) : /* @__PURE__ */ t(
                 "div",
                 {
                   className: "h-full w-full origin-left rounded-full bg-nvr-cyan transition-transform duration-1000 ease-linear motion-reduce:transition-none",
-                  style: { transform: `scaleX(${n})` }
+                  style: { transform: `scaleX(${i})` }
                 }
               )
             }
@@ -68,26 +76,30 @@ function _({
             "Running in the background",
             /* @__PURE__ */ t("span", { className: "text-slate-400 dark:text-slate-500", children: " · " }),
             /* @__PURE__ */ a("span", { className: "tabular-nums", children: [
-              o(r),
-              i ? ` of about ${o(i)}` : ""
+              d(l),
+              u ? ` of about ${d(u)}` : ""
             ] })
           ] }),
           /* @__PURE__ */ t("p", { className: "text-[11.5px] text-slate-500 dark:text-slate-400", children: "You can leave this page. Your jobs tray says when it is ready." }),
-          /* @__PURE__ */ t("style", { children: N })
+          /* @__PURE__ */ t("style", { children: T })
         ]
       }
     );
   }
-  const l = e.typicalMs;
+  const o = e.typicalMs;
   return /* @__PURE__ */ a(
     "div",
     {
       "data-background-run": "offer",
-      className: u("flex flex-wrap items-center gap-x-3 gap-y-1.5", s),
+      className: c("flex flex-wrap items-center gap-x-3 gap-y-1.5", r),
       children: [
         /* @__PURE__ */ a("span", { className: "inline-flex min-w-0 items-center gap-1.5 text-[12px] text-slate-600 dark:text-slate-300", children: [
-          /* @__PURE__ */ t(h, { className: "h-3.5 w-3.5 shrink-0 text-slate-400" }),
-          l && l >= 1e3 ? `This usually takes about ${o(l)}.` : "This is taking a while."
+          /* @__PURE__ */ t(b, { className: "h-3.5 w-3.5 shrink-0 text-slate-400" }),
+          o && o >= 1e3 ? `This usually takes about ${d(o)}.` : "This is taking a while.",
+          s.text && /* @__PURE__ */ a("span", { "data-slow-reason": !0, className: "text-slate-500 dark:text-slate-400", children: [
+            s.text,
+            "."
+          ] })
         ] }),
         /* @__PURE__ */ a(
           "button",
@@ -98,7 +110,7 @@ function _({
             "data-background-run-start": !0,
             className: "inline-flex h-7 items-center gap-1.5 rounded-md border border-slate-200 bg-white px-2.5 text-[12px] font-medium text-slate-700 transition-colors duration-150 hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-nvr-cyan disabled:pointer-events-none disabled:opacity-60 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800",
             children: [
-              e.phase === "starting" && /* @__PURE__ */ t(b, { className: "h-3 w-3 animate-spin" }),
+              e.phase === "starting" && /* @__PURE__ */ t(v, { className: "h-3 w-3 animate-spin" }),
               "Run in background"
             ]
           }
@@ -107,11 +119,11 @@ function _({
     }
   );
 }
-const N = `
+const T = `
 @keyframes nvr-bgrun-sweep { from { transform: translateX(-100%) } to { transform: translateX(300%) } }
 .nvr-bgrun-sweep { animation: nvr-bgrun-sweep 1.6s cubic-bezier(0.25, 1, 0.5, 1) infinite }
 @media (prefers-reduced-motion: reduce) { .nvr-bgrun-sweep { animation: none; width: 100%; opacity: .5 } }
 `;
 export {
-  _ as BackgroundRunOffer
+  X as BackgroundRunOffer
 };