Mode switch

Modes written as verbs and priced in time and quota, kept visually apart from the model control. The model is a ceiling; the mode is how much effort gets spent under it, and one left on quietly spends a week of quota.

npx shadcn@latest add toggle-group button

Tokens this needs: --card, --card-foreground, --muted, --muted-foreground, --accent, --accent-foreground, --border, --chart-1

────────────────────────────────────────────────────────────────────────
// ModeSwitch.tsx
────────────────────────────────────────────────────────────────────────

import { Button } from "@/components/ui/button";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

/**
 * A closed set, each one a verb. A mode is an amount of effort, and a menu
 * that mixes these with model names leaves nobody able to predict a row.
 * Time and credits are on every entry because the viewer is choosing whether
 * to wait and what to spend, and a toggle with no price understates both.
 */
export const MODES = {
  answer:   { verb: "answer now",   seconds: 2,   credits: 0 },
  search:   { verb: "search first", seconds: 15,  credits: 1 },
  think:    { verb: "think longer", seconds: 90,  credits: 4 },
  research: { verb: "research",     seconds: 540, credits: 40 },
} as const;
export type Mode = keyof typeof MODES;

const time = (s: number) => (s >= 120 ? `${Math.round(s / 60)} min` : `${s}s`);
const credits = (n: number) => (n === 0 ? "" : n === 1 ? " · 1 credit" : ` · ${n} credits`);
/** "9 min · 40 credits", computed rather than typed, so it cannot drift. */
export const price = (m: Mode) => `${time(MODES[m].seconds)}${credits(MODES[m].credits)}`;

type Props = {
  value: Mode;
  onChange: (mode: Mode) => void;
  /** The model is a separate control on purpose. It is a capability ceiling,
   *  and it sits on its own row so it cannot be mistaken for an effort level. */
  model: string;
  onPickModel: () => void;
  /** Where routing escalated the current turn past the chosen mode. Most
   *  people never touch the row above, so this is the part they see. */
  escalatedTo?: Mode;
  onForceFast: () => void;
};

export function ModeSwitch({ value, onChange, model, onPickModel, escalatedTo, onForceFast }: Props) {
  return (
    <div className="rounded-lg border bg-card p-4 text-card-foreground">
      <ToggleGroup
        type="single"
        value={value}
        onValueChange={(v) => v && onChange(v as Mode)}
        aria-label="How much effort to spend"
        className="grid grid-cols-2 gap-3 sm:grid-cols-4"
      >
        {(Object.keys(MODES) as Mode[]).map((m) => (
          <ToggleGroupItem
            key={m}
            value={m}
            className="h-auto flex-col items-start gap-1 rounded-md border px-3 py-2 data-[state=on]:border-chart-1 data-[state=on]:bg-chart-1/10 data-[state=on]:text-chart-1"
          >
            <span className="text-xs">{MODES[m].verb}</span>
            <span className="text-xs font-normal tabular-nums text-muted-foreground">{price(m)}</span>
          </ToggleGroupItem>
        ))}
      </ToggleGroup>

      <div className="mt-4 flex items-center gap-3 border-t border-dashed pt-3 text-xs">
        <span className="text-muted-foreground">model</span>
        <Button variant="outline" size="sm" className="h-6 px-2.5 text-xs" onClick={onPickModel}>{model}</Button>
      </div>

      {escalatedTo && escalatedTo !== value && (
        <div className="mt-4 flex items-center gap-3 rounded-lg border bg-muted px-3 py-2 text-xs">
          <span>escalated to {MODES[escalatedTo].verb} for this question</span>
          <button type="button" onClick={onForceFast} className="ml-auto text-muted-foreground underline underline-offset-2">
            answer fast instead
          </button>
        </div>
      )}
    </div>
  );
}

────────────────────────────────────────────────────────────────────────
// demo.tsx
────────────────────────────────────────────────────────────────────────

import { useState } from "react";
import { ModeSwitch, type Mode } from "./ModeSwitch";

/**
 * Answer now is the chosen mode, and routing escalated this one question to
 * think longer. Forcing the fast path clears the escalation; picking a mode
 * changes what every turn from here does.
 */
export default function Demo() {
  const [mode, setMode] = useState<Mode>("answer");
  const [escalatedTo, setEscalatedTo] = useState<Mode | undefined>("think");

  return (
    <ModeSwitch
      value={mode}
      onChange={setMode}
      model="Careful"
      onPickModel={() => {}}
      escalatedTo={escalatedTo}
      onForceFast={() => setEscalatedTo(undefined)}
    />
  );
}