@flanksource/clicky-ui 0.3.40 → 0.3.42

package/dist/data/ai/SessionViewer.approval-forms.cjs

@@ -0,0 +1,150 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const JsonSchemaForm = require("../../components/JsonSchemaForm.cjs");
+const Icon = require("../Icon.cjs");
+const approvalRequest = require("./approval-request.cjs");
+const SessionViewer_decision = require("./SessionViewer.decision.cjs");
+const SessionViewer_decisionControls = require("./SessionViewer.decision-controls.cjs");
+const UiExternalLink = require("../../icons/components/UiExternalLink.cjs");
+const PANEL = "mt-2 space-y-2 rounded-md border border-amber-500/30 bg-amber-500/5 p-density-3";
+function PermissionsControls({ event, request, onDecision }) {
+  const entries = react.useMemo(() => approvalRequest.grantEntries(request.permissions ?? {}), [request]);
+  const [selected, setSelected] = react.useState(
+    () => new Set(entries.map((entry) => entry.key))
+  );
+  const { busy, error, decide } = SessionViewer_decision.useDecision(event, onDecision);
+  const toggle = (key) => setSelected((current) => {
+    const next = new Set(current);
+    if (next.has(key)) next.delete(key);
+    else next.add(key);
+    return next;
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: PANEL, children: [
+    entries.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { role: "alert", className: "text-xs text-rose-600", children: "This permissions request lists no grantable filesystem or network entries." }) : /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-1", children: entries.map((entry) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-start gap-2 text-sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: selected.has(entry.key),
+          onChange: () => toggle(entry.key)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 break-all font-mono text-xs", children: entry.label })
+    ] }) }, entry.key)) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SessionViewer_decisionControls.DecisionActions,
+      {
+        request,
+        busy,
+        allowLabel: "Allow selected",
+        allowDisabled: selected.size === 0,
+        allowFields: () => ({ grants: approvalRequest.grantFromSelection(entries, selected) }),
+        decide
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(SessionViewer_decisionControls.DecisionError, { message: error })
+  ] });
+}
+function requiredFields(schema) {
+  const required = schema["required"];
+  return Array.isArray(required) ? required.filter((name) => typeof name === "string") : [];
+}
+function isFilled(value) {
+  return value !== void 0 && value !== null && value !== "";
+}
+function ElicitationFormControls({
+  event,
+  request,
+  elicitation,
+  onDecision
+}) {
+  const [value, setValue] = react.useState({});
+  const { busy, error, decide } = SessionViewer_decision.useDecision(event, onDecision);
+  const schema = elicitation.schema;
+  const missing = schema ? requiredFields(schema).filter((name) => !isFilled(value[name])) : [];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: PANEL, children: [
+    schema ? /* @__PURE__ */ jsxRuntime.jsx(
+      JsonSchemaForm.JsonSchemaForm,
+      {
+        schema: { type: "object", ...schema },
+        value,
+        onChange: setValue,
+        idPrefix: `elicit-${event.id}`,
+        size: "sm"
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "alert", className: "text-xs text-rose-600", children: [
+      "This form elicitation from ",
+      elicitation.server,
+      " carries no schema, so it cannot be filled in."
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SessionViewer_decisionControls.DecisionActions,
+      {
+        request,
+        busy,
+        allowLabel: "Submit",
+        allowDisabled: !schema || missing.length > 0,
+        allowFields: () => ({
+          content: Object.fromEntries(Object.entries(value).filter(([, entry]) => isFilled(entry)))
+        }),
+        denyLabel: "Decline",
+        decide
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(SessionViewer_decisionControls.DecisionError, { message: error })
+  ] });
+}
+function safeHttpUrl(raw) {
+  try {
+    const url = new URL(raw);
+    return url.protocol === "https:" || url.protocol === "http:" ? url.href : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function ElicitationUrlControls({
+  event,
+  request,
+  elicitation,
+  onDecision
+}) {
+  const { busy, error, decide } = SessionViewer_decision.useDecision(event, onDecision);
+  const raw = elicitation.url ?? "";
+  const href = safeHttpUrl(raw);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: PANEL, children: [
+    href ? /* @__PURE__ */ jsxRuntime.jsxs(
+      "a",
+      {
+        href,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "inline-flex max-w-full items-center gap-1 break-all text-sm text-primary underline",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiExternalLink.UiExternalLink, className: "size-3.5 shrink-0" }),
+          href
+        ]
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "alert", className: "break-all text-xs text-rose-600", children: [
+      "Not linked because it is not an http(s) url: ",
+      raw || "(no url)"
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "Finish at the link, then choose Done." }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SessionViewer_decisionControls.DecisionActions,
+      {
+        request,
+        busy,
+        allowLabel: "Done",
+        denyLabel: "Decline",
+        decide
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(SessionViewer_decisionControls.DecisionError, { message: error })
+  ] });
+}
+exports.ElicitationFormControls = ElicitationFormControls;
+exports.ElicitationUrlControls = ElicitationUrlControls;
+exports.PermissionsControls = PermissionsControls;
+//# sourceMappingURL=SessionViewer.approval-forms.cjs.map

package/dist/data/ai/SessionViewer.approval-forms.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionViewer.approval-forms.cjs","sources":["../../../src/data/ai/SessionViewer.approval-forms.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\nimport { JsonSchemaForm } from \"../../components/JsonSchemaForm\";\nimport type { JsonSchemaObject } from \"../../components/json-schema-form-types\";\nimport { UiExternalLink } from \"../../icons\";\nimport { Icon } from \"../Icon\";\nimport {\n  grantEntries,\n  grantFromSelection,\n  type ApprovalRequest,\n  type ElicitationApproval,\n} from \"./approval-request\";\nimport { useDecision, type DecisionHandler } from \"./SessionViewer.decision\";\nimport { DecisionActions, DecisionError } from \"./SessionViewer.decision-controls\";\nimport type { SessionEvent } from \"./SessionViewer.model\";\n\nconst PANEL = \"mt-2 space-y-2 rounded-md border border-amber-500/30 bg-amber-500/5 p-density-3\";\n\ninterface KindControlsProps {\n  event: SessionEvent;\n  request: ApprovalRequest;\n  onDecision: DecisionHandler;\n}\n\n/** A permissions request lists exactly what it asks for; each entry can be\n *  unticked, and the ticked subset is sent back as `grants`. */\nexport function PermissionsControls({ event, request, onDecision }: KindControlsProps) {\n  const entries = useMemo(() => grantEntries(request.permissions ?? {}), [request]);\n  const [selected, setSelected] = useState<ReadonlySet<string>>(\n    () => new Set(entries.map((entry) => entry.key)),\n  );\n  const { busy, error, decide } = useDecision(event, onDecision);\n  const toggle = (key: string) =>\n    setSelected((current) => {\n      const next = new Set(current);\n      if (next.has(key)) next.delete(key);\n      else next.add(key);\n      return next;\n    });\n  return (\n    <div className={PANEL}>\n      {entries.length === 0 ? (\n        <div role=\"alert\" className=\"text-xs text-rose-600\">\n          This permissions request lists no grantable filesystem or network entries.\n        </div>\n      ) : (\n        <ul className=\"space-y-1\">\n          {entries.map((entry) => (\n            <li key={entry.key}>\n              <label className=\"flex items-start gap-2 text-sm\">\n                <input\n                  type=\"checkbox\"\n                  checked={selected.has(entry.key)}\n                  onChange={() => toggle(entry.key)}\n                />\n                <span className=\"min-w-0 break-all font-mono text-xs\">{entry.label}</span>\n              </label>\n            </li>\n          ))}\n        </ul>\n      )}\n      <DecisionActions\n        request={request}\n        busy={busy}\n        allowLabel=\"Allow selected\"\n        allowDisabled={selected.size === 0}\n        allowFields={() => ({ grants: grantFromSelection(entries, selected) })}\n        decide={decide}\n      />\n      <DecisionError message={error} />\n    </div>\n  );\n}\n\nfunction requiredFields(schema: Record<string, unknown>): string[] {\n  const required = schema[\"required\"];\n  return Array.isArray(required)\n    ? required.filter((name): name is string => typeof name === \"string\")\n    : [];\n}\n\nfunction isFilled(value: unknown): boolean {\n  return value !== undefined && value !== null && value !== \"\";\n}\n\n/** Form-mode elicitation: the server's flat schema rendered by JsonSchemaForm.\n *  Submit sends the entered values as `content`; Decline and Cancel send none. */\nexport function ElicitationFormControls({\n  event,\n  request,\n  elicitation,\n  onDecision,\n}: KindControlsProps & { elicitation: ElicitationApproval }) {\n  const [value, setValue] = useState<Record<string, unknown>>({});\n  const { busy, error, decide } = useDecision(event, onDecision);\n  const schema = elicitation.schema;\n  const missing = schema ? requiredFields(schema).filter((name) => !isFilled(value[name])) : [];\n  return (\n    <div className={PANEL}>\n      {schema ? (\n        <JsonSchemaForm\n          // The elicitation schema is untyped server JSON: a flat object of\n          // primitive properties, which is what JsonSchemaForm renders.\n          schema={{ type: \"object\", ...schema } as JsonSchemaObject}\n          value={value}\n          onChange={setValue}\n          idPrefix={`elicit-${event.id}`}\n          size=\"sm\"\n        />\n      ) : (\n        <div role=\"alert\" className=\"text-xs text-rose-600\">\n          This form elicitation from {elicitation.server} carries no schema, so it cannot be filled in.\n        </div>\n      )}\n      <DecisionActions\n        request={request}\n        busy={busy}\n        allowLabel=\"Submit\"\n        allowDisabled={!schema || missing.length > 0}\n        allowFields={() => ({\n          content: Object.fromEntries(Object.entries(value).filter(([, entry]) => isFilled(entry))),\n        })}\n        denyLabel=\"Decline\"\n        decide={decide}\n      />\n      <DecisionError message={error} />\n    </div>\n  );\n}\n\nfunction safeHttpUrl(raw: string): string | undefined {\n  try {\n    const url = new URL(raw);\n    return url.protocol === \"https:\" || url.protocol === \"http:\" ? url.href : undefined;\n  } catch {\n    return undefined;\n  }\n}\n\n/** URL-mode elicitation: the person finishes at the link, then answers Done\n *  (allow, no content), Decline (deny) or Cancel (deny + interrupt). */\nexport function ElicitationUrlControls({\n  event,\n  request,\n  elicitation,\n  onDecision,\n}: KindControlsProps & { elicitation: ElicitationApproval }) {\n  const { busy, error, decide } = useDecision(event, onDecision);\n  const raw = elicitation.url ?? \"\";\n  const href = safeHttpUrl(raw);\n  return (\n    <div className={PANEL}>\n      {href ? (\n        <a\n          href={href}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          className=\"inline-flex max-w-full items-center gap-1 break-all text-sm text-primary underline\"\n        >\n          <Icon icon={UiExternalLink} className=\"size-3.5 shrink-0\" />\n          {href}\n        </a>\n      ) : (\n        <div role=\"alert\" className=\"break-all text-xs text-rose-600\">\n          Not linked because it is not an http(s) url: {raw || \"(no url)\"}\n        </div>\n      )}\n      <p className=\"text-xs text-muted-foreground\">\n        Finish at the link, then choose Done.\n      </p>\n      <DecisionActions\n        request={request}\n        busy={busy}\n        allowLabel=\"Done\"\n        denyLabel=\"Decline\"\n        decide={decide}\n      />\n      <DecisionError message={error} />\n    </div>\n  );\n}\n"],"names":["useMemo","grantEntries","useState","useDecision","jsxs","jsx","DecisionActions","grantFromSelection","DecisionError","JsonSchemaForm","Icon","UiExternalLink"],"mappings":"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"}

