feat(plugin): add a session.message.footer slot under timeline messages - #62156

import { For, Show, createMemo } from "solid-js"
import { Plugin, Slot, Style, type TimelineResponse } from "@opencode/plugin/gui"

type Step = TimelineResponse["messages"][number]

const css = `
[data-receipt] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 20px;
  font-family: var(--v2-font-family-sans);
  font-size: 12px;
  font-weight: 440;
  line-height: 18px;
  letter-spacing: 0.05px;
  color: var(--v2-text-text-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: default;
  user-select: none;
}
[data-receipt][data-live] { opacity: 0.6; }
[data-receipt] [data-part] { overflow: hidden; text-overflow: ellipsis; }
[data-receipt] [data-model] { color: var(--v2-text-text-muted); }
[data-receipt] [data-dot] { opacity: 0.6; }
[data-receipt-steps] {
  display: grid;
  grid-template-columns: auto auto auto auto;
  column-gap: 12px;
  row-gap: 2px;
  font-weight: 440;
  font-variant-numeric: tabular-nums;
  text-align: end;
}
[data-receipt-steps] > :nth-child(4n + 1) { text-align: start; }
[data-receipt-steps] [data-head] { opacity: 0.6; }
`

export default Plugin.define({
  i18n: {
    en: {
      in: "{{value}} in",
      out: "{{value}} out",
      cached: "{{value}} cached",
      "steps.one": "{{count}} step",
      "steps.other": "{{count}} steps",
      step: "Step {{index}}",
      "head.step": "Step",
      "head.in": "In",
      "head.out": "Out",
      "head.cost": "Cost",
    },
  },
  setup(ctx) {
    ctx.add(Style, css)

    const number = createMemo(() => new Intl.NumberFormat(ctx.locale.locale(), { notation: "compact" }))
    const percent = createMemo(() => new Intl.NumberFormat(ctx.locale.locale(), { style: "percent" }))

    const money = createMemo(
      () => new Intl.NumberFormat(ctx.locale.locale(), { style: "currency", currency: "USD", maximumFractionDigits: 4 }),
    )

    // Input counts every token the model read, cached or not, so the cache share is comparable across providers.
    const read = (step: Step) => (step.tokens ? step.tokens.input + step.tokens.cache.read + step.tokens.cache.write : 0)
    const wrote = (step: Step) => (step.tokens ? step.tokens.output + step.tokens.reasoning : 0)

    const Receipt = (props: { response: TimelineResponse }) => {
      const totals = createMemo(() => {
        const steps = props.response.messages
        const input = steps.reduce((sum, step) => sum + read(step), 0)
        const cached = steps.reduce((sum, step) => sum + (step.tokens?.cache.read ?? 0), 0)

        return {
          model: steps.at(-1)?.model.id ?? "",
          input,
          output: steps.reduce((sum, step) => sum + wrote(step), 0),
          cached: input > 0 ? cached / input : 0,
          cost: steps.some((step) => step.cost !== undefined)
            ? steps.reduce((sum, step) => sum + (step.cost ?? 0), 0)
            : undefined,
        }
      })

      const breakdown = () => (
        <div data-receipt-steps>
          <span data-head>{ctx.t("head.step")}</span>
          <span data-head>{ctx.t("head.in")}</span>
          <span data-head>{ctx.t("head.out")}</span>
          <span data-head>{ctx.t("head.cost")}</span>
          <For each={props.response.messages}>
            {(step, index) => (
              <>
                <span>{ctx.t("step", { index: index() + 1 })}</span>
                <span>{number().format(read(step))}</span>
                <span>{number().format(wrote(step))}</span>
                <span>{step.cost === undefined ? "–" : money().format(step.cost)}</span>
              </>
            )}
          </For>
        </div>
      )

      return (
        <Show when={totals().input > 0}>
          <ctx.ui.Tooltip value={breakdown()}>
            <span data-receipt data-live={props.response.completed ? undefined : ""}>
              <span data-part data-model>
                {totals().model}
              </span>
              <span data-dot>·</span>
              <span data-part>{ctx.t("in", { value: number().format(totals().input) })}</span>
              <span data-dot>·</span>
              <span data-part>{ctx.t("out", { value: number().format(totals().output) })}</span>
              <Show when={totals().cached >= 0.01}>
                <span data-dot>·</span>
                <span data-part>{ctx.t("cached", { value: percent().format(totals().cached) })}</span>
              </Show>
              <Show when={props.response.messages.length > 1}>
                <span data-dot>·</span>
                <span data-part>{ctx.plural("steps", props.response.messages.length)}</span>
              </Show>
              <Show when={totals().cost}>
                {(cost) => (
                  <>
                    <span data-dot>·</span>
                    <span data-part>{money().format(cost())}</span>
                  </>
                )}
              </Show>
            </span>
          </ctx.ui.Tooltip>
        </Show>
      )
    }

    ctx.add(Slot, {
      at: "session.message.footer",
      render: (input) => (
        <Show when={input.message.role === "assistant" ? input.message : undefined}>
          {(response) => <Receipt response={response()} />}
        </Show>
      ),
    })
  },
})