@alexgorbatchev/shadcn 0.0.12 → 0.0.17

package/dist/chunk-9vm8fks0.js

@@ -0,0 +1,397 @@
+import {
+  usePrefersReducedMotion
+} from "./chunk-jy57625a.js";
+import {
+  useTheme2
+} from "./chunk-1j2hz3w9.js";
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+
+// src/components/assistant-ui/elements/VoiceOrb.tsx
+import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var VARIANT_TOKENS = {
+  default: ["--muted-foreground", "--foreground", "--faint-foreground"],
+  primary: ["--primary", "--foreground", "--muted-foreground"],
+  warning: ["--warning", "--foreground", "--muted-foreground"],
+  success: ["--success", "--foreground", "--muted-foreground"]
+};
+function readOrbPalette(element, variant) {
+  const canvas = document.createElement("canvas");
+  canvas.width = 1;
+  canvas.height = 1;
+  const context = canvas.getContext("2d", { willReadFrequently: true });
+  if (!context)
+    return null;
+  const style = getComputedStyle(element);
+  const readColor = (token) => {
+    context.clearRect(0, 0, 1, 1);
+    context.fillStyle = style.getPropertyValue(token);
+    context.fillRect(0, 0, 1, 1);
+    const pixels = context.getImageData(0, 0, 1, 1).data;
+    return [pixels[0] / 255, pixels[1] / 255, pixels[2] / 255];
+  };
+  const [first, second, third] = VARIANT_TOKENS[variant];
+  return [readColor(first), readColor(second), readColor(third)];
+}
+var STATE_PARAMS = {
+  idle: {
+    speed: 0.15,
+    amplitude: 0.04,
+    glow: 0.15,
+    brightness: 0.55,
+    pulse: 0,
+    saturation: 0.7
+  },
+  connecting: {
+    speed: 0.5,
+    amplitude: 0.1,
+    glow: 0.45,
+    brightness: 0.75,
+    pulse: 1,
+    saturation: 0.9
+  },
+  listening: {
+    speed: 0.4,
+    amplitude: 0.14,
+    glow: 0.5,
+    brightness: 0.85,
+    pulse: 0,
+    saturation: 1
+  },
+  speaking: {
+    speed: 1.4,
+    amplitude: 0.35,
+    glow: 0.9,
+    brightness: 1,
+    pulse: 0,
+    saturation: 1
+  },
+  muted: {
+    speed: 0.06,
+    amplitude: 0.015,
+    glow: 0.08,
+    brightness: 0.35,
+    pulse: 0,
+    saturation: 0.2
+  }
+};
+var VERT_SRC = `#version 300 es
+in vec2 a_position;
+out vec2 v_uv;
+void main() {
+  v_uv = a_position * 0.5 + 0.5;
+  gl_Position = vec4(a_position, 0.0, 1.0);
+}`;
+var FRAG_SRC = `#version 300 es
+precision highp float;
+
+in vec2 v_uv;
+out vec4 fragColor;
+
+uniform float u_time;
+uniform float u_speed;
+uniform float u_amplitude;
+uniform float u_glow;
+uniform float u_brightness;
+uniform float u_pulse;
+uniform float u_saturation;
+uniform vec3 u_color0;
+uniform vec3 u_color1;
+uniform vec3 u_color2;
+uniform float u_dpr;
+
+// Simplex-like noise (3D)
+vec3 mod289(vec3 x) { return x - floor(x / 289.0) * 289.0; }
+vec4 mod289(vec4 x) { return x - floor(x / 289.0) * 289.0; }
+vec4 permute(vec4 x) { return mod289((x * 34.0 + 1.0) * x); }
+vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
+
+float snoise(vec3 v) {
+  const vec2 C = vec2(1.0 / 6.0, 1.0 / 3.0);
+  vec3 i = floor(v + dot(v, vec3(C.y)));
+  vec3 x0 = v - i + dot(i, vec3(C.x));
+  vec3 g = step(x0.yzx, x0.xyz);
+  vec3 l = 1.0 - g;
+  vec3 i1 = min(g, l.zxy);
+  vec3 i2 = max(g, l.zxy);
+  vec3 x1 = x0 - i1 + C.x;
+  vec3 x2 = x0 - i2 + C.y;
+  vec3 x3 = x0 - 0.5;
+  i = mod289(i);
+  vec4 p = permute(permute(permute(
+    i.z + vec4(0.0, i1.z, i2.z, 1.0))
+    + i.y + vec4(0.0, i1.y, i2.y, 1.0))
+    + i.x + vec4(0.0, i1.x, i2.x, 1.0));
+  vec4 j = p - 49.0 * floor(p / 49.0);
+  vec4 x_ = floor(j / 7.0);
+  vec4 y_ = floor(j - 7.0 * x_);
+  vec4 x = (x_ * 2.0 + 0.5) / 7.0 - 1.0;
+  vec4 y = (y_ * 2.0 + 0.5) / 7.0 - 1.0;
+  vec4 h = 1.0 - abs(x) - abs(y);
+  vec4 b0 = vec4(x.xy, y.xy);
+  vec4 b1 = vec4(x.zw, y.zw);
+  vec4 s0 = floor(b0) * 2.0 + 1.0;
+  vec4 s1 = floor(b1) * 2.0 + 1.0;
+  vec4 sh = -step(h, vec4(0.0));
+  vec4 a0 = b0.xzyw + s0.xzyw * sh.xxyy;
+  vec4 a1 = b1.xzyw + s1.xzyw * sh.zzww;
+  vec3 g0 = vec3(a0.xy, h.x);
+  vec3 g1 = vec3(a0.zw, h.y);
+  vec3 g2 = vec3(a1.xy, h.z);
+  vec3 g3 = vec3(a1.zw, h.w);
+  vec4 norm = taylorInvSqrt(vec4(dot(g0,g0), dot(g1,g1), dot(g2,g2), dot(g3,g3)));
+  g0 *= norm.x; g1 *= norm.y; g2 *= norm.z; g3 *= norm.w;
+  vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
+  m = m * m;
+  return 42.0 * dot(m * m, vec4(dot(g0,x0), dot(g1,x1), dot(g2,x2), dot(g3,x3)));
+}
+
+void main() {
+  vec2 uv = v_uv * 2.0 - 1.0;
+  float dist = length(uv);
+  float t = u_time * u_speed;
+
+  // Perfect circle — hard boundary, soft anti-aliased edge
+  float radius = 0.44;
+  float circle = 1.0 - smoothstep(radius - 0.008, radius + 0.008, dist);
+
+  if (circle < 0.001) {
+    // Outer glow only
+    float glowDist = dist - radius;
+    float glow = exp(-glowDist * 12.0) * u_glow * 0.4;
+    vec3 glowColor = mix(u_color0, u_color1, 0.5);
+    fragColor = vec4(glowColor * glow, glow);
+    return;
+  }
+
+  float n1 = snoise(vec3(uv * 2.0, t * 0.6)) * 0.5 + 0.5;
+  float n2 = snoise(vec3(uv * 3.5 + 7.0, t * 0.9)) * 0.5 + 0.5;
+  float n3 = snoise(vec3(uv * 1.5 - 3.0, t * 0.4 + 10.0)) * 0.5 + 0.5;
+
+  vec2 distort = vec2(
+    snoise(vec3(uv * 2.0 + 5.0, t * 0.7)),
+    snoise(vec3(uv * 2.0 + 15.0, t * 0.7))
+  ) * u_amplitude * 2.0;
+  float n4 = snoise(vec3((uv + distort) * 3.0, t * 0.5)) * 0.5 + 0.5;
+
+  vec3 col = mix(u_color0, u_color1, n1);
+  col = mix(col, u_color2, n2 * 0.5);
+  col = mix(col, u_color1 * 1.3, n4 * 0.4);
+
+  float vein = pow(n3, 3.0) * u_amplitude * 6.0;
+  col += vein * mix(u_color1, vec3(1.0), 0.3);
+
+  float centerDist = dist / radius;
+  float depthShade = 1.0 - centerDist * centerDist * 0.4;
+  col *= depthShade;
+
+  float rim = pow(centerDist, 4.0) * 0.6;
+  col += rim * mix(u_color0, vec3(1.0), 0.5);
+
+  vec2 lightPos = vec2(-0.15, -0.18);
+  float specDist = length(uv - lightPos);
+  float spec = exp(-specDist * specDist * 30.0) * 0.7;
+  col += spec * vec3(1.0);
+
+  vec2 lightPos2 = vec2(0.2, 0.25);
+  float spec2 = exp(-length(uv - lightPos2) * 8.0) * 0.15;
+  col += spec2 * u_color1;
+
+  float pulseFactor = 1.0 + u_pulse * sin(u_time * 3.5) * 0.35;
+
+  float lum = dot(col, vec3(0.299, 0.587, 0.114));
+  col = mix(vec3(lum), col, u_saturation);
+
+  col *= u_brightness * pulseFactor;
+
+  fragColor = vec4(col, circle);
+}`;
+function createShader(gl, type, source) {
+  const shader = gl.createShader(type);
+  if (!shader)
+    return null;
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    gl.deleteShader(shader);
+    return null;
+  }
+  return shader;
+}
+function initWebGL(canvas) {
+  const gl = canvas.getContext("webgl2", {
+    alpha: true,
+    premultipliedAlpha: false,
+    antialias: true
+  });
+  if (!gl)
+    return null;
+  const vs = createShader(gl, gl.VERTEX_SHADER, VERT_SRC);
+  const fs = createShader(gl, gl.FRAGMENT_SHADER, FRAG_SRC);
+  if (!vs || !fs) {
+    if (vs)
+      gl.deleteShader(vs);
+    if (fs)
+      gl.deleteShader(fs);
+    return null;
+  }
+  const program = gl.createProgram();
+  gl.attachShader(program, vs);
+  gl.attachShader(program, fs);
+  gl.linkProgram(program);
+  gl.deleteShader(vs);
+  gl.deleteShader(fs);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    gl.deleteProgram(program);
+    return null;
+  }
+  gl.useProgram(program);
+  const buf = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);
+  const loc = gl.getAttribLocation(program, "a_position");
+  gl.enableVertexAttribArray(loc);
+  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
+  gl.enable(gl.BLEND);
+  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+  const uniforms = {
+    u_time: gl.getUniformLocation(program, "u_time"),
+    u_speed: gl.getUniformLocation(program, "u_speed"),
+    u_amplitude: gl.getUniformLocation(program, "u_amplitude"),
+    u_glow: gl.getUniformLocation(program, "u_glow"),
+    u_brightness: gl.getUniformLocation(program, "u_brightness"),
+    u_pulse: gl.getUniformLocation(program, "u_pulse"),
+    u_saturation: gl.getUniformLocation(program, "u_saturation"),
+    u_color0: gl.getUniformLocation(program, "u_color0"),
+    u_color1: gl.getUniformLocation(program, "u_color1"),
+    u_color2: gl.getUniformLocation(program, "u_color2"),
+    u_dpr: gl.getUniformLocation(program, "u_dpr")
+  };
+  return { gl, uniforms, program, buffer: buf };
+}
+function lerp(a, b, t) {
+  return a + (b - a) * t;
+}
+var VoiceOrb3 = memo(function VoiceOrb({ state = "idle", volume = 0, variant = "default" }) {
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const reducedMotionRef = useRef(prefersReducedMotion);
+  const volumeRef = useRef(0);
+  volumeRef.current = volume;
+  const canvasRef = useRef(null);
+  const glRef = useRef(null);
+  const animRef = useRef(0);
+  const startTime = useRef(performance.now());
+  const currentParams = useRef({ ...STATE_PARAMS.idle });
+  const targetParams = useRef({ ...STATE_PARAMS.idle });
+  useEffect(() => {
+    targetParams.current = { ...STATE_PARAMS[state] };
+  }, [state]);
+  const colorScheme = useTheme2().resolvedTheme;
+  const colorsRef = useRef(null);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (canvas)
+      colorsRef.current = readOrbPalette(canvas, variant);
+  }, [variant, colorScheme]);
+  const [ready, setReady] = useState(false);
+  useEffect(() => {
+    const id = requestAnimationFrame(() => setReady(true));
+    return () => {
+      cancelAnimationFrame(id);
+    };
+  }, []);
+  const render = useCallback(() => {
+    const ctx = glRef.current;
+    if (!ctx)
+      return;
+    const colors = colorsRef.current;
+    if (!colors)
+      return;
+    const { gl, uniforms } = ctx;
+    const canvas = canvasRef.current;
+    if (!canvas)
+      return;
+    const p = currentParams.current;
+    const tp = targetParams.current;
+    const s = reducedMotionRef.current ? 1 : 0.045;
+    p.speed = lerp(p.speed, tp.speed, s);
+    p.amplitude = lerp(p.amplitude, tp.amplitude, s);
+    p.glow = lerp(p.glow, tp.glow, s);
+    p.brightness = lerp(p.brightness, tp.brightness, s);
+    p.pulse = lerp(p.pulse, tp.pulse, s);
+    p.saturation = lerp(p.saturation, tp.saturation, s);
+    const elapsed = reducedMotionRef.current ? 0 : (performance.now() - startTime.current) / 1000;
+    const dpr = window.devicePixelRatio || 1;
+    const rect = canvas.getBoundingClientRect();
+    const w = Math.round(rect.width * dpr);
+    const h = Math.round(rect.height * dpr);
+    if (canvas.width !== w || canvas.height !== h) {
+      canvas.width = w;
+      canvas.height = h;
+    }
+    gl.viewport(0, 0, w, h);
+    gl.clearColor(0, 0, 0, 0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    const vol = volumeRef.current;
+    gl.uniform1f(uniforms.u_time, elapsed);
+    gl.uniform1f(uniforms.u_speed, p.speed + vol * 0.4);
+    gl.uniform1f(uniforms.u_amplitude, p.amplitude + vol * 0.12);
+    gl.uniform1f(uniforms.u_glow, p.glow + vol * 0.2);
+    gl.uniform1f(uniforms.u_brightness, p.brightness);
+    gl.uniform1f(uniforms.u_pulse, p.pulse);
+    gl.uniform1f(uniforms.u_saturation, p.saturation);
+    gl.uniform3fv(uniforms.u_color0, colors[0]);
+    gl.uniform3fv(uniforms.u_color1, colors[1]);
+    gl.uniform3fv(uniforms.u_color2, colors[2]);
+    gl.uniform1f(uniforms.u_dpr, dpr);
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    if (!reducedMotionRef.current)
+      animRef.current = requestAnimationFrame(render);
+  }, []);
+  useEffect(() => {
+    if (!ready)
+      return;
+    const canvas = canvasRef.current;
+    if (!canvas)
+      return;
+    glRef.current = initWebGL(canvas);
+    if (!glRef.current)
+      return;
+    animRef.current = requestAnimationFrame(render);
+    return () => {
+      cancelAnimationFrame(animRef.current);
+      const ctx = glRef.current;
+      if (ctx) {
+        ctx.gl.useProgram(null);
+        ctx.gl.bindBuffer(ctx.gl.ARRAY_BUFFER, null);
+        ctx.gl.deleteBuffer(ctx.buffer);
+        ctx.gl.deleteProgram(ctx.program);
+      }
+      glRef.current = null;
+    };
+  }, [ready, render]);
+  useEffect(() => {
+    reducedMotionRef.current = prefersReducedMotion;
+    if (ready) {
+      cancelAnimationFrame(animRef.current);
+      render();
+    }
+  }, [ready, prefersReducedMotion, render]);
+  useEffect(() => {
+    if (ready && prefersReducedMotion)
+      render();
+  }, [ready, prefersReducedMotion, render, state, volume, variant, colorScheme]);
+  return /* @__PURE__ */ jsx("canvas", {
+    "data-testid": "VoiceOrb",
+    ref: canvasRef,
+    role: "img",
+    "aria-label": `Voice activity: ${state}`,
+    className: cn2("aui-voice-orb size-16 shrink-0"),
+    "data-state": state
+  });
+});
+VoiceOrb3.displayName = "VoiceOrb";
+
+export { VoiceOrb3 };