package/dist/data/ai/SessionViewer.approval-forms.d.ts

@@ -0,0 +1,23 @@
+import { ApprovalRequest, ElicitationApproval } from './approval-request.js';
+import { DecisionHandler } from './SessionViewer.decision.js';
+import { SessionEvent } from './SessionViewer.model.js';
+interface KindControlsProps {
+    event: SessionEvent;
+    request: ApprovalRequest;
+    onDecision: DecisionHandler;
+}
+/** A permissions request lists exactly what it asks for; each entry can be
+ *  unticked, and the ticked subset is sent back as `grants`. */
+export declare function PermissionsControls({ event, request, onDecision }: KindControlsProps): import("react").JSX.Element;
+/** Form-mode elicitation: the server's flat schema rendered by JsonSchemaForm.
+ *  Submit sends the entered values as `content`; Decline and Cancel send none. */
+export declare function ElicitationFormControls({ event, request, elicitation, onDecision, }: KindControlsProps & {
+    elicitation: ElicitationApproval;
+}): import("react").JSX.Element;
+/** URL-mode elicitation: the person finishes at the link, then answers Done
+ *  (allow, no content), Decline (deny) or Cancel (deny + interrupt). */
+export declare function ElicitationUrlControls({ event, request, elicitation, onDecision, }: KindControlsProps & {
+    elicitation: ElicitationApproval;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=SessionViewer.approval-forms.d.ts.map

package/dist/data/ai/SessionViewer.approval-forms.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionViewer.approval-forms.d.ts","sourceRoot":"","sources":["../../../src/data/ai/SessionViewer.approval-forms.tsx"],"names":[],"mappings":"AAKA,OAAO,EAGL,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACzB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAe,KAAK,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAE7E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAI1D,UAAU,iBAAiB;IACzB,KAAK,EAAE,YAAY,CAAC;IACpB,OAAO,EAAE,eAAe,CAAC;IACzB,UAAU,EAAE,eAAe,CAAC;CAC7B;AAED;gEACgE;AAChE,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,iBAAiB,+BA8CpF;AAaD;kFACkF;AAClF,wBAAgB,uBAAuB,CAAC,EACtC,KAAK,EACL,OAAO,EACP,WAAW,EACX,UAAU,GACX,EAAE,iBAAiB,GAAG;IAAE,WAAW,EAAE,mBAAmB,CAAA;CAAE,+BAoC1D;AAWD;wEACwE;AACxE,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,OAAO,EACP,WAAW,EACX,UAAU,GACX,EAAE,iBAAiB,GAAG;IAAE,WAAW,EAAE,mBAAmB,CAAA;CAAE,+BAkC1D"}

package/dist/data/ai/SessionViewer.approval-forms.js

@@ -0,0 +1,150 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
+import { JsonSchemaForm } from "../../components/JsonSchemaForm.js";
+import { Icon } from "../Icon.js";
+import { grantEntries, grantFromSelection } from "./approval-request.js";
+import { useDecision } from "./SessionViewer.decision.js";
+import { DecisionActions, DecisionError } from "./SessionViewer.decision-controls.js";
+import { UiExternalLink } from "../../icons/components/UiExternalLink.js";
+const PANEL = "mt-2 space-y-2 rounded-md border border-amber-500/30 bg-amber-500/5 p-density-3";
+function PermissionsControls({ event, request, onDecision }) {
+  const entries = useMemo(() => grantEntries(request.permissions ?? {}), [request]);
+  const [selected, setSelected] = useState(
+    () => new Set(entries.map((entry) => entry.key))
+  );
+  const { busy, error, decide } = useDecision(event, onDecision);
+  const toggle = (key) => setSelected((current) => {
+    const next = new Set(current);
+    if (next.has(key)) next.delete(key);
+    else next.add(key);
+    return next;
+  });
+  return /* @__PURE__ */ jsxs("div", { className: PANEL, children: [
+    entries.length === 0 ? /* @__PURE__ */ jsx("div", { role: "alert", className: "text-xs text-rose-600", children: "This permissions request lists no grantable filesystem or network entries." }) : /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: entries.map((entry) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("label", { className: "flex items-start gap-2 text-sm", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: selected.has(entry.key),
+          onChange: () => toggle(entry.key)
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "min-w-0 break-all font-mono text-xs", children: entry.label })
+    ] }) }, entry.key)) }),
+    /* @__PURE__ */ jsx(
+      DecisionActions,
+      {
+        request,
+        busy,
+        allowLabel: "Allow selected",
+        allowDisabled: selected.size === 0,
+        allowFields: () => ({ grants: grantFromSelection(entries, selected) }),
+        decide
+      }
+    ),
+    /* @__PURE__ */ jsx(DecisionError, { message: error })
+  ] });
+}
+function requiredFields(schema) {
+  const required = schema["required"];
+  return Array.isArray(required) ? required.filter((name) => typeof name === "string") : [];
+}
+function isFilled(value) {
+  return value !== void 0 && value !== null && value !== "";
+}
+function ElicitationFormControls({
+  event,
+  request,
+  elicitation,
+  onDecision
+}) {
+  const [value, setValue] = useState({});
+  const { busy, error, decide } = useDecision(event, onDecision);
+  const schema = elicitation.schema;
+  const missing = schema ? requiredFields(schema).filter((name) => !isFilled(value[name])) : [];
+  return /* @__PURE__ */ jsxs("div", { className: PANEL, children: [
+    schema ? /* @__PURE__ */ jsx(
+      JsonSchemaForm,
+      {
+        schema: { type: "object", ...schema },
+        value,
+        onChange: setValue,
+        idPrefix: `elicit-${event.id}`,
+        size: "sm"
+      }
+    ) : /* @__PURE__ */ jsxs("div", { role: "alert", className: "text-xs text-rose-600", children: [
+      "This form elicitation from ",
+      elicitation.server,
+      " carries no schema, so it cannot be filled in."
+    ] }),
+    /* @__PURE__ */ jsx(
+      DecisionActions,
+      {
+        request,
+        busy,
+        allowLabel: "Submit",
+        allowDisabled: !schema || missing.length > 0,
+        allowFields: () => ({
+          content: Object.fromEntries(Object.entries(value).filter(([, entry]) => isFilled(entry)))
+        }),
+        denyLabel: "Decline",
+        decide
+      }
+    ),
+    /* @__PURE__ */ jsx(DecisionError, { message: error })
+  ] });
+}
+function safeHttpUrl(raw) {
+  try {
+    const url = new URL(raw);
+    return url.protocol === "https:" || url.protocol === "http:" ? url.href : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function ElicitationUrlControls({
+  event,
+  request,
+  elicitation,
+  onDecision
+}) {
+  const { busy, error, decide } = useDecision(event, onDecision);
+  const raw = elicitation.url ?? "";
+  const href = safeHttpUrl(raw);
+  return /* @__PURE__ */ jsxs("div", { className: PANEL, children: [
+    href ? /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "inline-flex max-w-full items-center gap-1 break-all text-sm text-primary underline",
+        children: [
+          /* @__PURE__ */ jsx(Icon, { icon: UiExternalLink, className: "size-3.5 shrink-0" }),
+          href
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs("div", { role: "alert", className: "break-all text-xs text-rose-600", children: [
+      "Not linked because it is not an http(s) url: ",
+      raw || "(no url)"
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Finish at the link, then choose Done." }),
+    /* @__PURE__ */ jsx(
+      DecisionActions,
+      {
+        request,
+        busy,
+        allowLabel: "Done",
+        denyLabel: "Decline",
+        decide
+      }
+    ),
+    /* @__PURE__ */ jsx(DecisionError, { message: error })
+  ] });
+}
+export {
+  ElicitationFormControls,
+  ElicitationUrlControls,
+  PermissionsControls
+};
+//# sourceMappingURL=SessionViewer.approval-forms.js.map

package/dist/data/ai/SessionViewer.approval-forms.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionViewer.approval-forms.js","sources":["../../../src/data/ai/SessionViewer.approval-forms.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\nimport { JsonSchemaForm } from \"../../components/JsonSchemaForm\";\nimport type { JsonSchemaObject } from \"../../components/json-schema-form-types\";\nimport { UiExternalLink } from \"../../icons\";\nimport { Icon } from \"../Icon\";\nimport {\n  grantEntries,\n  grantFromSelection,\n  type ApprovalRequest,\n  type ElicitationApproval,\n} from \"./approval-request\";\nimport { useDecision, type DecisionHandler } from \"./SessionViewer.decision\";\nimport { DecisionActions, DecisionError } from \"./SessionViewer.decision-controls\";\nimport type { SessionEvent } from \"./SessionViewer.model\";\n\nconst PANEL = \"mt-2 space-y-2 rounded-md border border-amber-500/30 bg-amber-500/5 p-density-3\";\n\ninterface KindControlsProps {\n  event: SessionEvent;\n  request: ApprovalRequest;\n  onDecision: DecisionHandler;\n}\n\n/** A permissions request lists exactly what it asks for; each entry can be\n *  unticked, and the ticked subset is sent back as `grants`. */\nexport function PermissionsControls({ event, request, onDecision }: KindControlsProps) {\n  const entries = useMemo(() => grantEntries(request.permissions ?? {}), [request]);\n  const [selected, setSelected] = useState<ReadonlySet<string>>(\n    () => new Set(entries.map((entry) => entry.key)),\n  );\n  const { busy, error, decide } = useDecision(event, onDecision);\n  const toggle = (key: string) =>\n    setSelected((current) => {\n      const next = new Set(current);\n      if (next.has(key)) next.delete(key);\n      else next.add(key);\n      return next;\n    });\n  return (\n    <div className={PANEL}>\n      {entries.length === 0 ? (\n        <div role=\"alert\" className=\"text-xs text-rose-600\">\n          This permissions request lists no grantable filesystem or network entries.\n        </div>\n      ) : (\n        <ul className=\"space-y-1\">\n          {entries.map((entry) => (\n            <li key={entry.key}>\n              <label className=\"flex items-start gap-2 text-sm\">\n                <input\n                  type=\"checkbox\"\n                  checked={selected.has(entry.key)}\n                  onChange={() => toggle(entry.key)}\n                />\n                <span className=\"min-w-0 break-all font-mono text-xs\">{entry.label}</span>\n              </label>\n            </li>\n          ))}\n        </ul>\n      )}\n      <DecisionActions\n        request={request}\n        busy={busy}\n        allowLabel=\"Allow selected\"\n        allowDisabled={selected.size === 0}\n        allowFields={() => ({ grants: grantFromSelection(entries, selected) })}\n        decide={decide}\n      />\n      <DecisionError message={error} />\n    </div>\n  );\n}\n\nfunction requiredFields(schema: Record<string, unknown>): string[] {\n  const required = schema[\"required\"];\n  return Array.isArray(required)\n    ? required.filter((name): name is string => typeof name === \"string\")\n    : [];\n}\n\nfunction isFilled(value: unknown): boolean {\n  return value !== undefined && value !== null && value !== \"\";\n}\n\n/** Form-mode elicitation: the server's flat schema rendered by JsonSchemaForm.\n *  Submit sends the entered values as `content`; Decline and Cancel send none. */\nexport function ElicitationFormControls({\n  event,\n  request,\n  elicitation,\n  onDecision,\n}: KindControlsProps & { elicitation: ElicitationApproval }) {\n  const [value, setValue] = useState<Record<string, unknown>>({});\n  const { busy, error, decide } = useDecision(event, onDecision);\n  const schema = elicitation.schema;\n  const missing = schema ? requiredFields(schema).filter((name) => !isFilled(value[name])) : [];\n  return (\n    <div className={PANEL}>\n      {schema ? (\n        <JsonSchemaForm\n          // The elicitation schema is untyped server JSON: a flat object of\n          // primitive properties, which is what JsonSchemaForm renders.\n          schema={{ type: \"object\", ...schema } as JsonSchemaObject}\n          value={value}\n          onChange={setValue}\n          idPrefix={`elicit-${event.id}`}\n          size=\"sm\"\n        />\n      ) : (\n        <div role=\"alert\" className=\"text-xs text-rose-600\">\n          This form elicitation from {elicitation.server} carries no schema, so it cannot be filled in.\n        </div>\n      )}\n      <DecisionActions\n        request={request}\n        busy={busy}\n        allowLabel=\"Submit\"\n        allowDisabled={!schema || missing.length > 0}\n        allowFields={() => ({\n          content: Object.fromEntries(Object.entries(value).filter(([, entry]) => isFilled(entry))),\n        })}\n        denyLabel=\"Decline\"\n        decide={decide}\n      />\n      <DecisionError message={error} />\n    </div>\n  );\n}\n\nfunction safeHttpUrl(raw: string): string | undefined {\n  try {\n    const url = new URL(raw);\n    return url.protocol === \"https:\" || url.protocol === \"http:\" ? url.href : undefined;\n  } catch {\n    return undefined;\n  }\n}\n\n/** URL-mode elicitation: the person finishes at the link, then answers Done\n *  (allow, no content), Decline (deny) or Cancel (deny + interrupt). */\nexport function ElicitationUrlControls({\n  event,\n  request,\n  elicitation,\n  onDecision,\n}: KindControlsProps & { elicitation: ElicitationApproval }) {\n  const { busy, error, decide } = useDecision(event, onDecision);\n  const raw = elicitation.url ?? \"\";\n  const href = safeHttpUrl(raw);\n  return (\n    <div className={PANEL}>\n      {href ? (\n        <a\n          href={href}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          className=\"inline-flex max-w-full items-center gap-1 break-all text-sm text-primary underline\"\n        >\n          <Icon icon={UiExternalLink} className=\"size-3.5 shrink-0\" />\n          {href}\n        </a>\n      ) : (\n        <div role=\"alert\" className=\"break-all text-xs text-rose-600\">\n          Not linked because it is not an http(s) url: {raw || \"(no url)\"}\n        </div>\n      )}\n      <p className=\"text-xs text-muted-foreground\">\n        Finish at the link, then choose Done.\n      </p>\n      <DecisionActions\n        request={request}\n        busy={busy}\n        allowLabel=\"Done\"\n        denyLabel=\"Decline\"\n        decide={decide}\n      />\n      <DecisionError message={error} />\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/data/ai/SessionViewer.cjs

@@ -5,6 +5,7 @@ const react = require("react");
 const reactDom = require("react-dom");
 const utils = require("../../lib/utils.cjs");
 const Icon = require("../Icon.cjs");
+const button = require("../../components/button.cjs");
 const useDensity = require("../../hooks/use-density.cjs");
 const densityProvider = require("../../hooks/density-provider.cjs");
 const SessionViewer_model = require("./SessionViewer.model.cjs");
@@ -15,6 +16,7 @@ const sessionCategories = require("./session-categories.cjs");
 const SessionViewerMenu = require("./SessionViewerMenu.cjs");
 const useSessionScroll = require("./use-session-scroll.cjs");
 const UiRobotAi = require("../../icons/components/UiRobotAi.cjs");
+const UiArrowDown = require("../../icons/components/UiArrowDown.cjs");
 function toggleInSet(set, value) {
   const next = new Set(set);
   if (next.has(value)) next.delete(value);
@@ -37,13 +39,14 @@ function SessionViewer({
   scrollable = false,
   windowSize = 60,
   batchSize = 40,
+  scrollResetKey,
   showRowMetadata = false,
   showRaw = false,
   renderMessageBadge,
   pendingTools = [],
   onPendingToolDecision
 }) {
-  var _a;
+  var _a, _b;
   const allEvents = react.useMemo(
     () => mergePendingTools(SessionViewer_model.normalizeSession(session), pendingTools),
     [session, pendingTools]
@@ -64,25 +67,29 @@ function SessionViewer({
   );
   const [showThinkingOverride, setShowThinkingOverride] = react.useState(void 0);
   const effectiveShowThinking = showThinkingOverride ?? showThinking;
+  const [showEncryptedReasoning, setShowEncryptedReasoning] = react.useState(false);
   const filters = react.useMemo(() => sessionCategories.collectSessionFilters(allEvents), [allEvents]);
   const hasThinking = react.useMemo(
     () => allEvents.some((e) => e.kind === "thinking"),
     [allEvents]
   );
+  const hasEncryptedReasoning = react.useMemo(
+    () => allEvents.some(sessionCategories.isEncryptedReasoning),
+    [allEvents]
+  );
   const visibility = {
     hiddenCategories,
     hiddenTools,
     hiddenSources,
     showThinking: effectiveShowThinking
   };
-  const items = displayItems.filter(
-    (item) => sessionCategories.isEventVisible(
-      SessionViewer_grouping.isSessionEventGroup(item) ? item.representative : item,
-      visibility
-    )
-  );
-  const resetKey = `${allEvents.length}:${((_a = allEvents[0]) == null ? void 0 : _a.id) ?? ""}`;
-  const { scrollRef, contentRef, startIndex } = useSessionScroll.useSessionScroll({
+  const items = displayItems.filter((item) => {
+    const event = SessionViewer_grouping.isSessionEventGroup(item) ? item.representative : item;
+    return (showEncryptedReasoning || !sessionCategories.isEncryptedReasoning(event)) && sessionCategories.isEventVisible(event, visibility);
+  });
+  const firstUserEventId = (_a = allEvents.find((event) => event.kind === "user")) == null ? void 0 : _a.id;
+  const resetKey = scrollResetKey ?? ((_b = allEvents[0]) == null ? void 0 : _b.id) ?? "";
+  const { scrollRef, contentRef, startIndex, following, resumeFollowing } = useSessionScroll.useSessionScroll({
     total: items.length,
     enabled: scrollable,
     windowSize,
@@ -124,7 +131,10 @@ function SessionViewer({
       onToggleSource: (source) => setHiddenSources((set) => toggleInSet(set, source)),
       showThinking: effectiveShowThinking,
       onToggleThinking: () => setShowThinkingOverride(!effectiveShowThinking),
-      hasThinking
+      hasThinking,
+      hasEncryptedReasoning,
+      showEncryptedReasoning,
+      onToggleEncryptedReasoning: () => setShowEncryptedReasoning((shown) => !shown)
     }
   ) : null;
   const inlineMenu = menu && !menuContainer;
@@ -149,6 +159,7 @@ function SessionViewer({
         SessionViewer_rows.SessionRow,
         {
           event: item,
+          initialPrompt: item.id === firstUserEventId,
           last,
           defaultExpanded,
           showRowMetadata,
@@ -216,15 +227,31 @@ function SessionViewer({
             ]
           }
         ),
-        scrollable ? /* @__PURE__ */ jsxRuntime.jsx("div", { ref: scrollRef, className: "min-h-0 flex-1 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            ref: contentRef,
-            "data-session-viewer-content": true,
-            className: "p-density-3 @min-[48rem]/session-viewer:p-density-4",
-            children: list
-          }
-        ) }) : list
+        scrollable ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative min-h-0 flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { ref: scrollRef, className: "h-full overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: contentRef,
+              "data-session-viewer-content": true,
+              className: "p-density-3 @min-[48rem]/session-viewer:p-density-4",
+              children: list
+            }
+          ) }),
+          !following && /* @__PURE__ */ jsxRuntime.jsxs(
+            button.Button,
+            {
+              type: "button",
+              variant: "secondary",
+              size: "sm",
+              onClick: resumeFollowing,
+              className: "absolute bottom-density-3 left-1/2 -translate-x-1/2 shadow-md",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiArrowDown.UiArrowDown, className: "size-4" }),
+                "Scroll to bottom"
+              ]
+            }
+          )
+        ] }) : list
       ] })
     }
   );
