@flanksource/clicky-ui 0.3.15 → 0.3.17

package/dist/data/ai/SessionViewer.row-metadata.js

@@ -0,0 +1,132 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+import { Icon } from "../Icon.js";
+import { CodeBlock } from "../CodeBlock.js";
+import { APPROVAL_ICONS } from "./agent-action-icons.js";
+import { formatEventTime } from "./SessionViewer.row-time.js";
+function EventMetadata({
+  event,
+  align = "left",
+  timestampLabel
+}) {
+  const parts = [
+    timestampLabel ?? (event.timestamp ? formatEventTime(event.timestamp) : ""),
+    event.source,
+    event.model,
+    event.reasoningEffort,
+    event.turnId ? `turn ${event.turnId}` : "",
+    event.agentId ? `agent ${event.agentId}` : "",
+    event.toolState,
+    approvalLabel(event)
+  ].filter(Boolean);
+  if (parts.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "mt-1 flex flex-wrap gap-x-2 gap-y-0.5 text-[11px] text-muted-foreground",
+        align === "right" && "justify-end text-right"
+      ),
+      children: parts.map((part, index) => /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: part }, `${part}-${index}`))
+    }
+  );
+}
+function approvalLabel(event) {
+  var _a, _b;
+  if (((_a = event.approval) == null ? void 0 : _a.approved) === true) return "approved";
+  if (((_b = event.approval) == null ? void 0 : _b.approved) === false) {
+    return event.approval.reason ? `denied: ${event.approval.reason}` : "denied";
+  }
+  if (event.pending) return "approval pending";
+  if (event.toolState === "output-denied") return "denied";
+  return "";
+}
+function approvalStatus(event) {
+  var _a, _b, _c;
+  if (((_a = event.approval) == null ? void 0 : _a.approved) === true) {
+    return {
+      label: "Approved",
+      icon: APPROVAL_ICONS.approved.icon,
+      className: "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 [[data-theme=dark]_&]:text-emerald-300"
+    };
+  }
+  if (((_b = event.approval) == null ? void 0 : _b.approved) === false || event.toolState === "output-denied") {
+    const reason = ((_c = event.approval) == null ? void 0 : _c.reason) ? `: ${event.approval.reason}` : "";
+    return {
+      label: `Denied${reason}`,
+      icon: APPROVAL_ICONS.denied.icon,
+      className: "border-rose-500/30 bg-rose-500/10 text-rose-700 [[data-theme=dark]_&]:text-rose-300"
+    };
+  }
+  if (event.pending) {
+    return {
+      label: "Awaiting approval",
+      icon: APPROVAL_ICONS.pending.icon,
+      className: "border-amber-500/30 bg-amber-500/10 text-amber-700 [[data-theme=dark]_&]:text-amber-300"
+    };
+  }
+  if (event.toolState === "approval-responded") {
+    return {
+      label: "Approval answered",
+      icon: APPROVAL_ICONS.question.icon,
+      className: "border-sky-500/30 bg-sky-500/10 text-sky-700 [[data-theme=dark]_&]:text-sky-300"
+    };
+  }
+  return null;
+}
+function ApprovalBadge({ event }) {
+  const status = approvalStatus(event);
+  if (!status) return null;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "inline-flex shrink-0 items-center gap-1 rounded border px-1.5 py-0.5 text-[10px] font-medium",
+        status.className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Icon, { icon: status.icon, className: "size-3" }),
+        status.label
+      ]
+    }
+  );
+}
+function RawEventBlock({
+  raw,
+  align = "left"
+}) {
+  const source = rawToSource(raw);
+  return /* @__PURE__ */ jsxs(
+    "details",
+    {
+      className: cn(
+        "mt-1.5 text-left",
+        align === "right" && "ml-auto max-w-full"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("summary", { className: "cursor-pointer text-[11px] text-muted-foreground hover:text-foreground", children: "Raw" }),
+        /* @__PURE__ */ jsx("div", { className: "mt-1", children: /* @__PURE__ */ jsx(CodeBlock, { language: "json", source, jsonDefaultOpenDepth: 1 }) })
+      ]
+    }
+  );
+}
+function rawToSource(raw) {
+  if (typeof raw === "string") {
+    try {
+      return JSON.stringify(JSON.parse(raw), null, 2);
+    } catch {
+      return raw;
+    }
+  }
+  try {
+    return JSON.stringify(raw, null, 2);
+  } catch {
+    return String(raw);
+  }
+}
+export {
+  ApprovalBadge,
+  EventMetadata,
+  RawEventBlock
+};
+//# sourceMappingURL=SessionViewer.row-metadata.js.map

