@hienlh/ppm 0.17.33 → 0.17.34

package/src/web/components/chat/tool-cards.tsx

@@ -67,6 +67,9 @@ import type { ChatEvent } from "../../../types/chat";
 import { useShallow } from "zustand/react/shallow";
 import { useTabStore } from "@/stores/tab-store";
 import { basename } from "@/lib/utils";
+import { isImageExtension } from "../../../shared/image-extensions";
+import { resultHasImagePlaceholder } from "../../../shared/tool-result-content";
+import { ToolImagePreview } from "./tool-image-preview";
 
 /** Extract tool name and input from a ChatEvent */
 function extractToolInfo(tool: ChatEvent): { toolName: string; input: Record<string, unknown> } {
@@ -84,6 +87,18 @@ function extractToolInfo(tool: ChatEvent): { toolName: string; input: Record<str
   return { toolName, input };
 }
 
+/**
+ * Path of the image a Read call targeted, or null when it is not a displayable image read.
+ * Only absolute paths qualify, matching what useBlobUrl can resolve to the external
+ * raw-file endpoint — and what the Read tool always supplies.
+ */
+function imageReadPath(tool: ChatEvent): string | null {
+  if (tool.type !== "tool_use" || tool.tool !== "Read") return null;
+  const path = (tool.input as Record<string, unknown> | undefined)?.file_path;
+  if (typeof path !== "string" || !/^(\/|[A-Za-z]:[/\\])/.test(path)) return null;
+  return isImageExtension(path) ? path : null;
+}
+
 /** Unified tool card: shows tool-specific summary + expandable details */
 export function ToolCard({
   tool,
@@ -103,7 +118,10 @@ export function ToolCard({
     // a click — unless the edit failed (diff was never applied, so it's noise).
     const t = tool.type === "tool_use" ? tool.tool : (tool as any).tool;
     const failed = result?.type === "tool_result" && !!(result as any).isError;
-    return (t === "Edit" || t === "MultiEdit") && !failed;
+    if ((t === "Edit" || t === "MultiEdit") && !failed) return true;
+    // Same reasoning for reading an image: the thumbnail is the point of the card,
+    // so show it without requiring a click.
+    return !!imageReadPath(tool);
   });
 
   if (tool.type === "error") {
@@ -127,6 +145,10 @@ export function ToolCard({
   // File-mutation tools show their change via the inline diff/content preview — the SDK's
   // "file updated successfully" boilerplate is noise, so suppress it (but keep error output).
   const isFileMutation = ["Edit", "MultiEdit", "Write", "NotebookEdit"].includes(toolName);
+  const imagePath = imageReadPath(tool);
+  // Hide the text output only when the result really carried an image. Extension is not
+  // enough: an SVG or an undecodable format comes back as text that must stay visible.
+  const resultIsImage = hasResult && resultHasImagePlaceholder(String((result as any).output ?? ""));
 
   // Read partial output for streaming Bash/PowerShell tools
   const toolUseId = tool.type === "tool_use" ? (tool as any).toolUseId as string | undefined : undefined;
@@ -194,7 +216,10 @@ export function ToolCard({
           {hasChildren && (
             <SubagentChildren events={children!} projectName={projectName} />
           )}
-          {hasResult && !(isFileMutation && !isError) && (
+          {imagePath && (
+            <ToolImagePreview filePath={imagePath} projectName={projectName ?? ""} />
+          )}
+          {hasResult && !(isFileMutation && !isError) && !(resultIsImage && !isError) && (
             <ToolResultView toolName={toolName} output={(result as any).output} />
           )}
         </div>

package/src/web/components/chat/tool-image-preview.tsx

@@ -0,0 +1,225 @@
+import { useEffect, useState } from "react";
+import { useShallow } from "zustand/react/shallow";
+import { useBlobUrl } from "@/hooks/use-blob-url";
+import { useImageOverlay } from "@/stores/image-overlay-store";
+import { useTabStore } from "@/stores/tab-store";
+import { copyToClipboard } from "@/lib/clipboard";
+import { basename } from "@/lib/utils";
+import { ImagePreviewFailure, ImagePreviewSkeleton } from "./image-preview-states";
+import {
+  cacheNatural,
+  dimensionsLabel,
+  formatBytes,
+  getCachedNatural,
+  previewLayout,
+  TILE_WIDTH,
+  type NaturalSize,
+} from "./image-preview-geometry";
+
+/** Ratio the skeleton assumes before the image has ever been measured. */
+const FALLBACK_ASPECT = 4 / 5;
+
+const LABEL = "text-[var(--img-meta-label)] @max-[470px]:hidden";
+const VALUE = "truncate text-text @max-[470px]:text-text-2";
+const GHOST =
+  "h-[30px] @max-[470px]:h-[36px] shrink-0 rounded-[7px] px-[9px] font-mono text-[11.5px] " +
+  "text-text-2 bg-[var(--img-ghost)] border border-[var(--img-ghost-border)] backdrop-blur-[6px] " +
+  "transition-colors can-hover:hover:bg-[var(--img-ghost-hover)] " +
+  "can-hover:hover:border-[var(--img-ghost-hover-border)] can-hover:hover:text-text";
+
+/**
+ * The image a Read call opened, shown on a stage lit by a blurred copy of itself, beside
+ * the file facts needed to decide whether to open it. Fetched as a blob with an
+ * Authorization header, so no auth token ends up in an image URL.
+ */
+export function ToolImagePreview({
+  filePath,
+  projectName,
+}: {
+  filePath: string;
+  projectName: string;
+}) {
+  const [attempt, setAttempt] = useState(0);
+  const { blobUrl, blob, error, errorCode } = useBlobUrl(filePath, projectName, undefined, attempt);
+  const [natural, setNatural] = useState<NaturalSize | undefined>(() => getCachedNatural(filePath));
+  const [decodeFailed, setDecodeFailed] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const openOverlay = useImageOverlay((s) => s.open);
+  const { openTab } = useTabStore(useShallow((s) => ({ openTab: s.openTab })));
+  const name = basename(filePath);
+
+  useEffect(() => {
+    if (!copied) return;
+    const timer = setTimeout(() => setCopied(false), 1200);
+    return () => clearTimeout(timer);
+  }, [copied]);
+
+  const measure = (img: HTMLImageElement) => {
+    const size = { w: img.naturalWidth, h: img.naturalHeight };
+    if (!size.w || !size.h) return setDecodeFailed(true);
+    cacheNatural(filePath, size);
+    setNatural(size);
+  };
+
+  const retry = () => {
+    setDecodeFailed(false);
+    setAttempt((n) => n + 1);
+  };
+
+  if (error || decodeFailed) {
+    return (
+      <div className="border-t border-border pt-1.5">
+        <ImagePreviewFailure code={decodeFailed ? undefined : errorCode ?? undefined} onRetry={retry} />
+      </div>
+    );
+  }
+
+  const layout = natural ? previewLayout(natural, TILE_WIDTH) : null;
+  const skeletonAspect = layout?.aspect ?? FALLBACK_ASPECT;
+
+  const actions = (
+    <div className="flex flex-wrap gap-[6px]">
+      <button type="button" onClick={openInEditor} className={GHOST}>
+        <span className="@max-[470px]:hidden">open in editor</span>
+        <span className="hidden @max-[470px]:inline">open</span>
+      </button>
+      <button type="button" onClick={copyPath} className={GHOST}>
+        {copied ? "copied" : "copy path"}
+      </button>
+      <button type="button" onClick={openFull} className={GHOST}>
+        full size
+      </button>
+    </div>
+  );
+
+  function openInEditor() {
+    if (!projectName) return;
+    openTab({
+      type: "editor",
+      title: name,
+      metadata: { filePath, projectName },
+      projectId: projectName,
+      closable: true,
+    });
+  }
+
+  function copyPath() {
+    void copyToClipboard(filePath).then(() => setCopied(true));
+  }
+
+  function openFull() {
+    if (blobUrl) openOverlay(blobUrl, name);
+  }
+
+  // Loading: the same box as the loaded state, so the transcript never shifts under the
+  // reader once the image resolves.
+  if (!blobUrl || !layout || !natural) {
+    return (
+      <div className="@container border-t border-border pt-1.5">
+        {blobUrl && (
+          <img
+            src={blobUrl}
+            alt=""
+            className="hidden"
+            onLoad={(e) => measure(e.currentTarget)}
+            onError={() => setDecodeFailed(true)}
+          />
+        )}
+        <ImagePreviewSkeleton aspect={skeletonAspect} actions={actions} />
+      </div>
+    );
+  }
+
+  const metadata = (
+    <>
+      <dt className={LABEL}>dimensions</dt>
+      <dd className={VALUE}>{dimensionsLabel(natural, layout.fit)}</dd>
+      {blob && (
+        <>
+          <dt className={LABEL}>size</dt>
+          <dd className={VALUE}>
+            {formatBytes(blob.size)}
+            {blob.type ? ` · ${blob.type}` : ""}
+          </dd>
+        </>
+      )}
+      <dt className={LABEL}>path</dt>
+      {/* rtl puts the ellipsis at the head of the path, keeping the filename readable */}
+      <dd dir="rtl" className={`${VALUE} text-left`}>
+        {filePath}
+      </dd>
+    </>
+  );
+
+  const picture = (
+    <img
+      src={blobUrl}
+      alt={name}
+      onLoad={(e) => measure(e.currentTarget)}
+      onError={() => setDecodeFailed(true)}
+      className={
+        layout.fit === "cover"
+          ? "size-full object-cover"
+          : layout.fit === "contain"
+            ? "size-full object-contain"
+            : "max-h-full max-w-full"
+      }
+    />
+  );
+
+  return (
+    <div className="@container border-t border-border pt-1.5">
+      <div className="relative overflow-hidden rounded-lg border border-border p-[14px] @max-[470px]:p-[11px]">
+        <img
+          aria-hidden="true"
+          alt=""
+          src={blobUrl}
+          className="absolute inset-0 size-full object-cover"
+          style={{ filter: "var(--img-backdrop)", transform: "scale(1.3)" }}
+        />
+        <div className="absolute inset-0" style={{ background: "var(--img-veil)" }} />
+
+        {layout.variant === "band" ? (
+          <div className="relative grid gap-[11px]">
+            <button
+              type="button"
+              onClick={openFull}
+              title={`Open ${name}`}
+              className="img-checkerboard w-full cursor-zoom-in overflow-hidden rounded-lg border border-[var(--img-plate-border)]"
+              style={{ aspectRatio: layout.aspect }}
+            >
+              {picture}
+            </button>
+            <dl className="grid grid-cols-[auto_auto_1fr] gap-x-[18px] font-mono text-[11.5px] [&_dt]:hidden">
+              {metadata}
+            </dl>
+            {actions}
+          </div>
+        ) : (
+          <div className="relative grid grid-cols-[132px_1fr] items-start gap-[14px] @max-[470px]:grid-cols-[64px_1fr] @max-[470px]:gap-[11px]">
+            <button
+              type="button"
+              onClick={openFull}
+              title={`Open ${name}`}
+              className={`cursor-zoom-in overflow-hidden rounded-lg border border-[var(--img-plate-border)] bg-[var(--img-plate)] shadow-[var(--img-plate-shadow)] ${
+                layout.fit === "cover" ? "" : "img-checkerboard flex items-center justify-center"
+              }`}
+              style={{ aspectRatio: layout.aspect }}
+            >
+              {picture}
+            </button>
+            <div className="flex min-w-0 flex-col gap-[9px]">
+              <p className="truncate text-[13px] font-semibold text-text @max-[470px]:hidden">
+                {name}
+              </p>
+              <dl className="grid grid-cols-[auto_1fr] gap-x-[14px] gap-y-[4px] font-mono text-[11.5px] @max-[470px]:grid-cols-[1fr]">
+                {metadata}
+              </dl>
+              {actions}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/web/components/editor/audio-preview.tsx

@@ -1,5 +1,5 @@
 import { Loader2, FileWarning, Music } from "lucide-react";
-import { useBlobUrl } from "./use-blob-url";
+import { useBlobUrl } from "@/hooks/use-blob-url";
 import { basename } from "@/lib/utils";
 
 export function AudioPreview({ filePath, projectName }: { filePath: string; projectName: string }) {

package/src/web/components/editor/image-preview.tsx

@@ -1,5 +1,5 @@
 import { Loader2, FileWarning } from "lucide-react";
-import { useBlobUrl } from "./use-blob-url";
+import { useBlobUrl } from "@/hooks/use-blob-url";
 
 export function ImagePreview({ filePath, projectName }: { filePath: string; projectName: string }) {
   const { blobUrl, error } = useBlobUrl(filePath, projectName);

package/src/web/components/editor/video-preview.tsx

@@ -1,5 +1,5 @@
 import { Loader2, FileWarning } from "lucide-react";
-import { useBlobUrl } from "./use-blob-url";
+import { useBlobUrl } from "@/hooks/use-blob-url";
 
 export function VideoPreview({ filePath, projectName }: { filePath: string; projectName: string }) {
   const { blobUrl, error } = useBlobUrl(filePath, projectName);

package/src/web/{components/editor → hooks}/use-blob-url.ts

@@ -11,11 +11,16 @@ export function useBlobUrl(
   refreshKey = 0,
 ) {
   const [blobUrl, setBlobUrl] = useState<string | null>(null);
+  const [blob, setBlob] = useState<Blob | null>(null);
   const [error, setError] = useState(false);
+  const [errorCode, setErrorCode] = useState<string | null>(null);
   const urlRef = useRef<string | null>(null);
 
   useEffect(() => {
     let cancelled = false;
+    // Reset so a retry (bumped refreshKey) leaves the error state.
+    setError(false);
+    setErrorCode(null);
     const isExternal = /^(\/|[A-Za-z]:[/\\])/.test(filePath);
     const url = isExternal
       ? `/api/fs/raw?path=${encodeURIComponent(filePath)}`
@@ -23,7 +28,7 @@ export function useBlobUrl(
     const token = getAuthToken();
     fetch(url, { headers: token ? { Authorization: `Bearer ${token}` } : {} })
       .then((r) => {
-        if (!r.ok) throw new Error("Failed");
+        if (!r.ok) throw new Error(String(r.status));
         return r.blob();
       })
       .then((blob) => {
@@ -34,8 +39,13 @@ export function useBlobUrl(
         if (urlRef.current) URL.revokeObjectURL(urlRef.current);
         urlRef.current = u;
         setBlobUrl(u);
+        setBlob(final);
       })
-      .catch(() => { if (!cancelled) setError(true); });
+      .catch((e: Error) => {
+        if (cancelled) return;
+        setError(true);
+        setErrorCode(/^\d+$/.test(e.message) ? e.message : "network");
+      });
     return () => { cancelled = true; };
   }, [filePath, projectName, mimeOverride, refreshKey]);
 
@@ -44,5 +54,6 @@ export function useBlobUrl(
     if (urlRef.current) URL.revokeObjectURL(urlRef.current);
   }, []);
 
-  return { blobUrl, error };
+  // `blob` is exposed so callers can read size and MIME type without a second request.
+  return { blobUrl, blob, error, errorCode };
 }

package/src/web/styles/globals.css

@@ -101,6 +101,78 @@
   --blur: 16px;
 }
 
+/*
+ * Ambient image stage (chat Read-tool image results). The panel floats a tile on a
+ * blurred copy of the image itself, so its surfaces are translucent veils rather than
+ * theme tokens. Declared per mode because the veil must stay contrast-safe over both a
+ * bright poster and a dark screenshot. Dark lives in :root, matching the default above.
+ */
+:root {
+  --img-veil: linear-gradient(100deg, rgba(10, 16, 32, 0.6), rgba(10, 16, 32, 0.84));
+  --img-backdrop: blur(40px) saturate(1.6);
+  --img-plate: rgba(255, 255, 255, 0.06);
+  --img-plate-border: rgba(148, 178, 255, 0.22);
+  --img-plate-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 16px 34px -20px rgba(0, 0, 0, 0.7);
+  --img-ghost: rgba(255, 255, 255, 0.08);
+  --img-ghost-border: rgba(255, 255, 255, 0.14);
+  --img-ghost-hover: rgba(255, 255, 255, 0.14);
+  --img-ghost-hover-border: rgba(148, 178, 255, 0.35);
+  --img-meta-label: #8b97b4;
+  --img-checker: rgba(255, 255, 255, 0.04);
+  /* Own values rather than a surface token: on flat light themes panel and panel-2 are
+     both #ffffff, which would make the skeleton invisible on the card. */
+  --img-skeleton: rgba(255, 255, 255, 0.09);
+  --img-skeleton-sweep: rgba(255, 255, 255, 0.14);
+}
+
+html.light {
+  --img-veil: linear-gradient(100deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.84));
+  --img-backdrop: blur(40px) saturate(1.6) brightness(0.95);
+  --img-plate: rgba(255, 255, 255, 0.5);
+  --img-plate-border: rgba(255, 255, 255, 0.7);
+  --img-plate-shadow: 0 2px 4px rgba(15, 23, 42, 0.14), 0 16px 34px -20px rgba(15, 23, 42, 0.55);
+  --img-ghost: rgba(255, 255, 255, 0.7);
+  --img-ghost-border: rgba(255, 255, 255, 0.85);
+  --img-ghost-hover: rgba(255, 255, 255, 0.95);
+  --img-ghost-hover-border: #cbd5e1;
+  --img-meta-label: #7c8899;
+  --img-checker: rgba(15, 23, 42, 0.03);
+  --img-skeleton: rgba(15, 23, 42, 0.07);
+  --img-skeleton-sweep: rgba(255, 255, 255, 0.75);
+}
+
+/* Backing for image tiles that letterbox: shows the transparent area without reading
+   as an empty box. Padding keeps the artwork off the tile edge. */
+.img-checkerboard {
+  background-image:
+    linear-gradient(45deg, var(--img-checker) 25%, transparent 25%, transparent 75%, var(--img-checker) 75%),
+    linear-gradient(45deg, var(--img-checker) 25%, transparent 25%, transparent 75%, var(--img-checker) 75%);
+  background-size: 14px 14px;
+  background-position: 0 0, 7px 7px;
+  padding: 6px;
+}
+
+/* Skeleton that occupies the loaded box exactly, so the row never grows after paint. */
+.img-skeleton {
+  position: relative;
+  overflow: hidden;
+  background: var(--img-skeleton);
+}
+.img-skeleton::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(100deg, transparent 20%, var(--img-skeleton-sweep) 50%, transparent 80%);
+  animation: img-skeleton-sweep 1.25s linear infinite;
+}
+@keyframes img-skeleton-sweep {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(100%); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .img-skeleton::after { animation: none; }
+}
+
 /* Smooth theme transitions (~250ms) */
 html {
   transition: background-color 0.25s ease-out, color 0.25s ease-out;

package/dist/web/assets/group-chat-tab-2NJcUl_4.js

@@ -1 +0,0 @@
-import{o as e}from"./rolldown-runtime-FhOqtrmT.js";import{b as t,y as n}from"./vendor-markdown-CKTlmXbz.js";import"./vendor-ui-DMRGWRuc.js";import{t as r}from"./createLucideIcon-ConhwJnb.js";import{g as i,p as a,t as o}from"./mobile-bottom-sheet-BwPBKZON.js";import{n as s}from"./use-is-mobile-BcuCjH19.js";import{t as c}from"./chevron-right-DeUue2aK.js";import{n as l,t as u}from"./tool-cards-DT3R2C18.js";import{a as d,c as f,n as p,o as m,t as h}from"./dialog-HHdNInEH.js";import"./api-client-DhXpjLdi.js";import"./vendor-mermaid-CYOBtZtD.js";import"./settings-store-DFMz_Oer.js";import{n as g}from"./utils-E0yyGxXt.js";import"./panel-store-D-RxcUgH.js";import{i as _}from"./project-store-C1jInVih.js";import"./tab-store-CNxCwdXw.js";import{Bt as v,C as y,Dt as b,G as x,It as S,J as C,K as w,Qt as T,S as E,Ut as ee,W as D,_ as O,b as k,g as te,h as A,jt as j,m as ne,p as M,q as N,v as re,x as P,y as F,zt as I}from"./index-BI35sAVB.js";import{t as L}from"./markdown-renderer-DoofKFOC.js";var R=r(`scroll-text`,[[`path`,{d:`M15 12h-5`,key:`r7krc0`}],[`path`,{d:`M15 8h-5`,key:`1khuty`}],[`path`,{d:`M19 17V5a2 2 0 0 0-2-2H4`,key:`zz82l3`}],[`path`,{d:`M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3`,key:`1ph1d7`}]]),z=r(`user-plus`,[[`path`,{d:`M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2`,key:`1yyitq`}],[`circle`,{cx:`9`,cy:`7`,r:`4`,key:`nufk8`}],[`line`,{x1:`19`,x2:`19`,y1:`8`,y2:`14`,key:`1bvyxn`}],[`line`,{x1:`22`,x2:`16`,y1:`11`,y2:`11`,key:`1shjgl`}]]),B=e(t(),1),V=8e3;function ie(e,t){let[n,r]=(0,B.useState)([]),[i,a]=(0,B.useState)([]),[o,s]=(0,B.useState)(`idle`),[c,u]=(0,B.useState)({}),[d,f]=(0,B.useState)(!1),[p,m]=(0,B.useState)(!1),[h,g]=(0,B.useState)(!1),[_,v]=(0,B.useState)(null),y=(0,B.useRef)(new Map),b=(0,B.useCallback)(e=>{u(t=>{if(!t[e])return t;let n={...t};return delete n[e],n})},[]),x=(0,B.useCallback)(e=>{let t;try{t=JSON.parse(e.data)}catch{return}switch(t.type){case`ping`:return;case`group_state`:m(!0),s(t.status),a(t.members),g(t.status===`active`);return;case`group_message`:b(t.message.fromMember),r(e=>e.some(e=>e.id===t.message.id)?e:[...e,t.message]);return;case`member_status`:a(e=>e.map(e=>e.id===t.memberId?{...e,status:t.status}:e));return;case`typing`:{u(e=>({...e,[t.member]:!0}));let e=y.current,n=e.get(t.member);n&&clearTimeout(n),e.set(t.member,setTimeout(()=>b(t.member),V));return}case`turn_done`:return;case`group_done`:g(!1),s(`idle`),u({});return;case`error`:v(t.message),g(!1);return}},[b]),{send:S}=l({url:e&&t?`/ws/project/${encodeURIComponent(t)}/group/${encodeURIComponent(e)}`:``,onMessage:x,autoConnect:!!e&&!!t});return(0,B.useEffect)(()=>{let t=!1;r([]),a([]),u({}),s(`idle`),g(!1),v(null),m(!1);for(let e of y.current.values())clearTimeout(e);if(y.current.clear(),e)return f(!0),A(e,{limit:200}).then(e=>{t||r(t=>{let n=new Set(e.messages.map(e=>e.id)),r=t.filter(e=>!n.has(e.id));return[...e.messages,...r]})}).catch(e=>{t||v(e instanceof Error?e.message:`Failed to load feed`)}).finally(()=>{t||f(!1)}),()=>{t=!0}},[e]),{messages:n,members:i,status:o,typing:c,loading:d,isConnected:p,isRunning:h,error:_,sendMessage:(0,B.useCallback)(t=>{let n=t.trim();!n||!e||(v(null),g(!0),p?S(JSON.stringify({type:`message`,content:n})):k(e,n).catch(e=>{v(e instanceof Error?e.message:`Failed to send message`),g(!1)}))},[e,p,S]),stop:(0,B.useCallback)(()=>{e&&(p?S(JSON.stringify({type:`stop`})):P(e).catch(()=>{}),s(`paused`),g(!1))},[e,p,S]),resume:(0,B.useCallback)(()=>{e&&F(e).then(()=>{s(`active`),g(!0)}).catch(e=>v(e instanceof Error?e.message:`Failed to resume`))},[e])}}var H=n();function U(e){let t=e.trim().split(/\s+/).filter(Boolean);return t.length===0?`?`:t.length===1?t[0].slice(0,2).toUpperCase():(t[0][0]+t[t.length-1][0]).toUpperCase()}function W(e){try{let t=e<0xe8d4a51000?e*1e3:e;return new Date(t).toLocaleTimeString([],{hour:`2-digit`,minute:`2-digit`})}catch{return``}}function G(e,t){return e.split(/(@[\p{L}\p{N}_]+)/gu).map((e,n)=>{if(e.startsWith(`@`)&&e.length>1){let r=t(e.slice(1));return(0,H.jsx)(`span`,{className:g(`font-semibold`,!r&&`text-primary`),style:r?{color:r}:void 0,children:e},n)}return e})}var ae=(0,B.memo)(function({message:e,colorFor:t,isLeader:n,onViewFull:r}){let i=e.fromMember===`user`,a=i?`You`:e.fromMember,o=i?`var(--color-primary)`:t(e.fromMember)??`var(--accent)`,s=!i&&n(e.fromMember),c=e.summary??``,l=e.toMember&&e.toMember!==`all`?e.toMember:null,u=(0,H.jsxs)(`div`,{className:g(`group relative flex gap-2.5 px-3 py-2 transition-colors hover:bg-surface-elevated/50`,i&&`bg-primary/5`),style:{boxShadow:`inset 3px 0 0 0 ${o}`},children:[e.fullSessionRef&&(0,H.jsx)(`button`,{type:`button`,onClick:()=>r(e),title:`View full transcript (AI's raw thinking / debug)`,"aria-label":`View full transcript`,className:`absolute right-1.5 top-1.5 hidden items-center rounded p-1 text-text-subtle/60 hover:bg-surface-elevated hover:text-text-secondary can-hover:group-hover:inline-flex`,children:(0,H.jsx)(R,{className:`size-3.5`})}),(0,H.jsx)(`div`,{className:`mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-full text-[11px] font-semibold text-white ring-2 ring-background`,style:{backgroundColor:o},"aria-hidden":!0,children:U(a)}),(0,H.jsxs)(`div`,{className:`min-w-0 flex-1 can-hover:pr-6`,children:[(0,H.jsxs)(`div`,{className:`flex flex-wrap items-center gap-x-2 gap-y-0.5`,children:[(0,H.jsx)(`span`,{className:`text-sm font-semibold`,style:{color:i?`var(--color-foreground)`:o},children:a}),s&&(0,H.jsx)(`span`,{className:`rounded bg-surface-elevated px-1.5 py-px text-[10px] font-medium text-text-secondary`,children:`leader`}),l&&(0,H.jsxs)(`span`,{className:`text-[11px] text-text-subtle`,children:[`→ `,l]}),(0,H.jsx)(`span`,{className:`text-[11px] text-text-subtle`,children:W(e.createdAt)})]}),(0,H.jsx)(`div`,{className:`mt-0.5 whitespace-pre-wrap break-words text-sm leading-relaxed text-text-secondary`,children:G(c,t)})]})]});return e.fullSessionRef?(0,H.jsxs)(D,{children:[(0,H.jsx)(N,{asChild:!0,children:u}),(0,H.jsx)(x,{children:(0,H.jsxs)(w,{onClick:()=>r(e),children:[(0,H.jsx)(R,{className:`size-4`}),` View full transcript`]})})]}):u}),K={idle:`bg-text-subtle`,working:`bg-primary animate-pulse`,done:`bg-emerald-500`,error:`bg-destructive`},q={idle:`Idle`,working:`Working`,done:`Done`,error:`Error`},J=(0,B.memo)(function({members:e,liveStatus:t,typing:n,busy:r,onAdd:i,onEdit:o,onRemove:s}){return(0,H.jsxs)(`div`,{className:`flex flex-col gap-0.5 p-2`,children:[e.map(e=>{let i=n[e.name],c=t.get(e.id)??e.status;return(0,H.jsxs)(`div`,{className:`group flex items-center gap-2 rounded-md px-2 py-1.5`,children:[(0,H.jsx)(`span`,{className:`flex size-6 shrink-0 items-center justify-center rounded-full text-[10px] font-semibold text-white ring-2 ring-background`,style:{backgroundColor:e.color??`var(--accent)`},"aria-hidden":!0,children:e.name.slice(0,1).toUpperCase()}),(0,H.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,H.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[(0,H.jsx)(`span`,{className:`truncate text-xs font-medium`,style:{color:e.color??`var(--color-foreground)`},children:e.name}),e.role===`leader`&&(0,H.jsx)(`span`,{className:`rounded-sm bg-accent-wash px-1 text-[9px] font-semibold uppercase text-primary`,children:`lead`})]}),(0,H.jsx)(`span`,{className:`block truncate text-[10px] text-text-subtle`,children:i?`typing…`:e.persona||q[c]})]}),(0,H.jsxs)(`div`,{className:`flex shrink-0 items-center gap-0.5 can-hover:opacity-0 can-hover:group-hover:opacity-100`,children:[(0,H.jsx)(`button`,{type:`button`,onClick:()=>o(e),disabled:r,"aria-label":`Edit ${e.name}`,className:`flex size-8 items-center justify-center rounded-md text-text-subtle hover:bg-surface-elevated hover:text-foreground active:bg-surface-elevated disabled:opacity-40`,children:(0,H.jsx)(a,{className:`size-3.5`})}),(0,H.jsx)(`button`,{type:`button`,onClick:()=>s(e),disabled:r,"aria-label":`Remove ${e.name}`,className:`flex size-8 items-center justify-center rounded-md text-text-subtle hover:bg-surface-elevated hover:text-destructive active:bg-surface-elevated disabled:opacity-40`,children:(0,H.jsx)(j,{className:`size-3.5`})})]}),(0,H.jsx)(`span`,{className:g(`size-2 shrink-0 rounded-full`,K[c]),title:q[c],"aria-hidden":!0})]},e.id)}),(0,H.jsxs)(`button`,{type:`button`,onClick:i,disabled:r,className:`mt-1 flex items-center gap-2 rounded-md px-2 py-2 text-xs font-medium text-primary hover:bg-surface-elevated active:bg-surface-elevated disabled:opacity-40`,children:[(0,H.jsx)(z,{className:`size-4`}),` Add member`]})]})}),Y=`w-full min-h-[40px] rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-text-subtle focus:outline-none focus:ring-1 focus:ring-primary`;function oe({open:e,member:t,projectName:n,providerId:r=`claude`,onSubmit:i,onClose:a}){let c=s(),[l,u]=(0,B.useState)(t?.name??``),[g,_]=(0,B.useState)(t?.persona??``),[v,y]=(0,B.useState)(t?.model??null),[b,x]=(0,B.useState)(t?.role===`leader`),[S,C]=(0,B.useState)(!1),[w,E]=(0,B.useState)(null),ee=(0,B.useCallback)(async()=>{let e=l.trim();if(!e){E(`Name is required`);return}C(!0),E(null);try{await i({name:e,persona:g.trim()||null,model:v,role:b?`leader`:`member`}),a()}catch(e){E(e instanceof Error?e.message:`Failed to save member`),C(!1)}},[l,g,v,b,i,a]),D=t?.role===`leader`,O=(0,H.jsxs)(`div`,{className:`flex flex-col gap-3 px-1 py-1`,children:[(0,H.jsx)(`input`,{className:Y,value:l,onChange:e=>u(e.target.value),placeholder:`Member name`,autoFocus:!0}),(0,H.jsx)(`input`,{className:Y,value:g,onChange:e=>_(e.target.value),placeholder:`Persona (optional)`}),(0,H.jsx)(M,{value:v,onChange:y,projectName:n,providerId:r}),(0,H.jsxs)(`label`,{className:X(D),children:[(0,H.jsx)(`input`,{type:`checkbox`,className:`size-4 accent-[var(--color-primary)]`,checked:b,disabled:D,onChange:e=>x(e.target.checked)}),(0,H.jsx)(`span`,{children:D?`Leader (reassign from another member)`:`Set as leader`})]}),w&&(0,H.jsx)(`p`,{className:`text-xs text-destructive`,children:w}),(0,H.jsxs)(`div`,{className:`flex justify-end gap-2 pt-1`,children:[(0,H.jsx)(f,{variant:`outline`,onClick:a,disabled:S,children:`Cancel`}),(0,H.jsxs)(f,{onClick:ee,disabled:S,children:[S&&(0,H.jsx)(T,{className:`mr-1.5 size-4 animate-spin`}),t?`Save`:`Add member`]})]})]});if(!e)return null;let k=t?`Edit member`:`Add member`;return c?(0,H.jsx)(o,{open:!0,onClose:a,className:`flex max-h-[90vh] flex-col`,children:(0,H.jsxs)(`div`,{className:`flex min-h-0 flex-col px-4 pb-2`,children:[(0,H.jsx)(`h2`,{className:`mb-2 text-base font-semibold text-foreground`,children:k}),O]})}):(0,H.jsx)(h,{open:!0,onOpenChange:e=>{e||a()},children:(0,H.jsxs)(p,{className:`flex flex-col sm:max-w-md`,children:[(0,H.jsx)(d,{children:(0,H.jsx)(m,{children:k})}),O]})})}function X(e){return`flex items-center gap-2 text-sm text-text-secondary ${e?`opacity-60`:``}`}function se({messages:e,config:t,projectName:n}){return(0,H.jsxs)(`div`,{className:`flex flex-col gap-3`,children:[t&&(0,H.jsx)(Z,{config:t}),e.map(e=>(0,H.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[(0,H.jsx)(`span`,{className:`text-[10px] font-semibold uppercase tracking-wide text-text-subtle`,children:e.role===`user`?`User`:e.role===`assistant`?`Assistant`:e.role}),(0,H.jsx)(ce,{message:e,projectName:n})]},e.id)),e.length===0&&(0,H.jsx)(`p`,{className:`py-6 text-center text-sm text-text-subtle`,children:`Transcript is empty.`})]})}function ce({message:e,projectName:t}){let n=e.events??[];if(n.length===0)return e.content.trim()?(0,H.jsx)(L,{content:e.content}):null;let r=new Map;for(let e of n)e.type===`tool_result`&&e.toolUseId&&r.set(e.toolUseId,e);return(0,H.jsx)(`div`,{className:`flex flex-col gap-2`,children:n.map((e,n)=>{if(e.type===`text`)return e.content.trim()?(0,H.jsx)(L,{content:e.content},n):null;if(e.type===`thinking`)return(0,H.jsx)(le,{content:e.content},n);if(e.type===`tool_use`){let i=e.toolUseId?r.get(e.toolUseId):void 0;return(0,H.jsx)(u,{tool:e,result:i,completed:!!i,projectName:t},n)}return null})})}function le({content:e}){let[t,n]=(0,B.useState)(!1);return(0,H.jsxs)(`div`,{className:`rounded-md border border-border bg-surface-elevated/40`,children:[(0,H.jsxs)(`button`,{type:`button`,onClick:()=>n(e=>!e),className:`flex w-full items-center gap-1.5 px-2.5 py-1.5 text-xs text-text-subtle hover:text-text-secondary`,children:[(0,H.jsx)(c,{className:g(`size-3.5 transition-transform`,t&&`rotate-90`)}),(0,H.jsx)(i,{className:`size-3.5`}),(0,H.jsx)(`span`,{children:`Thinking`})]}),t&&(0,H.jsx)(`div`,{className:`border-t border-border px-3 py-2 text-xs leading-relaxed text-text-secondary`,children:(0,H.jsx)(L,{content:e})})]})}function Z({config:e}){let[t,n]=(0,B.useState)(!1),r=[[`Model`,e.model],[`Permission`,e.permissionMode],[`CWD`,e.cwd],[`Git branch`,e.gitBranch],[`CLI version`,e.version]].filter(([,e])=>e);return r.length===0?null:(0,H.jsxs)(`div`,{className:`rounded-md border border-border bg-surface-elevated/40`,children:[(0,H.jsxs)(`button`,{type:`button`,onClick:()=>n(e=>!e),className:`flex w-full items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-text-secondary hover:text-foreground`,children:[(0,H.jsx)(c,{className:g(`size-3.5 transition-transform`,t&&`rotate-90`)}),(0,H.jsx)(I,{className:`size-3.5`}),(0,H.jsx)(`span`,{children:`Input config`})]}),t&&(0,H.jsx)(`dl`,{className:`grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 border-t border-border px-3 py-2 text-xs`,children:r.map(([e,t])=>(0,H.jsxs)(`div`,{className:`contents`,children:[(0,H.jsx)(`dt`,{className:`text-text-subtle`,children:e}),(0,H.jsx)(`dd`,{className:`break-all font-mono text-text-secondary`,children:t})]},e))})]})}function ue({groupId:e,message:t,onClose:n}){let r=s(),[i,a]=(0,B.useState)(null),[c,l]=(0,B.useState)(!1),[u,f]=(0,B.useState)(null),g=t?.fullSessionRef??null;if((0,B.useEffect)(()=>{if(!t||!g)return;let n=!1;return a(null),f(null),l(!0),O(e,g).then(e=>{n||a(e)}).catch(e=>{n||f(e instanceof Error?e.message:`Failed to load transcript`)}).finally(()=>{n||l(!1)}),()=>{n=!0}},[e,g,t]),!t)return null;let _=(0,H.jsxs)(`div`,{className:`min-h-0 flex-1 overflow-y-auto`,children:[c&&(0,H.jsx)(`div`,{className:`flex items-center justify-center py-10`,children:(0,H.jsx)(T,{className:`size-5 animate-spin text-primary`})}),u&&(0,H.jsxs)(`div`,{className:`px-1 py-4 text-sm text-text-secondary`,children:[(0,H.jsx)(`p`,{className:`mb-2 font-medium text-foreground`,children:`Full transcript unavailable`}),(0,H.jsx)(`p`,{className:`text-xs text-text-subtle`,children:u}),t.summary&&(0,H.jsx)(`pre`,{className:`mt-4 whitespace-pre-wrap break-words rounded-md bg-surface-elevated p-3 text-xs leading-relaxed text-text-secondary`,children:t.summary})]}),!c&&!u&&i!=null&&(0,H.jsx)(`div`,{className:`px-1 py-1`,children:(0,H.jsx)(se,{messages:i.messages,config:i.config})})]}),v=`${t.fromMember} — full transcript`;return r?(0,H.jsx)(o,{open:!0,onClose:n,className:`max-h-[85vh] flex flex-col`,children:(0,H.jsxs)(`div`,{className:`flex flex-col min-h-0 px-4 pb-2`,children:[(0,H.jsx)(`h2`,{className:`mb-2 text-sm font-semibold text-foreground`,children:v}),_]})}):(0,H.jsx)(h,{open:!0,onOpenChange:e=>{e||n()},children:(0,H.jsxs)(p,{className:`flex max-h-[80vh] flex-col sm:max-w-2xl`,children:[(0,H.jsx)(d,{children:(0,H.jsx)(m,{className:`text-sm`,children:v})}),_]})})}function Q({metadata:e}){let t=e?.groupId??null,{activeProject:n}=_(C(e=>({activeProject:e.activeProject}))),r=e?.projectName??n?.name??``,i=s(),{messages:a,members:c,status:l,typing:u,loading:d,isRunning:p,error:m,sendMessage:h,stop:x,resume:w}=ie(t,r),[D,O]=(0,B.useState)(``),[k,A]=(0,B.useState)(null),[j,M]=(0,B.useState)(!1),N=(0,B.useRef)(null),[P,F]=(0,B.useState)([]),[I,L]=(0,B.useState)(null),[R,z]=(0,B.useState)(!1),[V,U]=(0,B.useState)(null),[W,G]=(0,B.useState)(null),K=(0,B.useCallback)(async()=>{if(t)try{let e=await te(t);F(e.members),L(e.maxTurns)}catch{}},[t]),q=(0,B.useCallback)(async e=>{if(!t)return;let n=Math.max(1,Math.min(50,Math.floor(e)||1));L(n);try{await y(t,{maxTurns:n})}catch{K()}},[t,K]);(0,B.useEffect)(()=>{F([]),K()},[t,K]),(0,B.useEffect)(()=>{N.current?.scrollIntoView({block:`end`})},[a.length,u]);let Y=(0,B.useMemo)(()=>new Map(c.map(e=>[e.id,e.status])),[c]),X=P.length?P:c,se=(0,B.useMemo)(()=>{let e=new Map(X.map(e=>[e.name,e.color]));return t=>e.get(t)??null},[X]),ce=(0,B.useMemo)(()=>{let e=new Set(X.filter(e=>e.role===`leader`).map(e=>e.name));return t=>e.has(t)},[X]),le=(0,B.useCallback)(async e=>{t&&(W?.member?await E(t,W.member.id,e):await ne(t,e),await K())},[t,W,K]),Z=(0,B.useCallback)(async e=>{if(t){z(!0),U(null);try{await re(t,e.id),await K()}catch(e){U(e instanceof Error?e.message:`Failed to remove member`)}finally{z(!1)}}},[t,K]),Q=(0,B.useCallback)(()=>{let e=D.trim();e&&(h(e),O(``))},[D,h]),$=Object.keys(u).filter(e=>u[e]);return t?(0,H.jsxs)(`div`,{className:`flex h-full min-h-0`,children:[(0,H.jsxs)(`div`,{className:`flex min-h-0 flex-1 flex-col`,children:[(0,H.jsxs)(`div`,{className:`flex h-11 shrink-0 items-center justify-between border-b border-border px-3`,children:[(0,H.jsxs)(`div`,{className:`flex items-center gap-2 text-sm font-medium text-foreground`,children:[(0,H.jsx)(`span`,{className:g(`size-2 rounded-full`,l===`active`?`bg-primary animate-pulse`:l===`paused`?`bg-amber-500`:`bg-text-subtle`)}),(0,H.jsx)(`span`,{className:`capitalize`,children:l})]}),(0,H.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[p?(0,H.jsxs)(f,{size:`sm`,variant:`outline`,onClick:x,className:`h-8`,children:[(0,H.jsx)(S,{className:`mr-1 size-3.5`}),` Stop`]}):l===`paused`?(0,H.jsxs)(f,{size:`sm`,variant:`outline`,onClick:w,className:`h-8`,children:[(0,H.jsx)(ee,{className:`mr-1 size-3.5`}),` Resume`]}):null,(0,H.jsx)(`button`,{type:`button`,onClick:()=>M(e=>!e),className:`flex size-8 items-center justify-center rounded-md text-text-subtle hover:bg-surface-elevated hover:text-foreground`,"aria-label":`Toggle roster`,children:(0,H.jsx)(b,{className:`size-4`})})]})]}),(0,H.jsx)(`div`,{className:`min-h-0 flex-1 overflow-y-auto`,children:d?(0,H.jsx)(`div`,{className:`flex items-center justify-center py-10`,children:(0,H.jsx)(T,{className:`size-5 animate-spin text-primary`})}):a.length===0?(0,H.jsx)(`div`,{className:`flex h-full items-center justify-center p-4 text-center text-sm text-text-subtle`,children:`Send a message to start the group.`}):(0,H.jsxs)(`div`,{className:`flex flex-col py-2`,children:[a.map(e=>(0,H.jsx)(ae,{message:e,colorFor:se,isLeader:ce,onViewFull:A},e.id)),$.length>0&&(0,H.jsxs)(`div`,{className:`px-3 py-1.5 text-xs italic text-text-subtle`,children:[$.join(`, `),` `,$.length===1?`is`:`are`,` typing…`]}),(0,H.jsx)(`div`,{ref:N})]})}),m&&(0,H.jsx)(`div`,{className:`shrink-0 border-t border-border bg-destructive/10 px-3 py-2 text-xs text-destructive`,children:m}),(0,H.jsx)(`div`,{className:`shrink-0 border-t border-border p-2`,children:(0,H.jsxs)(`div`,{className:`flex items-end gap-2`,children:[(0,H.jsx)(`textarea`,{value:D,onChange:e=>O(e.target.value),onKeyDown:e=>{e.key===`Enter`&&!e.shiftKey&&!i&&(e.preventDefault(),Q())},rows:1,placeholder:`Message the group…`,className:`max-h-32 min-h-[44px] flex-1 resize-none rounded-md border border-border bg-background px-3 py-2.5 text-sm text-foreground placeholder:text-text-subtle focus:outline-none focus:ring-1 focus:ring-primary`}),(0,H.jsx)(f,{onClick:Q,disabled:!D.trim(),className:`size-11 shrink-0 p-0`,"aria-label":`Send`,children:(0,H.jsx)(v,{className:`size-4`})})]})})]}),i?(0,H.jsxs)(o,{open:j,onClose:()=>M(!1),className:`flex max-h-[72vh] flex-col`,children:[(0,H.jsx)(`div`,{className:`flex h-11 shrink-0 items-center px-4 text-sm font-medium text-foreground`,children:`Members`}),(0,H.jsxs)(`div`,{className:`min-h-0 overflow-y-auto`,children:[I!==null&&(0,H.jsxs)(`label`,{className:`flex items-center gap-2 px-4 py-2 text-xs text-text-secondary`,children:[(0,H.jsx)(`span`,{children:`Reply cap`}),(0,H.jsx)(`input`,{type:`number`,min:1,max:50,value:I,onChange:e=>q(Number(e.target.value)),className:`w-14 rounded border border-border bg-background px-1.5 py-1 text-xs text-foreground`}),(0,H.jsx)(`span`,{className:`text-text-subtle`,children:`turns/msg`})]}),V&&(0,H.jsx)(`p`,{className:`px-3 py-1 text-xs text-destructive`,children:V}),(0,H.jsx)(J,{members:P,liveStatus:Y,typing:u,busy:R,onAdd:()=>G({member:null}),onEdit:e=>G({member:e}),onRemove:Z})]})]}):j&&(0,H.jsxs)(`div`,{className:`flex w-60 shrink-0 flex-col border-l border-border bg-panel`,children:[(0,H.jsx)(`div`,{className:`flex h-11 shrink-0 items-center border-b border-border px-3 text-sm font-medium text-foreground`,children:`Members`}),(0,H.jsxs)(`div`,{className:`min-h-0 flex-1 overflow-y-auto`,children:[I!==null&&(0,H.jsxs)(`label`,{className:`flex items-center gap-2 px-3 py-2 text-xs text-text-secondary`,children:[(0,H.jsx)(`span`,{children:`Reply cap`}),(0,H.jsx)(`input`,{type:`number`,min:1,max:50,value:I,onChange:e=>q(Number(e.target.value)),className:`w-14 rounded border border-border bg-background px-1.5 py-1 text-xs text-foreground`}),(0,H.jsx)(`span`,{className:`text-text-subtle`,children:`turns/msg`})]}),V&&(0,H.jsx)(`p`,{className:`px-3 py-1 text-xs text-destructive`,children:V}),(0,H.jsx)(J,{members:P,liveStatus:Y,typing:u,busy:R,onAdd:()=>G({member:null}),onEdit:e=>G({member:e}),onRemove:Z})]})]}),W&&(0,H.jsx)(oe,{open:!0,member:W.member,projectName:r,onSubmit:le,onClose:()=>G(null)},W.member?.id??`add`),(0,H.jsx)(ue,{groupId:t,message:k,onClose:()=>A(null)})]}):(0,H.jsx)(`div`,{className:`flex h-full items-center justify-center p-4 text-sm text-text-subtle`,children:`No group selected.`})}export{Q as GroupChatTab};