zidane-ui 9.0.4 → 9.1.3

package/src/approvals/ApprovalsProvider.tsx

@@ -1,110 +0,0 @@
-/**
- * Puts an `ApprovalsHost` (and optional label overrides) in context for the
- * approval components. It keeps the host's queue subscribed while it is
- * mounted, so requests arrive even before a component reads them, and
- * indexes it by session, so a session's components re-render only when that
- * session's first approval changes.
- *
- *   <ApprovalsProvider host={host}>
- *     <ApprovalBar sessionId={sessionId} />
- *   </ApprovalsProvider>
- */
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useSyncExternalStore,
-  type ReactNode,
-} from 'react';
-
-import { useReadable } from '../chat/headless/store';
-import { LabelsProvider, useLabels } from '../labels';
-import { createApprovalHeads, type ApprovalHeads } from './headless/heads';
-import type { ApprovalDecision, ApprovalRequest, ApprovalsHost } from './headless/host';
-import { DEFAULT_APPROVALS_LABELS, type ApprovalsLabels } from './headless/labels';
-
-interface ApprovalsContextValue {
-  host: ApprovalsHost;
-  heads: ApprovalHeads;
-}
-
-const ApprovalsContext = createContext<ApprovalsContextValue | null>(null);
-
-/** Props for {@link ApprovalsProvider}. */
-export interface ApprovalsProviderProps {
-  /** The host the approval components read pending approvals from and send decisions to. */
-  host: ApprovalsHost;
-  /** Overrides for the approval components' strings. Keys you leave out keep the default English label. */
-  labels?: Partial<ApprovalsLabels>;
-  /** The components that read from `host`. */
-  children: ReactNode;
-}
-
-/**
- * Provides an {@link ApprovalsHost} and optional label overrides to the approval components below it.
- *
- * @param props - Provider props: the `host`, optional `labels`, and the `children` to render.
- */
-export function ApprovalsProvider({ host, labels, children }: ApprovalsProviderProps) {
-  const heads = useMemo(() => createApprovalHeads(host.pending), [host]);
-  const value = useMemo(() => ({ host, heads }), [host, heads]);
-  // Listen for requests for as long as the app shows approvals, not only while a card is up.
-  useEffect(() => host.pending.subscribe(() => {}), [host]);
-  return (
-    <ApprovalsContext.Provider value={value}>
-      <LabelsProvider<ApprovalsLabels> labels={labels}>{children}</LabelsProvider>
-    </ApprovalsContext.Provider>
-  );
-}
-
-function useApprovalsContext(): ApprovalsContextValue {
-  const ctx = useContext(ApprovalsContext);
-  if (!ctx) throw new Error('zidane-ui/approvals: wrap the approval components in <ApprovalsProvider host={…}>');
-  return ctx;
-}
-
-/** Returns the {@link ApprovalsHost} from the nearest {@link ApprovalsProvider}. Throws when called outside one. */
-export function useApprovalsHost(): ApprovalsHost {
-  return useApprovalsContext().host;
-}
-
-/** Returns every pending approval, oldest first. Re-renders on every change to the queue. */
-export function usePendingApprovals(): readonly ApprovalRequest[] {
-  return useReadable(useApprovalsContext().host.pending);
-}
-
-/**
- * Returns the first pending approval of `sessionId`, or `null`. Re-renders only when that
- * session's first approval changes, so rows of other sessions stay still.
- *
- * @param sessionId - The session, or `null` for none.
- */
-export function useSessionApprovalHead(sessionId: string | null): ApprovalRequest | null {
-  const { heads } = useApprovalsContext();
-  const subscribe = useCallback((onChange: () => void) => heads.subscribe(sessionId, onChange), [heads, sessionId]);
-  const get = useCallback(() => heads.get(sessionId), [heads, sessionId]);
-  return useSyncExternalStore(subscribe, get, get);
-}
-
-/**
- * Returns `resolve`: answers a pending approval through the host, ignoring a failed send (the
- * request already left the queue). `undefined` when the host can't answer approvals.
- */
-export function useResolveApproval(): ((requestId: string, decision: ApprovalDecision) => void) | undefined {
-  const { host } = useApprovalsContext();
-  return useMemo(() => {
-    const resolve = host.resolve;
-    if (!resolve) return undefined;
-    return (requestId: string, decision: ApprovalDecision) => {
-      void resolve(requestId, decision).catch(() => undefined);
-    };
-  }, [host]);
-}
-
-/** Returns the approval components' strings: the defaults merged with any overrides given to {@link ApprovalsProvider} or `LabelsProvider`. */
-export function useApprovalsLabels(): ApprovalsLabels {
-  const overrides = useLabels() as Partial<ApprovalsLabels>;
-  return useMemo(() => ({ ...DEFAULT_APPROVALS_LABELS, ...overrides }), [overrides]);
-}