package/dist/data/ai/SessionViewer.row-metadata.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionViewer.row-metadata.js","sources":["../../../src/data/ai/SessionViewer.row-metadata.tsx"],"sourcesContent":["import { cn } from \"../../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../Icon\";\nimport { CodeBlock } from \"../CodeBlock\";\nimport { APPROVAL_ICONS } from \"./agent-action-icons\";\nimport type { SessionEvent } from \"./SessionViewer.model\";\nimport { formatEventTime } from \"./SessionViewer.row-time\";\n\nexport function EventMetadata({\n  event,\n  align = \"left\",\n  timestampLabel,\n}: {\n  event: SessionEvent;\n  align?: \"left\" | \"right\";\n  timestampLabel?: string;\n}) {\n  const parts = [\n    timestampLabel ?? (event.timestamp ? formatEventTime(event.timestamp) : \"\"),\n    event.source,\n    event.model,\n    event.reasoningEffort,\n    event.turnId ? `turn ${event.turnId}` : \"\",\n    event.agentId ? `agent ${event.agentId}` : \"\",\n    event.toolState,\n    approvalLabel(event),\n  ].filter(Boolean);\n  if (parts.length === 0) return null;\n  return (\n    <div\n      className={cn(\n        \"mt-1 flex flex-wrap gap-x-2 gap-y-0.5 text-[11px] text-muted-foreground\",\n        align === \"right\" && \"justify-end text-right\",\n      )}\n    >\n      {parts.map((part, index) => (\n        <span key={`${part}-${index}`} className=\"min-w-0 truncate\">\n          {part}\n        </span>\n      ))}\n    </div>\n  );\n}\n\nfunction approvalLabel(event: SessionEvent) {\n  if (event.approval?.approved === true) return \"approved\";\n  if (event.approval?.approved === false) {\n    return event.approval.reason\n      ? `denied: ${event.approval.reason}`\n      : \"denied\";\n  }\n  if (event.pending) return \"approval pending\";\n  if (event.toolState === \"output-denied\") return \"denied\";\n  return \"\";\n}\n\nfunction approvalStatus(\n  event: SessionEvent,\n): { label: string; className: string; icon: StaticIconComponent } | null {\n  if (event.approval?.approved === true) {\n    return {\n      label: \"Approved\",\n      icon: APPROVAL_ICONS.approved.icon,\n      className:\n        \"border-emerald-500/30 bg-emerald-500/10 text-emerald-700 [[data-theme=dark]_&]:text-emerald-300\",\n    };\n  }\n  if (\n    event.approval?.approved === false ||\n    event.toolState === \"output-denied\"\n  ) {\n    const reason = event.approval?.reason ? `: ${event.approval.reason}` : \"\";\n    return {\n      label: `Denied${reason}`,\n      icon: APPROVAL_ICONS.denied.icon,\n      className:\n        \"border-rose-500/30 bg-rose-500/10 text-rose-700 [[data-theme=dark]_&]:text-rose-300\",\n    };\n  }\n  if (event.pending) {\n    return {\n      label: \"Awaiting approval\",\n      icon: APPROVAL_ICONS.pending.icon,\n      className:\n        \"border-amber-500/30 bg-amber-500/10 text-amber-700 [[data-theme=dark]_&]:text-amber-300\",\n    };\n  }\n  if (event.toolState === \"approval-responded\") {\n    return {\n      label: \"Approval answered\",\n      icon: APPROVAL_ICONS.question.icon,\n      className:\n        \"border-sky-500/30 bg-sky-500/10 text-sky-700 [[data-theme=dark]_&]:text-sky-300\",\n    };\n  }\n  return null;\n}\n\nexport function ApprovalBadge({ event }: { event: SessionEvent }) {\n  const status = approvalStatus(event);\n  if (!status) return null;\n  return (\n    <span\n      className={cn(\n        \"inline-flex shrink-0 items-center gap-1 rounded border px-1.5 py-0.5 text-[10px] font-medium\",\n        status.className,\n      )}\n    >\n      <Icon icon={status.icon} className=\"size-3\" />\n      {status.label}\n    </span>\n  );\n}\n\nexport function RawEventBlock({\n  raw,\n  align = \"left\",\n}: {\n  raw: unknown;\n  align?: \"left\" | \"right\";\n}) {\n  const source = rawToSource(raw);\n  return (\n    <details\n      className={cn(\n        \"mt-1.5 text-left\",\n        align === \"right\" && \"ml-auto max-w-full\",\n      )}\n    >\n      <summary className=\"cursor-pointer text-[11px] text-muted-foreground hover:text-foreground\">\n        Raw\n      </summary>\n      <div className=\"mt-1\">\n        <CodeBlock language=\"json\" source={source} jsonDefaultOpenDepth={1} />\n      </div>\n    </details>\n  );\n}\n\nfunction rawToSource(raw: unknown) {\n  if (typeof raw === \"string\") {\n    try {\n      return JSON.stringify(JSON.parse(raw), null, 2);\n    } catch {\n      return raw;\n    }\n  }\n  try {\n    return JSON.stringify(raw, null, 2);\n  } catch {\n    return String(raw);\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/data/ai/SessionViewer.row-time.cjs

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function formatEventTime(value) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return date.toLocaleString();
+}
+function formatEventRange(start, end) {
+  if (!start) return end ? formatEventTime(end) : void 0;
+  if (!end || end === start) return formatEventTime(start);
+  return `${formatEventTime(start)} – ${formatEventTime(end)}`;
+}
+exports.formatEventRange = formatEventRange;
+exports.formatEventTime = formatEventTime;
+//# sourceMappingURL=SessionViewer.row-time.cjs.map