package/dist/chunk-9zyam2cn.js

@@ -0,0 +1,127 @@
+import {
+  Button2
+} from "./chunk-73rkr9ct.js";
+import {
+  Card2,
+  CardHeader2,
+  CardTitle2,
+  CardDescription2,
+  CardContent2,
+  CardFooter2
+} from "./chunk-fqekyjkh.js";
+import {
+  Field2,
+  FieldLabel2
+} from "./chunk-6jpz5geq.js";
+import {
+  Textarea2
+} from "./chunk-hz9azhzx.js";
+import {
+  ToggleGroup2,
+  ToggleGroupItem2
+} from "./chunk-aexby8h3.js";
+
+// src/components/assistant-ui/elements/FeedbackDialog.tsx
+import { useId } from "react";
+import { CheckIcon, ThumbsDownIcon } from "lucide-react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+function FeedbackDialog2({
+  reasons,
+  selected,
+  note,
+  sent,
+  onToggleReason,
+  onNoteChange,
+  onSubmit,
+  ...props
+}) {
+  const noteId = useId();
+  return /* @__PURE__ */ jsxs(Card2, {
+    "data-testid": "FeedbackDialog",
+    className: "w-full max-w-sm",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        role: "status",
+        className: sent ? "flex items-center gap-control-gap px-panel" : "sr-only",
+        children: sent && /* @__PURE__ */ jsxs(Fragment, {
+          children: [
+            /* @__PURE__ */ jsx(CheckIcon, {
+              "aria-hidden": "true",
+              className: "size-4 text-success"
+            }),
+            "Thanks. That helps us tune the model."
+          ]
+        })
+      }),
+      !sent && /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+          /* @__PURE__ */ jsxs(CardHeader2, {
+            children: [
+              /* @__PURE__ */ jsxs(CardTitle2, {
+                className: "flex items-center gap-control-gap",
+                children: [
+                  /* @__PURE__ */ jsx(ThumbsDownIcon, {
+                    "aria-hidden": "true",
+                    className: "size-4"
+                  }),
+                  "What went wrong?"
+                ]
+              }),
+              /* @__PURE__ */ jsx(CardDescription2, {
+                children: "Optional"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs(CardContent2, {
+            className: "flex flex-col gap-field-gap",
+            children: [
+              /* @__PURE__ */ jsx(ToggleGroup2, {
+                multiple: true,
+                value: [...selected],
+                disabled: !onToggleReason,
+                "aria-label": "Feedback reasons",
+                variant: "outline",
+                className: "flex-wrap",
+                onValueChange: (next) => {
+                  for (const reason of reasons) {
+                    if (next.includes(reason) !== selected.includes(reason))
+                      onToggleReason?.(reason);
+                  }
+                },
+                children: reasons.map((reason) => /* @__PURE__ */ jsx(ToggleGroupItem2, {
+                  value: reason,
+                  children: reason
+                }, reason))
+              }),
+              /* @__PURE__ */ jsxs(Field2, {
+                children: [
+                  /* @__PURE__ */ jsx(FieldLabel2, {
+                    htmlFor: noteId,
+                    children: "Anything else?"
+                  }),
+                  /* @__PURE__ */ jsx(Textarea2, {
+                    id: noteId,
+                    value: note,
+                    readOnly: !onNoteChange,
+                    onChange: (event) => onNoteChange?.(event.target.value),
+                    rows: 2
+                  })
+                ]
+              })
+            ]
+          }),
+          onSubmit && /* @__PURE__ */ jsx(CardFooter2, {
+            className: "justify-end",
+            children: /* @__PURE__ */ jsx(Button2, {
+              onClick: onSubmit,
+              children: "Send feedback"
+            })
+          })
+        ]
+      })
+    ]
+  });
+}
+
+export { FeedbackDialog2 };

