session-switcher

  on("ui.render", { component: "Pane" }, async ($, e, next) => {
    if (e.requestId !== PANE_ID) return next(e);
    const table = await $.ui.resolve(e);
    // Element tables differ by surface — one without `Input` still gets rows.
    const { Box, Text, Button } = table;
    const Input = "Input" in table ? table.Input : undefined;

    const actions: Actions = {
      filter: (value) => { state.query = value; state.page = 0; $.ui.invalidate("ui.render"); },
      turnPage: (by) => { state.page = Math.max(0, state.page + by); $.ui.invalidate("ui.render"); },
      toggleMode: () => { state.mode = state.mode === "tag" ? "resume" : "tag"; $.ui.invalidate("ui.render"); },
      pick: (id) => {
        const s = state.sessions.find((x) => x.id === id);
        if (!s) return;
        if (state.mode === "tag") {
          const m = metaFor(s, state.meta);
          state.editing = { id, text: [m?.title, ...(m?.tags ?? []).map((t) => "#" + t)].filter(Boolean).join(" ") };
          return $.ui.invalidate("ui.render");
        }
        void resume($, s);
      },
      editTags: (value) => {
        const s = state.editing && state.sessions.find((x) => x.id === state.editing!.id);
        if (s && state.store) { setMeta(s, state.meta, value); void saveMeta(state.store, state.meta); }
        // Cheap when the edited row isn't this session: the same line re-pins.
        void pinStatus($);
        state.editing = null;
        state.mode = "resume";
        $.ui.invalidate("ui.render");
      },
    };

    return view({ Box, Text, Button, Input }, model(), actions);
  });

export function view(ui: Elements, model: Model, actions: Actions): RenderElement {
  const { Box, Text, Button, Input } = ui;
  const rows = model.sessions.filter((s) => matches(s, model.meta, model.query));
  const pages = Math.max(1, Math.ceil(rows.length / PAGE));
  // Clamped: a filter that shrinks the list must not strand the view on a
  // page that no longer exists.
  const page = Math.min(Math.max(0, model.page), pages - 1);
  const visible = rows.slice(page * PAGE, page * PAGE + PAGE);

  const header = Box({
    justifyContent: "space-between",
    children: [
      Text({ bold: true, children: model.mode === "tag" ? "Sessions — tag which?" : "Sessions" }),
      Text({ dimColor: true, children: `${rows.length} found  page ${page + 1}/${pages}${model.syncing ? "  indexing…" : ""}` }),
    ],
  });

  const filter = Input ? Input({
    key: "filter",
    // No label: the surface draws its own separator after one, so "› " came
    // out as "› :".
    placeholder: "filter by title, project, branch or #tag",
    value: model.query,
    submitLabel: "filter",
    autoFocus: true,
    onInput: (value: string) => actions.filter(value),
    onSubmit: (value: string) => actions.filter(value),
  }) : Text({ dimColor: true, children: model.query ? `filter: ${model.query}` : "filter unavailable on this surface" });

  const body = visible.length === 0
    ? [Text({ dimColor: true, children: `No sessions match “${model.query}”. Clear the filter to see them all.` })]
    : visible.map((s, i) => row(ui, s, model, actions, HOTKEYS[i] ?? ""));

  const editor = model.editing && Input
    ? Input({
        key: "tags",
        label: "Tag or rename",
        placeholder: "#wip #mods  or a new title  or both",
        value: model.editing.text,
        submitLabel: "save",
        autoFocus: true,
        onInput: () => {},
        onSubmit: (value: string) => actions.editTags(value),
      })
    // Same squeeze as the meta line: in a narrow pane "Esc close" drew as
    // "Esc" / "clos" / "e". Controls wrap onto another line as whole items;
    // columnGap, not gap, or the wrapped line lands two blank lines down.
    : Box({
        marginTop: 1,
        columnGap: 2,
        flexWrap: "wrap",
        children: [
          Button({ key: "mode", hotkey: "t", plain: true, dimColor: true,
                   label: model.mode === "tag" ? "resume mode" : "tag a session",
                   onPress: () => actions.toggleMode() }),
          Button({ key: "prev", hotkey: "p", plain: true, dimColor: true, label: "prev",
                   onPress: () => actions.turnPage(-1) }),
          Button({ key: "next", hotkey: "n", plain: true, dimColor: true, label: "next",
                   onPress: () => actions.turnPage(1) }),
          Box({ flexShrink: 0, children: [Text({ dimColor: true, children: "Esc close" })] }),
          Box({ flexShrink: 0, children: [Text({ dimColor: true, children: "· /switcher #tag tags this session" })] }),
        ],
      });

  return Box({
    flexDirection: "column",
    paddingX: 1,
    children: [header, Box({ marginBottom: 1, children: [filter] }), ...body, editor],
  });
}

function row(ui: Elements, s: Session, model: Model, actions: Actions, hotkey: string): RenderElement {
  const { Box, Text, Button } = ui;
  const m = metaFor(s, model.meta);
  const colour = hue(s.project);
  const isEditing = model.editing?.id === s.id;

  return Box({
    key: s.id,
    flexDirection: "column",
    marginBottom: isEditing ? 1 : 0,
    children: [
      Box({
        children: [
          Text({ color: colour, children: spark(s.activity) + " " }),
          Box({
            flexGrow: 1,
            children: [
              Button({
                key: `row:${s.id}`,
                hotkey,
                plain: true,
                label: m?.title ?? s.title,
                onPress: () => actions.pick(s.id),
              }),
            ],
          }),
          Text({ dimColor: true, children: " " + ago(s.lastActive) }),
        ],
      }),
      // One meta line, not three. Ten rows have to fit the pane alongside the
      // filter and the controls, and the opening prompt is still searchable
      // whether or not it is drawn.
      // When the line is wider than the pane, every child gets squeezed, and a
      // squeezed Text wraps inside its own narrow column — "Projects" came out
      // as "Project" over "s", and a long branch interleaved with the project.
      // So the project and tags never shrink, and the branch truncates instead.
      Box({
        marginLeft: INDENT,
        children: [
          Box({ flexShrink: 0, children: [Text({ color: colour, children: s.project })] }),
          ...(s.branch ? [Text({ dimColor: true, wrap: "truncate-end", children: ` on ${s.branch}` })] : []),
          Text({ dimColor: true, wrap: "truncate-end",
                 children: ` · ${s.prompts} ${s.prompts === 1 ? "prompt" : "prompts"}`
                   + (s.filesTouched ? `, ${s.filesTouched} files` : "")
                   + (s.partial ? " · sampled" : "") }),
          ...(m?.tags ?? []).map((t) => Box({ flexShrink: 0, children: [Text({ color: "magenta", children: ` #${t}` })] })),
        ],
      }),
    ],
  });
}