package/dist/data/ai/SessionViewer.row-time.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionViewer.row-time.cjs","sources":["../../../src/data/ai/SessionViewer.row-time.ts"],"sourcesContent":["export function formatEventTime(value: string) {\n  const date = new Date(value);\n  if (Number.isNaN(date.getTime())) return value;\n  return date.toLocaleString();\n}\n\nexport function formatEventRange(\n  start: string | undefined,\n  end: string | undefined,\n) {\n  if (!start) return end ? formatEventTime(end) : undefined;\n  if (!end || end === start) return formatEventTime(start);\n  return `${formatEventTime(start)} – ${formatEventTime(end)}`;\n}\n"],"names":[],"mappings":";;AAAO,SAAS,gBAAgB,OAAe;AAC7C,QAAM,OAAO,IAAI,KAAK,KAAK;AAC3B,MAAI,OAAO,MAAM,KAAK,QAAA,CAAS,EAAG,QAAO;AACzC,SAAO,KAAK,eAAA;AACd;AAEO,SAAS,iBACd,OACA,KACA;AACA,MAAI,CAAC,MAAO,QAAO,MAAM,gBAAgB,GAAG,IAAI;AAChD,MAAI,CAAC,OAAO,QAAQ,MAAO,QAAO,gBAAgB,KAAK;AACvD,SAAO,GAAG,gBAAgB,KAAK,CAAC,MAAM,gBAAgB,GAAG,CAAC;AAC5D;;;"}

package/dist/data/ai/SessionViewer.row-time.d.ts

@@ -0,0 +1,3 @@
+export declare function formatEventTime(value: string): string;
+export declare function formatEventRange(start: string | undefined, end: string | undefined): string | undefined;
+//# sourceMappingURL=SessionViewer.row-time.d.ts.map

package/dist/data/ai/SessionViewer.row-time.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionViewer.row-time.d.ts","sourceRoot":"","sources":["../../../src/data/ai/SessionViewer.row-time.ts"],"names":[],"mappings":"AAAA,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,UAI5C;AAED,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,GAAG,EAAE,MAAM,GAAG,SAAS,sBAKxB"}

package/dist/data/ai/SessionViewer.row-time.js

@@ -0,0 +1,15 @@
+function formatEventTime(value) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return date.toLocaleString();
+}
+function formatEventRange(start, end) {
+  if (!start) return end ? formatEventTime(end) : void 0;
+  if (!end || end === start) return formatEventTime(start);
+  return `${formatEventTime(start)} – ${formatEventTime(end)}`;
+}
+export {
+  formatEventRange,
+  formatEventTime
+};
+//# sourceMappingURL=SessionViewer.row-time.js.map

package/dist/data/ai/SessionViewer.row-time.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionViewer.row-time.js","sources":["../../../src/data/ai/SessionViewer.row-time.ts"],"sourcesContent":["export function formatEventTime(value: string) {\n  const date = new Date(value);\n  if (Number.isNaN(date.getTime())) return value;\n  return date.toLocaleString();\n}\n\nexport function formatEventRange(\n  start: string | undefined,\n  end: string | undefined,\n) {\n  if (!start) return end ? formatEventTime(end) : undefined;\n  if (!end || end === start) return formatEventTime(start);\n  return `${formatEventTime(start)} – ${formatEventTime(end)}`;\n}\n"],"names":[],"mappings":"AAAO,SAAS,gBAAgB,OAAe;AAC7C,QAAM,OAAO,IAAI,KAAK,KAAK;AAC3B,MAAI,OAAO,MAAM,KAAK,QAAA,CAAS,EAAG,QAAO;AACzC,SAAO,KAAK,eAAA;AACd;AAEO,SAAS,iBACd,OACA,KACA;AACA,MAAI,CAAC,MAAO,QAAO,MAAM,gBAAgB,GAAG,IAAI;AAChD,MAAI,CAAC,OAAO,QAAQ,MAAO,QAAO,gBAAgB,KAAK;AACvD,SAAO,GAAG,gBAAgB,KAAK,CAAC,MAAM,gBAAgB,GAAG,CAAC;AAC5D;"}