package/dist/chunk-a3r74mbf.js

@@ -0,0 +1,65 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  Button2
+} from "./chunk-73rkr9ct.js";
+import {
+  paper,
+  mono
+} from "./chunk-fgmcbtyt.js";
+
+// src/components/assistant-ui/elements/DraftRestore.tsx
+import { PencilLineIcon, XIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function DraftRestore2({ draft, savedAt, onRestore, onDiscard, ...props }) {
+  return /* @__PURE__ */ jsxs("div", {
+    "data-testid": "DraftRestore",
+    "data-slot": "draft-restore",
+    className: cn2(paper, "fade-in slide-in-from-bottom-1 animate-in flex w-full max-w-sm items-center gap-2.5 rounded-md py-2 pr-2 pl-3.5 duration-300"),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(PencilLineIcon, {
+        "aria-hidden": "true",
+        className: cn2("size-4")
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: "flex min-w-0 flex-1 flex-col",
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            className: "text-foreground/70 truncate text-base",
+            children: draft
+          }),
+          /* @__PURE__ */ jsxs("span", {
+            className: cn2(mono, "text-muted-foreground"),
+            children: [
+              "unsent draft · ",
+              savedAt
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx(Button2, {
+        type: "button",
+        onClick: onRestore,
+        disabled: !onRestore,
+        variant: "outline",
+        children: "Restore"
+      }),
+      /* @__PURE__ */ jsx(Button2, {
+        type: "button",
+        "aria-label": "Discard the draft",
+        onClick: onDiscard,
+        disabled: !onDiscard,
+        variant: "ghost",
+        size: "icon",
+        children: /* @__PURE__ */ jsx(XIcon, {
+          "aria-hidden": "true",
+          "data-icon": "inline-start"
+        })
+      })
+    ]
+  });
+}
+
+export { DraftRestore2 };

package/dist/chunk-a6e11wj6.js

@@ -0,0 +1,85 @@
+import {
+  Button2
+} from "./chunk-73rkr9ct.js";
+import {
+  Card2,
+  CardHeader2,
+  CardTitle2,
+  CardDescription2,
+  CardContent2
+} from "./chunk-fqekyjkh.js";
+
+// src/components/assistant-ui/elements/BackgroundInbox.tsx
+import { CheckIcon, Loader2Icon, XIcon } from "lucide-react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+function BackgroundInbox2({ runs, onCollect, ...props }) {
+  const ready = runs.filter((run) => run.state === "ready").length;
+  const running = runs.filter((run) => run.state === "running").length;
+  return /* @__PURE__ */ jsxs(Card2, {
+    "data-testid": "BackgroundInbox",
+    className: "w-full max-w-sm",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs(CardHeader2, {
+        children: [
+          /* @__PURE__ */ jsx(CardTitle2, {
+            children: "Running elsewhere"
+          }),
+          /* @__PURE__ */ jsx(CardDescription2, {
+            children: ready > 0 ? `${ready} ready` : `${running} in flight`
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx(CardContent2, {
+        className: "flex flex-col gap-control-gap",
+        children: runs.map((run) => {
+          const content = /* @__PURE__ */ jsxs(Fragment, {
+            children: [
+              run.state === "running" ? /* @__PURE__ */ jsx(Loader2Icon, {
+                "aria-hidden": "true",
+                className: "size-4 shrink-0 animate-spin motion-reduce:animate-none"
+              }) : run.state === "failed" ? /* @__PURE__ */ jsx(XIcon, {
+                "aria-hidden": "true",
+                className: "size-4 shrink-0 text-destructive"
+              }) : /* @__PURE__ */ jsx(CheckIcon, {
+                "aria-hidden": "true",
+                className: "size-4 shrink-0 text-success"
+              }),
+              /* @__PURE__ */ jsxs("span", {
+                className: "flex min-w-0 flex-1 flex-col gap-control-gap",
+                children: [
+                  /* @__PURE__ */ jsx("span", {
+                    className: "truncate",
+                    children: run.title
+                  }),
+                  run.summary && /* @__PURE__ */ jsx("span", {
+                    className: "truncate text-sm text-muted-foreground",
+                    children: run.summary
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsx("span", {
+                className: "shrink-0 text-sm text-muted-foreground tabular-nums",
+                children: run.elapsed
+              })
+            ]
+          });
+          return onCollect ? /* @__PURE__ */ jsx(Button2, {
+            fullWidth: true,
+            align: "start",
+            size: "content",
+            variant: "ghost",
+            disabled: run.state === "running",
+            onClick: () => onCollect(run.id),
+            children: content
+          }, run.id) : /* @__PURE__ */ jsx("div", {
+            className: "flex items-center gap-control-gap py-control-y",
+            children: content
+          }, run.id);
+        })
+      })
+    ]
+  });
+}
+
+export { BackgroundInbox2 };