@flamingo-stack/openframe-frontend-core 0.0.710 → 0.0.712

package/dist/chunk-2NASBO7O.js

@@ -0,0 +1,1137 @@
+"use client";
+import {
+  ActionsMenuDropdown,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "./chunk-P3JMAMHP.js";
+import {
+  ToolIcon,
+  clamp
+} from "./chunk-34I6XI3N.js";
+import {
+  Tag,
+  formatDateWithTimezone,
+  tagVariants
+} from "./chunk-IYVFSLWJ.js";
+import {
+  PLATFORM_THEME,
+  getPlatformAccentColor,
+  getPlatformDisplayName
+} from "./chunk-ADBE7QF3.js";
+import {
+  CheckCircleIcon,
+  Chevron02DownIcon,
+  DotsLoaderIcon,
+  XmarkCircleIcon
+} from "./chunk-NCPTID44.js";
+import {
+  Button
+} from "./chunk-YDPKUAP4.js";
+import {
+  cn
+} from "./chunk-7RXWKTAP.js";
+
+// src/utils/date-utils.ts
+var ZONED_DATE_FIELDS_MEDIUM_DATETIME = {
+  year: "numeric",
+  month: "short",
+  day: "numeric",
+  hour: "numeric",
+  minute: "2-digit"
+};
+function formatTicketRelativeTime(iso) {
+  const now = /* @__PURE__ */ new Date();
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return "";
+  const diffMs = now.getTime() - date.getTime();
+  const diffMin = Math.floor(diffMs / 6e4);
+  if (diffMin < 1) return "Just now";
+  if (diffMin < 60) return `${diffMin} min ago`;
+  const diffHours = Math.floor(diffMin / 60);
+  if (diffHours < 24) return diffHours === 1 ? "1 hour ago" : `${diffHours} hours ago`;
+  return formatDateWithTimezone(date, null, "numeric");
+}
+function formatTicketFullTimestamp(iso) {
+  return formatDateWithTimezone(iso, null, "numericDateTime");
+}
+function formatRelativeTime(timestamp) {
+  return formatRelativeTimeFrom(timestamp, /* @__PURE__ */ new Date());
+}
+function formatRelativeTimeFrom(timestamp, now) {
+  const targetTime = typeof timestamp === "string" ? new Date(timestamp) : timestamp;
+  if (isNaN(targetTime.getTime())) {
+    console.warn("\u26A0\uFE0F Invalid timestamp in formatRelativeTime:", timestamp);
+    return "Unknown time";
+  }
+  const diffInMs = now.getTime() - targetTime.getTime();
+  const diffInMinutes = Math.floor(diffInMs / (1e3 * 60));
+  if (diffInMinutes < 0) {
+    return "Just now";
+  }
+  if (diffInMinutes < 1) return "Just now";
+  if (diffInMinutes < 60) return `${diffInMinutes}m ago`;
+  const diffInHours = Math.floor(diffInMinutes / 60);
+  if (diffInHours < 24) return `${diffInHours}h ago`;
+  const diffInDays = Math.floor(diffInHours / 24);
+  if (diffInDays < 7) return `${diffInDays}d ago`;
+  if (diffInDays < 30) {
+    const weeks = Math.floor(diffInDays / 7);
+    return `${weeks}w ago`;
+  }
+  return formatDateWithTimezone(targetTime, null, {
+    month: "short",
+    day: "numeric",
+    year: targetTime.getUTCFullYear() !== now.getUTCFullYear() ? "numeric" : void 0
+  });
+}
+function formatAbsoluteDate(timestamp, options = {}) {
+  const targetTime = typeof timestamp === "string" ? new Date(timestamp) : timestamp;
+  if (isNaN(targetTime.getTime())) {
+    console.warn("\u26A0\uFE0F Invalid timestamp in formatAbsoluteDate:", timestamp);
+    return "Invalid date";
+  }
+  return formatDateWithTimezone(targetTime, options.timeZone ?? null, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    ...options
+  });
+}
+function formatDateTime(timestamp, options = {}) {
+  const targetTime = typeof timestamp === "string" ? new Date(timestamp) : timestamp;
+  if (isNaN(targetTime.getTime())) {
+    console.warn("\u26A0\uFE0F Invalid timestamp in formatDateTime:", timestamp);
+    return "Invalid date";
+  }
+  return formatDateWithTimezone(targetTime, options.timeZone ?? null, {
+    ...ZONED_DATE_FIELDS_MEDIUM_DATETIME,
+    ...options
+  });
+}
+function getDetailedTimeDifference(timestamp) {
+  const now = /* @__PURE__ */ new Date();
+  const targetTime = typeof timestamp === "string" ? new Date(timestamp) : timestamp;
+  if (isNaN(targetTime.getTime())) {
+    return "Invalid date";
+  }
+  const diffInMs = now.getTime() - targetTime.getTime();
+  const diffInSeconds = Math.floor(diffInMs / 1e3);
+  const diffInMinutes = Math.floor(diffInSeconds / 60);
+  const diffInHours = Math.floor(diffInMinutes / 60);
+  const diffInDays = Math.floor(diffInHours / 24);
+  if (diffInSeconds < 60) return `${diffInSeconds} seconds ago`;
+  if (diffInMinutes < 60) return `${diffInMinutes} minutes ago`;
+  if (diffInHours < 24) return `${diffInHours} hours ago`;
+  if (diffInDays < 30) return `${diffInDays} days ago`;
+  const diffInMonths = Math.floor(diffInDays / 30);
+  if (diffInMonths < 12) return `${diffInMonths} months ago`;
+  const diffInYears = Math.floor(diffInDays / 365);
+  return `${diffInYears} years ago`;
+}
+function isToday(timestamp) {
+  const today = /* @__PURE__ */ new Date();
+  const targetTime = typeof timestamp === "string" ? new Date(timestamp) : timestamp;
+  return today.toDateString() === targetTime.toDateString();
+}
+function isWithinMinutes(timestamp, minutes) {
+  const now = /* @__PURE__ */ new Date();
+  const targetTime = typeof timestamp === "string" ? new Date(timestamp) : timestamp;
+  const diffInMs = now.getTime() - targetTime.getTime();
+  const diffInMinutes = diffInMs / (1e3 * 60);
+  return diffInMinutes <= minutes && diffInMinutes >= 0;
+}
+function createUTCTimestamp() {
+  return (/* @__PURE__ */ new Date()).toISOString();
+}
+
+// src/utils/color-analysis.ts
+var DESIGN_PALETTE = [
+  { name: "yellow", hex: "#FFC008", rgb: [255, 192, 8] },
+  { name: "black", hex: "#161616", rgb: [22, 22, 22] },
+  { name: "gray", hex: "#888888", rgb: [136, 136, 136] }
+];
+function hexToRgb(hex) {
+  const normalized = hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (_, r, g, b) => `${r}${r}${g}${g}${b}${b}`);
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(normalized);
+  return result ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)] : [0, 0, 0];
+}
+function getLuminance(rgb) {
+  const [r, g, b] = rgb.map((channel) => {
+    const c = channel / 255;
+    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function getContrastRatio(color1, color2) {
+  const lum1 = getLuminance(color1);
+  const lum2 = getLuminance(color2);
+  const brightest = Math.max(lum1, lum2);
+  const darkest = Math.min(lum1, lum2);
+  return (brightest + 0.05) / (darkest + 0.05);
+}
+function pickReadableTextColor(bgHex) {
+  const bg = hexToRgb(bgHex);
+  const darkContrast = getContrastRatio(bg, [26, 26, 26]);
+  const lightContrast = getContrastRatio(bg, [250, 250, 250]);
+  return darkContrast >= lightContrast ? "dark" : "light";
+}
+function extractDominantColor(canvas) {
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return [128, 128, 128];
+  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  const data = imageData.data;
+  const sampleSize = Math.max(1, Math.floor(data.length / (4 * 1e3)));
+  const colorCounts = {};
+  for (let i = 0; i < data.length; i += 4 * sampleSize) {
+    const r = data[i];
+    const g = data[i + 1];
+    const b = data[i + 2];
+    const alpha = data[i + 3];
+    if (alpha < 128) continue;
+    const bucketR = Math.round(r / 32) * 32;
+    const bucketG = Math.round(g / 32) * 32;
+    const bucketB = Math.round(b / 32) * 32;
+    const key = `${bucketR},${bucketG},${bucketB}`;
+    colorCounts[key] = (colorCounts[key] || 0) + 1;
+  }
+  let maxCount = 0;
+  let dominantColor = [128, 128, 128];
+  for (const [colorKey, count] of Object.entries(colorCounts)) {
+    if (count > maxCount) {
+      maxCount = count;
+      const [r, g, b] = colorKey.split(",").map(Number);
+      dominantColor = [r, g, b];
+    }
+  }
+  return dominantColor;
+}
+function getBestContrastColor(imageColor) {
+  let bestColor = DESIGN_PALETTE[0];
+  let bestContrast = 0;
+  for (const color of DESIGN_PALETTE) {
+    const contrast = getContrastRatio(imageColor, color.rgb);
+    if (contrast > bestContrast) {
+      bestContrast = contrast;
+      bestColor = color;
+    }
+  }
+  return bestContrast >= 3 ? bestColor : DESIGN_PALETTE.find((c) => c.name === "black") || bestColor;
+}
+function analyzeImageColor(imageSrc) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => {
+      try {
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
+        if (!ctx) {
+          reject(new Error("Could not get canvas context"));
+          return;
+        }
+        const maxSize = 100;
+        const scale = Math.min(maxSize / img.width, maxSize / img.height);
+        canvas.width = img.width * scale;
+        canvas.height = img.height * scale;
+        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+        const dominantColor = extractDominantColor(canvas);
+        const bestContrastColor = getBestContrastColor(dominantColor);
+        resolve(bestContrastColor);
+      } catch (error) {
+        reject(error);
+      }
+    };
+    img.onerror = () => reject(new Error("Failed to load image"));
+    img.src = imageSrc;
+  });
+}
+async function extractImageEdgeColorAsync(imageUrl) {
+  return new Promise((resolve) => {
+    if (typeof window === "undefined") {
+      resolve("#000000");
+      return;
+    }
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => {
+      try {
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
+        if (!ctx) {
+          resolve("#000000");
+          return;
+        }
+        const maxSize = 50;
+        const scale = Math.min(maxSize / img.naturalWidth, maxSize / img.naturalHeight);
+        const w = Math.round(img.naturalWidth * scale);
+        const h = Math.round(img.naturalHeight * scale);
+        canvas.width = w;
+        canvas.height = h;
+        ctx.drawImage(img, 0, 0, w, h);
+        const data = ctx.getImageData(0, 0, w, h).data;
+        const edgeW = Math.max(2, Math.round(w * 0.15));
+        const edgeH = Math.max(2, Math.round(h * 0.15));
+        const bucketSize = 32;
+        const buckets = /* @__PURE__ */ new Map();
+        for (let y = 0; y < h; y++) {
+          for (let x = 0; x < w; x++) {
+            if (!(x < edgeW || x >= w - edgeW || y < edgeH || y >= h - edgeH)) continue;
+            const i = (y * w + x) * 4;
+            if (data[i + 3] < 128) continue;
+            const br = Math.floor(data[i] / bucketSize) * bucketSize;
+            const bg = Math.floor(data[i + 1] / bucketSize) * bucketSize;
+            const bb = Math.floor(data[i + 2] / bucketSize) * bucketSize;
+            const key = `${br},${bg},${bb}`;
+            const existing = buckets.get(key);
+            if (existing) {
+              existing.r += data[i];
+              existing.g += data[i + 1];
+              existing.b += data[i + 2];
+              existing.count++;
+            } else {
+              buckets.set(key, { r: data[i], g: data[i + 1], b: data[i + 2], count: 1 });
+            }
+          }
+        }
+        let best = { r: 0, g: 0, b: 0, count: 0 };
+        for (const b2 of buckets.values()) {
+          if (b2.count > best.count) best = b2;
+        }
+        if (best.count === 0) {
+          resolve("#000000");
+          return;
+        }
+        const r = Math.round(best.r / best.count), g = Math.round(best.g / best.count), b = Math.round(best.b / best.count);
+        resolve(
+          `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`
+        );
+      } catch {
+        resolve("#000000");
+      }
+    };
+    img.onerror = () => resolve("#000000");
+    img.src = imageUrl;
+  });
+}
+
+// src/utils/ods-color-tokens-stub.ts
+var colorTokens = {
+  primary: "#FFC008",
+  secondary: "#161616",
+  background: "#FAFAFA",
+  surface: "#FFFFFF",
+  text: {
+    primary: "#161616",
+    secondary: "#666666",
+    inverse: "#FFFFFF"
+  },
+  border: "#E5E5E5"
+};
+
+// src/utils/ods-color-utils.ts
+var TOKEN_MAP = colorTokens;
+function lookupToken(tokenKey) {
+  const value = TOKEN_MAP[tokenKey];
+  return typeof value === "string" ? value : void 0;
+}
+function getODSToken(category, color, variant = "base") {
+  const tokenKey = `${category}-${color}-${variant}`;
+  return lookupToken(tokenKey);
+}
+function getCurrentPlatform() {
+  if (typeof window === "undefined") {
+    return process.env.NEXT_PUBLIC_APP_TYPE || "openmsp";
+  }
+  const domPlatform = document.documentElement.getAttribute("data-app-type");
+  if (domPlatform) {
+    return domPlatform;
+  }
+  return process.env.NEXT_PUBLIC_APP_TYPE || "openmsp";
+}
+function switchPlatformTheme(platform) {
+  if (typeof window === "undefined") return;
+  const root = document.documentElement;
+  root.setAttribute("data-app-type", platform);
+  window.dispatchEvent(
+    new CustomEvent("platformThemeChanged", {
+      detail: { platform }
+    })
+  );
+}
+function getSemanticColor(semanticName, platform) {
+  if (typeof window === "undefined") return void 0;
+  const currentPlatform = platform || getCurrentPlatform();
+  const originalPlatform = getCurrentPlatform();
+  if (currentPlatform !== originalPlatform) {
+    switchPlatformTheme(currentPlatform);
+  }
+  const testElement = document.createElement("div");
+  document.body.appendChild(testElement);
+  const computedStyle = getComputedStyle(testElement);
+  const colorValue = computedStyle.getPropertyValue(`--color-${semanticName}`);
+  document.body.removeChild(testElement);
+  if (currentPlatform !== originalPlatform) {
+    switchPlatformTheme(originalPlatform);
+  }
+  return colorValue.trim() || void 0;
+}
+function getPlatformConfig(platform) {
+  const currentPlatform = platform || getCurrentPlatform();
+  const isDarkTheme = PLATFORM_THEME === "dark";
+  return {
+    platform: currentPlatform,
+    accentColor: getPlatformAccentColor(currentPlatform),
+    isDarkTheme,
+    isLightTheme: !isDarkTheme,
+    brandName: getPlatformDisplayName(currentPlatform)
+  };
+}
+function usePlatformColors(platform) {
+  const currentPlatform = platform || getCurrentPlatform();
+  const config = getPlatformConfig(currentPlatform);
+  return {
+    platform: currentPlatform,
+    accentColor: config.accentColor,
+    isDarkTheme: config.isDarkTheme,
+    isLightTheme: config.isLightTheme,
+    brandName: config.brandName,
+    getToken: (category, color, variant) => getODSToken(category, color, variant),
+    switchTheme: (newPlatform) => switchPlatformTheme(newPlatform),
+    getSemanticColor: (semanticName) => getSemanticColor(semanticName, currentPlatform)
+  };
+}
+function getReadableTextColor(hex) {
+  return pickReadableTextColor(hex) === "dark" ? "#212121" : "#fafafa";
+}
+var HEX_PATTERN = /^#[0-9a-fA-F]{6}$/;
+function hexToRgb2(hex) {
+  if (!HEX_PATTERN.test(hex)) return null;
+  const n = Number.parseInt(hex.slice(1), 16);
+  return { r: n >> 16 & 255, g: n >> 8 & 255, b: n & 255 };
+}
+function rgbToHex(r, g, b) {
+  const to = (n) => clamp(Math.round(n), 0, 255).toString(16).padStart(2, "0");
+  return `#${to(r)}${to(g)}${to(b)}`;
+}
+var HOVER_DARKEN_STEP = 10;
+var ACTIVE_DARKEN_STEP = 20;
+function darkenByStep(hex, step) {
+  const rgb = hexToRgb2(hex);
+  if (!rgb) return hex;
+  return rgbToHex(rgb.r - step, rgb.g - step, rgb.b - step);
+}
+function deriveHoverColor(hex) {
+  return darkenByStep(hex, HOVER_DARKEN_STEP);
+}
+function deriveActiveColor(hex) {
+  return darkenByStep(hex, ACTIVE_DARKEN_STEP);
+}
+function rgbToHsl(r, g, b) {
+  const rn = r / 255;
+  const gn = g / 255;
+  const bn = b / 255;
+  const max = Math.max(rn, gn, bn);
+  const min = Math.min(rn, gn, bn);
+  const l = (max + min) / 2;
+  if (max === min) return { h: 0, s: 0, l: Math.round(l * 100) };
+  const d = max - min;
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  let h;
+  if (max === rn) h = (gn - bn) / d + (gn < bn ? 6 : 0);
+  else if (max === gn) h = (bn - rn) / d + 2;
+  else h = (rn - gn) / d + 4;
+  h *= 60;
+  return { h: Math.round(h), s: Math.round(s * 100), l: Math.round(l * 100) };
+}
+function hslToRgb(h, s, l) {
+  const sn = clamp(s, 0, 100) / 100;
+  const ln = clamp(l, 0, 100) / 100;
+  const hn = (h % 360 + 360) % 360;
+  if (sn === 0) {
+    const v = Math.round(ln * 255);
+    return { r: v, g: v, b: v };
+  }
+  const q = ln < 0.5 ? ln * (1 + sn) : ln + sn - ln * sn;
+  const p = 2 * ln - q;
+  const hue2rgb = (t) => {
+    let tn = t;
+    if (tn < 0) tn += 1;
+    if (tn > 1) tn -= 1;
+    if (tn < 1 / 6) return p + (q - p) * 6 * tn;
+    if (tn < 1 / 2) return q;
+    if (tn < 2 / 3) return p + (q - p) * (2 / 3 - tn) * 6;
+    return p;
+  };
+  const hk = hn / 360;
+  return {
+    r: Math.round(hue2rgb(hk + 1 / 3) * 255),
+    g: Math.round(hue2rgb(hk) * 255),
+    b: Math.round(hue2rgb(hk - 1 / 3) * 255)
+  };
+}
+
+// src/components/ui/color-swatch.tsx
+import { jsx } from "react/jsx-runtime";
+function ColorSwatch({ color, className }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: cn("inline-block size-4 shrink-0 rounded-sm", className),
+      style: { backgroundColor: color }
+    }
+  );
+}
+
+// src/components/ui/ticket-status-tag.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var STATUS_CONFIG = {
+  ACTIVE: {
+    label: "Active",
+    variant: "success"
+  },
+  AI_ASSISTANCE: {
+    label: "AI Handling",
+    variant: "outline"
+  },
+  TECH_REQUIRED: {
+    label: "Tech Required",
+    variant: "warning"
+  },
+  ON_HOLD: {
+    label: "On Hold",
+    variant: "error"
+  },
+  RESOLVED: {
+    label: "Resolved",
+    variant: "outline",
+    icon: /* @__PURE__ */ jsx2(CheckCircleIcon, { size: 16, color: "var(--color-success)" })
+  },
+  ARCHIVED: {
+    label: "Archived",
+    variant: "grey"
+  }
+};
+var STATUS_ALIASES = {
+  // Canonical (backend enum)
+  ACTIVE: "ACTIVE",
+  AI_ASSISTANCE: "AI_ASSISTANCE",
+  ai_assistance: "AI_ASSISTANCE",
+  TECH_REQUIRED: "TECH_REQUIRED",
+  ON_HOLD: "ON_HOLD",
+  RESOLVED: "RESOLVED",
+  ARCHIVED: "ARCHIVED",
+  // Dialog-layer alias
+  ACTION_REQUIRED: "TECH_REQUIRED",
+  // HubSpot canonical (OPEN/CLOSED) — drives color + icon variant. The
+  // user-facing label still comes from `pipeline_stage_label` when the
+  // caller passes <TicketStatusTag label={…}>, so the badge can read
+  // "New" / "Working" / "Waiting on contact" while the canonical status
+  // remains OPEN.
+  OPEN: "ACTIVE",
+  open: "ACTIVE",
+  CLOSED: "RESOLVED",
+  closed: "RESOLVED",
+  // Chat lowercase variants
+  active: "ACTIVE",
+  tech_required: "TECH_REQUIRED",
+  on_hold: "ON_HOLD",
+  resolved: "RESOLVED",
+  archived: "ARCHIVED",
+  action_required: "TECH_REQUIRED"
+};
+function resolveTicketStatus(status) {
+  return STATUS_ALIASES[status] ?? null;
+}
+function getTicketStatusConfig(status) {
+  const canonical = resolveTicketStatus(status);
+  if (!canonical) {
+    return { label: status.replace(/_/g, " "), variant: "outline" };
+  }
+  return STATUS_CONFIG[canonical];
+}
+function getTicketStatusTag(status) {
+  const config = getTicketStatusConfig(status);
+  return { label: config.label, variant: config.variant, icon: config.icon };
+}
+var KIND_TO_CANONICAL = {
+  AI_ASSISTANCE: "AI_ASSISTANCE",
+  TECH_REQUIRED: "TECH_REQUIRED",
+  RESOLVED: "RESOLVED",
+  ARCHIVED: "ARCHIVED"
+};
+function kindToCanonicalStatus(kind) {
+  if (kind == null || kind === "CUSTOM") return void 0;
+  return KIND_TO_CANONICAL[kind];
+}
+function usesCanonicalStatusStyle(kind) {
+  return kind != null && kind !== "CUSTOM" && kind !== "TECH_REQUIRED";
+}
+function resolveStatusTagProps(input) {
+  const canonical = usesCanonicalStatusStyle(input.statusKind) ? kindToCanonicalStatus(input.statusKind) : void 0;
+  return {
+    status: canonical ?? input.status ?? "",
+    label: input.statusName ?? void 0,
+    color: canonical ? void 0 : input.statusColor ?? void 0
+  };
+}
+function TicketStatusTag({
+  status,
+  label,
+  color,
+  variant,
+  className,
+  showIcon = true,
+  options,
+  onSelect,
+  isPending = false,
+  disabled = false,
+  disabledReason
+}) {
+  const config = getTicketStatusConfig(status);
+  const customStyle = color ? {
+    "--tag-bg": color,
+    "--tag-bg-hover": deriveHoverColor(color),
+    "--tag-bg-active": deriveActiveColor(color),
+    color: getReadableTextColor(color)
+  } : void 0;
+  const customColorClasses = color ? "bg-[var(--tag-bg)] hover:bg-[var(--tag-bg-hover)] active:bg-[var(--tag-bg-active)]" : void 0;
+  const tag = /* @__PURE__ */ jsx2(
+    Tag,
+    {
+      label: label ?? config.label,
+      variant: variant ?? config.variant,
+      icon: showIcon ? config.icon : void 0,
+      className: cn("w-fit shrink-0", customColorClasses, className),
+      style: customStyle
+    }
+  );
+  if (disabled || !options || options.length === 0 || !onSelect) {
+    if (disabled && disabledReason) {
+      return /* @__PURE__ */ jsx2(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx2(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx2("span", { className: "w-fit shrink-0 cursor-not-allowed", children: tag }) }),
+        /* @__PURE__ */ jsx2(TooltipContent, { children: disabledReason })
+      ] }) });
+    }
+    return tag;
+  }
+  return /* @__PURE__ */ jsx2(
+    ActionsMenuDropdown,
+    {
+      align: "start",
+      groups: [
+        {
+          items: options.map((option) => ({
+            id: option.id,
+            label: option.name,
+            icon: /* @__PURE__ */ jsx2(ColorSwatch, { color: option.color }),
+            onClick: () => onSelect(option.id),
+            disabled: isPending
+          }))
+        }
+      ],
+      customTrigger: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          disabled: isPending,
+          "aria-label": "Change status",
+          style: customStyle,
+          className: cn(
+            // Reuse the tag's variant styling, but split into a label section and a
+            // separated chevron section (the common dropdown-button seam).
+            tagVariants({ variant: variant ?? config.variant }),
+            "w-fit shrink-0 items-stretch justify-start gap-0 overflow-hidden p-0",
+            "disabled:cursor-not-allowed disabled:opacity-60",
+            // Custom color: bg/hover/active from the CSS vars set above.
+            customColorClasses,
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-[var(--spacing-system-xxs)] px-[var(--spacing-system-xsf)]", children: [
+              showIcon && config.icon && /* @__PURE__ */ jsx2("span", { className: "flex size-5 shrink-0 items-center justify-center", children: config.icon }),
+              /* @__PURE__ */ jsx2("span", { className: "truncate", children: label ?? config.label })
+            ] }),
+            /* @__PURE__ */ jsx2("span", { className: "flex items-center justify-center self-stretch border-l border-ods-border px-[var(--spacing-system-xsf)]", children: /* @__PURE__ */ jsx2(Chevron02DownIcon, { className: "size-4 shrink-0" }) })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/components/ui/status-line.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function StatusLine({ tone, label, className }) {
+  return /* @__PURE__ */ jsxs2(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center gap-1.5 whitespace-nowrap text-h6",
+        tone === "waiting" ? "text-ods-warning" : tone === "error" ? "text-ods-error" : tone === "muted" ? "text-ods-text-secondary" : "text-ods-text-primary",
+        className
+      ),
+      children: [
+        tone === "working" && /* @__PURE__ */ jsx3(
+          "span",
+          {
+            className: "h-2 w-2 shrink-0 animate-pulse rounded-full bg-ods-flamingo-cyan motion-reduce:animate-none",
+            "aria-hidden": true
+          }
+        ),
+        tone === "success" && /* @__PURE__ */ jsx3(CheckCircleIcon, { size: 16, className: "shrink-0 text-ods-success", "aria-hidden": true }),
+        tone === "error" && /* @__PURE__ */ jsx3(XmarkCircleIcon, { size: 16, className: "shrink-0 text-ods-error", "aria-hidden": true }),
+        label
+      ]
+    }
+  );
+}
+
+// src/components/chat/expand-chevron.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function ExpandChevron({ expanded, className }) {
+  return /* @__PURE__ */ jsx4(
+    Chevron02DownIcon,
+    {
+      className: cn(
+        "h-4 w-4 shrink-0 text-ods-text-secondary transition-transform duration-200",
+        expanded && "rotate-180",
+        className
+      )
+    }
+  );
+}
+
+// src/components/chat/hooks/use-collapsible.ts
+import { useLayoutEffect, useState } from "react";
+function useCollapsible({
+  expanded,
+  collapsedHeight = 0,
+  disableTransition = false,
+  durationMs = 200
+}) {
+  const [element, setElement] = useState(null);
+  const [contentHeight, setContentHeight] = useState(0);
+  const [collapsedPx, setCollapsedPx] = useState(0);
+  useLayoutEffect(() => {
+    if (!element) return void 0;
+    const measure = () => {
+      setContentHeight(element.scrollHeight);
+      setCollapsedPx(collapsedHeight === "1lh" ? parseFloat(getComputedStyle(element).lineHeight) : collapsedHeight);
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [element, collapsedHeight]);
+  const collapsedValue = collapsedHeight === "1lh" ? collapsedPx || collapsedHeight : collapsedHeight;
+  const containerStyle = {
+    overflow: "hidden",
+    maxHeight: expanded ? contentHeight : collapsedValue,
+    transition: disableTransition ? "none" : `max-height ${durationMs}ms ease-in-out`
+  };
+  return {
+    innerRef: setElement,
+    isOverflowing: contentHeight > collapsedPx,
+    containerStyle
+  };
+}
+
+// src/components/chat/utils/tool-call-helpers.ts
+var COMMAND_BODY_ARG_KEYS = ["command", "query", "script", "scriptContent", "code"];
+function getToolCallTitle(opts) {
+  const { args, title, name } = opts;
+  if (args && typeof args === "object") {
+    for (const key of COMMAND_BODY_ARG_KEYS) {
+      const candidate = args[key];
+      if (typeof candidate === "string" && candidate.trim()) return candidate;
+    }
+  }
+  return title || name || "Tool call";
+}
+function getCommandText(call) {
+  return getToolCallTitle({
+    args: call.toolCallArguments,
+    title: call.toolTitle,
+    name: call.toolName
+  });
+}
+var INLINE_STRING_MAX = 80;
+function expandJson(value, indent) {
+  const pad = (n) => "  ".repeat(n);
+  if (value === null) return "null";
+  const t = typeof value;
+  if (t === "number" || t === "boolean" || t === "bigint") return String(value);
+  if (t === "string") {
+    const s = value.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+    if (!s.includes("\n")) return JSON.stringify(s);
+    return s.replace(/^\n+/, "").replace(/\n+$/, "").split("\n").map((line) => pad(indent) + line).join("\n");
+  }
+  if (Array.isArray(value)) {
+    if (value.length === 0) return "[]";
+    const items = value.map(
+      (v) => typeof v === "string" && /[\r\n]/.test(v) ? expandJson(v, indent + 1) : pad(indent + 1) + expandJson(v, indent + 1)
+    );
+    return "[\n" + items.join(",\n") + "\n" + pad(indent) + "]";
+  }
+  if (t === "object") {
+    const entries = Object.entries(value);
+    if (entries.length === 0) return "{}";
+    const items = entries.map(([k, v]) => {
+      const key = JSON.stringify(k);
+      if (typeof v === "string" && /[\r\n]/.test(v)) {
+        return pad(indent + 1) + key + ":\n" + expandJson(v, indent + 2);
+      }
+      return pad(indent + 1) + key + ": " + expandJson(v, indent + 1);
+    });
+    return "{\n" + items.join(",\n") + "\n" + pad(indent) + "}";
+  }
+  return JSON.stringify(value);
+}
+function expandedJsonStringify(value) {
+  try {
+    return expandJson(value, 0);
+  } catch {
+    return String(value);
+  }
+}
+function formatToolArgValue(value) {
+  if (value === null || value === void 0) return { kind: "inline", text: "" };
+  if (typeof value === "object") {
+    return { kind: "block", text: safeStringify(value), language: "json" };
+  }
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    if (trimmed.startsWith("{") && trimmed.endsWith("}") || trimmed.startsWith("[") && trimmed.endsWith("]")) {
+      try {
+        return { kind: "block", text: expandedJsonStringify(JSON.parse(trimmed)), language: "json" };
+      } catch {
+      }
+    }
+    if (value.includes("\n") || value.length > INLINE_STRING_MAX) {
+      return { kind: "block", text: value, language: "text" };
+    }
+    return { kind: "inline", text: value };
+  }
+  return { kind: "inline", text: String(value) };
+}
+function safeStringify(value) {
+  return expandedJsonStringify(value);
+}
+function formatToolResult(value) {
+  if (typeof value !== "string") return { kind: "inline", text: "" };
+  const fenced = value.match(/^\s*```(?:[a-zA-Z0-9_-]*)\n([\s\S]*?)\n```\s*$/);
+  const body = fenced ? fenced[1] : value;
+  const trimmed = body.trim();
+  if (trimmed.startsWith("{") && trimmed.endsWith("}") || trimmed.startsWith("[") && trimmed.endsWith("]")) {
+    try {
+      return { kind: "block", text: expandedJsonStringify(JSON.parse(trimmed)), language: "json" };
+    } catch {
+    }
+  }
+  if (body.includes("\n") || body.length > INLINE_STRING_MAX) {
+    return { kind: "block", text: body, language: "text" };
+  }
+  return { kind: "inline", text: body };
+}
+
+// src/components/chat/tool-call-blocks.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var CODE_PRE_CLASS = "bg-ods-bg border border-ods-border rounded-md p-[var(--spacing-system-sf)] w-full max-h-64 overflow-auto overscroll-contain text-code text-ods-text-primary whitespace-pre";
+function ArgRow({ argKey, value }) {
+  const formatted = formatToolArgValue(value);
+  if (formatted.kind === "inline") {
+    return /* @__PURE__ */ jsxs3("div", { className: "flex w-full items-start gap-[var(--spacing-system-xxs)]", children: [
+      /* @__PURE__ */ jsxs3("span", { className: "shrink-0 text-ods-text-secondary", children: [
+        argKey,
+        ":"
+      ] }),
+      /* @__PURE__ */ jsx5("span", { className: "min-w-0 flex-1 break-all text-ods-text-primary", children: formatted.text })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs3("div", { className: "flex w-full flex-col items-start gap-[var(--spacing-system-xxs)]", children: [
+    /* @__PURE__ */ jsxs3("span", { className: "text-ods-text-secondary", children: [
+      argKey,
+      ":"
+    ] }),
+    /* @__PURE__ */ jsx5("pre", { className: CODE_PRE_CLASS, children: /* @__PURE__ */ jsx5("code", { children: formatted.text }) })
+  ] });
+}
+function ResultBlock({ result, className }) {
+  const formatted = formatToolResult(result);
+  if (!formatted.text) return null;
+  if (formatted.kind === "inline") {
+    return /* @__PURE__ */ jsxs3("div", { className: cn("flex w-full flex-col items-start gap-[var(--spacing-system-xxs)]", className), children: [
+      /* @__PURE__ */ jsx5("span", { className: "text-ods-text-secondary", children: "Result:" }),
+      /* @__PURE__ */ jsx5("span", { className: "break-all text-ods-text-primary", children: formatted.text })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs3("div", { className: cn("flex w-full flex-col items-start gap-[var(--spacing-system-xxs)]", className), children: [
+    /* @__PURE__ */ jsx5("span", { className: "text-ods-text-secondary", children: "Result:" }),
+    /* @__PURE__ */ jsx5("pre", { className: CODE_PRE_CLASS, children: /* @__PURE__ */ jsx5("code", { children: formatted.text }) })
+  ] });
+}
+function CommandBlock({ command, className }) {
+  if (!command) return null;
+  return /* @__PURE__ */ jsx5("pre", { className: cn(CODE_PRE_CLASS, className), children: /* @__PURE__ */ jsx5("code", { children: command }) });
+}
+
+// src/components/chat/approval-batch-message.tsx
+import { forwardRef, useState as useState2 } from "react";
+
+// src/components/chat/chat-block-frame.ts
+var CHAT_BLOCK_FRAME_CLASS = "rounded-lg border border-ods-border bg-ods-bg";
+var CHAT_BLOCK_CLASS = `${CHAT_BLOCK_FRAME_CLASS} flex flex-col gap-[var(--spacing-system-xsf)] p-[var(--spacing-system-sf)]`;
+
+// src/components/chat/approval-batch-message.tsx
+import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var COMMAND_BODY_KEYS = new Set(COMMAND_BODY_ARG_KEYS);
+function ApprovalStatusTag({ status, resolvedByName, inlineResolver = false }) {
+  const suffix = inlineResolver && resolvedByName ? ` by ${resolvedByName}` : "";
+  if (status === "approved") return /* @__PURE__ */ jsx6(StatusLine, { tone: "success", label: `Approved${suffix}` });
+  if (status === "cancelled") return /* @__PURE__ */ jsx6(StatusLine, { tone: "muted", label: `Canceled${suffix}` });
+  if (status === "rejected") return /* @__PURE__ */ jsx6(StatusLine, { tone: "error", label: `Rejected${suffix}` });
+  return null;
+}
+function ApprovalWaitingLine() {
+  return /* @__PURE__ */ jsx6(StatusLine, { tone: "waiting", label: "Waiting for you" });
+}
+function getArgEntries(call) {
+  const args = call.toolCallArguments;
+  if (!args || typeof args !== "object") return [];
+  return Object.entries(args).filter(
+    ([k, v]) => !COMMAND_BODY_KEYS.has(k) && v !== null && v !== void 0 && v !== ""
+  );
+}
+function ExecutionStatusIcon({
+  batchStatus,
+  execution
+}) {
+  if (batchStatus !== "approved") return null;
+  if (!execution || execution.status === "executing")
+    return /* @__PURE__ */ jsx6(DotsLoaderIcon, { size: 16, className: "text-ods-text-secondary" });
+  if (execution.success === false) return /* @__PURE__ */ jsx6(XmarkCircleIcon, { className: "h-4 w-4 text-ods-error" });
+  return /* @__PURE__ */ jsx6(CheckCircleIcon, { className: "h-4 w-4 text-ods-success" });
+}
+function ToolCallRow({ call, expanded, onToggle, batchStatus, execution, showExecutionStatus }) {
+  const command = getCommandText(call);
+  const args = getArgEntries(call);
+  const toolType = call.toolType || "OPENFRAME";
+  const { innerRef, containerStyle } = useCollapsible({ expanded });
+  const result = execution?.status === "done" ? execution.result : void 0;
+  const hasExpandableBody = args.length > 0 || typeof result === "string" && result.length > 0;
+  return /* @__PURE__ */ jsxs4("div", { className: "flex w-full flex-col items-start border-b border-ods-border bg-ods-card last:border-b-0", children: [
+    /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        type: "button",
+        onClick: onToggle,
+        className: "flex w-full cursor-pointer items-start gap-[var(--spacing-system-xsf)] p-[var(--spacing-system-sf)] text-left",
+        children: [
+          /* @__PURE__ */ jsx6("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center text-ods-text-secondary", children: /* @__PURE__ */ jsx6(ToolIcon, { toolType, size: 16 }) }),
+          /* @__PURE__ */ jsx6(
+            "div",
+            {
+              className: cn(
+                "min-w-0 flex-1 text-h6",
+                expanded ? "whitespace-pre-wrap break-all text-ods-text-primary" : "line-clamp-2 max-h-10 break-all text-ods-text-secondary"
+              ),
+              children: command
+            }
+          ),
+          showExecutionStatus && /* @__PURE__ */ jsx6("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx6(ExecutionStatusIcon, { batchStatus, execution }) }),
+          /* @__PURE__ */ jsx6("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx6(ExpandChevron, { expanded }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx6("div", { className: "w-full", style: containerStyle, children: /* @__PURE__ */ jsx6("div", { ref: innerRef, children: hasExpandableBody && /* @__PURE__ */ jsxs4("div", { className: "flex w-full flex-col items-start gap-0 bg-ods-card px-[var(--spacing-system-sf)] pb-[var(--spacing-system-sf)] text-h6", children: [
+      args.map(([key, value]) => /* @__PURE__ */ jsx6(ArgRow, { argKey: key, value }, key)),
+      result && /* @__PURE__ */ jsx6(
+        ResultBlock,
+        {
+          result,
+          className: args.length > 0 ? "mt-[var(--spacing-system-xsf)]" : void 0
+        }
+      )
+    ] }) }) })
+  ] });
+}
+var ApprovalBatchMessage = forwardRef(
+  ({
+    className,
+    data,
+    onApprove,
+    onReject,
+    status = "pending",
+    maxBodyHeight,
+    resolvedByName,
+    showExecutionStatus = true,
+    assistantType: _assistantType,
+    variant = "admin",
+    showFooterActions = true,
+    ...props
+  }, ref) => {
+    const [expandedId, setExpandedId] = useState2(null);
+    const [isProcessing, setIsProcessing] = useState2(false);
+    const isClient = variant === "client";
+    const explanations = data.toolCalls.map((c) => c.toolExplanation?.trim()).filter((s) => !!s);
+    const handleApprove = async () => {
+      setIsProcessing(true);
+      try {
+        await onApprove?.(data.approvalRequestId);
+      } finally {
+        setIsProcessing(false);
+      }
+    };
+    const handleReject = async () => {
+      setIsProcessing(true);
+      try {
+        await onReject?.(data.approvalRequestId);
+      } finally {
+        setIsProcessing(false);
+      }
+    };
+    const actionButtons = /* @__PURE__ */ jsxs4(Fragment, { children: [
+      /* @__PURE__ */ jsx6(
+        Button,
+        {
+          size: "small-legacy",
+          variant: "accent",
+          onClick: handleApprove,
+          disabled: isProcessing,
+          className: cn(
+            "bg-ods-accent hover:bg-ods-accent/90",
+            "text-ods-bg text-h5",
+            "h-8 px-[var(--spacing-system-xsf)]"
+          ),
+          children: "Approve"
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        Button,
+        {
+          size: "small-legacy",
+          variant: "outline",
+          onClick: handleReject,
+          disabled: isProcessing,
+          className: cn(
+            "border-ods-border bg-ods-card",
+            "text-ods-text-primary text-h5",
+            "h-8 px-[var(--spacing-system-xsf)] hover:bg-ods-bg"
+          ),
+          children: "Reject"
+        }
+      )
+    ] });
+    if (isClient) {
+      const titles = data.toolCalls.map((c) => c.toolExplanation?.trim() || c.toolTitle?.trim()).filter((s) => !!s);
+      return /* @__PURE__ */ jsxs4("div", { ref, className: cn("mb-[var(--spacing-system-xsf)]", CHAT_BLOCK_CLASS, className), ...props, children: [
+        titles.length > 0 ? titles.map((title, i) => /* @__PURE__ */ jsx6("p", { className: "w-full whitespace-pre-line break-words text-ods-text-primary text-h4", children: title }, i)) : /* @__PURE__ */ jsx6("p", { className: "w-full text-ods-text-primary text-h4", children: "Approval required" }),
+        showFooterActions && status === "pending" && /* @__PURE__ */ jsx6(ApprovalWaitingLine, {}),
+        showFooterActions && (status === "pending" ? /* @__PURE__ */ jsx6("div", { className: "flex w-full items-center gap-[var(--spacing-system-xsf)]", children: actionButtons }) : /* @__PURE__ */ jsx6("div", { className: "flex w-full", children: /* @__PURE__ */ jsx6(ApprovalStatusTag, { status, resolvedByName, inlineResolver: true }) }))
+      ] });
+    }
+    const showFooterBlock = explanations.length > 0 || showFooterActions;
+    return /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        ref,
+        className: cn(
+          "mb-[var(--spacing-system-xsf)] flex flex-col overflow-hidden",
+          CHAT_BLOCK_FRAME_CLASS,
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx6(
+            "div",
+            {
+              className: cn("flex flex-col", maxBodyHeight != null && "overflow-y-auto overscroll-contain"),
+              style: maxBodyHeight != null ? { maxHeight: maxBodyHeight } : void 0,
+              children: data.toolCalls.map((call) => /* @__PURE__ */ jsx6(
+                ToolCallRow,
+                {
+                  call,
+                  expanded: expandedId === call.toolExecutionRequestId,
+                  onToggle: () => setExpandedId((prev) => prev === call.toolExecutionRequestId ? null : call.toolExecutionRequestId),
+                  batchStatus: status,
+                  execution: data.executions?.[call.toolExecutionRequestId],
+                  showExecutionStatus
+                },
+                call.toolExecutionRequestId
+              ))
+            }
+          ),
+          showFooterBlock && /* @__PURE__ */ jsxs4("div", { className: "flex flex-col items-start justify-center gap-[var(--spacing-system-xsf)] border-t border-ods-border p-[var(--spacing-system-sf)]", children: [
+            explanations.length > 0 && /* @__PURE__ */ jsx6("ul", { className: "w-full list-disc pl-5 text-ods-text-primary text-h6", children: explanations.map((expl, i) => /* @__PURE__ */ jsx6("li", { children: expl }, i)) }),
+            showFooterActions && status === "pending" && /* @__PURE__ */ jsx6(ApprovalWaitingLine, {}),
+            showFooterActions && (status === "pending" ? /* @__PURE__ */ jsx6("div", { className: "flex items-center gap-[var(--spacing-system-xsf)]", children: actionButtons }) : /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-[var(--spacing-system-xsf)]", children: [
+              /* @__PURE__ */ jsx6(ApprovalStatusTag, { status, resolvedByName }),
+              resolvedByName && /* @__PURE__ */ jsxs4("span", { className: "text-ods-text-secondary text-h6", children: [
+                "by ",
+                resolvedByName
+              ] })
+            ] }))
+          ] })
+        ]
+      }
+    );
+  }
+);
+ApprovalBatchMessage.displayName = "ApprovalBatchMessage";
+
+export {
+  formatTicketRelativeTime,
+  formatTicketFullTimestamp,
+  formatRelativeTime,
+  formatRelativeTimeFrom,
+  formatAbsoluteDate,
+  formatDateTime,
+  getDetailedTimeDifference,
+  isToday,
+  isWithinMinutes,
+  createUTCTimestamp,
+  DESIGN_PALETTE,
+  getContrastRatio,
+  pickReadableTextColor,
+  extractDominantColor,
+  getBestContrastColor,
+  analyzeImageColor,
+  extractImageEdgeColorAsync,
+  getCurrentPlatform,
+  switchPlatformTheme,
+  getSemanticColor,
+  getPlatformConfig,
+  usePlatformColors,
+  getReadableTextColor,
+  HEX_PATTERN,
+  hexToRgb2 as hexToRgb,
+  rgbToHex,
+  deriveHoverColor,
+  deriveActiveColor,
+  rgbToHsl,
+  hslToRgb,
+  ColorSwatch,
+  resolveTicketStatus,
+  getTicketStatusConfig,
+  getTicketStatusTag,
+  kindToCanonicalStatus,
+  usesCanonicalStatusStyle,
+  resolveStatusTagProps,
+  TicketStatusTag,
+  StatusLine,
+  CHAT_BLOCK_FRAME_CLASS,
+  CHAT_BLOCK_CLASS,
+  ExpandChevron,
+  useCollapsible,
+  COMMAND_BODY_ARG_KEYS,
+  getCommandText,
+  ArgRow,
+  ResultBlock,
+  CommandBlock,
+  ApprovalStatusTag,
+  ApprovalWaitingLine,
+  ApprovalBatchMessage
+};