package/src/approvals/FileEditApproval.tsx

@@ -1,305 +0,0 @@
-/**
- * The file-edit review for `edit` / `multi_edit` / `write_file`.
- *
- * One hunk: the diff and four decisions (Deny, Allow for session, Always
- * allow, Allow). Several hunks: a checklist, one diff per hunk (cumulative:
- * the file as it is after the hunks above land), a warning on a hunk the
- * resolver could not place, and only the placed hunks checked at first. Allow
- * becomes "Apply selected (N of M)" once the selection is partial and answers
- * `{ kind: 'partial', mask }`. Deny denies the whole call; other pending
- * approvals keep waiting.
- *
- * Every exit (a button, a / s / p / d, esc, a click on the modal scrim, the
- * close button) goes through one decision, sent once. A request answered
- * elsewhere (another window, a terminal) calls `onDone` too.
- */
-import {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-  useSyncExternalStore,
-  type CSSProperties,
-  type ReactNode,
-} from 'react';
-
-import { BTN_LG_DANGER, BTN_LG_SECONDARY, BTN_LG_SOLID } from '../components/button';
-import { MetaChip } from '../components/Form';
-import { Keycap } from '../components/Keycap';
-import { CodePanel } from '../components/Surface';
-import { ApprovalConcern } from './ApprovalConcern';
-import { ApprovalShell, type ApprovalShellProps } from './ApprovalShell';
-import { useApprovalsHost, useApprovalsLabels, useResolveApproval } from './ApprovalsProvider';
-import type { ApprovalRequest } from './headless/host';
-import { allowDecision, approvalPath, initialHunkMask } from './headless/preview';
-import { MultiHunkChecklist, SingleHunkPreview } from './HunkPreviews';
-
-type DecisionKind = 'accept-once' | 'accept-session' | 'accept-safelist' | 'deny';
-type Tone = 'primary' | 'secondary' | 'danger';
-
-const TONE_CLS: Record<Tone, string> = {
-  primary: BTN_LG_SOLID,
-  secondary: `${BTN_LG_SECONDARY} !text-[var(--zg-text)]`,
-  danger: BTN_LG_DANGER,
-};
-
-const HOTKEYS: Record<string, DecisionKind> = {
-  a: 'accept-once',
-  s: 'accept-session',
-  p: 'accept-safelist',
-  d: 'deny',
-};
-
-/** Props for {@link FileEditApproval}. */
-export interface FileEditApprovalProps {
-  /** The pending `edit`, `multi_edit` or `write_file` approval. */
-  request: ApprovalRequest;
-  /** Called once the user decided, or when the request was answered elsewhere: close the modal that holds the review. */
-  onDone?: () => void;
-  /**
-   * Draws the panel around the review (an app's own modal shell). It receives the title,
-   * description, body, footer and `onClose` (which denies). Default: {@link ApprovalShell}.
-   */
-  renderShell?: (props: ApprovalShellProps) => ReactNode;
-  /** Extra classes on the default shell. */
-  className?: string;
-  /** Inline styles on the default shell. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders the file-edit review of a pending approval: the path, the subagent that asked, what
- * worried the decision model, the diff (or the per-hunk checklist), and the decisions with their
- * a / s / p / d keys. Esc and a click on the modal scrim deny. Focus starts on Allow.
- *
- * @param props - The `request`, `onDone`, an optional `renderShell`, `className` and `style`.
- */
-export function FileEditApproval({ request, onDone, renderShell, className, style }: FileEditApprovalProps) {
-  const labels = useApprovalsLabels();
-  const host = useApprovalsHost();
-  const resolve = useResolveApproval();
-
-  const edit = request.edit;
-  const preview = request.preview;
-  const path = approvalPath(request);
-  const isWriteFile = request.tool === 'write_file';
-  const hunkCount = edit?.hunks.length ?? 0;
-  const isMultiHunk = hunkCount > 1;
-
-  const [mask, setMask] = useState<boolean[]>(() => initialHunkMask(request));
-  const allChecked = mask.every(Boolean);
-  const noneChecked = mask.every((m) => !m);
-  const selectedCount = mask.reduce((n, m) => (m ? n + 1 : n), 0);
-
-  // Read through refs so a checkbox toggle doesn't re-bind the document listeners.
-  const maskRef = useRef(mask);
-  const onDoneRef = useRef(onDone);
-  useLayoutEffect(() => {
-    maskRef.current = mask;
-    onDoneRef.current = onDone;
-  });
-
-  const resolvedRef = useRef(false);
-
-  const decide = useCallback(
-    (kind: DecisionKind): void => {
-      if (resolvedRef.current || !resolve) return;
-      resolvedRef.current = true;
-      resolve(request.id, kind === 'accept-once' ? allowDecision(maskRef.current) : kind);
-      onDoneRef.current?.();
-    },
-    [resolve, request.id],
-  );
-
-  // Answered from another window or a terminal: close here too.
-  const stillPending = useSyncExternalStore(
-    host.pending.subscribe,
-    () => host.pending.get().some((r) => r.id === request.id),
-    () => true,
-  );
-  useEffect(() => {
-    if (!stillPending && !resolvedRef.current) {
-      resolvedRef.current = true;
-      onDoneRef.current?.();
-    }
-  }, [stillPending]);
-
-  const primaryLabel =
-    !isMultiHunk || allChecked
-      ? labels.approvalAllow
-      : noneChecked
-        ? labels.approvalAllowNoneSelected
-        : labels.approvalApplySelected(selectedCount, hunkCount);
-  // Nothing selected (or the only hunk unplaced): allowing would apply nothing; Deny dismisses.
-  const primaryDisabled = noneChecked;
-
-  /*
-   * Esc and the letter keys, in the bubble phase so Tab / Enter / Space keep their native work on
-   * focused buttons and checkboxes. Letters skip modified presses (⌘A still selects all) and text
-   * fields.
-   */
-  useEffect(() => {
-    if (!resolve) return undefined;
-    const isTextEntryFocused = (): boolean => {
-      const active = document.activeElement as HTMLElement | null;
-      if (!active) return false;
-      if (active.isContentEditable) return true;
-      const tag = active.tagName;
-      return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT';
-    };
-    const onKey = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        event.preventDefault();
-        decide('deny');
-        return;
-      }
-      if (event.key.length !== 1 || event.metaKey || event.ctrlKey || event.altKey || isTextEntryFocused()) return;
-      const match = HOTKEYS[event.key.toLowerCase()];
-      if (!match || (match === 'accept-once' && primaryDisabled)) return;
-      event.preventDefault();
-      decide(match);
-    };
-    document.addEventListener('keydown', onKey);
-    return () => document.removeEventListener('keydown', onKey);
-  }, [decide, primaryDisabled, resolve]);
-
-  // A click on the modal scrim denies, before the modal layer's own close runs (capture phase).
-  useEffect(() => {
-    const onMouseDown = (event: MouseEvent) => {
-      const target = event.target as HTMLElement | null;
-      if (target?.classList.contains('zg-modal-scrim')) decide('deny');
-    };
-    document.addEventListener('mousedown', onMouseDown, true);
-    return () => document.removeEventListener('mousedown', onMouseDown, true);
-  }, [decide]);
-
-  const toggleHunk = (idx: number) => {
-    setMask((current) => {
-      const next = current.slice();
-      next[idx] = !next[idx];
-      return next;
-    });
-  };
-  const setAll = (value: boolean) => setMask(() => Array.from({ length: hunkCount }, () => value));
-
-  // Only a subagent's call names its caller (`child-N`), next to the path.
-  const originatorLabel = request.originator?.kind === 'child' ? request.originator.label : null;
-
-  const footer = resolve ? (
-    // DOM order is visual and Tab order: Deny, the secondary decisions, Allow.
-    <div className="flex items-center gap-2">
-      <DecisionButton tone="danger" label={labels.approvalDeny} hotkey="d" onClick={() => decide('deny')} />
-      <div className="flex-1" />
-      <DecisionButton
-        tone="secondary"
-        label={labels.approvalAllowForSession}
-        hotkey="s"
-        onClick={() => decide('accept-session')}
-      />
-      <DecisionButton
-        tone="secondary"
-        label={labels.approvalAlwaysAllow}
-        hotkey="p"
-        onClick={() => decide('accept-safelist')}
-      />
-      <DecisionButton
-        focusOnMount
-        tone="primary"
-        label={primaryLabel}
-        hotkey="a"
-        disabled={primaryDisabled}
-        onClick={() => decide('accept-once')}
-      />
-    </div>
-  ) : undefined;
-
-  const body = (
-    <div className="flex flex-col gap-3">
-      {request.concern && <ApprovalConcern concern={request.concern} />}
-      {(path || originatorLabel) && (
-        <div className="zg-meta flex items-center gap-2 min-w-0">
-          {path && (
-            <span className="truncate" title={path}>
-              {path}
-            </span>
-          )}
-          {originatorLabel && (
-            <MetaChip tone="text" className="ml-auto" title={labels.approvalFromSubagent(originatorLabel)}>
-              <span className="i-ph-git-fork text-zg-badge" aria-hidden />
-              {originatorLabel}
-            </MetaChip>
-          )}
-        </div>
-      )}
-
-      {edit && preview && isMultiHunk ? (
-        <MultiHunkChecklist
-          edit={edit}
-          preview={preview}
-          mask={mask}
-          onToggle={toggleHunk}
-          onSelectAll={() => setAll(true)}
-          onClearAll={() => setAll(false)}
-          path={path}
-        />
-      ) : edit && preview ? (
-        <SingleHunkPreview edit={edit} preview={preview} path={path} isWriteFile={isWriteFile} />
-      ) : (
-        <CodePanel maxHeight={420} className="!text-zg-meta break-all">
-          {JSON.stringify(request.input, null, 2)}
-        </CodePanel>
-      )}
-    </div>
-  );
-
-  const shell: ApprovalShellProps = {
-    title: labels.approvalFileEditTitle(request.tool, path),
-    description: path ? labels.approvalFileEditReview : labels.approvalFileEditNoPath,
-    onClose: () => decide('deny'),
-    ...(footer ? { footer } : {}),
-    children: body,
-  };
-  return renderShell ? (
-    <RenderShell render={renderShell} {...shell} />
-  ) : (
-    <ApprovalShell {...shell} className={className} style={style} />
-  );
-}
-
-/** Calls an app's `renderShell` as a component, so the decision callbacks reach it as props. */
-function RenderShell({ render, ...shell }: ApprovalShellProps & { render: (props: ApprovalShellProps) => ReactNode }) {
-  return render(shell);
-}
-
-interface DecisionButtonProps {
-  tone: Tone;
-  label: string;
-  hotkey: string;
-  onClick: () => void;
-  /** Focus starts here (Allow), so Enter allows. */
-  focusOnMount?: boolean;
-  disabled?: boolean;
-}
-
-function DecisionButton({ tone, label, hotkey, onClick, focusOnMount, disabled }: DecisionButtonProps) {
-  const ref = useRef<HTMLButtonElement | null>(null);
-  useEffect(() => {
-    if (focusOnMount) ref.current?.focus();
-    // Once, on mount: a label change never moves focus back.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  return (
-    <button
-      ref={ref}
-      type="button"
-      onClick={onClick}
-      disabled={disabled}
-      aria-keyshortcuts={hotkey}
-      className={`${TONE_CLS[tone]} !px-3.5 font-medium`}
-    >
-      {label}
-      <Keycap className="zg-keycap-sm">{hotkey.toUpperCase()}</Keycap>
-    </button>
-  );
-}

package/src/approvals/HunkPreviews.tsx

@@ -1,225 +0,0 @@
-/**
- * The diff side of the file-edit review: a single-hunk preview, or the
- * per-hunk checklist for multi-hunk edits, with the resolver's warnings.
- */
-import { useMemo } from 'react';
-import type { EditPayload, HunkResolution } from 'zidane/chat';
-import { computeLineDiff, type DiffLine } from 'zidane/chat/pure';
-
-import { MetaChip } from '../components/Form';
-import { DiffLines } from '../chat/transcript/DiffLines';
-import { useApprovalsLabels } from './ApprovalsProvider';
-import type { ApprovalRequest } from './headless/host';
-import type { ApprovalsLabels } from './headless/labels';
-
-type Preview = NonNullable<ApprovalRequest['preview']>;
-
-/** The diff renders on its own code tone, so the frame is a hairline, not a tone step. */
-const FRAME = 'rounded-zg-md overflow-hidden ring-1 ring-[var(--zg-hairline)]';
-const FRAME_WARN = '!ring-[color-mix(in_srgb,var(--zg-warn)_50%,transparent)]';
-const FRAME_HEADER =
-  'flex items-center gap-2 px-3 py-1.5 bg-[var(--zg-tray)] border-b border-[var(--zg-hairline)] text-zg-meta';
-const LINK_BTN =
-  'zg-press-subtle h-6 px-1.5 rounded-zg-sm bg-transparent border-0 text-[var(--zg-text)] hover:before:bg-[var(--zg-row-hover)] cursor-pointer';
-
-/**
- * The warning badge of a hunk the resolver could not place: ambiguous (several matches without
- * `replace_all`) or not in the file. `null` for a resolved hunk.
- */
-function warningFor(
-  resolution: HunkResolution | undefined,
-  labels: ApprovalsLabels,
-): { label: string; tooltip: string } | null {
-  if (!resolution || resolution.resolved !== false) return null;
-  if (resolution.ambiguous === true) {
-    const occ = resolution.occurrences ?? 0;
-    return { label: labels.hunkAmbiguous(occ), tooltip: labels.hunkAmbiguousHint(occ) };
-  }
-  return { label: labels.hunkNotInFile, tooltip: labels.hunkNotInFileHint };
-}
-
-interface MultiHunkChecklistProps {
-  edit: EditPayload;
-  preview: Preview;
-  mask: readonly boolean[];
-  onToggle: (idx: number) => void;
-  onSelectAll: () => void;
-  onClearAll: () => void;
-  path: string | null;
-}
-
-export function MultiHunkChecklist({
-  edit,
-  preview,
-  mask,
-  onToggle,
-  onSelectAll,
-  onClearAll,
-  path,
-}: MultiHunkChecklistProps) {
-  const labels = useApprovalsLabels();
-  const total = edit.hunks.length;
-  const selected = mask.reduce((n, m) => (m ? n + 1 : n), 0);
-  const hasUnresolved = preview.resolution.some((r) => r.resolved === false);
-
-  /*
-   * Each hunk's diff against the resolved bytes (quote recovery, line-number stripping already
-   * applied). A hunk the resolver couldn't place shows the model's own strings, next to its warning.
-   */
-  const perHunkLines = useMemo<readonly DiffLine[][]>(
-    () =>
-      edit.hunks.map((originalHunk, idx) => {
-        const resolved = preview.resolvedPayload.hunks[idx];
-        const isResolved = preview.resolution[idx]?.resolved === true;
-        const hunk = isResolved && resolved ? resolved : originalHunk;
-        return computeLineDiff(hunk.oldString, hunk.newString);
-      }),
-    [edit.hunks, preview.resolvedPayload.hunks, preview.resolution],
-  );
-
-  return (
-    <div className="flex flex-col gap-2">
-      <div className="flex items-center gap-1 text-zg-meta text-[var(--zg-text-muted)]">
-        <span className="mr-1">
-          <span className="zg-meta !text-[var(--zg-text)]">{selected}</span>
-          {` ${labels.hunksOf} `}
-          <span className="zg-meta !text-[var(--zg-text)]">{total}</span>
-          {` ${labels.hunksSelected}`}
-        </span>
-        <button type="button" onClick={onSelectAll} className={LINK_BTN}>
-          {labels.hunksSelectAll}
-        </button>
-        <button type="button" onClick={onClearAll} className={LINK_BTN}>
-          {labels.hunksClear}
-        </button>
-        {hasUnresolved && (
-          <span className="ml-auto inline-flex items-center gap-1 text-zg-warn">
-            <span className="i-ph-warning text-zg-badge" />
-            <span>{labels.hunksSomeMissing}</span>
-          </span>
-        )}
-      </div>
-
-      {/* `shrink-0` on each hunk keeps its natural height: the list scrolls as one, never clips a diff. */}
-      <div className="flex flex-col gap-2 max-h-[60vh] overflow-y-auto pr-1">
-        {edit.hunks.map((hunk, idx) => (
-          <div key={`${path ?? 'hunk'}-${idx}`} className="shrink-0">
-            <HunkRow
-              index={idx}
-              total={total}
-              lines={perHunkLines[idx] ?? []}
-              resolution={preview.resolution[idx]}
-              replaceAll={hunk.replaceAll === true}
-              checked={mask[idx] ?? false}
-              onToggle={() => onToggle(idx)}
-            />
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-interface HunkRowProps {
-  index: number;
-  total: number;
-  lines: readonly DiffLine[];
-  resolution: HunkResolution | undefined;
-  replaceAll: boolean;
-  checked: boolean;
-  onToggle: () => void;
-}
-
-function HunkRow({ index, total, lines, resolution, replaceAll, checked, onToggle }: HunkRowProps) {
-  const labels = useApprovalsLabels();
-  const unresolved = resolution?.resolved === false;
-  const warning = warningFor(resolution, labels);
-
-  return (
-    <div
-      className={`${FRAME} ${unresolved ? FRAME_WARN : ''}`}
-      style={{ opacity: checked ? 1 : 0.6, transition: 'opacity var(--zg-motion-fade)' }}
-    >
-      <label className={`${FRAME_HEADER} cursor-pointer`}>
-        <input
-          type="checkbox"
-          checked={checked}
-          onChange={onToggle}
-          disabled={unresolved}
-          aria-label={labels.hunkInclude(index + 1, total)}
-          className="cursor-pointer accent-[var(--zg-accent)]"
-        />
-        <span className="zg-meta !text-[var(--zg-text)]">{labels.hunkTitle(index + 1, total)}</span>
-        {replaceAll && <MetaChip>{labels.hunkReplaceAll}</MetaChip>}
-        {warning && (
-          <span className="ml-2 inline-flex items-center gap-1 text-zg-warn" title={warning.tooltip}>
-            <span className="i-ph-warning text-zg-badge" />
-            <span>{warning.label}</span>
-          </span>
-        )}
-        {/* A hunk found only through a close variant (quotes, line numbers): say how. */}
-        {!warning && resolution?.resolved === true && resolution.via && resolution.via !== 'exact' && (
-          <span
-            className="ml-2 inline-flex items-center gap-1 text-[var(--zg-text-muted)]"
-            title={labels.hunkViaHint(resolution.via)}
-          >
-            <span className="i-ph-arrows-clockwise text-zg-badge" />
-            <span>{labels.hunkVia(resolution.via)}</span>
-          </span>
-        )}
-      </label>
-      <DiffLines lines={lines} />
-    </div>
-  );
-}
-
-interface SingleHunkPreviewProps {
-  edit: EditPayload;
-  preview: Preview;
-  path: string | null;
-  isWriteFile: boolean;
-}
-
-export function SingleHunkPreview({ edit, preview, path, isWriteFile }: SingleHunkPreviewProps) {
-  const labels = useApprovalsLabels();
-  const resolution = preview.resolution[0];
-  const unresolved = resolution?.resolved === false;
-  const warning = warningFor(resolution, labels);
-
-  const originalHunk = edit.hunks[0];
-  const resolvedHunk = preview.resolvedPayload.hunks[0];
-  const hunk = resolution?.resolved === true && resolvedHunk ? resolvedHunk : originalHunk;
-
-  // The same diff primitive as the transcript: what the user allows looks like the row it becomes.
-  const lines = useMemo<readonly DiffLine[]>(
-    () => (hunk ? computeLineDiff(hunk.oldString, hunk.newString) : []),
-    [hunk],
-  );
-
-  const added = lines.filter((l) => l.op === 'add').length;
-  const removed = lines.filter((l) => l.op === 'remove').length;
-  const isNewFile = isWriteFile && (hunk?.oldString ?? '') === '';
-
-  return (
-    <div className={`${FRAME} ${unresolved ? FRAME_WARN : ''}`}>
-      <div className={`${FRAME_HEADER} !gap-3`}>
-        <span className="zg-meta !text-[var(--zg-text)] truncate">{path ?? labels.hunkFile}</span>
-        {warning && (
-          <span className="inline-flex items-center gap-1 text-zg-warn" title={warning.tooltip}>
-            <span className="i-ph-warning text-zg-badge" />
-            <span>{warning.label}</span>
-          </span>
-        )}
-        {isNewFile ? (
-          <span className="zg-meta ml-auto">{labels.hunkNewFile}</span>
-        ) : (
-          <>
-            <span className="zg-meta !text-zg-success ml-auto">{labels.hunkAdded(added)}</span>
-            <span className="zg-meta !text-zg-danger">{labels.hunkRemoved(removed)}</span>
-          </>
-        )}
-      </div>
-      <DiffLines lines={lines} maxHeight={420} />
-    </div>
-  );
-}