@tanstack/ai-devtools-core 0.3.6 → 0.3.8

package/dist/Shell/MUFU35SY.js

@@ -0,0 +1,4242 @@
+import { createComponent, ssr, ssrAttribute, escape, ssrStyleProperty } from 'solid-js/web';
+import { createContext, createSignal, onMount, onCleanup, createEffect, For, Show, useContext, batch } from 'solid-js';
+import { MainPanel, Header, HeaderLogo, useTheme, JsonTree } from '@tanstack/devtools-ui';
+import * as goober from 'goober';
+import { createStore, produce } from 'solid-js/store';
+import { aiEventClient } from '@tanstack/ai/event-client';
+
+// src/components/Shell.tsx
+
+// src/styles/tokens.ts
+var tokens = {
+  colors: {
+    inherit: "inherit",
+    current: "currentColor",
+    transparent: "transparent",
+    black: "#000000",
+    white: "#ffffff",
+    neutral: {
+      50: "#f9fafb",
+      100: "#f2f4f7",
+      200: "#eaecf0",
+      300: "#d0d5dd",
+      400: "#98a2b3",
+      500: "#667085",
+      600: "#475467",
+      700: "#344054",
+      800: "#1d2939",
+      900: "#101828"
+    },
+    darkGray: {
+      50: "#525c7a",
+      100: "#49536e",
+      200: "#414962",
+      300: "#394056",
+      400: "#313749",
+      500: "#292e3d",
+      600: "#212530",
+      700: "#191c24",
+      800: "#111318",
+      900: "#0b0d10"
+    },
+    gray: {
+      50: "#f9fafb",
+      100: "#f2f4f7",
+      200: "#eaecf0",
+      300: "#d0d5dd",
+      400: "#98a2b3",
+      500: "#667085",
+      600: "#475467",
+      700: "#344054",
+      800: "#1d2939",
+      900: "#101828"
+    },
+    blue: {
+      25: "#F5FAFF",
+      50: "#EFF8FF",
+      100: "#D1E9FF",
+      200: "#B2DDFF",
+      300: "#84CAFF",
+      400: "#53B1FD",
+      500: "#2E90FA",
+      600: "#1570EF",
+      700: "#175CD3",
+      800: "#1849A9",
+      900: "#194185"
+    },
+    green: {
+      25: "#F6FEF9",
+      50: "#ECFDF3",
+      100: "#D1FADF",
+      200: "#A6F4C5",
+      300: "#6CE9A6",
+      400: "#32D583",
+      500: "#12B76A",
+      600: "#039855",
+      700: "#027A48",
+      800: "#05603A",
+      900: "#054F31"
+    },
+    red: {
+      50: "#fef2f2",
+      100: "#fee2e2",
+      200: "#fecaca",
+      300: "#fca5a5",
+      400: "#f87171",
+      500: "#ef4444",
+      600: "#dc2626",
+      700: "#b91c1c",
+      800: "#991b1b",
+      900: "#7f1d1d",
+      950: "#450a0a"
+    },
+    yellow: {
+      25: "#FFFCF5",
+      50: "#FFFAEB",
+      100: "#FEF0C7",
+      200: "#FEDF89",
+      300: "#FEC84B",
+      400: "#FDB022",
+      500: "#F79009",
+      600: "#DC6803",
+      700: "#B54708",
+      800: "#93370D",
+      900: "#7A2E0E"
+    },
+    purple: {
+      25: "#FAFAFF",
+      50: "#F4F3FF",
+      100: "#EBE9FE",
+      200: "#D9D6FE",
+      300: "#BDB4FE",
+      400: "#9B8AFB",
+      500: "#7A5AF8",
+      600: "#6938EF",
+      700: "#5925DC",
+      800: "#4A1FB8",
+      900: "#3E1C96"
+    },
+    teal: {
+      25: "#F6FEFC",
+      50: "#F0FDF9",
+      100: "#CCFBEF",
+      200: "#99F6E0",
+      300: "#5FE9D0",
+      400: "#2ED3B7",
+      500: "#15B79E",
+      600: "#0E9384",
+      700: "#107569",
+      800: "#125D56",
+      900: "#134E48"
+    },
+    pink: {
+      25: "#fdf2f8",
+      50: "#fce7f3",
+      100: "#fbcfe8",
+      200: "#f9a8d4",
+      300: "#f472b6",
+      400: "#ec4899",
+      500: "#db2777",
+      600: "#be185d",
+      700: "#9d174d",
+      800: "#831843",
+      900: "#500724"
+    },
+    cyan: {
+      25: "#ecfeff",
+      50: "#cffafe",
+      100: "#a5f3fc",
+      200: "#67e8f9",
+      300: "#22d3ee",
+      400: "#06b6d4",
+      500: "#0891b2",
+      600: "#0e7490",
+      700: "#155e75",
+      800: "#164e63",
+      900: "#083344"
+    }
+  },
+  alpha: {
+    100: "ff",
+    90: "e5",
+    80: "cc",
+    70: "b3",
+    60: "99",
+    50: "80",
+    40: "66",
+    30: "4d",
+    20: "33",
+    10: "1a",
+    0: "00"
+  },
+  font: {
+    size: {
+      "2xs": "calc(var(--tsrd-font-size) * 0.625)",
+      xs: "calc(var(--tsrd-font-size) * 0.75)",
+      sm: "calc(var(--tsrd-font-size) * 0.875)",
+      md: "var(--tsrd-font-size)",
+      lg: "calc(var(--tsrd-font-size) * 1.125)",
+      xl: "calc(var(--tsrd-font-size) * 1.25)",
+      "2xl": "calc(var(--tsrd-font-size) * 1.5)",
+      "3xl": "calc(var(--tsrd-font-size) * 1.875)",
+      "4xl": "calc(var(--tsrd-font-size) * 2.25)",
+      "5xl": "calc(var(--tsrd-font-size) * 3)",
+      "6xl": "calc(var(--tsrd-font-size) * 3.75)",
+      "7xl": "calc(var(--tsrd-font-size) * 4.5)",
+      "8xl": "calc(var(--tsrd-font-size) * 6)",
+      "9xl": "calc(var(--tsrd-font-size) * 8)"
+    },
+    lineHeight: {
+      "3xs": "calc(var(--tsrd-font-size) * 0.75)",
+      "2xs": "calc(var(--tsrd-font-size) * 0.875)",
+      xs: "calc(var(--tsrd-font-size) * 1)",
+      sm: "calc(var(--tsrd-font-size) * 1.25)",
+      md: "calc(var(--tsrd-font-size) * 1.5)",
+      lg: "calc(var(--tsrd-font-size) * 1.75)",
+      xl: "calc(var(--tsrd-font-size) * 2)",
+      "2xl": "calc(var(--tsrd-font-size) * 2.25)",
+      "3xl": "calc(var(--tsrd-font-size) * 2.5)",
+      "4xl": "calc(var(--tsrd-font-size) * 2.75)",
+      "5xl": "calc(var(--tsrd-font-size) * 3)",
+      "6xl": "calc(var(--tsrd-font-size) * 3.25)",
+      "7xl": "calc(var(--tsrd-font-size) * 3.5)",
+      "8xl": "calc(var(--tsrd-font-size) * 3.75)",
+      "9xl": "calc(var(--tsrd-font-size) * 4)"
+    },
+    weight: {
+      thin: "100",
+      extralight: "200",
+      light: "300",
+      normal: "400",
+      medium: "500",
+      semibold: "600",
+      bold: "700",
+      extrabold: "800",
+      black: "900"
+    },
+    fontFamily: {
+      sans: "ui-sans-serif, Inter, system-ui, sans-serif, sans-serif",
+      mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace`
+    }
+  },
+  breakpoints: {
+    xs: "320px",
+    sm: "640px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1280px",
+    "2xl": "1536px"
+  },
+  border: {
+    radius: {
+      none: "0px",
+      xs: "calc(var(--tsrd-font-size) * 0.125)",
+      sm: "calc(var(--tsrd-font-size) * 0.25)",
+      md: "calc(var(--tsrd-font-size) * 0.375)",
+      lg: "calc(var(--tsrd-font-size) * 0.5)",
+      xl: "calc(var(--tsrd-font-size) * 0.75)",
+      "2xl": "calc(var(--tsrd-font-size) * 1)",
+      "3xl": "calc(var(--tsrd-font-size) * 1.5)",
+      full: "9999px"
+    }
+  },
+  size: {
+    0: "0px",
+    0.25: "calc(var(--tsrd-font-size) * 0.0625)",
+    0.5: "calc(var(--tsrd-font-size) * 0.125)",
+    1: "calc(var(--tsrd-font-size) * 0.25)",
+    1.5: "calc(var(--tsrd-font-size) * 0.375)",
+    2: "calc(var(--tsrd-font-size) * 0.5)",
+    2.5: "calc(var(--tsrd-font-size) * 0.625)",
+    3: "calc(var(--tsrd-font-size) * 0.75)",
+    3.5: "calc(var(--tsrd-font-size) * 0.875)",
+    4: "calc(var(--tsrd-font-size) * 1)",
+    4.5: "calc(var(--tsrd-font-size) * 1.125)",
+    5: "calc(var(--tsrd-font-size) * 1.25)",
+    5.5: "calc(var(--tsrd-font-size) * 1.375)",
+    6: "calc(var(--tsrd-font-size) * 1.5)",
+    6.5: "calc(var(--tsrd-font-size) * 1.625)",
+    7: "calc(var(--tsrd-font-size) * 1.75)",
+    8: "calc(var(--tsrd-font-size) * 2)",
+    9: "calc(var(--tsrd-font-size) * 2.25)",
+    10: "calc(var(--tsrd-font-size) * 2.5)",
+    11: "calc(var(--tsrd-font-size) * 2.75)",
+    12: "calc(var(--tsrd-font-size) * 3)",
+    14: "calc(var(--tsrd-font-size) * 3.5)",
+    16: "calc(var(--tsrd-font-size) * 4)",
+    20: "calc(var(--tsrd-font-size) * 5)",
+    24: "calc(var(--tsrd-font-size) * 6)",
+    28: "calc(var(--tsrd-font-size) * 7)",
+    32: "calc(var(--tsrd-font-size) * 8)",
+    36: "calc(var(--tsrd-font-size) * 9)",
+    40: "calc(var(--tsrd-font-size) * 10)",
+    44: "calc(var(--tsrd-font-size) * 11)",
+    48: "calc(var(--tsrd-font-size) * 12)",
+    52: "calc(var(--tsrd-font-size) * 13)",
+    56: "calc(var(--tsrd-font-size) * 14)",
+    60: "calc(var(--tsrd-font-size) * 15)",
+    64: "calc(var(--tsrd-font-size) * 16)",
+    72: "calc(var(--tsrd-font-size) * 18)",
+    80: "calc(var(--tsrd-font-size) * 20)",
+    96: "calc(var(--tsrd-font-size) * 24)"
+  },
+  shadow: {
+    xs: (_ = "rgb(0 0 0 / 0.1)") => `0 1px 2px 0 rgb(0 0 0 / 0.05)`,
+    sm: (color = "rgb(0 0 0 / 0.1)") => `0 1px 3px 0 ${color}, 0 1px 2px -1px ${color}`,
+    md: (color = "rgb(0 0 0 / 0.1)") => `0 4px 6px -1px ${color}, 0 2px 4px -2px ${color}`,
+    lg: (color = "rgb(0 0 0 / 0.1)") => `0 10px 15px -3px ${color}, 0 4px 6px -4px ${color}`,
+    xl: (color = "rgb(0 0 0 / 0.1)") => `0 20px 25px -5px ${color}, 0 8px 10px -6px ${color}`,
+    "2xl": (color = "rgb(0 0 0 / 0.25)") => `0 25px 50px -12px ${color}`,
+    inner: (color = "rgb(0 0 0 / 0.05)") => `inset 0 2px 4px 0 ${color}`,
+    none: () => `none`
+  },
+  zIndices: {
+    hide: -1,
+    auto: "auto",
+    base: 0,
+    docked: 10,
+    dropdown: 1e3,
+    sticky: 1100,
+    banner: 1200,
+    overlay: 1300,
+    modal: 1400,
+    popover: 1500,
+    skipLink: 1600,
+    toast: 1700,
+    tooltip: 1800
+  }
+};
+
+// src/styles/use-styles.ts
+var stylesFactory = (theme) => {
+  const { colors, font, size, alpha, border } = tokens;
+  const { fontFamily, size: fontSize } = font;
+  const css2 = goober.css;
+  const t = (light, dark) => theme === "light" ? light : dark;
+  return {
+    mainContainer: css2`
+      display: flex;
+      flex: 1;
+      min-height: 80%;
+      overflow: hidden;
+      padding: ${size[2]};
+    `,
+    dragHandle: css2`
+      width: 8px;
+      background: ${t(colors.gray[300], colors.darkGray[600])};
+      cursor: col-resize;
+      position: relative;
+      transition: all 0.2s ease;
+      user-select: none;
+      pointer-events: all;
+      margin: 0 ${size[1]};
+      border-radius: 2px;
+
+      &:hover {
+        background: ${t(colors.blue[600], colors.blue[500])};
+        margin: 0 ${size[1]};
+      }
+
+      &.dragging {
+        background: ${t(colors.blue[700], colors.blue[600])};
+        margin: 0 ${size[1]};
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 2px;
+        height: 20px;
+        background: ${t(colors.gray[400], colors.darkGray[400])};
+        border-radius: 1px;
+        pointer-events: none;
+      }
+
+      &:hover::after,
+      &.dragging::after {
+        background: ${t(colors.blue[500], colors.blue[300])};
+      }
+    `,
+    leftPanel: css2`
+      background: ${t(colors.gray[100], colors.darkGray[800])};
+      border-radius: ${border.radius.lg};
+      border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      min-height: 0;
+      flex-shrink: 0;
+    `,
+    rightPanel: css2`
+      background: ${t(colors.gray[100], colors.darkGray[800])};
+      border-radius: ${border.radius.lg};
+      border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      min-height: 0;
+      flex: 1;
+    `,
+    panelHeader: css2`
+      font-size: ${fontSize.md};
+      font-weight: ${font.weight.bold};
+      color: ${t(colors.blue[700], colors.blue[400])};
+      padding: ${size[2]};
+      border-bottom: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
+      background: ${t(colors.gray[100], colors.darkGray[800])};
+      flex-shrink: 0;
+    `,
+    utilList: css2`
+      flex: 1;
+      overflow-y: auto;
+      padding: ${size[1]};
+      min-height: 0;
+    `,
+    utilGroup: css2`
+      margin-bottom: ${size[2]};
+    `,
+    utilGroupHeader: css2`
+      font-size: ${fontSize.xs};
+      font-weight: ${font.weight.semibold};
+      color: ${t(colors.gray[600], colors.gray[400])};
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      margin-bottom: ${size[1]};
+      padding: ${size[1]} ${size[2]};
+      background: ${t(colors.gray[200], colors.darkGray[700])};
+      border-radius: ${border.radius.md};
+    `,
+    utilRow: css2`
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: ${size[2]};
+      margin-bottom: ${size[1]};
+      background: ${t(colors.gray[200], colors.darkGray[700])};
+      border-radius: ${border.radius.md};
+      cursor: pointer;
+      transition: all 0.2s ease;
+      border: 1px solid transparent;
+
+      &:hover {
+        background: ${t(colors.gray[300], colors.darkGray[600])};
+        border-color: ${t(colors.gray[400], colors.darkGray[500])};
+      }
+    `,
+    utilRowSelected: css2`
+      background: ${t(colors.blue[100], colors.blue[900] + alpha[20])};
+      border-color: ${t(colors.blue[600], colors.blue[500])};
+      box-shadow: 0 0 0 1px
+        ${t(colors.blue[600] + alpha[30], colors.blue[500] + alpha[30])};
+    `,
+    utilKey: css2`
+      font-family: ${fontFamily.mono};
+      font-size: ${fontSize.xs};
+      color: ${t(colors.gray[900], colors.gray[100])};
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `,
+    utilStatus: css2`
+      font-size: ${fontSize.xs};
+      color: ${t(colors.gray[600], colors.gray[400])};
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      padding: ${size[1]} ${size[1]};
+      background: ${t(colors.gray[300], colors.darkGray[600])};
+      border-radius: ${border.radius.sm};
+      margin-left: ${size[1]};
+    `,
+    stateDetails: css2`
+      flex: 1;
+      overflow-y: auto;
+      padding: ${size[2]};
+      min-height: 0;
+    `,
+    stateHeader: css2`
+      margin-bottom: ${size[2]};
+      padding-bottom: ${size[2]};
+      border-bottom: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
+    `,
+    stateTitle: css2`
+      font-size: ${fontSize.md};
+      font-weight: ${font.weight.bold};
+      color: ${t(colors.blue[700], colors.blue[400])};
+      margin-bottom: ${size[1]};
+    `,
+    stateKey: css2`
+      font-family: ${fontFamily.mono};
+      font-size: ${fontSize.xs};
+      color: ${t(colors.gray[600], colors.gray[400])};
+      word-break: break-all;
+    `,
+    stateContent: css2`
+      background: ${t(colors.gray[100], colors.darkGray[700])};
+      border-radius: ${border.radius.md};
+      padding: ${size[2]};
+      border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};
+    `,
+    detailsGrid: css2`
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: ${size[2]};
+      align-items: start;
+    `,
+    detailSection: css2`
+      background: ${t(colors.white, colors.darkGray[700])};
+      border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};
+      border-radius: ${border.radius.md};
+      padding: ${size[2]};
+    `,
+    detailSectionHeader: css2`
+      font-size: ${fontSize.sm};
+      font-weight: ${font.weight.bold};
+      color: ${t(colors.gray[800], colors.gray[200])};
+      margin-bottom: ${size[1]};
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+    `,
+    actionsRow: css2`
+      display: flex;
+      flex-wrap: wrap;
+      gap: ${size[2]};
+    `,
+    actionButton: css2`
+      display: inline-flex;
+      align-items: center;
+      gap: ${size[1]};
+      padding: ${size[1]} ${size[2]};
+      border-radius: ${border.radius.md};
+      border: 1px solid ${t(colors.gray[300], colors.darkGray[500])};
+      background: ${t(colors.gray[200], colors.darkGray[600])};
+      color: ${t(colors.gray[900], colors.gray[100])};
+      font-size: ${fontSize.xs};
+      cursor: pointer;
+      user-select: none;
+      transition:
+        background 0.15s,
+        border-color 0.15s;
+      &:hover {
+        background: ${t(colors.gray[300], colors.darkGray[500])};
+        border-color: ${t(colors.gray[400], colors.darkGray[400])};
+      }
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+        &:hover {
+          background: ${t(colors.gray[200], colors.darkGray[600])};
+          border-color: ${t(colors.gray[300], colors.darkGray[500])};
+        }
+      }
+    `,
+    actionDotBlue: css2`
+      width: 6px;
+      height: 6px;
+      border-radius: 9999px;
+      background: ${colors.blue[400]};
+    `,
+    actionDotGreen: css2`
+      width: 6px;
+      height: 6px;
+      border-radius: 9999px;
+      background: ${colors.green[400]};
+    `,
+    actionDotRed: css2`
+      width: 6px;
+      height: 6px;
+      border-radius: 9999px;
+      background: ${colors.red[400]};
+    `,
+    actionDotYellow: css2`
+      width: 6px;
+      height: 6px;
+      border-radius: 9999px;
+      background: ${colors.yellow[400]};
+    `,
+    actionDotOrange: css2`
+      width: 6px;
+      height: 6px;
+      border-radius: 9999px;
+      background: ${colors.pink[400]};
+    `,
+    actionDotPurple: css2`
+      width: 6px;
+      height: 6px;
+      border-radius: 9999px;
+      background: ${colors.purple[400]};
+    `,
+    infoGrid: css2`
+      display: grid;
+      grid-template-columns: auto 1fr;
+      gap: ${size[1]};
+      row-gap: ${size[1]};
+      align-items: center;
+    `,
+    infoLabel: css2`
+      color: ${t(colors.gray[600], colors.gray[400])};
+      font-size: ${fontSize.xs};
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    `,
+    infoValueMono: css2`
+      font-family: ${fontFamily.mono};
+      font-size: ${fontSize.xs};
+      color: ${t(colors.gray[900], colors.gray[100])};
+      word-break: break-all;
+    `,
+    noSelection: css2`
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: ${t(colors.gray[500], colors.gray[500])};
+      font-style: italic;
+      text-align: center;
+      padding: ${size[4]};
+    `,
+    // Keep existing styles for backward compatibility
+    sectionContainer: css2`
+      display: flex;
+      flex-wrap: wrap;
+      gap: ${size[4]};
+    `,
+    section: css2`
+      background: ${t(colors.gray[100], colors.darkGray[800])};
+      border-radius: ${border.radius.lg};
+      box-shadow: ${tokens.shadow.md(
+      t(colors.gray[400] + alpha[80], colors.black + alpha[80])
+    )};
+      padding: ${size[4]};
+      margin-bottom: ${size[4]};
+      border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
+      min-width: 0;
+      max-width: 33%;
+      max-height: fit-content;
+    `,
+    sectionHeader: css2`
+      font-size: ${fontSize.lg};
+      font-weight: ${font.weight.bold};
+      margin-bottom: ${size[2]};
+      color: ${t(colors.blue[600], colors.blue[400])};
+      letter-spacing: 0.01em;
+      display: flex;
+      align-items: center;
+      gap: ${size[2]};
+    `,
+    sectionEmpty: css2`
+      color: ${t(colors.gray[500], colors.gray[500])};
+      font-size: ${fontSize.sm};
+      font-style: italic;
+      margin: ${size[2]} 0;
+    `,
+    instanceList: css2`
+      display: flex;
+      flex-direction: column;
+      gap: ${size[2]};
+      background: ${t(colors.gray[200], colors.darkGray[700])};
+      border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};
+    `,
+    instanceCard: css2`
+      background: ${t(colors.gray[200], colors.darkGray[700])};
+      border-radius: ${border.radius.md};
+      padding: ${size[3]};
+      border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};
+      font-size: ${fontSize.sm};
+      color: ${t(colors.gray[900], colors.gray[100])};
+      font-family: ${fontFamily.mono};
+      overflow-x: auto;
+      transition:
+        box-shadow 0.3s,
+        background 0.3s;
+    `,
+    // Shell component styles
+    shell: {
+      sectionHeader: css2`
+        padding: ${size[3]} ${size[4]};
+        font-size: ${fontSize.sm};
+        font-weight: ${font.weight.semibold};
+        color: ${t(colors.gray[100], colors.gray[200])};
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        text-align: center;
+        background: ${t(colors.gray[700], colors.darkGray[600])};
+        border-bottom: 1px solid ${t(colors.gray[600], colors.darkGray[500])};
+      `,
+      filterContainer: css2`
+        display: flex;
+        flex-direction: column;
+        gap: ${size[2]};
+        padding: ${size[3]};
+        border-bottom: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
+      `,
+      filterButtonsRow: css2`
+        display: flex;
+        gap: ${size[1.5]};
+        flex-wrap: wrap;
+      `,
+      filterButton: css2`
+        display: inline-flex;
+        align-items: center;
+        gap: ${size[1]};
+        padding: ${size[1]} ${size[2]};
+        border-radius: ${border.radius.md};
+        border: 1px solid ${t(colors.gray[300], colors.darkGray[500])};
+        background: ${t(colors.gray[200], colors.darkGray[600])};
+        color: ${t(colors.gray[900], colors.gray[100])};
+        font-size: ${fontSize.xs};
+        cursor: pointer;
+        user-select: none;
+        transition:
+          background 0.15s,
+          border-color 0.15s;
+        &:hover {
+          background: ${t(colors.gray[300], colors.darkGray[500])};
+          border-color: ${t(colors.gray[400], colors.darkGray[400])};
+        }
+      `,
+      filterButtonActive: css2`
+        background: ${colors.pink[400]};
+        color: ${colors.white};
+        border-color: ${colors.pink[400]};
+        &:hover {
+          background: ${colors.pink[500]};
+          border-color: ${colors.pink[500]};
+        }
+      `,
+      actionsRow: css2`
+        display: flex;
+        gap: ${size[1.5]};
+      `,
+      clearAllButton: css2`
+        flex: 1;
+        font-size: ${fontSize.xs};
+      `
+    },
+    // ConversationsList component styles
+    conversationsList: {
+      rowMain: css2`
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        flex: 1;
+        min-width: 0;
+      `,
+      rowTop: css2`
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: ${size[2]};
+      `,
+      rowRight: css2`
+        display: flex;
+        align-items: center;
+        gap: ${size[1]};
+        flex-shrink: 0;
+      `,
+      rowContent: css2`
+        display: flex;
+        align-items: center;
+        gap: ${size[2]};
+        flex: 1;
+      `,
+      rowInfo: css2`
+        display: flex;
+        align-items: center;
+        gap: ${size[1]};
+        min-width: 0;
+        flex: 1;
+      `,
+      typeDot: css2`
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+      `,
+      label: css2`
+        font-weight: ${font.weight.semibold};
+      `,
+      toolCallsBadge: css2`
+        display: flex;
+        align-items: center;
+        gap: 3px;
+        padding: 2px 6px;
+        border-radius: ${border.radius.sm};
+        background: oklch(0.35 0.1 280);
+        color: oklch(0.8 0.12 280);
+        font-size: ${fontSize.xs};
+        font-weight: ${font.weight.semibold};
+      `,
+      statusDot: css2`
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        margin-left: auto;
+      `,
+      stats: css2`
+        display: flex;
+        align-items: center;
+        gap: ${size[2]};
+        font-size: 10px;
+        opacity: 0.7;
+        flex-wrap: wrap;
+      `,
+      statItem: css2`
+        display: flex;
+        align-items: center;
+        gap: 2px;
+        white-space: nowrap;
+      `,
+      tokensBadge: css2`
+        display: flex;
+        align-items: center;
+        gap: 2px;
+        padding: 1px 5px;
+        border-radius: ${border.radius.sm};
+        background: oklch(0.35 0.08 220);
+        color: oklch(0.75 0.12 220);
+        font-size: 10px;
+        font-weight: ${font.weight.semibold};
+        white-space: nowrap;
+      `,
+      loadingIndicator: css2`
+        font-size: 12px;
+        color: oklch(0.7 0.17 142);
+        animation: spin 1s linear infinite;
+        @keyframes spin {
+          from {
+            transform: rotate(0deg);
+          }
+          to {
+            transform: rotate(360deg);
+          }
+        }
+      `
+    },
+    // ConversationDetails component styles
+    conversationDetails: {
+      emptyState: css2`
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        color: ${t(colors.gray[500], colors.gray[500])};
+        font-size: ${fontSize.sm};
+      `,
+      container: css2`
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      `,
+      headerContent: css2`
+        display: flex;
+        flex-direction: column;
+        gap: ${size[1]};
+      `,
+      headerRow: css2`
+        display: flex;
+        align-items: center;
+        gap: ${size[3]};
+      `,
+      headerLabel: css2`
+        font-weight: ${font.weight.semibold};
+        font-size: ${fontSize.sm};
+      `,
+      statusBadge: css2`
+        font-size: ${fontSize.xs};
+        padding: 2px ${size[2]};
+        border-radius: ${border.radius.sm};
+      `,
+      statusActive: css2`
+        background: ${colors.blue[500]}20;
+        color: ${colors.blue[500]};
+      `,
+      statusCompleted: css2`
+        background: ${colors.green[500]}20;
+        color: ${colors.green[500]};
+      `,
+      statusError: css2`
+        background: ${colors.red[500]}20;
+        color: ${colors.red[500]};
+      `,
+      metaInfo: css2`
+        font-size: ${fontSize.xs};
+        color: ${t(colors.gray[600], colors.gray[400])};
+      `,
+      usageInfo: css2`
+        font-size: ${fontSize.xs};
+        color: ${t(colors.gray[600], colors.gray[400])};
+        display: flex;
+        align-items: center;
+        gap: ${size[2]};
+      `,
+      usageLabel: css2`
+        font-weight: ${font.weight.semibold};
+        color: ${colors.blue[500]};
+      `,
+      usageBold: css2`
+        font-weight: ${font.weight.semibold};
+      `,
+      toolsRow: css2`
+        display: flex;
+        align-items: flex-start;
+        gap: ${size[2]};
+        margin-top: ${size[2]};
+      `,
+      toolsLabel: css2`
+        font-size: ${fontSize.sm};
+        flex-shrink: 0;
+      `,
+      optionsRow: css2`
+        display: flex;
+        align-items: flex-start;
+        gap: ${size[2]};
+        margin-top: ${size[1]};
+      `,
+      optionsLabel: css2`
+        font-size: ${fontSize.xs};
+        color: ${t(colors.gray[600], colors.gray[400])};
+        flex-shrink: 0;
+        white-space: nowrap;
+      `,
+      optionsCompact: css2`
+        display: flex;
+        flex-wrap: wrap;
+        gap: 4px;
+      `,
+      optionBadge: css2`
+        display: inline-flex;
+        align-items: center;
+        padding: 1px 6px;
+        background: ${t(colors.gray[200], colors.darkGray[700])};
+        color: ${t(colors.gray[700], colors.gray[300])};
+        border-radius: ${border.radius.sm};
+        font-size: 10px;
+        font-family: ${fontFamily.mono};
+        max-width: 200px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      `,
+      toggleButton: css2`
+        background: transparent;
+        border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};
+        color: ${t(colors.gray[600], colors.gray[400])};
+        padding: ${size[1]} ${size[2]};
+        border-radius: ${border.radius.sm};
+        font-size: ${fontSize.xs};
+        cursor: pointer;
+        transition: all 0.15s ease;
+        margin-top: ${size[2]};
+        &:hover {
+          background: ${t(colors.gray[100], colors.darkGray[700])};
+          color: ${t(colors.gray[700], colors.gray[300])};
+        }
+      `,
+      extendedInfo: css2`
+        margin-top: ${size[3]};
+        padding: ${size[3]};
+        background: ${t(colors.gray[50], colors.darkGray[800])};
+        border-radius: ${border.radius.md};
+        border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
+      `,
+      infoSection: css2`
+        margin-bottom: ${size[3]};
+        &:last-child {
+          margin-bottom: 0;
+        }
+      `,
+      infoLabel: css2`
+        font-weight: ${font.weight.semibold};
+        font-size: ${fontSize.xs};
+        color: ${t(colors.gray[700], colors.gray[300])};
+        display: block;
+        margin-bottom: ${size[1]};
+      `,
+      toolsList: css2`
+        display: flex;
+        flex-wrap: wrap;
+        gap: ${size[1]};
+      `,
+      toolBadge: css2`
+        display: inline-flex;
+        align-items: center;
+        padding: 2px ${size[2]};
+        background: ${colors.purple[500]}20;
+        color: ${colors.purple[400]};
+        border-radius: ${border.radius.sm};
+        font-size: ${fontSize.xs};
+        font-family: ${fontFamily.mono};
+      `,
+      jsonPreview: css2`
+        margin: 0;
+        padding: ${size[2]};
+        background: ${t(colors.gray[100], colors.darkGray[900])};
+        border-radius: ${border.radius.sm};
+        font-size: ${fontSize.xs};
+        font-family: ${fontFamily.mono};
+        overflow-x: auto;
+        max-height: 200px;
+        overflow-y: auto;
+        color: ${t(colors.gray[700], colors.gray[300])};
+        white-space: pre-wrap;
+        word-break: break-word;
+      `,
+      collapsibleSection: css2`
+        margin-top: ${size[2]};
+        border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
+        border-radius: ${border.radius.md};
+        overflow: hidden;
+      `,
+      collapsibleSummary: css2`
+        cursor: pointer;
+        padding: ${size[2]} ${size[3]};
+        background: ${t(colors.gray[100], colors.darkGray[800])};
+        font-size: ${fontSize.xs};
+        font-weight: ${font.weight.medium};
+        color: ${t(colors.gray[700], colors.gray[300])};
+        user-select: none;
+        &:hover {
+          background: ${t(colors.gray[200], colors.darkGray[700])};
+        }
+      `,
+      collapsibleContent: css2`
+        padding: ${size[3]};
+        background: ${t(colors.gray[50], colors.darkGray[900])};
+        font-size: ${fontSize.xs};
+        max-height: 300px;
+        overflow-y: auto;
+      `,
+      systemPromptItem: css2`
+        display: flex;
+        gap: ${size[2]};
+        padding: ${size[2]};
+        margin-bottom: ${size[2]};
+        background: ${t(colors.gray[100], colors.darkGray[800])};
+        border-radius: ${border.radius.sm};
+        &:last-child {
+          margin-bottom: 0;
+        }
+      `,
+      systemPromptIndex: css2`
+        font-weight: ${font.weight.semibold};
+        color: ${colors.purple[400]};
+        font-size: 10px;
+        flex-shrink: 0;
+      `,
+      systemPromptText: css2`
+        color: ${t(colors.gray[700], colors.gray[300])};
+        white-space: pre-wrap;
+        word-break: break-word;
+        line-height: 1.4;
+      `,
+      tabsContainer: css2`
+        display: flex;
+        gap: ${size[2]};
+        padding: ${size[3]};
+        border-bottom: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
+      `,
+      tabButtonActive: css2`
+        background: ${colors.pink[400]};
+        color: ${colors.white};
+        border-color: ${colors.pink[400]};
+      `,
+      tabButtonPulse: css2`
+        position: relative;
+        animation: activityPulse 1.4s ease-in-out infinite;
+        @keyframes activityPulse {
+          0% {
+            box-shadow: 0 0 0 0 ${colors.pink[400]}55;
+          }
+          70% {
+            box-shadow: 0 0 0 8px ${colors.pink[400]}00;
+          }
+          100% {
+            box-shadow: 0 0 0 0 ${colors.pink[400]}00;
+          }
+        }
+      `,
+      contentArea: css2`
+        flex: 1;
+        overflow: auto;
+        padding: ${size[3]};
+        padding-bottom: ${size[6]};
+      `,
+      emptyMessages: css2`
+        padding: ${size[6]};
+        color: ${t(colors.gray[500], colors.gray[500])};
+        font-size: ${fontSize.sm};
+        text-align: center;
+      `,
+      messagesList: css2`
+        display: flex;
+        flex-direction: column;
+        gap: ${size[3]};
+      `,
+      messageCard: css2`
+        border-radius: ${border.radius.lg};
+        overflow: hidden;
+      `,
+      messageCardUser: css2`
+        padding: ${size[3]};
+        border: 1.5px solid oklch(0.45 0.12 260);
+      `,
+      messageCardAssistant: css2`
+        padding: ${size[4]};
+        border: 1.5px solid oklch(0.45 0.12 142);
+      `,
+      messageCardClient: css2`
+        border: 2px solid oklch(0.45 0.15 142);
+      `,
+      messageCardServer: css2`
+        border: 2px solid oklch(0.45 0.12 45);
+      `,
+      messageHeader: css2`
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        margin-bottom: ${size[3]};
+      `,
+      avatarUser: css2`
+        width: 28px;
+        height: 28px;
+        border-radius: 50%;
+        background: oklch(0.5 0.2 260);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: ${font.weight.bold};
+        font-size: ${fontSize.sm};
+        color: ${colors.white};
+        flex-shrink: 0;
+      `,
+      avatarAssistant: css2`
+        width: 28px;
+        height: 28px;
+        border-radius: 50%;
+        background: oklch(0.5 0.2 142);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: ${font.weight.bold};
+        font-size: ${fontSize.sm};
+        color: ${colors.white};
+        flex-shrink: 0;
+      `,
+      avatarClient: css2`
+        width: 28px;
+        height: 28px;
+        border-radius: 50%;
+        background: oklch(0.5 0.22 142);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: ${font.weight.bold};
+        font-size: ${fontSize.sm};
+        color: ${colors.white};
+        flex-shrink: 0;
+      `,
+      avatarServer: css2`
+        width: 28px;
+        height: 28px;
+        border-radius: 50%;
+        background: oklch(0.55 0.18 45);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: ${font.weight.bold};
+        font-size: ${fontSize.sm};
+        color: ${colors.white};
+        flex-shrink: 0;
+      `,
+      roleLabel: css2`
+        flex: 1;
+      `,
+      roleLabelUser: css2`
+        font-weight: ${font.weight.semibold};
+        font-size: ${fontSize.sm};
+        color: oklch(0.7 0.15 260);
+        text-transform: capitalize;
+      `,
+      roleLabelAssistant: css2`
+        font-weight: ${font.weight.semibold};
+        font-size: ${fontSize.sm};
+        color: oklch(0.7 0.15 142);
+        text-transform: capitalize;
+      `,
+      roleLabelClient: css2`
+        font-weight: ${font.weight.semibold};
+        font-size: ${fontSize.sm};
+        color: oklch(0.75 0.18 142);
+        text-transform: capitalize;
+      `,
+      roleLabelServer: css2`
+        font-weight: ${font.weight.semibold};
+        font-size: ${fontSize.sm};
+        color: oklch(0.75 0.15 45);
+        text-transform: capitalize;
+      `,
+      sourceBanner: css2`
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 6px 12px;
+        font-size: 10px;
+        font-weight: ${font.weight.medium};
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+      `,
+      sourceBannerClient: css2`
+        background: oklch(0.25 0.04 142);
+        color: oklch(0.7 0.08 142);
+      `,
+      sourceBannerServer: css2`
+        background: oklch(0.25 0.04 45);
+        color: oklch(0.7 0.06 45);
+      `,
+      sourceBannerIcon: css2`
+        font-size: 14px;
+      `,
+      sourceBannerText: css2`
+        flex: 1;
+      `,
+      messageCardContent: css2`
+        padding: ${size[4]};
+        padding-top: ${size[3]};
+      `,
+      sourceBadge: css2`
+        font-size: 10px;
+        padding: 2px 6px;
+        border-radius: 4px;
+        font-family: ${fontFamily.mono};
+        font-weight: ${font.weight.medium};
+      `,
+      sourceBadgeClient: css2`
+        background: oklch(0.25 0.08 260);
+        color: oklch(0.75 0.12 260);
+      `,
+      sourceBadgeServer: css2`
+        background: oklch(0.25 0.08 45);
+        color: oklch(0.75 0.12 45);
+      `,
+      timestamp: css2`
+        font-size: 10px;
+        color: oklch(0.6 0.05 260);
+        font-family: ${fontFamily.mono};
+      `,
+      messageUsage: css2`
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        font-size: 10px;
+        font-family: ${fontFamily.mono};
+        color: oklch(0.65 0.12 142);
+        margin-left: auto;
+        padding: 2px 6px;
+        background: oklch(0.2 0.03 142);
+        border-radius: 4px;
+      `,
+      messageUsageIcon: css2`
+        font-size: 10px;
+      `,
+      thinkingDetails: css2`
+        margin-bottom: ${size[2]};
+        border: 1px solid oklch(0.35 0.1 280);
+        border-radius: 6px;
+        background: oklch(0.18 0.02 280);
+        overflow: hidden;
+      `,
+      thinkingSummary: css2`
+        padding: ${size[2]};
+        cursor: pointer;
+        font-size: ${fontSize.sm};
+        color: oklch(0.75 0.1 280);
+        font-weight: ${font.weight.semibold};
+        &:hover {
+          background: oklch(0.22 0.03 280);
+        }
+      `,
+      thinkingContent: css2`
+        padding: ${size[2]};
+        font-size: ${fontSize.xs};
+        line-height: 1.5;
+        white-space: pre-wrap;
+        word-break: break-word;
+        color: oklch(0.7 0.05 280);
+        font-family: ${fontFamily.mono};
+        border-top: 1px solid oklch(0.3 0.05 280);
+        max-height: 300px;
+        overflow-y: auto;
+      `,
+      messageContent: css2`
+        font-size: ${fontSize.sm};
+        line-height: 1.6;
+        white-space: pre-wrap;
+        word-break: break-word;
+        color: oklch(0.85 0.02 260);
+        font-family:
+          system-ui,
+          -apple-system,
+          sans-serif;
+      `,
+      toolCallsContainer: css2`
+        margin-top: ${size[3]};
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      `,
+      toolCall: css2`
+        border-radius: 8px;
+        font-size: ${fontSize.xs};
+        overflow: hidden;
+      `,
+      toolCallNormal: css2`
+        background: oklch(0.22 0.02 260);
+        border: 1px solid oklch(0.3 0.05 280);
+      `,
+      toolCallApproval: css2`
+        background: oklch(0.22 0.08 60);
+        border: 1px solid oklch(0.4 0.12 60);
+      `,
+      toolCallHeader: css2`
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 10px 12px;
+        cursor: pointer;
+        list-style: none;
+        &::-webkit-details-marker {
+          display: none;
+        }
+        &::before {
+          content: '▶';
+          font-size: 10px;
+          color: oklch(0.6 0.1 280);
+          transition: transform 0.2s ease;
+        }
+        details[open] > &::before {
+          transform: rotate(90deg);
+        }
+        &:hover {
+          background: oklch(0.25 0.04 280);
+        }
+      `,
+      toolCallContent: css2`
+        padding: ${size[2]} ${size[3]} ${size[3]};
+        border-top: 1px solid oklch(0.3 0.05 280);
+      `,
+      toolCallName: css2`
+        font-weight: ${font.weight.semibold};
+      `,
+      toolCallNameNormal: css2`
+        color: oklch(0.75 0.15 280);
+      `,
+      toolCallNameApproval: css2`
+        color: oklch(0.75 0.15 60);
+      `,
+      toolStateBadge: css2`
+        font-size: 10px;
+        padding: 2px 6px;
+        border-radius: 3px;
+      `,
+      toolStateBadgeNormal: css2`
+        background: oklch(0.35 0.1 280);
+        color: oklch(0.8 0.1 280);
+      `,
+      toolStateBadgeApproval: css2`
+        background: oklch(0.35 0.12 60);
+        color: oklch(0.85 0.1 60);
+      `,
+      approvalRequiredBadge: css2`
+        font-size: 10px;
+        padding: 2px 6px;
+        border-radius: 3px;
+        background: oklch(0.45 0.15 30);
+        color: oklch(0.95 0.05 60);
+        font-weight: ${font.weight.semibold};
+      `,
+      toolArguments: css2`
+        font-family: ${fontFamily.mono};
+        font-size: ${fontSize.xs};
+        color: oklch(0.7 0.05 260);
+        white-space: pre-wrap;
+        word-break: break-all;
+      `,
+      toolSection: css2`
+        margin-top: ${size[2]};
+        border-top: 1px solid oklch(0.28 0.03 260);
+        padding-top: ${size[2]};
+      `,
+      toolSectionLabel: css2`
+        font-size: 10px;
+        font-weight: ${font.weight.semibold};
+        color: oklch(0.6 0.08 260);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        margin-bottom: ${size[1]};
+      `,
+      toolJsonContainer: css2`
+        font-family: ${fontFamily.mono};
+        font-size: ${fontSize.xs};
+        color: oklch(0.8 0.05 260);
+        background: oklch(0.18 0.02 260);
+        border-radius: 4px;
+        padding: ${size[4]};
+        padding-left: ${size[8]};
+      `,
+      chunksDetails: css2`
+        margin-top: ${size[3]};
+      `,
+      chunksSummary: css2`
+        cursor: pointer;
+        font-size: ${fontSize.xs};
+        font-weight: ${font.weight.semibold};
+        color: oklch(0.65 0.08 260);
+        padding: ${size[2]};
+        background: oklch(0.2 0.02 260);
+        border-radius: 6px;
+        border: 1px solid oklch(0.28 0.03 260);
+        user-select: none;
+        list-style: none;
+        &::-webkit-details-marker {
+          display: none;
+        }
+        &::marker {
+          display: none;
+        }
+        details[open] > & .chunks-arrow {
+          transform: rotate(90deg);
+        }
+      `,
+      chunksSummaryRow: css2`
+        display: flex;
+        align-items: center;
+        gap: ${size[1]};
+      `,
+      chunksSummaryArrow: css2`
+        font-size: 8px;
+        transition: transform 0.15s ease;
+        color: oklch(0.5 0.05 260);
+        details[open] > summary > div > & {
+          transform: rotate(90deg);
+        }
+      `,
+      chunksSummaryTitle: css2`
+        margin-right: ${size[1]};
+      `,
+      chunksSummaryContent: css2`
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+      `,
+      chunksSummaryHeader: css2`
+        display: flex;
+        align-items: center;
+        gap: ${size[2]};
+      `,
+      chunkBadge: css2`
+        padding: 2px 6px;
+        border-radius: 3px;
+        font-size: 9px;
+      `,
+      chunkBadgeTool: css2`
+        background: oklch(0.3 0.1 280);
+        color: oklch(0.75 0.12 280);
+      `,
+      chunkBadgeError: css2`
+        background: oklch(0.3 0.15 25);
+        color: oklch(0.75 0.2 25);
+      `,
+      chunkBadgeSuccess: css2`
+        background: oklch(0.3 0.1 142);
+        color: oklch(0.75 0.15 142);
+      `,
+      chunkBadgeApproval: css2`
+        background: oklch(0.3 0.15 50);
+        color: oklch(0.75 0.2 50);
+      `,
+      chunkBadgeCount: css2`
+        background: oklch(0.3 0.08 260);
+        color: oklch(0.75 0.1 260);
+        font-weight: ${font.weight.semibold};
+      `,
+      contentPreview: css2`
+        font-family: ${fontFamily.mono};
+        font-size: 10px;
+        color: oklch(0.75 0.05 260);
+        white-space: pre-wrap;
+        word-break: break-word;
+        max-width: 100%;
+        font-weight: ${font.weight.normal};
+        margin-top: 2px;
+      `,
+      chunksContainer: css2`
+        margin-top: ${size[2]};
+        padding: ${size[2]};
+        background: oklch(0.18 0.02 260);
+        border-radius: 6px;
+        border: 1px solid oklch(0.25 0.03 260);
+      `,
+      chunksList: css2`
+        display: flex;
+        flex-direction: column;
+        gap: ${size[1]};
+      `,
+      chunkItem: css2`
+        padding: 6px ${size[2]};
+        border-radius: ${border.radius.sm};
+        background: oklch(0.22 0.02 260);
+        border: 1px solid oklch(0.28 0.03 260);
+        font-size: 10px;
+      `,
+      chunkItemLarge: css2`
+        padding: ${size[2]} 10px;
+        border-radius: 6px;
+        background: oklch(0.22 0.02 260);
+        border: 1px solid oklch(0.28 0.03 260);
+        font-size: ${fontSize.xs};
+      `,
+      chunkHeader: css2`
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        margin-bottom: ${size[1]};
+      `,
+      chunkHeaderLarge: css2`
+        display: flex;
+        align-items: center;
+        gap: ${size[2]};
+        margin-bottom: 6px;
+      `,
+      chunkNumber: css2`
+        font-size: 9px;
+        font-weight: ${font.weight.semibold};
+        color: oklch(0.6 0.05 260);
+        min-width: 24px;
+      `,
+      chunkNumberLarge: css2`
+        font-size: 10px;
+        font-weight: ${font.weight.semibold};
+        color: oklch(0.6 0.05 260);
+        min-width: 32px;
+      `,
+      chunkTypeBadge: css2`
+        display: flex;
+        align-items: center;
+        gap: 3px;
+      `,
+      chunkTypeBadgeLarge: css2`
+        display: flex;
+        align-items: center;
+        gap: ${size[1]};
+      `,
+      chunkTypeDot: css2`
+        width: 5px;
+        height: 5px;
+        border-radius: 50%;
+      `,
+      chunkTypeDotLarge: css2`
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+      `,
+      chunkTypeLabel: css2`
+        font-weight: ${font.weight.semibold};
+        color: oklch(0.7 0.08 260);
+      `,
+      chunkTypeLabelLarge: css2`
+        font-weight: ${font.weight.semibold};
+        color: oklch(0.75 0.08 260);
+      `,
+      chunkToolBadge: css2`
+        padding: 1px ${size[1]};
+        border-radius: 3px;
+        background: oklch(0.3 0.1 280);
+        color: oklch(0.75 0.12 280);
+        font-size: 9px;
+        font-weight: ${font.weight.semibold};
+      `,
+      chunkToolBadgeLarge: css2`
+        padding: 2px 6px;
+        border-radius: 3px;
+        background: oklch(0.3 0.1 280);
+        color: oklch(0.75 0.12 280);
+        font-size: 10px;
+        font-weight: ${font.weight.semibold};
+      `,
+      chunkTimestamp: css2`
+        margin-left: auto;
+        color: ${t(colors.gray[500], colors.gray[500])};
+        font-size: 9px;
+      `,
+      chunkTimestampLarge: css2`
+        margin-left: auto;
+        color: ${t(colors.gray[500], colors.gray[500])};
+        font-size: 10px;
+      `,
+      rawJsonButton: css2`
+        padding: 1px ${size[1]};
+        border-radius: 2px;
+        border: 1px solid oklch(0.32 0.05 260);
+        color: oklch(0.7 0.08 260);
+        font-size: 8px;
+        cursor: pointer;
+        font-family: ${fontFamily.mono};
+        font-weight: ${font.weight.semibold};
+      `,
+      rawJsonButtonInactive: css2`
+        background: oklch(0.28 0.03 260);
+      `,
+      rawJsonButtonActive: css2`
+        background: oklch(0.35 0.1 260);
+      `,
+      rawJsonButtonLarge: css2`
+        padding: 2px 6px;
+        border-radius: 3px;
+        border: 1px solid oklch(0.32 0.05 260);
+        color: oklch(0.7 0.08 260);
+        font-size: 10px;
+        cursor: pointer;
+        font-family: ${fontFamily.mono};
+        font-weight: ${font.weight.semibold};
+      `,
+      chunkContent: css2`
+        font-family: ${fontFamily.mono};
+        white-space: pre-wrap;
+        word-break: break-word;
+        padding: ${size[1]} 6px;
+        background: oklch(0.2 0.01 260);
+        border-radius: 3px;
+        color: oklch(0.8 0.05 260);
+        font-size: 10px;
+      `,
+      chunkContentLarge: css2`
+        font-family: ${fontFamily.mono};
+        white-space: pre-wrap;
+        word-break: break-word;
+        padding: 6px ${size[2]};
+        background: oklch(0.2 0.01 260);
+        border-radius: ${border.radius.sm};
+        color: oklch(0.8 0.05 260);
+        font-size: ${fontSize.xs};
+      `,
+      chunkError: css2`
+        color: oklch(0.65 0.2 25);
+        font-family: ${fontFamily.mono};
+        padding: ${size[1]} 6px;
+        background: oklch(0.2 0.05 25);
+        border-radius: 3px;
+      `,
+      chunkErrorLarge: css2`
+        color: oklch(0.65 0.2 25);
+        font-family: ${fontFamily.mono};
+        padding: 6px ${size[2]};
+        background: oklch(0.2 0.05 25);
+        border-radius: ${border.radius.sm};
+      `,
+      chunkFinish: css2`
+        color: oklch(0.7 0.12 142);
+        padding: ${size[1]} 6px;
+        background: oklch(0.2 0.03 142);
+        border-radius: 3px;
+        font-weight: ${font.weight.semibold};
+      `,
+      chunkFinishLarge: css2`
+        color: oklch(0.7 0.12 142);
+        padding: 6px ${size[2]};
+        background: oklch(0.2 0.03 142);
+        border-radius: ${border.radius.sm};
+        font-weight: ${font.weight.semibold};
+      `,
+      chunkApproval: css2`
+        padding: 6px ${size[2]};
+        background: oklch(0.25 0.12 50);
+        border-radius: ${border.radius.sm};
+        border: 1px solid oklch(0.35 0.15 50);
+      `,
+      chunkApprovalLarge: css2`
+        padding: ${size[2]};
+        background: oklch(0.25 0.12 50);
+        border-radius: 6px;
+        border: 1px solid oklch(0.35 0.15 50);
+      `,
+      chunkApprovalTitle: css2`
+        color: oklch(0.75 0.15 50);
+        font-weight: ${font.weight.semibold};
+        margin-bottom: ${size[1]};
+        font-size: 10px;
+      `,
+      chunkApprovalTitleLarge: css2`
+        color: oklch(0.75 0.15 50);
+        font-weight: ${font.weight.semibold};
+        margin-bottom: 6px;
+        font-size: ${fontSize.xs};
+      `,
+      chunkApprovalInput: css2`
+        font-family: ${fontFamily.mono};
+        font-size: 9px;
+        color: oklch(0.7 0.08 50);
+        white-space: pre-wrap;
+        word-break: break-word;
+      `,
+      chunkApprovalInputLarge: css2`
+        font-family: ${fontFamily.mono};
+        font-size: 10px;
+        color: oklch(0.7 0.08 50);
+        white-space: pre-wrap;
+        word-break: break-word;
+      `,
+      chunkToolCall: css2`
+        padding: ${size[2]} ${size[3]};
+        background: oklch(0.22 0.08 280);
+        border-radius: ${border.radius.sm};
+        border: 1px solid oklch(0.32 0.1 280);
+        margin-top: ${size[1]};
+      `,
+      chunkToolCallHeader: css2`
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: ${size[2]};
+      `,
+      chunkToolCallTitle: css2`
+        color: oklch(0.75 0.12 280);
+        font-weight: ${font.weight.semibold};
+        font-size: 10px;
+      `,
+      chunkToolResult: css2`
+        padding: ${size[2]} ${size[3]};
+        background: oklch(0.22 0.08 160);
+        border-radius: ${border.radius.sm};
+        border: 1px solid oklch(0.32 0.1 160);
+        margin-top: ${size[1]};
+      `,
+      chunkToolResultHeader: css2`
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: ${size[2]};
+      `,
+      chunkToolResultTitle: css2`
+        color: oklch(0.75 0.12 160);
+        font-weight: ${font.weight.semibold};
+        font-size: 10px;
+      `,
+      rawJson: css2`
+        font-family: ${fontFamily.mono};
+        white-space: pre-wrap;
+        word-break: break-word;
+        padding: 6px;
+        background: oklch(0.16 0.01 260);
+        border-radius: 3px;
+        color: oklch(0.75 0.08 260);
+        font-size: 9px;
+        max-height: 200px;
+        overflow-y: auto;
+      `,
+      rawJsonLarge: css2`
+        font-family: ${fontFamily.mono};
+        white-space: pre-wrap;
+        word-break: break-word;
+        padding: ${size[2]};
+        background: oklch(0.16 0.01 260);
+        border-radius: ${border.radius.sm};
+        color: oklch(0.75 0.08 260);
+        font-size: 10px;
+        max-height: 300px;
+        overflow-y: auto;
+      `,
+      noChunks: css2`
+        padding: ${size[3]};
+        color: ${t(colors.gray[500], colors.gray[500])};
+        font-size: ${fontSize.xs};
+      `,
+      streamContainer: css2`
+        padding: ${size[3]};
+        background: oklch(0.18 0.02 260);
+        border-radius: ${border.radius.lg};
+        border: 1px solid oklch(0.25 0.03 260);
+      `,
+      streamHeader: css2`
+        margin-bottom: ${size[3]};
+        padding-bottom: ${size[2]};
+        border-bottom: 1px solid oklch(0.25 0.03 260);
+      `,
+      streamHeaderRow: css2`
+        display: flex;
+        align-items: center;
+        gap: ${size[2]};
+        margin-bottom: ${size[1]};
+      `,
+      streamTitle: css2`
+        font-weight: ${font.weight.semibold};
+        font-size: ${fontSize.sm};
+        color: oklch(0.8 0.05 260);
+      `,
+      streamSubtitle: css2`
+        font-size: ${fontSize.xs};
+        color: ${t(colors.gray[500], colors.gray[500])};
+      `,
+      messageGroups: css2`
+        display: flex;
+        flex-direction: column;
+        gap: ${size[2]};
+      `,
+      messageGroupDetails: css2`
+        margin-bottom: ${size[1]};
+      `,
+      messageGroupSummary: css2`
+        cursor: pointer;
+        font-size: ${fontSize.xs};
+        font-weight: ${font.weight.semibold};
+        color: oklch(0.65 0.08 260);
+        padding: 10px;
+        background: oklch(0.2 0.02 260);
+        border-radius: 6px;
+        border: 1px solid oklch(0.28 0.03 260);
+        user-select: none;
+      `,
+      messageGroupContent: css2`
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+      `,
+      messageGroupHeader: css2`
+        display: flex;
+        align-items: center;
+        gap: ${size[2]};
+      `,
+      messageId: css2`
+        font-family: ${fontFamily.mono};
+        font-size: 9px;
+        color: oklch(0.6 0.05 260);
+        font-weight: ${font.weight.normal};
+      `,
+      // Embedding and Summarize operation styles
+      operationCard: css2`
+        padding: ${size[4]};
+        border-radius: ${border.radius.lg};
+        background: linear-gradient(
+          135deg,
+          oklch(0.25 0.04 200) 0%,
+          oklch(0.22 0.03 200) 100%
+        );
+        border: 1.5px solid oklch(0.5 0.15 200);
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+      `,
+      operationHeader: css2`
+        display: flex;
+        align-items: center;
+        gap: ${size[2]};
+        margin-bottom: ${size[3]};
+      `,
+      operationIcon: css2`
+        font-size: ${fontSize.lg};
+      `,
+      operationTitle: css2`
+        font-weight: ${font.weight.semibold};
+        font-size: ${fontSize.sm};
+        color: oklch(0.85 0.1 200);
+        flex: 1;
+      `,
+      operationStatus: css2`
+        font-size: ${fontSize.xs};
+        padding: 2px ${size[2]};
+        border-radius: ${border.radius.sm};
+      `,
+      operationStatusCompleted: css2`
+        background: ${colors.green[500]}20;
+        color: ${colors.green[400]};
+      `,
+      operationStatusPending: css2`
+        background: ${colors.yellow[500]}20;
+        color: ${colors.yellow[400]};
+      `,
+      durationBadge: css2`
+        font-size: ${fontSize.xs};
+        padding: 2px ${size[2]};
+        border-radius: ${border.radius.sm};
+        background: oklch(0.3 0.1 280);
+        color: oklch(0.8 0.1 280);
+        font-family: ${fontFamily.mono};
+      `,
+      operationDetails: css2`
+        display: flex;
+        flex-direction: column;
+        gap: ${size[2]};
+      `,
+      operationDetail: css2`
+        display: flex;
+        align-items: center;
+        gap: ${size[2]};
+        font-size: ${fontSize.xs};
+      `,
+      operationLabel: css2`
+        color: oklch(0.65 0.08 200);
+        font-weight: ${font.weight.semibold};
+        min-width: 70px;
+      `,
+      operationValue: css2`
+        color: oklch(0.8 0.05 200);
+        font-family: ${fontFamily.mono};
+      `,
+      // Iteration badge
+      iterationBadge: css2`
+        font-size: ${fontSize.xs};
+        padding: 2px ${size[2]};
+        border-radius: ${border.radius.sm};
+        background: ${colors.purple[500]}20;
+        color: ${colors.purple[400]};
+        font-weight: ${font.weight.semibold};
+      `
+    }
+  };
+};
+function useStyles() {
+  const { theme } = useTheme();
+  const [styles, setStyles] = createSignal(stylesFactory(theme()));
+  createEffect(() => {
+    setStyles(stylesFactory(theme()));
+  });
+  return styles;
+}
+var AIContext = createContext();
+function useAIStore() {
+  const context = useContext(AIContext);
+  if (!context) {
+    throw new Error("useAIStore must be used within an AIProvider");
+  }
+  return context;
+}
+var AIProvider = (props) => {
+  const [state, setState] = createStore({
+    conversations: {},
+    activeConversationId: null
+  });
+  const streamToConversation = /* @__PURE__ */ new Map();
+  const requestToConversation = /* @__PURE__ */ new Map();
+  const pendingConversationChunks = /* @__PURE__ */ new Map();
+  const pendingMessageChunks = /* @__PURE__ */ new Map();
+  let batchScheduled = false;
+  function scheduleBatchFlush() {
+    if (batchScheduled) return;
+    batchScheduled = true;
+    queueMicrotask(flushPendingChunks);
+  }
+  function isMergeableChunkType(type) {
+    return type === "content" || type === "thinking";
+  }
+  function mergeChunks(existing, pending) {
+    for (const chunk of pending) {
+      const lastChunk = existing[existing.length - 1];
+      if (lastChunk && lastChunk.type === chunk.type && isMergeableChunkType(chunk.type) && lastChunk.messageId === chunk.messageId) {
+        lastChunk.content = chunk.content || lastChunk.content;
+        lastChunk.delta = chunk.delta;
+        lastChunk.chunkCount += chunk.chunkCount;
+      } else {
+        existing.push(chunk);
+      }
+    }
+  }
+  function flushPendingChunks() {
+    batchScheduled = false;
+    batch(() => {
+      for (const [conversationId, {
+        chunks,
+        newChunkCount
+      }] of pendingConversationChunks) {
+        const conv = state.conversations[conversationId];
+        if (conv) {
+          setState("conversations", conversationId, "chunks", produce((arr) => {
+            mergeChunks(arr, chunks);
+          }));
+        }
+      }
+      pendingConversationChunks.clear();
+      for (const [conversationId, messageMap] of pendingMessageChunks) {
+        const conv = state.conversations[conversationId];
+        if (!conv) continue;
+        for (const [messageIndex, {
+          chunks,
+          newChunkCount
+        }] of messageMap) {
+          const message = conv.messages[messageIndex];
+          if (message) {
+            setState("conversations", conversationId, "messages", messageIndex, "chunks", produce((arr) => {
+              if (!arr) {
+                return chunks;
+              }
+              mergeChunks(arr, chunks);
+              return arr;
+            }));
+            const currentTotal = message.totalChunkCount || 0;
+            setState("conversations", conversationId, "messages", messageIndex, "totalChunkCount", currentTotal + newChunkCount);
+          }
+        }
+      }
+      pendingMessageChunks.clear();
+    });
+  }
+  function queueChunk(conversationId, chunk) {
+    if (!pendingConversationChunks.has(conversationId)) {
+      pendingConversationChunks.set(conversationId, {
+        chunks: [],
+        newChunkCount: 0
+      });
+    }
+    const pending = pendingConversationChunks.get(conversationId);
+    const lastPending = pending.chunks[pending.chunks.length - 1];
+    if (lastPending && lastPending.type === chunk.type && isMergeableChunkType(chunk.type) && lastPending.messageId === chunk.messageId) {
+      lastPending.content = chunk.content || lastPending.content;
+      lastPending.delta = chunk.delta;
+      lastPending.chunkCount += chunk.chunkCount;
+    } else {
+      pending.chunks.push(chunk);
+    }
+    pending.newChunkCount += chunk.chunkCount;
+    scheduleBatchFlush();
+  }
+  function queueMessageChunk(conversationId, messageIndex, chunk) {
+    if (!pendingMessageChunks.has(conversationId)) {
+      pendingMessageChunks.set(conversationId, /* @__PURE__ */ new Map());
+    }
+    const messageMap = pendingMessageChunks.get(conversationId);
+    if (!messageMap.has(messageIndex)) {
+      messageMap.set(messageIndex, {
+        chunks: [],
+        newChunkCount: 0
+      });
+    }
+    const pending = messageMap.get(messageIndex);
+    const lastPending = pending.chunks[pending.chunks.length - 1];
+    if (lastPending && lastPending.type === chunk.type && isMergeableChunkType(chunk.type) && lastPending.messageId === chunk.messageId) {
+      lastPending.content = chunk.content || lastPending.content;
+      lastPending.delta = chunk.delta;
+      lastPending.chunkCount += chunk.chunkCount;
+    } else {
+      pending.chunks.push(chunk);
+    }
+    pending.newChunkCount += chunk.chunkCount;
+    scheduleBatchFlush();
+  }
+  function getOrCreateConversation(id, type, label) {
+    if (!state.conversations[id]) {
+      setState("conversations", id, {
+        id,
+        type,
+        label,
+        messages: [],
+        chunks: [],
+        imageEvents: [],
+        speechEvents: [],
+        transcriptionEvents: [],
+        videoEvents: [],
+        status: "active",
+        startedAt: Date.now()
+      });
+      if (!state.activeConversationId) {
+        setState("activeConversationId", id);
+      }
+    }
+  }
+  function addMessage(conversationId, message) {
+    const conv = state.conversations[conversationId];
+    if (!conv) return;
+    setState("conversations", conversationId, "messages", conv.messages.length, message);
+  }
+  function addChunkToMessage(conversationId, chunk) {
+    const conv = state.conversations[conversationId];
+    if (!conv) return;
+    if (chunk.messageId) {
+      const messageIndex = conv.messages.findIndex((msg) => msg.id === chunk.messageId);
+      if (messageIndex !== -1) {
+        queueMessageChunk(conversationId, messageIndex, chunk);
+        return;
+      } else {
+        const newMessage = {
+          id: chunk.messageId,
+          role: "assistant",
+          content: "",
+          timestamp: chunk.timestamp,
+          model: conv.model,
+          chunks: [chunk]
+        };
+        setState("conversations", conversationId, "messages", conv.messages.length, newMessage);
+        return;
+      }
+    }
+    for (let i = conv.messages.length - 1; i >= 0; i--) {
+      const message = conv.messages[i];
+      if (message && message.role === "assistant") {
+        queueMessageChunk(conversationId, i, chunk);
+        return;
+      }
+    }
+    addChunk(conversationId, chunk);
+  }
+  function updateMessageUsage(conversationId, messageId, cumulativeUsage) {
+    const conv = state.conversations[conversationId];
+    if (!conv) return;
+    let previousPromptTokens = 0;
+    let previousCompletionTokens = 0;
+    let targetMessageIndex = -1;
+    if (messageId) {
+      targetMessageIndex = conv.messages.findIndex((msg) => msg.id === messageId);
+    } else {
+      for (let i = conv.messages.length - 1; i >= 0; i--) {
+        if (conv.messages[i]?.role === "assistant") {
+          targetMessageIndex = i;
+          break;
+        }
+      }
+    }
+    if (targetMessageIndex === -1) return;
+    for (let i = 0; i < targetMessageIndex; i++) {
+      const msg = conv.messages[i];
+      if (msg?.role === "assistant" && msg.usage) {
+        previousPromptTokens += msg.usage.promptTokens;
+        previousCompletionTokens += msg.usage.completionTokens;
+      }
+    }
+    const deltaUsage = {
+      promptTokens: Math.max(0, cumulativeUsage.promptTokens - previousPromptTokens),
+      completionTokens: Math.max(0, cumulativeUsage.completionTokens - previousCompletionTokens),
+      totalTokens: 0
+    };
+    deltaUsage.totalTokens = deltaUsage.promptTokens + deltaUsage.completionTokens;
+    setState("conversations", conversationId, "messages", targetMessageIndex, "usage", deltaUsage);
+  }
+  function clearAllConversations() {
+    setState("conversations", {});
+    setState("activeConversationId", null);
+    streamToConversation.clear();
+    requestToConversation.clear();
+    pendingConversationChunks.clear();
+    pendingMessageChunks.clear();
+  }
+  function selectConversation(id) {
+    setState("activeConversationId", id);
+  }
+  function updateConversation(conversationId, updates) {
+    if (!state.conversations[conversationId]) return;
+    for (const [key, value] of Object.entries(updates)) {
+      setState("conversations", conversationId, key, value);
+    }
+  }
+  function updateMessage(conversationId, messageIndex, updates) {
+    const conv = state.conversations[conversationId];
+    if (!conv || !conv.messages[messageIndex]) return;
+    for (const [key, value] of Object.entries(updates)) {
+      setState("conversations", conversationId, "messages", messageIndex, key, value);
+    }
+  }
+  function updateToolCall(conversationId, messageIndex, toolCallIndex, updates) {
+    const conv = state.conversations[conversationId];
+    if (!conv?.messages[messageIndex]?.toolCalls?.[toolCallIndex]) return;
+    setState("conversations", conversationId, "messages", messageIndex, "toolCalls", toolCallIndex, produce((tc) => Object.assign(tc, updates)));
+  }
+  function setToolCalls(conversationId, messageIndex, toolCalls) {
+    if (!state.conversations[conversationId]?.messages[messageIndex]) return;
+    setState("conversations", conversationId, "messages", messageIndex, "toolCalls", toolCalls);
+  }
+  function addChunk(conversationId, chunk) {
+    if (!state.conversations[conversationId]) return;
+    queueChunk(conversationId, chunk);
+  }
+  function addActivityEvent(conversationId, activity, event) {
+    if (!state.conversations[conversationId]) return;
+    setState("conversations", conversationId, activity, produce((events) => {
+      if (!events) return [event];
+      events.push(event);
+      return events;
+    }));
+    const activityFlagMap = {
+      imageEvents: "hasImage",
+      speechEvents: "hasSpeech",
+      transcriptionEvents: "hasTranscription",
+      videoEvents: "hasVideo"
+    };
+    setState("conversations", conversationId, activityFlagMap[activity], true);
+  }
+  function ensureMessageForChunk(conversationId, messageId, timestamp) {
+    if (!messageId) return;
+    const conv = state.conversations[conversationId];
+    if (!conv || conv.type === "client") return;
+    const existingMessage = conv.messages.find((m) => m.id === messageId);
+    if (existingMessage) return;
+    addMessage(conversationId, {
+      id: messageId,
+      role: "assistant",
+      content: "",
+      timestamp,
+      source: "server"
+    });
+  }
+  onMount(() => {
+    const cleanupFns = [];
+    cleanupFns.push(aiEventClient.on("client:created", (e) => {
+      const clientId = e.payload.clientId;
+      getOrCreateConversation(clientId, "client", `Client Chat (${clientId.substring(0, 8)})`);
+      updateConversation(clientId, {
+        model: void 0,
+        provider: "Client"
+      });
+    }));
+    cleanupFns.push(aiEventClient.on("text:message:created", (e) => {
+      const {
+        clientId,
+        streamId,
+        messageId,
+        role,
+        content,
+        timestamp
+      } = e.payload;
+      const conversationId = clientId || (streamId ? streamToConversation.get(streamId) : void 0);
+      if (!conversationId) return;
+      if (role === "tool" || role === "system") return;
+      if (!state.conversations[conversationId]) {
+        getOrCreateConversation(conversationId, clientId ? "client" : "server", clientId ? `Client Chat (${conversationId.substring(0, 8)})` : `Server Chat (${conversationId.substring(0, 8)})`);
+      }
+      const conv = state.conversations[conversationId];
+      if (!conv) return;
+      const existingIndex = conv.messages.findIndex((message) => message.id === messageId);
+      const parts = e.payload.parts?.map((part) => {
+        if (part.type === "text") {
+          return {
+            type: "text",
+            content: part.content
+          };
+        }
+        if (part.type === "tool-call") {
+          return {
+            type: "tool-call",
+            toolCallId: part.id,
+            toolName: part.name,
+            arguments: part.arguments,
+            state: part.state,
+            output: part.output,
+            content: part.approval ? JSON.stringify(part.approval) : void 0
+          };
+        }
+        if (part.type === "tool-result") {
+          return {
+            type: "tool-result",
+            toolCallId: part.toolCallId,
+            content: part.content,
+            state: part.state,
+            error: part.error
+          };
+        }
+        if (part.type === "thinking") {
+          return {
+            type: "thinking",
+            content: part.content
+          };
+        }
+        if (part.type === "image" || part.type === "audio" || part.type === "video" || // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        part.type === "document") {
+          return {
+            type: part.type,
+            source: part.source,
+            metadata: part.metadata
+          };
+        }
+        return null;
+      }).filter((part) => part !== null);
+      const toolCalls = e.payload.toolCalls?.map((toolCall) => ({
+        id: toolCall.id,
+        name: toolCall.function.name,
+        arguments: toolCall.function.arguments,
+        state: "input-complete"
+      }));
+      const source = e.payload.source ?? (clientId ? "client" : "server");
+      if (role === "user" && conv.type === "client" && source === "server") {
+        return;
+      }
+      if (role === "assistant" && source === "client" && !content && (!toolCalls || toolCalls.length === 0)) {
+        return;
+      }
+      const messagePayload = {
+        id: messageId,
+        role,
+        content,
+        timestamp,
+        parts,
+        toolCalls,
+        source
+      };
+      if (existingIndex >= 0) {
+        updateMessage(conversationId, existingIndex, messagePayload);
+      } else {
+        addMessage(conversationId, messagePayload);
+      }
+      updateConversation(conversationId, {
+        status: "active",
+        hasChat: true
+      });
+    }));
+    cleanupFns.push(aiEventClient.on("text:message:user", (e) => {
+      const {
+        clientId,
+        streamId,
+        messageId,
+        content,
+        timestamp
+      } = e.payload;
+      const conversationId = clientId || (streamId ? streamToConversation.get(streamId) : void 0);
+      if (!conversationId) return;
+      const conv = state.conversations[conversationId];
+      if (!conv) return;
+      const existingIndex = conv.messages.findIndex((message) => message.id === messageId);
+      if (existingIndex >= 0) return;
+      const source = e.payload.source ?? (clientId ? "client" : "server");
+      if (conv.type === "client" && source === "server") {
+        return;
+      }
+      addMessage(conversationId, {
+        id: messageId,
+        role: "user",
+        content,
+        timestamp,
+        source
+      });
+    }));
+    cleanupFns.push(aiEventClient.on("client:loading:changed", (e) => {
+      const clientId = e.payload.clientId;
+      if (state.conversations[clientId]) {
+        updateConversation(clientId, {
+          status: e.payload.isLoading ? "active" : "completed"
+        });
+      }
+    }));
+    cleanupFns.push(aiEventClient.on("client:stopped", (e) => {
+      const clientId = e.payload.clientId;
+      if (state.conversations[clientId]) {
+        updateConversation(clientId, {
+          status: "completed",
+          completedAt: e.payload.timestamp
+        });
+      }
+    }));
+    cleanupFns.push(aiEventClient.on("client:messages:cleared", (e) => {
+      const clientId = e.payload.clientId;
+      if (state.conversations[clientId]) {
+        updateConversation(clientId, {
+          messages: [],
+          chunks: [],
+          usage: void 0
+        });
+      }
+    }));
+    cleanupFns.push(aiEventClient.on("client:reloaded", (e) => {
+      const clientId = e.payload.clientId;
+      const conv = state.conversations[clientId];
+      if (conv) {
+        updateConversation(clientId, {
+          messages: conv.messages.slice(0, e.payload.fromMessageIndex),
+          status: "active"
+        });
+      }
+    }));
+    cleanupFns.push(aiEventClient.on("client:error:changed", (e) => {
+      const clientId = e.payload.clientId;
+      if (state.conversations[clientId] && e.payload.error) {
+        updateConversation(clientId, {
+          status: "error"
+        });
+      }
+    }));
+    cleanupFns.push(aiEventClient.on("tools:result:added", (e) => {
+      const {
+        clientId,
+        toolCallId,
+        toolName,
+        output,
+        state: resultState,
+        timestamp
+      } = e.payload;
+      if (!clientId) return;
+      if (!state.conversations[clientId]) return;
+      const conv = state.conversations[clientId];
+      const chunk = {
+        id: `chunk-tool-result-${toolCallId}-${Date.now()}`,
+        type: "tool_result",
+        toolCallId,
+        toolName,
+        result: output,
+        timestamp,
+        chunkCount: 1,
+        isClientTool: true
+      };
+      for (let messageIndex = conv.messages.length - 1; messageIndex >= 0; messageIndex--) {
+        const message = conv.messages[messageIndex];
+        if (!message?.toolCalls) continue;
+        const toolCallIndex = message.toolCalls.findIndex((t) => t.id === toolCallId);
+        if (toolCallIndex >= 0) {
+          updateToolCall(clientId, messageIndex, toolCallIndex, {
+            result: output,
+            state: resultState === "output-error" ? "error" : "complete"
+          });
+          chunk.messageId = message.id;
+          addChunkToMessage(clientId, chunk);
+          return;
+        }
+      }
+      addChunkToMessage(clientId, chunk);
+    }));
+    cleanupFns.push(aiEventClient.on("tools:approval:responded", (e) => {
+      const {
+        clientId,
+        toolCallId,
+        approved
+      } = e.payload;
+      if (!clientId) return;
+      if (!state.conversations[clientId]) return;
+      const conv = state.conversations[clientId];
+      for (let messageIndex = conv.messages.length - 1; messageIndex >= 0; messageIndex--) {
+        const message = conv.messages[messageIndex];
+        if (!message?.toolCalls) continue;
+        const toolCallIndex = message.toolCalls.findIndex((t) => t.id === toolCallId);
+        if (toolCallIndex >= 0) {
+          updateToolCall(clientId, messageIndex, toolCallIndex, {
+            state: approved ? "approved" : "denied",
+            approvalRequired: false
+          });
+          return;
+        }
+      }
+    }));
+    cleanupFns.push(aiEventClient.on("tools:call:updated", (e) => {
+      const {
+        clientId,
+        streamId,
+        messageId,
+        toolCallId,
+        toolName,
+        state: toolCallState,
+        arguments: args
+      } = e.payload;
+      const conversationId = clientId || (streamId ? streamToConversation.get(streamId) : void 0);
+      if (!conversationId || !state.conversations[conversationId]) return;
+      const conv = state.conversations[conversationId];
+      const messageIndex = conv.messages.findIndex((m) => m.id === messageId);
+      if (messageIndex === -1) return;
+      const message = conv.messages[messageIndex];
+      if (!message) return;
+      const toolCalls = message.toolCalls || [];
+      const existingToolIndex = toolCalls.findIndex((t) => t.id === toolCallId);
+      const toolCall = {
+        id: toolCallId,
+        name: toolName,
+        arguments: args,
+        state: toolCallState
+      };
+      if (existingToolIndex >= 0) {
+        updateToolCall(conversationId, messageIndex, existingToolIndex, toolCall);
+      } else {
+        setToolCalls(conversationId, messageIndex, [...toolCalls, toolCall]);
+      }
+    }));
+    cleanupFns.push(aiEventClient.on("tools:input:available", (e) => {
+      const {
+        streamId,
+        messageId,
+        toolCallId,
+        toolName,
+        input,
+        timestamp,
+        clientId
+      } = e.payload;
+      const conversationId = clientId || (streamId ? streamToConversation.get(streamId) : void 0);
+      if (!conversationId) return;
+      const chunk = {
+        id: `chunk-${Date.now()}-${Math.random()}`,
+        type: "tool_call",
+        messageId,
+        toolCallId,
+        toolName,
+        arguments: JSON.stringify(input),
+        timestamp,
+        chunkCount: 1
+      };
+      const conv = state.conversations[conversationId];
+      if (conv?.type === "client") {
+        addChunkToMessage(conversationId, chunk);
+      } else {
+        addChunk(conversationId, chunk);
+      }
+    }));
+    cleanupFns.push(aiEventClient.on("tools:call:completed", (e) => {
+      const {
+        streamId,
+        toolCallId,
+        toolName,
+        result,
+        duration,
+        messageId,
+        timestamp,
+        clientId
+      } = e.payload;
+      const conversationId = clientId || (streamId ? streamToConversation.get(streamId) : void 0);
+      if (!conversationId || !state.conversations[conversationId]) return;
+      const conv = state.conversations[conversationId];
+      const chunk = {
+        id: `chunk-tool-result-${toolCallId}-${Date.now()}`,
+        type: "tool_result",
+        messageId,
+        toolCallId,
+        toolName,
+        result,
+        duration,
+        timestamp,
+        chunkCount: 1
+      };
+      if (conv.type === "client" && messageId) {
+        const messageIndex = conv.messages.findIndex((m) => m.id === messageId);
+        if (messageIndex !== -1) {
+          queueMessageChunk(conversationId, messageIndex, chunk);
+        } else {
+          for (let i = conv.messages.length - 1; i >= 0; i--) {
+            if (conv.messages[i]?.role === "assistant") {
+              queueMessageChunk(conversationId, i, chunk);
+              break;
+            }
+          }
+        }
+      } else {
+        addChunk(conversationId, chunk);
+      }
+      for (let i = conv.messages.length - 1; i >= 0; i--) {
+        const message = conv.messages[i];
+        if (!message?.toolCalls) continue;
+        const toolCallIndex = message.toolCalls.findIndex((t) => t.id === toolCallId);
+        if (toolCallIndex >= 0) {
+          updateToolCall(conversationId, i, toolCallIndex, {
+            duration,
+            result
+          });
+          return;
+        }
+      }
+    }));
+    cleanupFns.push(aiEventClient.on("text:chunk:content", (e) => {
+      const streamId = e.payload.streamId;
+      const conversationId = streamToConversation.get(streamId);
+      if (!conversationId) return;
+      const chunk = {
+        id: `chunk-${Date.now()}-${Math.random()}`,
+        type: "content",
+        messageId: e.payload.messageId,
+        content: e.payload.content,
+        delta: e.payload.delta,
+        timestamp: e.payload.timestamp,
+        chunkCount: 1
+      };
+      const conv = state.conversations[conversationId];
+      if (conv?.type === "client") {
+        addChunkToMessage(conversationId, chunk);
+      } else {
+        ensureMessageForChunk(conversationId, e.payload.messageId, e.payload.timestamp);
+        addChunk(conversationId, chunk);
+      }
+      if (e.payload.messageId) {
+        const messageIndex = conv?.messages.findIndex((msg) => msg.id === e.payload.messageId);
+        if (messageIndex !== void 0 && messageIndex >= 0) {
+          updateMessage(conversationId, messageIndex, {
+            content: e.payload.content
+          });
+        }
+      }
+    }));
+    cleanupFns.push(aiEventClient.on("text:chunk:tool-call", (e) => {
+      const streamId = e.payload.streamId;
+      const conversationId = streamToConversation.get(streamId);
+      if (!conversationId) return;
+      const chunk = {
+        id: `chunk-${Date.now()}-${Math.random()}`,
+        type: "tool_call",
+        messageId: e.payload.messageId,
+        toolCallId: e.payload.toolCallId,
+        toolName: e.payload.toolName,
+        arguments: e.payload.arguments,
+        timestamp: e.payload.timestamp,
+        chunkCount: 1
+      };
+      const conv = state.conversations[conversationId];
+      if (conv?.type === "client") {
+        addChunkToMessage(conversationId, chunk);
+      } else {
+        ensureMessageForChunk(conversationId, e.payload.messageId, e.payload.timestamp);
+        addChunk(conversationId, chunk);
+      }
+      if (e.payload.messageId) {
+        const messageIndex = conv?.messages.findIndex((msg) => msg.id === e.payload.messageId);
+        if (messageIndex !== void 0 && messageIndex >= 0) {
+          const message = conv?.messages[messageIndex];
+          if (!message) return;
+          const toolCalls = message.toolCalls || [];
+          const existingToolIndex = toolCalls.findIndex((t) => t.id === e.payload.toolCallId);
+          const toolCall = {
+            id: e.payload.toolCallId,
+            name: e.payload.toolName,
+            arguments: e.payload.arguments,
+            state: "input-streaming"
+          };
+          if (existingToolIndex >= 0) {
+            updateToolCall(conversationId, messageIndex, existingToolIndex, toolCall);
+          } else {
+            setToolCalls(conversationId, messageIndex, [...toolCalls, toolCall]);
+          }
+        }
+      }
+    }));
+    cleanupFns.push(aiEventClient.on("text:chunk:tool-result", (e) => {
+      const streamId = e.payload.streamId;
+      const conversationId = streamToConversation.get(streamId);
+      if (!conversationId) return;
+      const chunk = {
+        id: `chunk-${Date.now()}-${Math.random()}`,
+        type: "tool_result",
+        messageId: e.payload.messageId,
+        toolCallId: e.payload.toolCallId,
+        result: e.payload.result,
+        timestamp: e.payload.timestamp,
+        chunkCount: 1
+      };
+      const conv = state.conversations[conversationId];
+      if (conv?.type === "client") {
+        addChunkToMessage(conversationId, chunk);
+      } else {
+        ensureMessageForChunk(conversationId, e.payload.messageId, e.payload.timestamp);
+        addChunk(conversationId, chunk);
+      }
+      if (conv && e.payload.toolCallId) {
+        for (let i = conv.messages.length - 1; i >= 0; i--) {
+          const message = conv.messages[i];
+          if (!message?.toolCalls) continue;
+          const toolCallIndex = message.toolCalls.findIndex((t) => t.id === e.payload.toolCallId);
+          if (toolCallIndex >= 0) {
+            updateToolCall(conversationId, i, toolCallIndex, {
+              result: e.payload.result,
+              state: "complete"
+            });
+            break;
+          }
+        }
+      }
+    }));
+    cleanupFns.push(aiEventClient.on("text:chunk:thinking", (e) => {
+      const streamId = e.payload.streamId;
+      const conversationId = streamToConversation.get(streamId);
+      if (!conversationId) return;
+      const chunk = {
+        id: `chunk-${Date.now()}-${Math.random()}`,
+        type: "thinking",
+        messageId: e.payload.messageId,
+        content: e.payload.content,
+        delta: e.payload.delta,
+        timestamp: e.payload.timestamp,
+        chunkCount: 1
+      };
+      const conv = state.conversations[conversationId];
+      if (conv?.type === "client") {
+        addChunkToMessage(conversationId, chunk);
+        if (e.payload.messageId) {
+          const messageIndex = conv.messages.findIndex((msg) => msg.id === e.payload.messageId);
+          if (messageIndex !== -1) {
+            updateMessage(conversationId, messageIndex, {
+              thinkingContent: e.payload.content
+            });
+          }
+        }
+      } else {
+        ensureMessageForChunk(conversationId, e.payload.messageId, e.payload.timestamp);
+        addChunk(conversationId, chunk);
+      }
+    }));
+    cleanupFns.push(aiEventClient.on("text:chunk:done", (e) => {
+      const streamId = e.payload.streamId;
+      const conversationId = streamToConversation.get(streamId);
+      if (!conversationId) return;
+      const chunk = {
+        id: `chunk-${Date.now()}-${Math.random()}`,
+        type: "done",
+        messageId: e.payload.messageId,
+        finishReason: e.payload.finishReason || void 0,
+        timestamp: e.payload.timestamp,
+        chunkCount: 1
+      };
+      if (e.payload.usage) {
+        updateConversation(conversationId, {
+          usage: e.payload.usage
+        });
+        updateMessageUsage(conversationId, e.payload.messageId, e.payload.usage);
+      }
+      const conv = state.conversations[conversationId];
+      if (conv?.type === "client") {
+        addChunkToMessage(conversationId, chunk);
+      } else {
+        ensureMessageForChunk(conversationId, e.payload.messageId, e.payload.timestamp);
+        addChunk(conversationId, chunk);
+      }
+      updateConversation(conversationId, {
+        status: "completed",
+        completedAt: e.payload.timestamp
+      });
+    }));
+    cleanupFns.push(aiEventClient.on("text:chunk:error", (e) => {
+      const streamId = e.payload.streamId;
+      const conversationId = streamToConversation.get(streamId);
+      if (!conversationId) return;
+      const chunk = {
+        id: `chunk-${Date.now()}-${Math.random()}`,
+        type: "error",
+        messageId: e.payload.messageId,
+        error: e.payload.error,
+        timestamp: e.payload.timestamp,
+        chunkCount: 1
+      };
+      const conv = state.conversations[conversationId];
+      if (conv?.type === "client") {
+        addChunkToMessage(conversationId, chunk);
+      } else {
+        ensureMessageForChunk(conversationId, e.payload.messageId, e.payload.timestamp);
+        addChunk(conversationId, chunk);
+      }
+      updateConversation(conversationId, {
+        status: "error",
+        completedAt: e.payload.timestamp
+      });
+    }));
+    cleanupFns.push(aiEventClient.on("tools:approval:requested", (e) => {
+      const {
+        streamId,
+        messageId,
+        toolCallId,
+        toolName,
+        input,
+        approvalId,
+        timestamp,
+        clientId
+      } = e.payload;
+      const conversationId = clientId || streamToConversation.get(streamId) || "";
+      if (!conversationId) return;
+      const conv = state.conversations[conversationId];
+      if (!conv) return;
+      const chunk = {
+        id: `chunk-${Date.now()}-${Math.random()}`,
+        type: "approval",
+        messageId,
+        toolCallId,
+        toolName,
+        approvalId,
+        input,
+        timestamp,
+        chunkCount: 1
+      };
+      if (conv.type === "client") {
+        addChunkToMessage(conversationId, chunk);
+      } else {
+        addChunk(conversationId, chunk);
+      }
+      for (let i = conv.messages.length - 1; i >= 0; i--) {
+        const message = conv.messages[i];
+        if (!message) continue;
+        if (message.role === "assistant" && message.toolCalls) {
+          const toolCallIndex = message.toolCalls.findIndex((t) => t.id === toolCallId);
+          if (toolCallIndex >= 0) {
+            updateToolCall(conversationId, i, toolCallIndex, {
+              approvalRequired: true,
+              approvalId,
+              state: "approval-requested"
+            });
+            return;
+          }
+        }
+      }
+    }));
+    cleanupFns.push(aiEventClient.on("text:request:started", (e) => {
+      const streamId = e.payload.streamId;
+      const model = e.payload.model;
+      e.payload.provider;
+      const clientId = e.payload.clientId;
+      if (clientId && state.conversations[clientId]) {
+        streamToConversation.set(streamId, clientId);
+        requestToConversation.set(e.payload.requestId, clientId);
+        updateConversation(clientId, {
+          status: "active",
+          ...e.payload,
+          systemPrompts: e.payload.systemPrompts,
+          hasChat: true
+        });
+        return;
+      }
+      const activeClient = Object.values(state.conversations).find((c) => c.type === "client" && c.status === "active" && !c.model);
+      if (activeClient) {
+        streamToConversation.set(streamId, activeClient.id);
+        requestToConversation.set(e.payload.requestId, activeClient.id);
+        updateConversation(activeClient.id, {
+          ...e.payload,
+          systemPrompts: e.payload.systemPrompts,
+          hasChat: true
+        });
+      } else {
+        const existingServerConv = Object.values(state.conversations).find((c) => c.type === "server" && c.model === model);
+        if (existingServerConv) {
+          streamToConversation.set(streamId, existingServerConv.id);
+          requestToConversation.set(e.payload.requestId, existingServerConv.id);
+          updateConversation(existingServerConv.id, {
+            status: "active",
+            ...e.payload,
+            systemPrompts: e.payload.systemPrompts,
+            hasChat: true
+          });
+        } else {
+          const serverId = `server-${model}`;
+          getOrCreateConversation(serverId, "server", `${model} Server`);
+          streamToConversation.set(streamId, serverId);
+          requestToConversation.set(e.payload.requestId, serverId);
+          updateConversation(serverId, {
+            ...e.payload,
+            systemPrompts: e.payload.systemPrompts,
+            hasChat: true
+          });
+        }
+      }
+    }));
+    cleanupFns.push(aiEventClient.on("text:request:completed", (e) => {
+      const {
+        requestId,
+        usage
+      } = e.payload;
+      const conversationId = requestToConversation.get(requestId);
+      if (conversationId && state.conversations[conversationId]) {
+        const updates = {
+          status: "completed",
+          completedAt: e.payload.timestamp
+        };
+        if (usage) {
+          updates.usage = usage;
+        }
+        updateConversation(conversationId, updates);
+        if (usage) {
+          updateMessageUsage(conversationId, e.payload.messageId, usage);
+        }
+      }
+    }));
+    cleanupFns.push(aiEventClient.on("text:usage", (e) => {
+      const {
+        requestId,
+        usage,
+        messageId
+      } = e.payload;
+      const conversationId = requestToConversation.get(requestId);
+      if (conversationId && state.conversations[conversationId]) {
+        updateConversation(conversationId, {
+          usage
+        });
+        updateMessageUsage(conversationId, messageId, usage);
+      }
+    }));
+    cleanupFns.push(aiEventClient.on("summarize:request:started", (e) => {
+      const {
+        requestId,
+        model,
+        inputLength,
+        timestamp,
+        clientId
+      } = e.payload;
+      let conversationId = clientId;
+      if (!conversationId || !state.conversations[conversationId]) {
+        const activeClients = Object.values(state.conversations).filter((c) => c.type === "client" && c.status === "active").sort((a, b) => b.startedAt - a.startedAt);
+        if (activeClients.length > 0 && activeClients[0]) {
+          conversationId = activeClients[0].id;
+        } else {
+          conversationId = `summarize-${requestId}`;
+          getOrCreateConversation(conversationId, "server", `Summarize (${model})`);
+          updateConversation(conversationId, {
+            model
+          });
+        }
+      }
+      requestToConversation.set(requestId, conversationId);
+      const summarizeOp = {
+        id: requestId,
+        model,
+        inputLength,
+        timestamp,
+        status: "started"
+      };
+      const conv = state.conversations[conversationId];
+      if (conv) {
+        const summaries = conv.summaries || [];
+        setState("conversations", conversationId, "summaries", [...summaries, summarizeOp]);
+        setState("conversations", conversationId, "hasSummarize", true);
+      }
+    }));
+    cleanupFns.push(aiEventClient.on("summarize:request:completed", (e) => {
+      const {
+        requestId,
+        outputLength,
+        duration
+      } = e.payload;
+      const conversationId = requestToConversation.get(requestId);
+      if (!conversationId || !state.conversations[conversationId]) return;
+      const conv = state.conversations[conversationId];
+      if (!conv.summaries) return;
+      const summaryIndex = conv.summaries.findIndex((op) => op.id === requestId);
+      if (summaryIndex >= 0) {
+        setState("conversations", conversationId, "summaries", summaryIndex, produce((op) => {
+          op.duration = duration;
+          op.outputLength = outputLength;
+          op.status = "completed";
+        }));
+      }
+    }));
+    cleanupFns.push(aiEventClient.on("image:request:started", (e) => {
+      const {
+        requestId,
+        clientId,
+        timestamp
+      } = e.payload;
+      let conversationId = clientId;
+      if (!conversationId || !state.conversations[conversationId]) {
+        conversationId = `image-${requestId}`;
+        getOrCreateConversation(conversationId, "server", `Image (${requestId.substring(0, 8)})`);
+      }
+      addActivityEvent(conversationId, "imageEvents", {
+        id: requestId,
+        name: "image:request:started",
+        timestamp,
+        payload: e.payload
+      });
+    }));
+    cleanupFns.push(aiEventClient.on("image:request:completed", (e) => {
+      const {
+        requestId,
+        clientId,
+        timestamp
+      } = e.payload;
+      let conversationId = clientId;
+      if (!conversationId || !state.conversations[conversationId]) {
+        conversationId = `image-${requestId}`;
+        getOrCreateConversation(conversationId, "server", `Image (${requestId.substring(0, 8)})`);
+      }
+      addActivityEvent(conversationId, "imageEvents", {
+        id: requestId,
+        name: "image:request:completed",
+        timestamp,
+        payload: e.payload
+      });
+    }));
+    cleanupFns.push(aiEventClient.on("image:usage", (e) => {
+      const {
+        requestId,
+        clientId,
+        timestamp
+      } = e.payload;
+      let conversationId = clientId;
+      if (!conversationId || !state.conversations[conversationId]) {
+        conversationId = `image-${requestId}`;
+        getOrCreateConversation(conversationId, "server", `Image (${requestId.substring(0, 8)})`);
+      }
+      addActivityEvent(conversationId, "imageEvents", {
+        id: requestId,
+        name: "image:usage",
+        timestamp,
+        payload: e.payload
+      });
+    }));
+    cleanupFns.push(aiEventClient.on("speech:request:started", (e) => {
+      const {
+        requestId,
+        clientId,
+        timestamp
+      } = e.payload;
+      let conversationId = clientId;
+      if (!conversationId || !state.conversations[conversationId]) {
+        conversationId = `speech-${requestId}`;
+        getOrCreateConversation(conversationId, "server", `Speech (${requestId.substring(0, 8)})`);
+      }
+      addActivityEvent(conversationId, "speechEvents", {
+        id: requestId,
+        name: "speech:request:started",
+        timestamp,
+        payload: e.payload
+      });
+    }));
+    cleanupFns.push(aiEventClient.on("speech:request:completed", (e) => {
+      const {
+        requestId,
+        clientId,
+        timestamp
+      } = e.payload;
+      let conversationId = clientId;
+      if (!conversationId || !state.conversations[conversationId]) {
+        conversationId = `speech-${requestId}`;
+        getOrCreateConversation(conversationId, "server", `Speech (${requestId.substring(0, 8)})`);
+      }
+      addActivityEvent(conversationId, "speechEvents", {
+        id: requestId,
+        name: "speech:request:completed",
+        timestamp,
+        payload: e.payload
+      });
+    }));
+    cleanupFns.push(aiEventClient.on("speech:usage", (e) => {
+      const {
+        requestId,
+        clientId,
+        timestamp
+      } = e.payload;
+      let conversationId = clientId;
+      if (!conversationId || !state.conversations[conversationId]) {
+        conversationId = `speech-${requestId}`;
+        getOrCreateConversation(conversationId, "server", `Speech (${requestId.substring(0, 8)})`);
+      }
+      addActivityEvent(conversationId, "speechEvents", {
+        id: requestId,
+        name: "speech:usage",
+        timestamp,
+        payload: e.payload
+      });
+    }));
+    cleanupFns.push(aiEventClient.on("transcription:request:started", (e) => {
+      const {
+        requestId,
+        clientId,
+        timestamp
+      } = e.payload;
+      let conversationId = clientId;
+      if (!conversationId || !state.conversations[conversationId]) {
+        conversationId = `transcription-${requestId}`;
+        getOrCreateConversation(conversationId, "server", `Transcription (${requestId.substring(0, 8)})`);
+      }
+      addActivityEvent(conversationId, "transcriptionEvents", {
+        id: requestId,
+        name: "transcription:request:started",
+        timestamp,
+        payload: e.payload
+      });
+    }));
+    cleanupFns.push(aiEventClient.on("transcription:request:completed", (e) => {
+      const {
+        requestId,
+        clientId,
+        timestamp
+      } = e.payload;
+      let conversationId = clientId;
+      if (!conversationId || !state.conversations[conversationId]) {
+        conversationId = `transcription-${requestId}`;
+        getOrCreateConversation(conversationId, "server", `Transcription (${requestId.substring(0, 8)})`);
+      }
+      addActivityEvent(conversationId, "transcriptionEvents", {
+        id: requestId,
+        name: "transcription:request:completed",
+        timestamp,
+        payload: e.payload
+      });
+    }));
+    cleanupFns.push(aiEventClient.on("transcription:usage", (e) => {
+      const {
+        requestId,
+        clientId,
+        timestamp
+      } = e.payload;
+      let conversationId = clientId;
+      if (!conversationId || !state.conversations[conversationId]) {
+        conversationId = `transcription-${requestId}`;
+        getOrCreateConversation(conversationId, "server", `Transcription (${requestId.substring(0, 8)})`);
+      }
+      addActivityEvent(conversationId, "transcriptionEvents", {
+        id: requestId,
+        name: "transcription:usage",
+        timestamp,
+        payload: e.payload
+      });
+    }));
+    cleanupFns.push(aiEventClient.on("video:request:started", (e) => {
+      const {
+        requestId,
+        clientId,
+        timestamp
+      } = e.payload;
+      let conversationId = clientId;
+      if (!conversationId || !state.conversations[conversationId]) {
+        conversationId = `video-${requestId}`;
+        getOrCreateConversation(conversationId, "server", `Video (${requestId.substring(0, 8)})`);
+      }
+      addActivityEvent(conversationId, "videoEvents", {
+        id: requestId,
+        name: "video:request:started",
+        timestamp,
+        payload: e.payload
+      });
+    }));
+    cleanupFns.push(aiEventClient.on("video:request:completed", (e) => {
+      const {
+        requestId,
+        clientId,
+        timestamp
+      } = e.payload;
+      let conversationId = clientId;
+      if (!conversationId || !state.conversations[conversationId]) {
+        conversationId = `video-${requestId}`;
+        getOrCreateConversation(conversationId, "server", `Video (${requestId.substring(0, 8)})`);
+      }
+      addActivityEvent(conversationId, "videoEvents", {
+        id: requestId,
+        name: "video:request:completed",
+        timestamp,
+        payload: e.payload
+      });
+    }));
+    cleanupFns.push(aiEventClient.on("video:usage", (e) => {
+      const {
+        requestId,
+        clientId,
+        timestamp
+      } = e.payload;
+      let conversationId = clientId;
+      if (!conversationId || !state.conversations[conversationId]) {
+        conversationId = `video-${requestId}`;
+        getOrCreateConversation(conversationId, "server", `Video (${requestId.substring(0, 8)})`);
+      }
+      addActivityEvent(conversationId, "videoEvents", {
+        id: requestId,
+        name: "video:usage",
+        timestamp,
+        payload: e.payload
+      });
+    }));
+    onCleanup(() => {
+      for (const cleanup of cleanupFns) {
+        cleanup();
+      }
+      streamToConversation.clear();
+      requestToConversation.clear();
+    });
+  });
+  const contextValue = {
+    state,
+    clearAllConversations,
+    selectConversation
+  };
+  return createComponent(AIContext.Provider, {
+    value: contextValue,
+    get children() {
+      return props.children;
+    }
+  });
+};
+
+// src/components/utils/format.ts
+var formatTimestamp = (timestamp) => {
+  const date = new Date(timestamp);
+  return date.toLocaleTimeString() + "." + date.getMilliseconds().toString().padStart(3, "0");
+};
+var formatDuration = (ms) => {
+  if (!ms) return "-";
+  if (ms < 1e3) return `${ms}ms`;
+  return `${(ms / 1e3).toFixed(2)}s`;
+};
+var getChunkTypeColor = (type) => {
+  switch (type) {
+    case "content":
+      return "#10b981";
+    // green
+    case "tool_call":
+      return "#8b5cf6";
+    // purple
+    case "tool_result":
+      return "#3b82f6";
+    // blue
+    case "done":
+      return "#6b7280";
+    // gray
+    case "error":
+      return "#ef4444";
+    // red
+    case "approval":
+      return "#f59e0b";
+    // orange/amber
+    default:
+      return "#6b7280";
+  }
+};
+var getStatusColor = (status) => {
+  switch (status) {
+    case "active":
+      return "oklch(0.7 0.17 142)";
+    // green
+    case "completed":
+      return "oklch(0.65 0.1 260)";
+    // blue
+    case "error":
+      return "oklch(0.65 0.2 25)";
+    // red
+    default:
+      return "oklch(0.6 0.05 200)";
+  }
+};
+var getTypeColor = (type) => {
+  switch (type) {
+    case "client":
+      return "oklch(0.68 0.16 330)";
+    // pink
+    case "server":
+      return "oklch(0.68 0.15 280)";
+    // purple
+    default:
+      return "oklch(0.6 0.05 200)";
+  }
+};
+
+// src/components/list/ConversationRow.tsx
+var _tmpl$ = ["<div", ' title="', '">\u{1F527} ', "</div>"];
+var _tmpl$2 = ["<div", ">\u27F3</div>"];
+var _tmpl$3 = ["<div", ' title="', '">\u{1F3AF} ', "</div>"];
+var _tmpl$4 = ['<div class="', '"><div', "><div", "><div", "><div", ' style="', '"></div><div', ">", "</div>", "</div><div", ">", "<div", ' style="', '"></div></div></div><div', "><div", ">\u{1F4AC} ", "</div><div", ">\u{1F4E6} ", "</div>", "</div></div></div>"];
+var ConversationRow = (props) => {
+  const {
+    state,
+    selectConversation
+  } = useAIStore();
+  const styles = useStyles();
+  const conv = () => props.conversation;
+  const hasToolCalls = () => {
+    return conv().messages.some((msg) => msg.toolCalls && msg.toolCalls.length > 0);
+  };
+  const countToolCalls = () => {
+    return conv().messages.reduce((total, msg) => {
+      return total + (msg.toolCalls?.length || 0);
+    }, 0);
+  };
+  const totalRawChunks = () => {
+    return conv().chunks.reduce((sum, c) => sum + (c.chunkCount || 1), 0);
+  };
+  return ssr(_tmpl$4, `${escape(styles().utilRow, true)} ${state.activeConversationId === conv().id ? escape(styles().utilRowSelected, true) : ""}`, ssrAttribute("class", escape(styles().conversationsList.rowMain, true), false), ssrAttribute("class", escape(styles().conversationsList.rowTop, true), false), ssrAttribute("class", escape(styles().conversationsList.rowInfo, true), false), ssrAttribute("class", escape(styles().conversationsList.typeDot, true), false), ssrStyleProperty("background:", escape(getTypeColor(conv().type), true)), ssrAttribute("class", escape(styles().conversationsList.label, true), false), escape(conv().label), escape(createComponent(Show, {
+    get when() {
+      return hasToolCalls();
+    },
+    get children() {
+      return ssr(_tmpl$, ssrAttribute("class", escape(styles().conversationsList.toolCallsBadge, true), false), `${escape(countToolCalls(), true)} tool call${countToolCalls() !== 1 ? "s" : ""}`, escape(countToolCalls()));
+    }
+  })), ssrAttribute("class", escape(styles().conversationsList.rowRight, true), false), escape(createComponent(Show, {
+    get when() {
+      return conv().status === "active";
+    },
+    get children() {
+      return ssr(_tmpl$2, ssrAttribute("class", escape(styles().conversationsList.loadingIndicator, true), false));
+    }
+  })), ssrAttribute("class", escape(styles().conversationsList.statusDot, true), false), ssrStyleProperty("background:", escape(getStatusColor(conv().status), true)), ssrAttribute("class", escape(styles().conversationsList.stats, true), false), ssrAttribute("class", escape(styles().conversationsList.statItem, true), false), escape(conv().messages.length), ssrAttribute("class", escape(styles().conversationsList.statItem, true), false), escape(totalRawChunks()), escape(createComponent(Show, {
+    get when() {
+      return conv().usage;
+    },
+    get children() {
+      return ssr(_tmpl$3, ssrAttribute("class", escape(styles().conversationsList.tokensBadge, true), false), `Prompt: ${escape(conv().usage?.promptTokens, true) || 0} | Completion: ${escape(conv().usage?.completionTokens, true) || 0}`, escape(conv().usage?.totalTokens.toLocaleString()) || 0);
+    }
+  })));
+};
+
+// src/components/ConversationsList.tsx
+var _tmpl$5 = ["<div", ">", "</div>"];
+var ConversationsList = () => {
+  const {
+    state
+  } = useAIStore();
+  const styles = useStyles();
+  const conversations = () => Object.values(state.conversations);
+  return ssr(_tmpl$5, ssrAttribute("class", escape(styles().utilList, true), false), escape(createComponent(For, {
+    get each() {
+      return conversations();
+    },
+    children: (conv) => createComponent(ConversationRow, {
+      conversation: conv
+    })
+  })));
+};
+var _tmpl$6 = ["<div", ">\u{1F504} ", " iterations</div>"];
+var _tmpl$22 = ["<div", "><span", ">\u{1F527}</span><div", ">", "</div></div>"];
+var _tmpl$32 = ["<div", "><span", ">\u2699\uFE0F Options:</span><div", ">", "</div></div>"];
+var _tmpl$42 = ["<div", "><span", ">\u{1F3AF} Tokens:</span><span>Prompt: ", "</span><span>\u2022</span><span>Completion: ", "</span><span>\u2022</span><span", ">Total: ", "</span></div>"];
+var _tmpl$52 = ["<details", "><summary", ">\u{1F9EA} Model options</summary><div", ">", "</div></details>"];
+var _tmpl$62 = ["<details", "><summary", ">\u{1F9E9} System prompts (", ")</summary><div", ">", "</div></details>"];
+var _tmpl$7 = ["<div", "><div", "><div", "><div", ">", '</div><div class="', '">', "</div>", "</div><div", ">", "", "", "</div>", "", "", "", "", "</div></div>"];
+var _tmpl$8 = ["<span", ">", "</span>"];
+var _tmpl$9 = ["<span", ">", ": ", "</span>"];
+var _tmpl$0 = ["<div", "><div", ">#", "</div><div", ">", "</div></div>"];
+var ConversationHeader = (props) => {
+  const styles = useStyles();
+  const conv = () => props.conversation;
+  const toolNames = () => conv().toolNames ?? [];
+  const options = () => conv().options;
+  const modelOptions = () => conv().modelOptions;
+  const iterationCount = () => conv().iterationCount;
+  const systemPrompts = () => conv().systemPrompts ?? [];
+  return ssr(_tmpl$7, ssrAttribute("class", escape(styles().panelHeader, true), false), ssrAttribute("class", escape(styles().conversationDetails.headerContent, true), false), ssrAttribute("class", escape(styles().conversationDetails.headerRow, true), false), ssrAttribute("class", escape(styles().conversationDetails.headerLabel, true), false), escape(conv().label), `${escape(styles().conversationDetails.statusBadge, true)} ${conv().status === "active" ? escape(styles().conversationDetails.statusActive, true) : conv().status === "completed" ? escape(styles().conversationDetails.statusCompleted, true) : escape(styles().conversationDetails.statusError, true)}`, escape(conv().status), escape(createComponent(Show, {
+    get when() {
+      return iterationCount() !== void 0 && iterationCount() > 1;
+    },
+    get children() {
+      return ssr(_tmpl$6, ssrAttribute("class", escape(styles().conversationDetails.iterationBadge, true), false), escape(iterationCount()));
+    }
+  })), ssrAttribute("class", escape(styles().conversationDetails.metaInfo, true), false), conv().model && `Model: ${escape(conv().model)}`, conv().provider && ` \u2022 Provider: ${escape(conv().provider)}`, conv().completedAt && ` \u2022 Duration: ${escape(formatDuration(conv().completedAt - conv().startedAt))}`, escape(createComponent(Show, {
+    get when() {
+      return toolNames().length > 0;
+    },
+    get children() {
+      return ssr(_tmpl$22, ssrAttribute("class", escape(styles().conversationDetails.toolsRow, true), false), ssrAttribute("class", escape(styles().conversationDetails.toolsLabel, true), false), ssrAttribute("class", escape(styles().conversationDetails.toolsList, true), false), escape(createComponent(For, {
+        get each() {
+          return toolNames();
+        },
+        children: (toolName) => ssr(_tmpl$8, ssrAttribute("class", escape(styles().conversationDetails.toolBadge, true), false), escape(toolName))
+      })));
+    }
+  })), escape(createComponent(Show, {
+    get when() {
+      return options() && Object.keys(options()).length > 0;
+    },
+    get children() {
+      return ssr(_tmpl$32, ssrAttribute("class", escape(styles().conversationDetails.optionsRow, true), false), ssrAttribute("class", escape(styles().conversationDetails.optionsLabel, true), false), ssrAttribute("class", escape(styles().conversationDetails.optionsCompact, true), false), escape(createComponent(For, {
+        get each() {
+          return Object.entries(options());
+        },
+        children: ([key, value]) => ssr(_tmpl$9, ssrAttribute("class", escape(styles().conversationDetails.optionBadge, true), false), escape(key), typeof value === "object" ? escape(JSON.stringify(value)) : escape(String(value)))
+      })));
+    }
+  })), escape(createComponent(Show, {
+    get when() {
+      return conv().usage;
+    },
+    get children() {
+      return ssr(_tmpl$42, ssrAttribute("class", escape(styles().conversationDetails.usageInfo, true), false), ssrAttribute("class", escape(styles().conversationDetails.usageLabel, true), false), escape(conv().usage?.promptTokens.toLocaleString()) || 0, escape(conv().usage?.completionTokens.toLocaleString()) || 0, ssrAttribute("class", escape(styles().conversationDetails.usageBold, true), false), escape(conv().usage?.totalTokens.toLocaleString()) || 0);
+    }
+  })), escape(createComponent(Show, {
+    get when() {
+      return modelOptions() && Object.keys(modelOptions()).length > 0;
+    },
+    get children() {
+      return ssr(_tmpl$52, ssrAttribute("class", escape(styles().conversationDetails.collapsibleSection, true), false), ssrAttribute("class", escape(styles().conversationDetails.collapsibleSummary, true), false), ssrAttribute("class", escape(styles().conversationDetails.collapsibleContent, true), false), escape(createComponent(JsonTree, {
+        get value() {
+          return modelOptions();
+        },
+        defaultExpansionDepth: 2
+      })));
+    }
+  })), escape(createComponent(Show, {
+    get when() {
+      return systemPrompts().length > 0;
+    },
+    get children() {
+      return ssr(_tmpl$62, ssrAttribute("class", escape(styles().conversationDetails.collapsibleSection, true), false), ssrAttribute("class", escape(styles().conversationDetails.collapsibleSummary, true), false), escape(systemPrompts().length), ssrAttribute("class", escape(styles().conversationDetails.collapsibleContent, true), false), escape(createComponent(For, {
+        get each() {
+          return systemPrompts();
+        },
+        children: (prompt, index) => ssr(_tmpl$0, ssrAttribute("class", escape(styles().conversationDetails.systemPromptItem, true), false), ssrAttribute("class", escape(styles().conversationDetails.systemPromptIndex, true), false), escape(index()) + 1, ssrAttribute("class", escape(styles().conversationDetails.systemPromptText, true), false), escape(prompt))
+      })));
+    }
+  })));
+};
+var _tmpl$10 = ['<button class="', '">\u{1F4AC} Messages (', ")</button>"];
+var _tmpl$23 = ['<button class="', '">\u{1F4E6} Chunks (', ")</button>"];
+var _tmpl$33 = ['<button class="', '">\u{1F4DD} Summaries (', ")</button>"];
+var _tmpl$43 = ['<button class="', '">\u{1F5BC}\uFE0F Image (', ")</button>"];
+var _tmpl$53 = ['<button class="', '">\u{1F50A} Speech (', ")</button>"];
+var _tmpl$63 = ['<button class="', '">\u{1F4DD} Transcription (', ")</button>"];
+var _tmpl$72 = ['<button class="', '">\u{1F3AC} Video (', ")</button>"];
+var _tmpl$82 = ["<div", ">", "", "", "", "", "", "", "</div>"];
+var ConversationTabs = (props) => {
+  const styles = useStyles();
+  const conv = () => props.conversation;
+  const totalRawChunks = () => conv().chunks.reduce((sum, c) => sum + (c.chunkCount || 1), 0);
+  const summariesCount = () => conv().summaries?.length ?? 0;
+  const imageCount = () => conv().imageEvents?.length ?? 0;
+  const speechCount = () => conv().speechEvents?.length ?? 0;
+  const transcriptionCount = () => conv().transcriptionEvents?.length ?? 0;
+  const videoCount = () => conv().videoEvents?.length ?? 0;
+  const [imagePulse, setImagePulse] = createSignal(false);
+  const [speechPulse, setSpeechPulse] = createSignal(false);
+  const [transcriptionPulse, setTranscriptionPulse] = createSignal(false);
+  const [videoPulse, setVideoPulse] = createSignal(false);
+  const triggerPulse = (setter) => {
+    setter(true);
+    setTimeout(() => setter(false), 2e3);
+  };
+  let previousImageCount = 0;
+  let previousSpeechCount = 0;
+  let previousTranscriptionCount = 0;
+  let previousVideoCount = 0;
+  createEffect(() => {
+    const count = imageCount();
+    if (count > 0 && previousImageCount === 0) {
+      triggerPulse(setImagePulse);
+    }
+    previousImageCount = count;
+  });
+  createEffect(() => {
+    const count = speechCount();
+    if (count > 0 && previousSpeechCount === 0) {
+      triggerPulse(setSpeechPulse);
+    }
+    previousSpeechCount = count;
+  });
+  createEffect(() => {
+    const count = transcriptionCount();
+    if (count > 0 && previousTranscriptionCount === 0) {
+      triggerPulse(setTranscriptionPulse);
+    }
+    previousTranscriptionCount = count;
+  });
+  createEffect(() => {
+    const count = videoCount();
+    if (count > 0 && previousVideoCount === 0) {
+      triggerPulse(setVideoPulse);
+    }
+    previousVideoCount = count;
+  });
+  const hasMessages = () => conv().type === "client" && conv().messages.length > 0;
+  const hasChunks = () => conv().chunks.length > 0 || conv().type === "server";
+  const hasSummaries = () => conv().hasSummarize || summariesCount() > 0;
+  const hasImage = () => conv().hasImage || imageCount() > 0;
+  const hasSpeech = () => conv().hasSpeech || speechCount() > 0;
+  const hasTranscription = () => conv().hasTranscription || transcriptionCount() > 0;
+  const hasVideo = () => conv().hasVideo || videoCount() > 0;
+  const visibleTabCount = () => {
+    let count = 0;
+    if (hasMessages()) count++;
+    if (hasChunks() && conv().type === "server") count++;
+    if (hasSummaries()) count++;
+    if (hasImage()) count++;
+    if (hasSpeech()) count++;
+    if (hasTranscription()) count++;
+    if (hasVideo()) count++;
+    return count;
+  };
+  if (visibleTabCount() <= 1) {
+    return null;
+  }
+  return ssr(_tmpl$82, ssrAttribute("class", escape(styles().conversationDetails.tabsContainer, true), false), escape(createComponent(Show, {
+    get when() {
+      return hasMessages();
+    },
+    get children() {
+      return ssr(_tmpl$10, `${escape(styles().actionButton, true)} ${props.activeTab === "messages" ? escape(styles().conversationDetails.tabButtonActive, true) : ""}`, escape(conv().messages.length));
+    }
+  })), escape(createComponent(Show, {
+    get when() {
+      return hasChunks() && conv().type === "server";
+    },
+    get children() {
+      return ssr(_tmpl$23, `${escape(styles().actionButton, true)} ${props.activeTab === "chunks" ? escape(styles().conversationDetails.tabButtonActive, true) : ""}`, escape(totalRawChunks()));
+    }
+  })), escape(createComponent(Show, {
+    get when() {
+      return hasSummaries();
+    },
+    get children() {
+      return ssr(_tmpl$33, `${escape(styles().actionButton, true)} ${props.activeTab === "summaries" ? escape(styles().conversationDetails.tabButtonActive, true) : ""}`, escape(summariesCount()));
+    }
+  })), escape(createComponent(Show, {
+    get when() {
+      return hasImage();
+    },
+    get children() {
+      return ssr(_tmpl$43, `${escape(styles().actionButton, true)} ${props.activeTab === "image" ? escape(styles().conversationDetails.tabButtonActive, true) : ""} ${imagePulse() ? escape(styles().conversationDetails.tabButtonPulse, true) : ""}`, escape(imageCount()));
+    }
+  })), escape(createComponent(Show, {
+    get when() {
+      return hasSpeech();
+    },
+    get children() {
+      return ssr(_tmpl$53, `${escape(styles().actionButton, true)} ${props.activeTab === "speech" ? escape(styles().conversationDetails.tabButtonActive, true) : ""} ${speechPulse() ? escape(styles().conversationDetails.tabButtonPulse, true) : ""}`, escape(speechCount()));
+    }
+  })), escape(createComponent(Show, {
+    get when() {
+      return hasTranscription();
+    },
+    get children() {
+      return ssr(_tmpl$63, `${escape(styles().actionButton, true)} ${props.activeTab === "transcription" ? escape(styles().conversationDetails.tabButtonActive, true) : ""} ${transcriptionPulse() ? escape(styles().conversationDetails.tabButtonPulse, true) : ""}`, escape(transcriptionCount()));
+    }
+  })), escape(createComponent(Show, {
+    get when() {
+      return hasVideo();
+    },
+    get children() {
+      return ssr(_tmpl$72, `${escape(styles().actionButton, true)} ${props.activeTab === "video" ? escape(styles().conversationDetails.tabButtonActive, true) : ""} ${videoPulse() ? escape(styles().conversationDetails.tabButtonPulse, true) : ""}`, escape(videoCount()));
+    }
+  })));
+};
+var _tmpl$11 = ["<div", ">\u23F1\uFE0F ", "</div>"];
+var _tmpl$24 = ["<div", ">APPROVAL REQUIRED</div>"];
+var _tmpl$34 = ["<div", "><div", ">Arguments</div><div", ">", "</div></div>"];
+var _tmpl$44 = ["<div", "><div", ">Result</div><div", ">", "</div></div>"];
+var _tmpl$54 = ['<details class="', '"><summary', '><div class="', '">', " ", '</div><div class="', '">', "</div>", "", "</summary><div", ">", "", "</div></details>"];
+var ToolCallDisplay = (props) => {
+  const styles = useStyles();
+  const tool = () => props.tool;
+  const parsedArguments = () => {
+    const args = tool().arguments;
+    if (typeof args === "string") {
+      try {
+        return JSON.parse(args);
+      } catch {
+        return args;
+      }
+    }
+    return args;
+  };
+  return ssr(_tmpl$54, `${escape(styles().conversationDetails.toolCall, true)} ${tool().approvalRequired ? escape(styles().conversationDetails.toolCallApproval, true) : escape(styles().conversationDetails.toolCallNormal, true)}`, ssrAttribute("class", escape(styles().conversationDetails.toolCallHeader, true), false), `${escape(styles().conversationDetails.toolCallName, true)} ${tool().approvalRequired ? escape(styles().conversationDetails.toolCallNameApproval, true) : escape(styles().conversationDetails.toolCallNameNormal, true)}`, tool().approvalRequired ? "\u26A0\uFE0F" : "\u{1F527}", escape(tool().name), `${escape(styles().conversationDetails.toolStateBadge, true)} ${tool().approvalRequired ? escape(styles().conversationDetails.toolStateBadgeApproval, true) : escape(styles().conversationDetails.toolStateBadgeNormal, true)}`, escape(tool().state), escape(createComponent(Show, {
+    get when() {
+      return tool().duration !== void 0 && tool().duration > 0;
+    },
+    get children() {
+      return ssr(_tmpl$11, ssrAttribute("class", escape(styles().conversationDetails.durationBadge, true), false), escape(formatDuration(tool().duration)));
+    }
+  })), escape(createComponent(Show, {
+    get when() {
+      return tool().approvalRequired;
+    },
+    get children() {
+      return ssr(_tmpl$24, ssrAttribute("class", escape(styles().conversationDetails.approvalRequiredBadge, true), false));
+    }
+  })), ssrAttribute("class", escape(styles().conversationDetails.toolCallContent, true), false), escape(createComponent(Show, {
+    get when() {
+      return tool().arguments;
+    },
+    get children() {
+      return ssr(_tmpl$34, ssrAttribute("class", escape(styles().conversationDetails.toolSection, true), false), ssrAttribute("class", escape(styles().conversationDetails.toolSectionLabel, true), false), ssrAttribute("class", escape(styles().conversationDetails.toolJsonContainer, true), false), escape(createComponent(JsonTree, {
+        get value() {
+          return parsedArguments();
+        },
+        defaultExpansionDepth: 2,
+        copyable: true
+      })));
+    }
+  })), escape(createComponent(Show, {
+    get when() {
+      return tool().result !== void 0;
+    },
+    get children() {
+      return ssr(_tmpl$44, ssrAttribute("class", escape(styles().conversationDetails.toolSection, true), false), ssrAttribute("class", escape(styles().conversationDetails.toolSectionLabel, true), false), ssrAttribute("class", escape(styles().conversationDetails.toolJsonContainer, true), false), escape(createComponent(JsonTree, {
+        get value() {
+          return tool().result;
+        },
+        defaultExpansionDepth: 2,
+        copyable: true
+      })));
+    }
+  })));
+};
+var _tmpl$12 = ['<span style="', '">(', " chunks)</span>"];
+var _tmpl$25 = ["<div", ">\u{1F527} ", "</div>"];
+var _tmpl$35 = ["<div", ">", "</div>"];
+var _tmpl$45 = ["<div", ">\u274C ", "</div>"];
+var _tmpl$55 = ["<div", ">\u2713 ", "</div>"];
+var _tmpl$64 = ["<div", ">Input: ", "</div>"];
+var _tmpl$73 = ["<div", "><div", ">\u26A0\uFE0F Approval Required</div>", "</div>"];
+var _tmpl$83 = ["<div", "><div", "><span", ">\u{1F4E4} Tool Arguments</span></div><div", ">", "</div></div>"];
+var _tmpl$92 = ["<span", ">\u23F1\uFE0F ", "</span>"];
+var _tmpl$02 = ["<div", "><div", "><span", ">\u2713 Tool Result</span>", "</div><div", ">", "</div></div>"];
+var _tmpl$1 = ["<div", "><div", "><div", ">#", "", "</div><div", "><div", ' style="', '"></div><div', ">", "</div></div>", "<div", ">", '</div><button class="', '"', ">{}</button></div>", "", "</div>"];
+var ChunkItem = (props) => {
+  const styles = useStyles();
+  const [showRaw, setShowRaw] = createSignal(false);
+  const isLarge = () => props.variant === "large";
+  const chunkCount = () => props.chunk.chunkCount || 1;
+  const parseToolArguments = () => {
+    try {
+      return JSON.parse(props.chunk.arguments || "{}");
+    } catch {
+      return {
+        raw: props.chunk.arguments
+      };
+    }
+  };
+  const parseToolResult = () => {
+    try {
+      if (typeof props.chunk.result === "string") {
+        return JSON.parse(props.chunk.result);
+      }
+      return props.chunk.result;
+    } catch {
+      return {
+        raw: props.chunk.result
+      };
+    }
+  };
+  return ssr(_tmpl$1, ssrAttribute("class", isLarge() ? escape(styles().conversationDetails.chunkItemLarge, true) : escape(styles().conversationDetails.chunkItem, true), false), ssrAttribute("class", isLarge() ? escape(styles().conversationDetails.chunkHeaderLarge, true) : escape(styles().conversationDetails.chunkHeader, true), false), ssrAttribute("class", isLarge() ? escape(styles().conversationDetails.chunkNumberLarge, true) : escape(styles().conversationDetails.chunkNumber, true), false), escape(props.index) + 1, escape(createComponent(Show, {
+    get when() {
+      return chunkCount() > 1;
+    },
+    get children() {
+      return ssr(_tmpl$12, ssrStyleProperty("margin-left:", "4px") + ssrStyleProperty(";opacity:", 0.7), escape(chunkCount()));
+    }
+  })), ssrAttribute("class", isLarge() ? escape(styles().conversationDetails.chunkTypeBadgeLarge, true) : escape(styles().conversationDetails.chunkTypeBadge, true), false), ssrAttribute("class", isLarge() ? escape(styles().conversationDetails.chunkTypeDotLarge, true) : escape(styles().conversationDetails.chunkTypeDot, true), false), ssrStyleProperty("background:", escape(getChunkTypeColor(props.chunk.type), true)), ssrAttribute("class", isLarge() ? escape(styles().conversationDetails.chunkTypeLabelLarge, true) : escape(styles().conversationDetails.chunkTypeLabel, true), false), escape(props.chunk.type), escape(createComponent(Show, {
+    get when() {
+      return props.chunk.toolName;
+    },
+    get children() {
+      return ssr(_tmpl$25, ssrAttribute("class", isLarge() ? escape(styles().conversationDetails.chunkToolBadgeLarge, true) : escape(styles().conversationDetails.chunkToolBadge, true), false), escape(props.chunk.toolName));
+    }
+  })), ssrAttribute("class", isLarge() ? escape(styles().conversationDetails.chunkTimestampLarge, true) : escape(styles().conversationDetails.chunkTimestamp, true), false), escape(formatTimestamp(props.chunk.timestamp)), `${isLarge() ? escape(styles().conversationDetails.rawJsonButtonLarge, true) : escape(styles().conversationDetails.rawJsonButton, true)} ${showRaw() ? escape(styles().conversationDetails.rawJsonButtonActive, true) : escape(styles().conversationDetails.rawJsonButtonInactive, true)}`, ssrAttribute("title", showRaw() ? "Show formatted" : "Show raw JSON", false), escape(createComponent(Show, {
+    get when() {
+      return !showRaw();
+    },
+    get children() {
+      return [createComponent(Show, {
+        get when() {
+          return props.chunk.content || props.chunk.delta;
+        },
+        get children() {
+          return ssr(_tmpl$35, ssrAttribute("class", isLarge() ? escape(styles().conversationDetails.chunkContentLarge, true) : escape(styles().conversationDetails.chunkContent, true), false), escape(props.chunk.content));
+        }
+      }), createComponent(Show, {
+        get when() {
+          return props.chunk.error;
+        },
+        get children() {
+          return ssr(_tmpl$45, ssrAttribute("class", isLarge() ? escape(styles().conversationDetails.chunkErrorLarge, true) : escape(styles().conversationDetails.chunkError, true), false), escape(props.chunk.error));
+        }
+      }), createComponent(Show, {
+        get when() {
+          return props.chunk.finishReason;
+        },
+        get children() {
+          return ssr(_tmpl$55, ssrAttribute("class", isLarge() ? escape(styles().conversationDetails.chunkFinishLarge, true) : escape(styles().conversationDetails.chunkFinish, true), false), isLarge() ? `Finish: ${escape(props.chunk.finishReason)}` : escape(props.chunk.finishReason));
+        }
+      }), createComponent(Show, {
+        get when() {
+          return props.chunk.type === "approval";
+        },
+        get children() {
+          return ssr(_tmpl$73, ssrAttribute("class", isLarge() ? escape(styles().conversationDetails.chunkApprovalLarge, true) : escape(styles().conversationDetails.chunkApproval, true), false), ssrAttribute("class", isLarge() ? escape(styles().conversationDetails.chunkApprovalTitleLarge, true) : escape(styles().conversationDetails.chunkApprovalTitle, true), false), escape(createComponent(Show, {
+            get when() {
+              return props.chunk.input;
+            },
+            get children() {
+              return ssr(_tmpl$64, ssrAttribute("class", isLarge() ? escape(styles().conversationDetails.chunkApprovalInputLarge, true) : escape(styles().conversationDetails.chunkApprovalInput, true), false), escape(JSON.stringify(props.chunk.input, null, 2)));
+            }
+          })));
+        }
+      }), createComponent(Show, {
+        get when() {
+          return props.chunk.type === "tool_call" && props.chunk.arguments;
+        },
+        get children() {
+          return ssr(_tmpl$83, ssrAttribute("class", escape(styles().conversationDetails.chunkToolCall, true), false), ssrAttribute("class", escape(styles().conversationDetails.chunkToolCallHeader, true), false), ssrAttribute("class", escape(styles().conversationDetails.chunkToolCallTitle, true), false), ssrAttribute("class", escape(styles().conversationDetails.toolJsonContainer, true), false), escape(createComponent(JsonTree, {
+            get value() {
+              return parseToolArguments();
+            },
+            defaultExpansionDepth: 2,
+            copyable: true
+          })));
+        }
+      }), createComponent(Show, {
+        get when() {
+          return props.chunk.type === "tool_result" && props.chunk.result !== void 0;
+        },
+        get children() {
+          return ssr(_tmpl$02, ssrAttribute("class", escape(styles().conversationDetails.chunkToolResult, true), false), ssrAttribute("class", escape(styles().conversationDetails.chunkToolResultHeader, true), false), ssrAttribute("class", escape(styles().conversationDetails.chunkToolResultTitle, true), false), escape(createComponent(Show, {
+            get when() {
+              return props.chunk.duration !== void 0 && props.chunk.duration > 0;
+            },
+            get children() {
+              return ssr(_tmpl$92, ssrAttribute("class", escape(styles().conversationDetails.durationBadge, true), false), escape(formatDuration(props.chunk.duration)));
+            }
+          })), ssrAttribute("class", escape(styles().conversationDetails.toolJsonContainer, true), false), escape(createComponent(JsonTree, {
+            get value() {
+              return parseToolResult();
+            },
+            defaultExpansionDepth: 2,
+            copyable: true
+          })));
+        }
+      })];
+    }
+  })), escape(createComponent(Show, {
+    get when() {
+      return showRaw();
+    },
+    get children() {
+      return ssr(_tmpl$35, ssrAttribute("class", isLarge() ? escape(styles().conversationDetails.rawJsonLarge, true) : escape(styles().conversationDetails.rawJson, true), false), escape(JSON.stringify(props.chunk, null, 2)));
+    }
+  })));
+};
+var _tmpl$13 = ['<span class="', '">\u{1F527} Tool Calls</span>'];
+var _tmpl$26 = ['<span class="', '">\u274C Error</span>'];
+var _tmpl$36 = ['<span class="', '">\u26A0\uFE0F Approval</span>'];
+var _tmpl$46 = ['<span class="', '">\u2713 ', "</span>"];
+var ChunkBadges = (props) => {
+  const styles = useStyles();
+  const hasToolCalls = () => props.chunks.some((c) => c.type === "tool_call");
+  const hasErrors = () => props.chunks.some((c) => c.type === "error");
+  const hasApproval = () => props.chunks.some((c) => c.type === "approval");
+  const finishReason = () => props.chunks.find((c) => c.type === "done")?.finishReason;
+  return [createComponent(Show, {
+    get when() {
+      return hasToolCalls();
+    },
+    get children() {
+      return ssr(_tmpl$13, `${escape(styles().conversationDetails.chunkBadge, true)} ${escape(styles().conversationDetails.chunkBadgeTool, true)}`);
+    }
+  }), createComponent(Show, {
+    get when() {
+      return hasErrors();
+    },
+    get children() {
+      return ssr(_tmpl$26, `${escape(styles().conversationDetails.chunkBadge, true)} ${escape(styles().conversationDetails.chunkBadgeError, true)}`);
+    }
+  }), createComponent(Show, {
+    get when() {
+      return hasApproval();
+    },
+    get children() {
+      return ssr(_tmpl$36, `${escape(styles().conversationDetails.chunkBadge, true)} ${escape(styles().conversationDetails.chunkBadgeApproval, true)}`);
+    }
+  }), createComponent(Show, {
+    get when() {
+      return finishReason();
+    },
+    get children() {
+      return ssr(_tmpl$46, `${escape(styles().conversationDetails.chunkBadge, true)} ${escape(styles().conversationDetails.chunkBadgeSuccess, true)}`, escape(finishReason()));
+    }
+  })];
+};
+
+// src/components/conversation/ChunksCollapsible.tsx
+var _tmpl$14 = ["<div", ">", "</div>"];
+var _tmpl$27 = ["<details", "><summary", "><div", "><span", ">\u25B6</span><span", ">\u{1F4E6} ", " chunks</span>", "</div>", "</summary><div", "><div", ">", "</div></div></details>"];
+var ChunksCollapsible = (props) => {
+  const styles = useStyles();
+  const accumulatedContent = () => props.chunks.filter((c) => c.type === "content" && (c.content || c.delta)).map((c) => c.delta || c.content).join("");
+  const totalRawChunks = () => props.chunks.reduce((sum, c) => sum + (c.chunkCount || 1), 0);
+  return ssr(_tmpl$27, ssrAttribute("class", escape(styles().conversationDetails.chunksDetails, true), false), ssrAttribute("class", escape(styles().conversationDetails.chunksSummary, true), false), ssrAttribute("class", escape(styles().conversationDetails.chunksSummaryRow, true), false), ssrAttribute("class", escape(styles().conversationDetails.chunksSummaryArrow, true), false), ssrAttribute("class", escape(styles().conversationDetails.chunksSummaryTitle, true), false), escape(totalRawChunks()), escape(createComponent(ChunkBadges, {
+    get chunks() {
+      return props.chunks;
+    }
+  })), escape(createComponent(Show, {
+    get when() {
+      return accumulatedContent();
+    },
+    get children() {
+      return ssr(_tmpl$14, ssrAttribute("class", escape(styles().conversationDetails.contentPreview, true), false) + ssrAttribute("title", escape(accumulatedContent(), true), false), escape(accumulatedContent()));
+    }
+  })), ssrAttribute("class", escape(styles().conversationDetails.chunksContainer, true), false), ssrAttribute("class", escape(styles().conversationDetails.chunksList, true), false), escape(createComponent(For, {
+    get each() {
+      return props.chunks;
+    },
+    children: (chunk, index) => createComponent(ChunkItem, {
+      chunk,
+      get index() {
+        return index();
+      },
+      variant: "small"
+    })
+  })));
+};
+
+// src/components/conversation/MessageCard.tsx
+var _tmpl$15 = ['<div class="', '"><span', ">", "</span><span", ">", "</span></div>"];
+var _tmpl$28 = ["<div", "><span", ">\u{1F3AF}</span><span>", " in</span><span>\u2022</span><span>", " out</span></div>"];
+var _tmpl$37 = ["<div", "><span", ">\u23F1\uFE0F</span><span>", "</span></div>"];
+var _tmpl$47 = ["<details", "><summary", ">\u{1F4AD} Thinking...</summary><div", ">", "</div></details>"];
+var _tmpl$56 = ["<div", ">", "</div>"];
+var _tmpl$65 = ["<div", ">", "<div", "><div", "><div", ">", "</div><div", "><div", ">", "</div></div><div", ">", "</div>", "", "</div>", "", "", "", "</div></div>"];
+var MessageCard = (props) => {
+  const styles = useStyles();
+  const msg = () => props.message;
+  const isClientMessage = () => msg().source === "client";
+  const getCardClass = () => {
+    const base = styles().conversationDetails.messageCard;
+    if (msg().role === "user") {
+      return `${base} ${styles().conversationDetails.messageCardUser}`;
+    }
+    if (isClientMessage()) {
+      return `${base} ${styles().conversationDetails.messageCardClient}`;
+    }
+    return `${base} ${styles().conversationDetails.messageCardServer}`;
+  };
+  const parseJsonContent = () => {
+    const content = msg().content;
+    if (typeof content !== "string") return null;
+    const trimmed = content.trim();
+    if (!trimmed.startsWith("{") && !trimmed.startsWith("[")) return null;
+    try {
+      return JSON.parse(trimmed);
+    } catch {
+      return null;
+    }
+  };
+  const toolDuration = () => {
+    const durations = msg().toolCalls?.map((tool) => tool.duration || 0).filter((duration) => duration > 0);
+    if (!durations || durations.length === 0) return 0;
+    return durations.reduce((total, duration) => total + duration, 0);
+  };
+  return ssr(_tmpl$65, ssrAttribute("class", escape(getCardClass(), true), false), escape(createComponent(Show, {
+    get when() {
+      return msg().role === "assistant";
+    },
+    get children() {
+      return ssr(_tmpl$15, `${escape(styles().conversationDetails.sourceBanner, true)} ${isClientMessage() ? escape(styles().conversationDetails.sourceBannerClient, true) : escape(styles().conversationDetails.sourceBannerServer, true)}`, ssrAttribute("class", escape(styles().conversationDetails.sourceBannerIcon, true), false), isClientMessage() ? "\u{1F4F1}" : "\u2601\uFE0F", ssrAttribute("class", escape(styles().conversationDetails.sourceBannerText, true), false), isClientMessage() ? "Client Message" : "Server Message");
+    }
+  })), ssrAttribute("class", msg().role === "user" ? "" : escape(styles().conversationDetails.messageCardContent, true), false), ssrAttribute("class", escape(styles().conversationDetails.messageHeader, true), false), ssrAttribute("class", msg().role === "user" ? escape(styles().conversationDetails.avatarUser, true) : isClientMessage() ? escape(styles().conversationDetails.avatarClient, true) : escape(styles().conversationDetails.avatarServer, true), false), msg().role === "user" ? "U" : msg().role === "tool" ? "\u{1F527}" : "\u{1F916}", ssrAttribute("class", escape(styles().conversationDetails.roleLabel, true), false), ssrAttribute("class", msg().role === "user" ? escape(styles().conversationDetails.roleLabelUser, true) : isClientMessage() ? escape(styles().conversationDetails.roleLabelClient, true) : escape(styles().conversationDetails.roleLabelServer, true), false), escape(msg().role), ssrAttribute("class", escape(styles().conversationDetails.timestamp, true), false), escape(formatTimestamp(msg().timestamp)), escape(createComponent(Show, {
+    get when() {
+      return msg().usage;
+    },
+    get children() {
+      return ssr(_tmpl$28, ssrAttribute("class", escape(styles().conversationDetails.messageUsage, true), false), ssrAttribute("class", escape(styles().conversationDetails.messageUsageIcon, true), false), escape(msg().usage?.promptTokens.toLocaleString()), escape(msg().usage?.completionTokens.toLocaleString()));
+    }
+  })), escape(createComponent(Show, {
+    get when() {
+      return toolDuration() > 0;
+    },
+    get children() {
+      return ssr(_tmpl$37, ssrAttribute("class", escape(styles().conversationDetails.messageUsage, true), false), ssrAttribute("class", escape(styles().conversationDetails.messageUsageIcon, true), false), escape(formatDuration(toolDuration())));
+    }
+  })), escape(createComponent(Show, {
+    get when() {
+      return msg().thinkingContent;
+    },
+    get children() {
+      return ssr(_tmpl$47, ssrAttribute("class", escape(styles().conversationDetails.thinkingDetails, true), false), ssrAttribute("class", escape(styles().conversationDetails.thinkingSummary, true), false), ssrAttribute("class", escape(styles().conversationDetails.thinkingContent, true), false), escape(msg().thinkingContent));
+    }
+  })), escape(createComponent(Show, {
+    get when() {
+      return msg().role === "tool" && parseJsonContent() !== null;
+    },
+    get fallback() {
+      return ssr(_tmpl$56, ssrAttribute("class", escape(styles().conversationDetails.messageContent, true), false), escape(msg().content));
+    },
+    get children() {
+      return ssr(_tmpl$56, ssrAttribute("class", escape(styles().conversationDetails.toolJsonContainer, true), false), escape(createComponent(JsonTree, {
+        get value() {
+          return parseJsonContent();
+        }
+      })));
+    }
+  })), escape(createComponent(Show, {
+    get when() {
+      return msg().toolCalls && msg().toolCalls.length > 0;
+    },
+    get children() {
+      return ssr(_tmpl$56, ssrAttribute("class", escape(styles().conversationDetails.toolCallsContainer, true), false), escape(createComponent(For, {
+        get each() {
+          return msg().toolCalls;
+        },
+        children: (tool) => createComponent(ToolCallDisplay, {
+          tool
+        })
+      })));
+    }
+  })), escape(createComponent(Show, {
+    get when() {
+      return msg().chunks && msg().chunks.length > 0;
+    },
+    get children() {
+      return createComponent(ChunksCollapsible, {
+        get chunks() {
+          return msg().chunks;
+        }
+      });
+    }
+  })));
+};
+
+// src/components/conversation/MessagesTab.tsx
+var _tmpl$16 = ["<div", ">", "</div>"];
+var _tmpl$29 = ["<div", ">No messages yet. Start a conversation to see messages here.</div>"];
+var MessagesTab = (props) => {
+  const styles = useStyles();
+  return createComponent(Show, {
+    get when() {
+      return props.messages.length > 0;
+    },
+    get fallback() {
+      return ssr(_tmpl$29, ssrAttribute("class", escape(styles().conversationDetails.emptyMessages, true), false));
+    },
+    get children() {
+      return ssr(_tmpl$16, ssrAttribute("class", escape(styles().conversationDetails.messagesList, true), false), escape(createComponent(For, {
+        get each() {
+          return props.messages;
+        },
+        children: (msg) => createComponent(MessageCard, {
+          message: msg
+        })
+      })));
+    }
+  });
+};
+var _tmpl$17 = ['<span style="', '">(', " entries)</span>"];
+var _tmpl$210 = ["<div", "><span", ">\u{1F3AF}</span><span>", " in</span><span>\u2022</span><span>", " out</span></div>"];
+var _tmpl$38 = ["<div", ">", "</div>"];
+var _tmpl$48 = ["<details", "><summary", "><div", "><div", "><span>Message #", '</span><div class="', '">\u{1F4E6} ', " chunks", "</div>", "", "</div><div", ">ID: ", "</div>", "</div></summary><div", "><div", ">", "</div></div></details>"];
+var MessageGroup = (props) => {
+  const styles = useStyles();
+  const accumulatedContent = () => props.chunks.filter((c) => c.type === "content" && (c.content || c.delta)).map((c) => c.content).join("");
+  const totalRawChunks = () => props.chunks.reduce((sum, c) => sum + (c.chunkCount || 1), 0);
+  const consolidatedEntries = () => props.chunks.length;
+  return ssr(_tmpl$48, ssrAttribute("class", escape(styles().conversationDetails.messageGroupDetails, true), false), ssrAttribute("class", escape(styles().conversationDetails.messageGroupSummary, true), false), ssrAttribute("class", escape(styles().conversationDetails.messageGroupContent, true), false), ssrAttribute("class", escape(styles().conversationDetails.messageGroupHeader, true), false), escape(props.groupIndex) + 1, `${escape(styles().conversationDetails.chunkBadge, true)} ${escape(styles().conversationDetails.chunkBadgeCount, true)}`, escape(totalRawChunks()), escape(createComponent(Show, {
+    get when() {
+      return consolidatedEntries() !== totalRawChunks();
+    },
+    get children() {
+      return ssr(_tmpl$17, ssrStyleProperty("opacity:", 0.7) + ssrStyleProperty(";margin-left:", "4px"), escape(consolidatedEntries()));
+    }
+  })), escape(createComponent(ChunkBadges, {
+    get chunks() {
+      return props.chunks;
+    }
+  })), escape(createComponent(Show, {
+    get when() {
+      return props.usage;
+    },
+    get children() {
+      return ssr(_tmpl$210, ssrAttribute("class", escape(styles().conversationDetails.messageUsage, true), false), ssrAttribute("class", escape(styles().conversationDetails.messageUsageIcon, true), false), escape(props.usage?.promptTokens.toLocaleString()), escape(props.usage?.completionTokens.toLocaleString()));
+    }
+  })), ssrAttribute("class", escape(styles().conversationDetails.messageId, true), false) + ssrAttribute("title", escape(props.messageId, true), false), escape(props.messageId), escape(createComponent(Show, {
+    get when() {
+      return accumulatedContent();
+    },
+    get children() {
+      return ssr(_tmpl$38, ssrAttribute("class", escape(styles().conversationDetails.contentPreview, true), false) + ssrAttribute("title", escape(accumulatedContent(), true), false), escape(accumulatedContent()));
+    }
+  })), ssrAttribute("class", escape(styles().conversationDetails.chunksContainer, true), false), ssrAttribute("class", escape(styles().conversationDetails.chunksList, true), false), escape(createComponent(For, {
+    get each() {
+      return props.chunks;
+    },
+    children: (chunk, chunkIndex) => createComponent(ChunkItem, {
+      chunk,
+      get index() {
+        return chunkIndex();
+      },
+      variant: "large"
+    })
+  })));
+};
+
+// src/components/conversation/ChunksTab.tsx
+var _tmpl$18 = ["<div", "><div", "><div", "><div", '>Stream Responses</div><div class="', '">', " chunks \xB7 ", " messages</div></div><div", ">Grouped by message ID</div></div><div", ">", "</div></div>"];
+var _tmpl$211 = ["<div", ">No chunks yet</div>"];
+var ChunksTab = (props) => {
+  const styles = useStyles();
+  const usageByMessageId = () => {
+    const map = /* @__PURE__ */ new Map();
+    props.messages?.forEach((msg) => {
+      if (msg.usage) {
+        map.set(msg.id, msg.usage);
+      }
+    });
+    return map;
+  };
+  const groupedChunks = () => {
+    const groups = /* @__PURE__ */ new Map();
+    props.chunks.forEach((chunk) => {
+      const key = chunk.messageId || "no-message-id";
+      if (!groups.has(key)) {
+        groups.set(key, []);
+      }
+      groups.get(key).push(chunk);
+    });
+    return Array.from(groups.entries());
+  };
+  const totalRawChunks = () => props.chunks.reduce((sum, c) => sum + (c.chunkCount || 1), 0);
+  return createComponent(Show, {
+    get when() {
+      return props.chunks.length > 0;
+    },
+    get fallback() {
+      return ssr(_tmpl$211, ssrAttribute("class", escape(styles().conversationDetails.noChunks, true), false));
+    },
+    get children() {
+      return ssr(_tmpl$18, ssrAttribute("class", escape(styles().conversationDetails.streamContainer, true), false), ssrAttribute("class", escape(styles().conversationDetails.streamHeader, true), false), ssrAttribute("class", escape(styles().conversationDetails.streamHeaderRow, true), false), ssrAttribute("class", escape(styles().conversationDetails.streamTitle, true), false), `${escape(styles().conversationDetails.chunkBadge, true)} ${escape(styles().conversationDetails.chunkBadgeCount, true)}`, escape(totalRawChunks()), escape(groupedChunks().length), ssrAttribute("class", escape(styles().conversationDetails.streamSubtitle, true), false), ssrAttribute("class", escape(styles().conversationDetails.messageGroups, true), false), escape(createComponent(For, {
+        get each() {
+          return groupedChunks();
+        },
+        children: ([messageId, chunks], groupIndex) => createComponent(MessageGroup, {
+          messageId,
+          chunks,
+          get groupIndex() {
+            return groupIndex();
+          },
+          get usage() {
+            return usageByMessageId().get(messageId);
+          }
+        })
+      })));
+    }
+  });
+};
+var _tmpl$19 = ["<div", ">", "</div>"];
+var _tmpl$212 = ["<div", ">No summarize operations yet</div>"];
+var _tmpl$39 = ["<div", ">\u23F1\uFE0F ", "</div>"];
+var _tmpl$49 = ["<div", "><span", ">Output:</span><span", ">", " chars</span></div>"];
+var _tmpl$57 = ["<div", "><div", "><div", ">\u{1F4DD}</div><div", '>Summarize</div><div class="', '">', "</div>", "</div><div", "><div", "><span", ">Model:</span><span", ">", "</span></div><div", "><span", ">Input:</span><span", ">", " chars</span></div>", "<div", "><span", ">Started:</span><span", ">", "</span></div></div></div>"];
+var SummariesTab = (props) => {
+  const styles = useStyles();
+  return createComponent(Show, {
+    get when() {
+      return props.summaries.length > 0;
+    },
+    get fallback() {
+      return ssr(_tmpl$212, ssrAttribute("class", escape(styles().conversationDetails.emptyMessages, true), false));
+    },
+    get children() {
+      return ssr(_tmpl$19, ssrAttribute("class", escape(styles().conversationDetails.messagesList, true), false), escape(createComponent(For, {
+        get each() {
+          return props.summaries;
+        },
+        children: (summary) => ssr(_tmpl$57, ssrAttribute("class", escape(styles().conversationDetails.operationCard, true), false), ssrAttribute("class", escape(styles().conversationDetails.operationHeader, true), false), ssrAttribute("class", escape(styles().conversationDetails.operationIcon, true), false), ssrAttribute("class", escape(styles().conversationDetails.operationTitle, true), false), `${escape(styles().conversationDetails.operationStatus, true)} ${summary.status === "completed" ? escape(styles().conversationDetails.operationStatusCompleted, true) : escape(styles().conversationDetails.operationStatusPending, true)}`, escape(summary.status), escape(createComponent(Show, {
+          get when() {
+            return summary.duration !== void 0 && summary.duration > 0;
+          },
+          get children() {
+            return ssr(_tmpl$39, ssrAttribute("class", escape(styles().conversationDetails.durationBadge, true), false), escape(formatDuration(summary.duration)));
+          }
+        })), ssrAttribute("class", escape(styles().conversationDetails.operationDetails, true), false), ssrAttribute("class", escape(styles().conversationDetails.operationDetail, true), false), ssrAttribute("class", escape(styles().conversationDetails.operationLabel, true), false), ssrAttribute("class", escape(styles().conversationDetails.operationValue, true), false), escape(summary.model), ssrAttribute("class", escape(styles().conversationDetails.operationDetail, true), false), ssrAttribute("class", escape(styles().conversationDetails.operationLabel, true), false), ssrAttribute("class", escape(styles().conversationDetails.operationValue, true), false), escape(summary.inputLength.toLocaleString()), escape(createComponent(Show, {
+          get when() {
+            return summary.outputLength !== void 0;
+          },
+          get children() {
+            return ssr(_tmpl$49, ssrAttribute("class", escape(styles().conversationDetails.operationDetail, true), false), ssrAttribute("class", escape(styles().conversationDetails.operationLabel, true), false), ssrAttribute("class", escape(styles().conversationDetails.operationValue, true), false), escape(summary.outputLength?.toLocaleString()));
+          }
+        })), ssrAttribute("class", escape(styles().conversationDetails.operationDetail, true), false), ssrAttribute("class", escape(styles().conversationDetails.operationLabel, true), false), ssrAttribute("class", escape(styles().conversationDetails.operationValue, true), false), escape(new Date(summary.timestamp).toLocaleTimeString()))
+      })));
+    }
+  });
+};
+var _tmpl$20 = ["<div", "><div", "><div", "><div", ">", '</div><div class="', '">', " events</div></div><div", ">Activity event log</div></div><div", ">", "</div></div>"];
+var _tmpl$213 = ["<div", ">No events yet</div>"];
+var _tmpl$310 = ["<div", "><div", ">", " \xB7 ", "</div><pre", ">", "</pre></div>"];
+var ActivityEventsTab = (props) => {
+  const styles = useStyles();
+  const formattedTimestamp = (timestamp) => new Date(timestamp).toLocaleTimeString();
+  return createComponent(Show, {
+    get when() {
+      return props.events.length > 0;
+    },
+    get fallback() {
+      return ssr(_tmpl$213, ssrAttribute("class", escape(styles().conversationDetails.noChunks, true), false));
+    },
+    get children() {
+      return ssr(_tmpl$20, ssrAttribute("class", escape(styles().conversationDetails.streamContainer, true), false), ssrAttribute("class", escape(styles().conversationDetails.streamHeader, true), false), ssrAttribute("class", escape(styles().conversationDetails.streamHeaderRow, true), false), ssrAttribute("class", escape(styles().conversationDetails.streamTitle, true), false), escape(props.title), `${escape(styles().conversationDetails.chunkBadge, true)} ${escape(styles().conversationDetails.chunkBadgeCount, true)}`, escape(props.events.length), ssrAttribute("class", escape(styles().conversationDetails.streamSubtitle, true), false), ssrAttribute("class", escape(styles().conversationDetails.messageGroups, true), false), escape(createComponent(For, {
+        get each() {
+          return props.events;
+        },
+        children: (event) => ssr(_tmpl$310, ssrAttribute("class", escape(styles().detailSection, true), false), ssrAttribute("class", escape(styles().detailSectionHeader, true), false), escape(event.name), escape(formattedTimestamp(event.timestamp)), ssrAttribute("class", escape(styles().conversationDetails.jsonPreview, true), false), escape(JSON.stringify(event.payload, null, 2)))
+      })));
+    }
+  });
+};
+
+// src/components/ConversationDetails.tsx
+var _tmpl$21 = ["<div", ">Select a conversation to view details</div>"];
+var _tmpl$214 = ["<div", ">", "", "<div", ">", "", "", "", "", "", "", "</div></div>"];
+var ConversationDetails = () => {
+  const {
+    state
+  } = useAIStore();
+  const styles = useStyles();
+  const [activeTab, setActiveTab] = createSignal("messages");
+  const activeConversation = () => {
+    if (!state.activeConversationId) return void 0;
+    return state.conversations[state.activeConversationId];
+  };
+  createEffect(() => {
+    const conv = activeConversation();
+    if (conv) {
+      if (conv.type === "server") {
+        if (conv.chunks.length > 0) {
+          setActiveTab("chunks");
+        } else if (conv.hasSummarize || conv.summaries && conv.summaries.length > 0) {
+          setActiveTab("summaries");
+        } else if (conv.hasImage || conv.imageEvents && conv.imageEvents.length > 0) {
+          setActiveTab("image");
+        } else if (conv.hasSpeech || conv.speechEvents && conv.speechEvents.length > 0) {
+          setActiveTab("speech");
+        } else if (conv.hasTranscription || conv.transcriptionEvents && conv.transcriptionEvents.length > 0) {
+          setActiveTab("transcription");
+        } else if (conv.hasVideo || conv.videoEvents && conv.videoEvents.length > 0) {
+          setActiveTab("video");
+        } else {
+          setActiveTab("chunks");
+        }
+      } else {
+        if (conv.messages.length > 0) {
+          setActiveTab("messages");
+        } else if (conv.hasImage || conv.imageEvents && conv.imageEvents.length > 0) {
+          setActiveTab("image");
+        } else if (conv.hasSpeech || conv.speechEvents && conv.speechEvents.length > 0) {
+          setActiveTab("speech");
+        } else if (conv.hasTranscription || conv.transcriptionEvents && conv.transcriptionEvents.length > 0) {
+          setActiveTab("transcription");
+        } else if (conv.hasVideo || conv.videoEvents && conv.videoEvents.length > 0) {
+          setActiveTab("video");
+        } else {
+          setActiveTab("messages");
+        }
+      }
+    }
+  });
+  return createComponent(Show, {
+    get when() {
+      return activeConversation();
+    },
+    get fallback() {
+      return ssr(_tmpl$21, ssrAttribute("class", escape(styles().conversationDetails.emptyState, true), false));
+    },
+    children: (conv) => ssr(_tmpl$214, ssrAttribute("class", escape(styles().conversationDetails.container, true), false), escape(createComponent(ConversationHeader, {
+      get conversation() {
+        return conv();
+      }
+    })), escape(createComponent(ConversationTabs, {
+      get conversation() {
+        return conv();
+      },
+      get activeTab() {
+        return activeTab();
+      },
+      onTabChange: setActiveTab
+    })), ssrAttribute("class", escape(styles().conversationDetails.contentArea, true), false), escape(createComponent(Show, {
+      get when() {
+        return activeTab() === "messages";
+      },
+      get children() {
+        return createComponent(MessagesTab, {
+          get messages() {
+            return conv().messages;
+          }
+        });
+      }
+    })), escape(createComponent(Show, {
+      get when() {
+        return activeTab() === "chunks";
+      },
+      get children() {
+        return createComponent(ChunksTab, {
+          get chunks() {
+            return conv().chunks;
+          },
+          get messages() {
+            return conv().messages;
+          }
+        });
+      }
+    })), escape(createComponent(Show, {
+      get when() {
+        return activeTab() === "summaries";
+      },
+      get children() {
+        return createComponent(SummariesTab, {
+          get summaries() {
+            return conv().summaries ?? [];
+          }
+        });
+      }
+    })), escape(createComponent(Show, {
+      get when() {
+        return activeTab() === "image";
+      },
+      get children() {
+        return createComponent(ActivityEventsTab, {
+          title: "Image Activity",
+          get events() {
+            return conv().imageEvents ?? [];
+          }
+        });
+      }
+    })), escape(createComponent(Show, {
+      get when() {
+        return activeTab() === "speech";
+      },
+      get children() {
+        return createComponent(ActivityEventsTab, {
+          title: "Speech Activity",
+          get events() {
+            return conv().speechEvents ?? [];
+          }
+        });
+      }
+    })), escape(createComponent(Show, {
+      get when() {
+        return activeTab() === "transcription";
+      },
+      get children() {
+        return createComponent(ActivityEventsTab, {
+          title: "Transcription Activity",
+          get events() {
+            return conv().transcriptionEvents ?? [];
+          }
+        });
+      }
+    })), escape(createComponent(Show, {
+      get when() {
+        return activeTab() === "video";
+      },
+      get children() {
+        return createComponent(ActivityEventsTab, {
+          title: "Video Activity",
+          get events() {
+            return conv().videoEvents ?? [];
+          }
+        });
+      }
+    })))
+  });
+};
+
+// src/components/Shell.tsx
+var _tmpl$30 = ["<div", "><div", ' style="', '"><div', ">Active Conversations</div>", '</div><div class="', '"></div><div', ' style="', '">', "</div></div>"];
+function Devtools() {
+  return createComponent(AIProvider, {
+    get children() {
+      return createComponent(DevtoolsContent, {});
+    }
+  });
+}
+function DevtoolsContent() {
+  const styles = useStyles();
+  const [leftPanelWidth, setLeftPanelWidth] = createSignal(300);
+  const [isDragging, setIsDragging] = createSignal(false);
+  let dragStartX = 0;
+  let dragStartWidth = 0;
+  const handleMouseMove = (e) => {
+    if (!isDragging()) return;
+    e.preventDefault();
+    const deltaX = e.clientX - dragStartX;
+    const newWidth = Math.max(150, Math.min(800, dragStartWidth + deltaX));
+    setLeftPanelWidth(newWidth);
+  };
+  const handleMouseUp = () => {
+    setIsDragging(false);
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  };
+  onMount(() => {
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+  });
+  onCleanup(() => {
+    document.removeEventListener("mousemove", handleMouseMove);
+    document.removeEventListener("mouseup", handleMouseUp);
+  });
+  return createComponent(MainPanel, {
+    get children() {
+      return [createComponent(Header, {
+        get children() {
+          return createComponent(HeaderLogo, {
+            flavor: {
+              light: "#ec4899",
+              dark: "#ec4899"
+            },
+            children: "TanStack AI"
+          });
+        }
+      }), ssr(_tmpl$30, ssrAttribute("class", escape(styles().mainContainer, true), false), ssrAttribute("class", escape(styles().leftPanel, true), false), ssrStyleProperty("width:", `${escape(leftPanelWidth(), true)}px`) + ssrStyleProperty(";min-width:", "150px") + ssrStyleProperty(";max-width:", "800px"), ssrAttribute("class", escape(styles().shell.sectionHeader, true), false), escape(createComponent(ConversationsList, {})), `${escape(styles().dragHandle, true)} ${isDragging() ? "dragging" : ""}`, ssrAttribute("class", escape(styles().rightPanel, true), false), ssrStyleProperty("flex:", 1), escape(createComponent(ConversationDetails, {})))];
+    }
+  });
+}
+
+export { Devtools as default };