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);
    // What the mods after this one draw in the band (statusline-hud's rows) goes under the strip, so it stays
    // closest to the prompt whichever mod runs first; the strip fits in the rows it leaves.
    const rest = await next(e);
    const withRest = (strip: RenderChildren) => (
      <Box flexDirection="column">
        {strip}
        {rest}
      </Box>
    );
    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]!;

    // 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 band gets the rows the bottom slot has left above the prompt, fewer while a list of running agents
    // sits there too, and scrolls whatever is taller. The strip always fits them whole instead: smaller pictures
    // first, then fewer words and keys, then a single line.
    const rows = Math.max(1, e.props.maxRows - rowsOf(rest));
    const maxRows = Math.max(1, Math.min(STRIP_ROWS, rows - 2));
    // The pictures share about three fifths of the width, each in its frame; the words take the rest.
    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 boxOf = (s: LightboxShot) => (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) });
    const counter = (n: number) => (n > 0 ? String(n).length + 2 : 0);
    const picturesWidth = shown.reduce((sum, s) => sum + boxOf(s).columns + 2, 0) + (shown.length - 1) + counter(before) + counter(after);
    // The words' column: the band less its padding, the pictures, the gap and the room kept for the collapse mark.
    const wordsWidth = e.props.bodyColumns - 2 - picturesWidth - 2 - 4;
    const cramped = rows < 4 || wordsWidth < 16;

    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 = boxOf(s);
      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 openPane = () => { void $.ui.open({ id: PANE, title: "Lightbox", focus: true }).then(() => $.ui.invalidate("ui.render")); };
    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. Also where the band
    // has no room for more, and then the larger pane is the way to see it.
    const isFolded = await read($, folded);
    if (isFolded || cramped) {
      const tiny = (s: LightboxShot) => {
        const strip = pixels.get(s.id)?.strip;
        if (!strip && s.status !== "failed") $.clock.after(0, () => { void prepare($, 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;
      };
      // The keys and a dozen cells of name come first; tiny pictures fill what is left, none on a narrow band. Each key
      // is a framed `[ label ]`, four cells wider than its label, unless the band is too narrow for frames: then the
      // labels alone, as before.
      const isFramed = e.props.bodyColumns >= 2 + 4 + "larger".length + 4 + 1 + "hide".length + 4 + 1 + 12 + 5;
      const frameWidth = isFramed ? 4 : 0;
      const keysWidth = (isFolded ? "expand".length : "larger".length) + frameWidth + 1 + "hide".length + frameWidth;
      let room = e.props.bodyColumns - 2 - 4 - keysWidth - 1 - 12;
      const fitting = shown.filter((s) => {
        const width = s.width && s.height ? fit(s.width, s.height, 8, 1, cellAspect).columns + 1 : 0;
        if (width > room) { room = 0; return false; }
        room -= width;
        return true;
      });
      return withRest(
        <Box flexDirection="row" paddingX={1} paddingRight={4} columnGap={1}>
          {fitting.map(tiny)}
          <Text bold wrap="truncate-middle">{shot.title}</Text>
          {count > 1 ? <Text dimColor wrap="truncate-end">+{count - 1}</Text> : null}
          {tint ? <Text color={tint} wrap="truncate-end">{shot.origin}</Text> : <Text dimColor wrap="truncate-end">{shot.origin}</Text>}
          <Text dimColor wrap="truncate-end">· {ago(Date.now() - shot.at)}</Text>
          <Box flexGrow={1} />
          {isFolded ? (isFramed ? <Button key="expand" variant="primary" label="expand" onPress={() => { void update($, folded, () => false); }} /> : <Button key="expand" plain dimColor label="expand" onPress={() => { void update($, folded, () => false); }} />) : null}
          {isFolded ? null : isFramed ? <Button key="view" variant="primary" label="larger" onPress={openPane} /> : <Button key="view" plain dimColor label="larger" onPress={openPane} />}
          {isFramed ? <Button key="hide" variant="secondary" label="hide" onPress={() => { void update($, hidden, () => true); }} /> : <Button key="hide" plain dimColor label="hide" 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;

    // The words' rows: a row above them, level with the picture's top, only when the band has rows to spare; then
    // the name and the details, a note when there is room, and the keys in what is left, the least needed dropped
    // first so they fit without wrapping past it.
    const lead = rows >= 6 ? 1 : 0;
    const spare = rows - lead - 2;
    const noteText = shot.status === "failed" ? `Can't show it: ${shot.note ?? "unknown error"}` : shot.caption;
    const note = noteText && spare >= 2 ? noteText : undefined;
    const keyRows = spare - (note ? 1 : 0);
    type Key = { id: string; width: number; node: RenderChildren };
    // Buttons that look like buttons: a rounded outline in the key's tone, brighter under the pointer, when there are
    // three rows for a line of them; otherwise one row of framed `[ label ]` keys. Both are four cells wider than the
    // label.
    const isOutlined = keyRows >= 3;
    const keyLines = isOutlined ? Math.floor(keyRows / 3) : keyRows;
    const button = (id: string, label: string, onPress: () => void, tone: Tone = "neutral"): Key => ({
      id,
      width: label.length + 4,
      node: isOutlined
        ? outlined(Box, Button, id, label, onPress, tone)
        : <Button key={id} variant={tone === "primary" ? "primary" : "secondary"} label={label} onPress={onPress} />
    });
    let keys: Key[] = [
      ...(list.length > 1 ? [button("prev", "‹ prev", step(-1)), button("next", "next ›", step(1))] : []),
      button("view", "larger", openPane, "primary"),
      ...(canOpen && (shot.path || shot.copy) ? [button("open", "open", () => { void openShot($, shot); })] : []),
      button("fold", "fold", () => { void update($, folded, () => true); }),

  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;
    // The footer: a rule, then the outlined keys, three rows for each line they wrap onto at this width.
    const footerKeys = [
      ...(hasStrip ? ["‹ prev", "next ›"] : []),
      ...(canOpen && (shot.path || shot.copy) ? ["open"] : []),
      ...(canOpen && shot.path ? ["show in Finder"] : []),
      ...(shot.path ? ["copy path"] : []),
      "remove"
    ];
    let footerLines = 1;
    let used = -1;
    for (const label of footerKeys) {
      if (used + 1 + label.length + 4 > width && used >= 0) { footerLines += 1; used = -1; }
      used += 1 + label.length + 4;
    }
    const chrome = 2 + 2 + (shot.caption ? 2 : 0) + (hasStrip ? THUMB_ROWS + 3 : 0) + 2 + 3 * footerLines;
    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.status !== "failed") $.clock.after(0, () => { void prepare($, 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={1} flexWrap="wrap">
          {list.length > 1 ? outlined(Box, Button, "prev", "‹ prev", step(-1)) : null}
          {list.length > 1 ? outlined(Box, Button, "next", "next ›", step(1)) : null}
          {canOpen && (shot.path || shot.copy) ? outlined(Box, Button, "open", "open", () => { void openShot($, shot); }, "primary") : null}
          {canOpen && shot.path ? outlined(Box, Button, "reveal", "show in Finder", () => { void $.process.run(["open", "-R", shot.path!]); }) : null}
          {shot.path ? outlined(Box, Button, "copy", "copy path", () => { void $.ui.copy({ text: shot.path!, surface: e.surface }); }) : null}
          {outlined(Box, Button, "remove", "remove", () => { void removeShot($, shot.id); }, "danger")}
        </Box>
      </Box>
    );
  });

function outlined(
  Box: ElementConstructor<any>,
  Button: ElementConstructor<any>,
  id: string,
  label: string,
  onPress: () => void,
  tone: Tone = "neutral"
) {
  return (
    <Box key={`b-${id}`} borderStyle="round" borderColor={TONE_COLOR[tone]} hover={{ borderColor: "text" }} flexShrink={0}>
      <Button key={id} plain label={` ${label} `} onPress={onPress} />
    </Box>
  );
}