@@ -242,7 +269,8 @@ function mergePendingTools(events, pendingTools) {
         toolInput: pending.input ?? match.toolInput,
         toolCallId: pending.toolCallId ?? match.toolCallId,
         approvalId: pending.approvalId ?? match.approvalId,
-        sessionId: pending.sessionId ?? match.sessionId
+        sessionId: pending.sessionId ?? match.sessionId,
+        ...approvalFields(pending)
       });
     } else {
       merged.push({
@@ -253,11 +281,20 @@ function mergePendingTools(events, pendingTools) {
         ...pending.toolCallId ? { toolCallId: pending.toolCallId } : {},
         ...pending.approvalId ? { approvalId: pending.approvalId } : {},
         ...pending.sessionId ? { sessionId: pending.sessionId } : {},
+        ...approvalFields(pending),
         pending: true
       });
     }
   }
   return merged;
 }
+function approvalFields(pending) {
+  var _a;
+  const kind = pending.kind ?? ((_a = pending.request) == null ? void 0 : _a.kind);
+  return {
+    ...kind ? { approvalKind: kind } : {},
+    ...pending.request ? { approvalRequest: pending.request } : {}
+  };
+}
 exports.SessionViewer = SessionViewer;
 //# sourceMappingURL=SessionViewer.cjs.map