lightbox

  on("ui.render", { component: "AbovePrompt" }, async ($, e, next) => {
    if (e.props.hasSurvey || (await read($, hidden))) return next(e);
    const list = await read($, shots);
    if (!list.length) return next(e);
    // While the larger pane shows, the strip would only repeat it.
    if ((await $.ui.panes()).some((pane) => pane.id === PANE && pane.isShown)) return next(e);
    const { Box, Text, Button } = $.ui.resolve(e);
    const elements = $.ui.resolve(e) as unknown as { Image?: ElementConstructor<ImageProps>; Raster?: ElementConstructor<RasterProps> };
    const Image = e.surface === "terminal" && drawsPixels ? elements.Image : undefined;
    const Raster = e.surface === "terminal" && !drawsPixels ? elements.Raster : undefined;

    const index = clampIndex(await read($, current), list.length);
    const shot = list[index]!;
    const picture = pixels.get(shot.id)?.strip;

    // The batch the current image arrived in, and the window of it that fits.
    const batchOf = (s: LightboxShot) => s.batch ?? s.id;
    let first = index;
    let last = index;
    while (first > 0 && batchOf(list[first - 1]!) === batchOf(shot)) first -= 1;
    while (last < list.length - 1 && batchOf(list[last + 1]!) === batchOf(shot)) last += 1;
    const from = Math.max(first, Math.min(index - Math.floor(BATCH_SHOWN / 2), last - BATCH_SHOWN + 1));
    const shown = list.slice(from, Math.min(last + 1, from + BATCH_SHOWN));
    const before = from - first;
    const after = last + 1 - (from + shown.length);

    // The pictures share about three fifths of the width, each in its frame; the words take the rest.
    const maxRows = Math.max(2, Math.min(STRIP_ROWS, e.props.maxRows - 2));
    const budget = Math.floor(e.props.bodyColumns * 0.6) - (shown.length - 1);
    const each = Math.max(6, Math.min(STRIP_MAX_COLUMNS, Math.floor(budget / shown.length) - 2));

    const frame = (s: LightboxShot) => {
      const strip = pixels.get(s.id)?.strip;
      if (!strip && s.status !== "failed") $.clock.after(0, () => { void prepare($, s.id, "strip"); });
      const box = s.width && s.height ? fit(s.width, s.height, each, maxRows, cellAspect) : { columns: Math.min(each, Math.round(3 * cellAspect)), rows: Math.min(3, maxRows) };
      let view;
      if (s.status === "failed") view = <Text color="red">✕</Text>;
      else if (strip && Image) view = <Image key={`s-${s.id}`} source={{ png: strip }} columns={box.columns} rows={box.rows} alt={`${s.title} (image)`} />;
      else if (strip && Raster) {
        const cells = cellCache.get(`${s.id}:${box.columns}x${box.rows}`);
        if (!cells) $.clock.after(0, () => { void renderCells($, s.id, box.columns, box.rows); });
        view = cells ? <Raster key={`s-${s.id}`} columns={box.columns} rows={box.rows} cells={cells} /> : <Text dimColor>…</Text>;
      } else view = <Text dimColor>…</Text>;
      // The frame keeps a dark picture from melting into a dark terminal, in the color of who sent it; in a batch,
      // only the current one's frame is lit.
      const lit = s.id === shot.id && shown.length > 1;
      const color = s.id === shot.id ? (originColor(s.origin) ?? "gray") : "gray";
      return (
        <Box key={`f-${s.id}`} borderStyle="round" borderColor={color} borderDimColor={!lit} width={box.columns + 2} height={box.rows + 2} flexShrink={0}>
          {view}
        </Box>
      );
    };

    const step = (delta: number) => () => { void update($, current, (i) => ((((i ?? 0) + delta) % list.length) + list.length) % list.length); };
    const tint = originColor(shot.origin);
    const count = last + 1 - first;

    // Folded: one line, its pictures a row tall, until the next image or the person opens it.
    if (await read($, folded)) {
      const tiny = (s: LightboxShot) => {
        const strip = pixels.get(s.id)?.strip;
        if (!strip || !s.width || !s.height) return null;
        const size = fit(s.width, s.height, 8, 1, cellAspect);
        if (Image) return <Image key={`t-${s.id}`} source={{ png: strip }} columns={size.columns} rows={1} alt={s.title} />;
        if (!Raster) return null;
        const cells = cellCache.get(`${s.id}:${size.columns}x1`);
        if (!cells) $.clock.after(0, () => { void renderCells($, s.id, size.columns, 1); });
        return cells ? <Raster key={`t-${s.id}`} columns={size.columns} rows={1} cells={cells} /> : null;
      };
      return (
        <Box flexDirection="row" paddingX={1} paddingRight={4} columnGap={1}>
          {shown.map(tiny)}
          <Text bold wrap="truncate-middle">{shot.title}</Text>
          {count > 1 ? <Text dimColor>+{count - 1}</Text> : null}
          {tint ? <Text color={tint}>{shot.origin}</Text> : <Text dimColor>{shot.origin}</Text>}
          <Text dimColor wrap="truncate-end">· {ago(Date.now() - shot.at)}</Text>
          <Box flexGrow={1} />
          <Button key="expand" plain dimColor label="expand" hotkey="e" onPress={() => { void update($, folded, () => false); }} />
          <Button key="hide" plain dimColor label="hide" hotkey="x" onPress={() => { void update($, hidden, () => true); }} />
        </Box>
      );
    }

    // The reel at a glance: a dot per image in its sender's color, the current one filled, batches apart.
    const reel =
      list.length > DOTS ? (
        <Text dimColor>{index + 1}/{list.length}</Text>
      ) : list.length > 1 ? (
        <Box flexDirection="row">
          {list.map((s, i) => {
            const color = originColor(s.origin);
            const dot = `${i > 0 && batchOf(list[i - 1]!) !== batchOf(s) ? " " : ""}${i === index ? "●" : "○"}`;
            return color ? <Text key={`d-${s.id}`} color={color} dimColor={i !== index}>{dot}</Text> : <Text key={`d-${s.id}`} dimColor>{dot}</Text>;
          })}
        </Box>
      ) : null;

    return (
      <Box flexDirection="row" paddingX={1} columnGap={2}>
        <Box flexDirection="row" columnGap={1} flexShrink={0}>
          {before > 0 ? <Box paddingTop={1}><Text dimColor>+{before}</Text></Box> : null}
          {shown.map(frame)}
          {after > 0 ? <Box paddingTop={1}><Text dimColor>+{after}</Text></Box> : null}
        </Box>
        {/* Level with the picture's top, and clear of the collapse mark in the band's top right corner. */}
        <Box flexDirection="column" flexGrow={1} flexShrink={1} paddingTop={1} paddingRight={4}>
          <Box flexDirection="row" columnGap={2}>
            <Text bold wrap="truncate-middle">{shot.title}</Text>
            {reel}
          </Box>
          <Box flexDirection="row">
            {tint ? <Text color={tint}>{shot.origin}</Text> : <Text dimColor>{shot.origin}</Text>}
            <Text dimColor wrap="truncate-end"> · {details(shot)}</Text>
          </Box>
          {shot.status === "failed" ? (
            <Text color="red" wrap="truncate-end">Can't show it: {shot.note ?? "unknown error"}</Text>
          ) : shot.caption ? (
            <Text italic wrap="truncate-end">{shot.caption}</Text>
          ) : null}
          <Box flexDirection="row" columnGap={2} flexWrap="wrap">
            {list.length > 1 ? <Button key="prev" plain dimColor label="prev" hotkey="h" onPress={step(-1)} /> : null}
            {list.length > 1 ? <Button key="next" plain dimColor label="next" hotkey="l" onPress={step(1)} /> : null}
            <Button key="view" plain dimColor label="larger" hotkey="v" onPress={() => { void $.ui.open({ id: PANE, title: "Lightbox", focus: true }).then(() => $.ui.invalidate("ui.render")); }} />
            {canOpen && (shot.path || picture) ? <Button key="open" plain dimColor label="open" hotkey="o" onPress={() => { void openShot($, shot); }} /> : null}
            <Button key="fold" plain dimColor label="fold" hotkey="f" onPress={() => { void update($, folded, () => true); }} />
            <Button key="hide" plain dimColor label="hide" hotkey="x" onPress={() => { void update($, hidden, () => true); }} />
            <Text dimColor italic>ctrl+x tab for keys</Text>
          </Box>
        </Box>
      </Box>
    );
  });

  on("ui.render", { component: "Pane", requestId: PANE }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e);
    const elements = $.ui.resolve(e) as unknown as { Image?: ElementConstructor<ImageProps>; Raster?: ElementConstructor<RasterProps> };
    const Image = e.surface === "terminal" && drawsPixels ? elements.Image : undefined;
    const Raster = e.surface === "terminal" && !drawsPixels ? elements.Raster : undefined;
    const list = await read($, shots);
    const width = Math.max(10, e.props.bodyColumns - 2);

    if (!list.length) {
      return (
        <Box flexDirection="column" paddingX={1} paddingY={1} gap={1}>
          <Text bold>Lightbox</Text>
          <Text dimColor>Images from this session appear here: whatever Claude reads, captures, generates or sends you, and what you paste.</Text>
          <Text dimColor>/lightbox ~/Pictures/photo.heic opens any {FORMATS} file.</Text>
        </Box>
      );
    }

    const index = clampIndex(await read($, current), list.length);
    const shot = list[index]!;
    const picture = pixels.get(shot.id);
    if (!picture?.strip && shot.status !== "failed") $.clock.after(0, () => { void prepare($, shot.id, "strip"); });
    // Real pixels want the larger picture; until it is ready the strip's stands in. Cells need no more than the strip's.
    if (Image && picture?.strip && !picture.full) $.clock.after(0, () => { void prepare($, shot.id, "full"); });

    const viewportRows = e.viewport?.rows ?? 40;
    // A docked pane is shorter than the screen (the prompt and status sit below it): size to its body.
    const bodyRows = e.props.scroll?.bodyRows ?? 0;
    const hasStrip = list.length > 1;
    const chrome = 2 + 2 + (shot.caption ? 2 : 0) + (hasStrip ? THUMB_ROWS + 3 : 0) + 3;
    const maxRows =
      e.props.placement === "dock"
        ? Math.max(6, (bodyRows > 0 ? bodyRows : viewportRows - 4) - chrome)
        : Math.max(6, Math.min(20, Math.floor(viewportRows * 0.5)));
    const box = shot.width && shot.height ? fit(shot.width, shot.height, width, maxRows, cellAspect) : null;

    let view;
    const source = picture?.full ?? picture?.strip;
    if (shot.status === "failed") {
      view = <Text color="red">Can't show this image: {shot.note ?? "unknown error"}</Text>;
    } else if (source && box && Image) {
      view = <Image key="main" source={{ png: source }} columns={box.columns} rows={box.rows} alt={`${shot.title} (image)`} />;
    } else if (source && box && Raster) {
      const cells = cellCache.get(`${shot.id}:${box.columns}x${box.rows}`);
      if (!cells) $.clock.after(0, () => { void renderCells($, shot.id, box.columns, box.rows); });
      view = cells ? <Raster key="main" columns={box.columns} rows={box.rows} cells={cells} /> : <Text dimColor>Drawing {shot.title}…</Text>;
    } else if (source && !Image && !Raster) {
      view = <Text dimColor>This surface does not draw images. Open it instead.</Text>;
    } else {
      view = <Text dimColor>Preparing {shot.title}…</Text>;
    }

    const slots = Math.max(1, Math.min(5, Math.floor((width + 1) / (THUMB_COLUMNS + 3))));
    const first = Math.max(0, Math.min(index - Math.floor(slots / 2), list.length - slots));
    const strip = list.slice(first, first + slots);
    const step = (delta: number) => () => { void update($, current, (i) => ((((i ?? 0) + delta) % list.length) + list.length) % list.length); };

    const thumbnail = (s: LightboxShot) => {
      const thumb = pixels.get(s.id)?.strip;
      if (!thumb || !s.width || !s.height) return <Text dimColor>…</Text>;
      const size = fit(s.width, s.height, THUMB_COLUMNS, THUMB_ROWS, cellAspect);
      if (Image) return <Image key={`i-${s.id}`} source={{ png: thumb }} columns={size.columns} rows={size.rows} alt={s.title} />;
      if (!Raster) return <Text dimColor wrap="truncate-end">{s.title}</Text>;
      const cells = cellCache.get(`${s.id}:${size.columns}x${size.rows}`);
      if (!cells) $.clock.after(0, () => { void renderCells($, s.id, size.columns, size.rows); });
      return cells ? <Raster key={`r-${s.id}`} columns={size.columns} rows={size.rows} cells={cells} /> : <Text dimColor>…</Text>;
    };

    return (
      <Box flexDirection="column" paddingX={1}>
        {/* Clear of the close mark Claude Code draws in the pane's top right corner. */}
        <Box flexDirection="row" justifyContent="space-between" paddingRight={2}>
          <Text bold wrap="truncate-middle">{shot.title}</Text>
          <Text dimColor>{index + 1} of {list.length}</Text>
        </Box>
        <Text dimColor wrap="truncate-end">{metaLine(shot)}</Text>
        <Box flexDirection="row" justifyContent="center" marginTop={1}>
          {view}
        </Box>
        {shot.caption ? <Box marginTop={1}><Text italic>{shot.caption}</Text></Box> : null}
        {hasStrip ? (
          <Box flexDirection="row" justifyContent="center" gap={1} marginTop={1}>
            {strip.map((s) => (
              <Box
                key={`t-${s.id}`}
                borderStyle="single"
                borderColor={s.id === shot.id ? "cyan" : "gray"}
                borderDimColor={s.id !== shot.id}
                width={THUMB_COLUMNS + 2}
                height={THUMB_ROWS + 2}
                justifyContent="center"
                alignItems="center"
              >
                {thumbnail(s)}
              </Box>
            ))}
          </Box>
        ) : null}
        <Box marginTop={1}>
          <Text dimColor>{"─".repeat(width)}</Text>
        </Box>
        <Box flexDirection="row" columnGap={3} flexWrap="wrap">
          <Button key="prev" plain dimColor label="prev" hotkey="h" onPress={step(-1)} />
          <Button key="next" plain dimColor label="next" hotkey="l" onPress={step(1)} />
          {canOpen && (shot.path || source) ? <Button key="open" plain dimColor label="open" hotkey="o" onPress={() => { void openShot($, shot); }} /> : null}
          {canOpen && shot.path ? <Button key="reveal" plain dimColor label="reveal" hotkey="r" onPress={() => { void $.process.run(["open", "-R", shot.path!]); }} /> : null}
          {shot.path ? <Button key="copy" plain dimColor label="copy" hotkey="c" onPress={() => { void $.ui.copy({ text: shot.path!, surface: e.surface }); }} /> : null}
          <Button key="remove" plain dimColor label="remove" hotkey="x" onPress={() => { void removeShot($, shot.id); }} />
        </Box>
        {e.props.isFocused ? null : <Text dimColor>ctrl+x tab to use the keys, or click</Text>}
      </Box>
    );
  });