Compare models

Same prompt, {MIN_MODELS}–{MAX_MODELS} models side by side. Every run is recorded in usage and saved to history.

{historyOpen &&

}

setPrompt(e.target.value)} placeholder="Prompt sent to every selected model… (⌘⏎ to run)" rows={4} className="min-h-[96px] resize-y border-0 bg-transparent px-1 shadow-none focus-visible:ring-0" onKeyDown={(e) => { if ((e.metaKey || e.ctrlKey) && e.key === "Enter") { e.preventDefault(); run(); } }} />
            <button type="button" onClick={() => setShowSystem((v) => !v)} className="mt-1 inline-flex items-center gap-1 text-[12px] text-fg-muted hover:text-fg"><ChevronDown className={cn("size-3.5 transition-transform", showSystem && "rotate-180")} />System prompt {system.trim() ? "(custom)" : "(default assistant prompt)"}</button>
            {showSystem && <Textarea value={system} onChange={(e) => setSystem(e.target.value)} placeholder="Optional system prompt. Leave empty to use the workspace assistant prompt." rows={3} className="mt-1 text-[13px]" />}
          </div>
          <ModelPicker models={catalogue?.models ?? []} selected={selected} onChange={setSelected} disabled={running} />
          <div className="flex flex-wrap items-center gap-2">
            {running ? <Button variant="secondary" onClick={() => abort.current?.abort()}><Square />Stop</Button> : <Button variant="ai" onClick={run} disabled={!canRun}><Play />Run comparison</Button>}
            {results.length > 1 && <Button variant={diff ? "secondary" : "ghost"} size="sm" onClick={() => setDiff((v) => !v)} disabled={running}><Diff />{diff ? "Diff on" : "Diff"}</Button>}
            {running && <span className="inline-flex items-center gap-1.5 text-[12px] text-fg-muted"><Spinner className="size-3.5" />{results.filter((r) => !r.pending).length} / {results.length} done</span>}
            {savedId && !running && <span className="text-[12px] text-fg-muted">Saved · {best ? `best: ${best}` : "mark the best answer"}</span>}
          </div>
          {results.length > 0 && <div className={cn("-mx-4 flex snap-x snap-mandatory gap-3 overflow-x-auto px-4 pb-2 md:mx-0 md:grid md:overflow-visible md:px-0", results.length <= 2 ? "md:grid-cols-2" : results.length === 3 ? "md:grid-cols-3" : "md:grid-cols-2 xl:grid-cols-3")}>{results.map((r) => <ResultColumn key={r.model} r={r} meta={byId.get(r.model)} others={results.filter((o) => o.model !== r.model && o.text).map((o) => o.text!)} diff={diff} best={best === r.model} canVote={Boolean(savedId)} onCopy={() => { navigator.clipboard.writeText(r.text ?? ""); toast("Copied"); }} onSave={() => saveNote(r)} onBest={() => vote(r.model)} />)}</div>}
          {!results.length && <div className="rounded-xl border border-dashed border-line-strong p-8 text-center text-[13px] text-fg-muted"><Columns3 className="mx-auto mb-2 size-6 text-fg-faint" />Results appear here as each model finishes. Diff highlights sentences that exist in only one answer.</div>}
          {diff && <p className="text-[11.5px] text-fg-muted">Diff: highlighted sentences share fewer than 40 % of their content words with any sentence of the other answers (word-set comparison, Markdown shown as plain text).</p>}
        </div>
        <div className="hidden lg:block"><History items={history} current={savedId} votes={voteData?.votes ?? {}} onOpen={open} />
          {Object.keys(tally).length > 0 && <div className="mt-3 rounded-xl border border-line bg-bg-elev p-3 shadow-card"><div className="text-[12.5px] font-semibold">Best-answer tally</div><ul className="mt-1 space-y-0.5 text-[12px] tabular-nums">{Object.entries(tally).sort((a, b) => b[1] - a[1]).slice(0, 8).map(([m, n]) => <li key={m} className="flex justify-between"><span className="font-mono">{m}</span><span className="text-fg-muted">{n}</span></li>)}</ul></div>}
        </div>
      </div>
    </div>
  );
}