Custom instructions

CustomInstructions.tsxTwo scopes in a stated order, a date on every rule, a character budget computed from the text, and a chip that counts what is in force.Copy

import { Button } from "@/components/ui/button";
import { Progress } from "@/components/ui/progress";

/** A rule the viewer wrote, and when. The date is what turns a standing order
 *  into something a person can audit six months later. */
export type Rule = { text: string; written: Date };

/** Two scopes, no more. Project sits above global and wins on conflict; the
 *  order is printed rather than left to be discovered. */
export type Scope = "project" | "global";
export type Layer = { scope: Scope; name: string; rules: Rule[] };

const SCOPE_ORDER: Scope[] = ["project", "global"];
const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
const day = (d: Date) => `${d.getUTCDate()} ${MONTHS[d.getUTCMonth()]}`;

type Props = {
  layers: Layer[];
  /** Characters the block may spend on each turn. Every rule is prepended to
   *  every conversation, so the cost is per turn and it never stops. */
  limit: number;
  /** The chip on the conversation opens the text. One click, no settings dive. */
  onOpen: () => void;
};

export function CustomInstructions({ layers, limit, onOpen }: Props) {
  const ordered = [...layers].sort((a, b) => SCOPE_ORDER.indexOf(a.scope) - SCOPE_ORDER.indexOf(b.scope));
  const rules = ordered.flatMap((l) => l.rules);
  const used = rules.reduce((n, r) => n + r.text.length, 0);
  const pct = Math.min(100, Math.round((used / limit) * 100));

  return (
    <div className="grid grid-cols-[1.1fr_0.9fr] gap-5 rounded-lg border bg-card p-4 text-[11px]">
      <div className="rounded-lg border bg-muted">
        {ordered.map((layer, i) => (
          <div key={layer.scope} className={i > 0 ? "border-t" : undefined}>
            <p className="px-3 pt-2.5 uppercase tracking-wide text-muted-foreground">{layer.name}</p>
            <ul className="pb-2.5">
              {layer.rules.map((r) => (
                <li key={r.text} className="flex items-baseline gap-3 px-3 pt-1.5">
                  <span className="text-card-foreground">{r.text}</span>
                  <time className="ml-auto tabular-nums text-muted-foreground" dateTime={r.written.toISOString()}>
                    {day(r.written)}
                  </time>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>

      <div>
        <p className="text-muted-foreground">project overrides global</p>
        <Progress value={pct} className="mt-2 h-2.5 bg-muted [&>div]:bg-scale-seq-3" aria-label="context budget" />
        <p className="mt-1.5 text-muted-foreground">
          {used} of {limit} characters, spent on every turn, forever
        </p>
        {/* The box is not a settings panel and should not look like one. */}
        <p className="mt-4 leading-relaxed text-status-warn">
          Standing guidance: advisory rather than binding, and a long block dilutes itself
        </p>
      </div>

      <div className="col-span-2 border-t pt-4">
        <Button variant="ghost" size="sm" onClick={onOpen} className="h-7 rounded-md bg-chart-1/15 px-3 text-[11px] text-chart-1 hover:bg-chart-1/25 hover:text-chart-1">
          {rules.length} instructions active
        </Button>
      </div>
    </div>
  );
}

demo.tsxHow it is called: one project rule over two global ones, 99 characters of a 400 budget.Copy

import { CustomInstructions } from "./CustomInstructions";

/**
 * One project rule over two global ones, each dated. 99 characters against a
 * 400 budget puts the bar at a quarter. The chip is what a conversation shows;
 * clicking it would open this panel.
 */
export default function Demo() {
  return (
    <CustomInstructions
      layers={[
        {
          scope: "project",
          name: "This project",
          rules: [{ text: "Cite the source file for every claim", written: new Date("2026-09-01") }],
        },
        {
          scope: "global",
          name: "Everywhere",
          rules: [
            { text: "British English, no bullet lists", written: new Date("2026-02-04") },
            { text: "I am a designer, not an engineer", written: new Date("2026-02-04") },
          ],
        },
      ]}
      limit={400}
      onOpen={() => {}}
    />
  );
}