affordance

Showcase  /  Example

Showing a model the useful 98 tokens of a 1,440-token test log

When an agent runs a command, the output goes into the model's prompt. A test run can print thousands of tokens, and nearly all of it is one "ok" line after another. The model needs to know what was run and how it ended.

In Affordance you write that as a rule in a style sheet. This page shows the rule and what the model reads because of it.

The rule

A token is a piece of text about three quarters of a word long, and it is the unit a model's prompt is measured in. The rule below gives a command's output at most 90 tokens. When the output is longer, it keeps the start and the end and puts a marker in the middle.

shell.tss
Output {
  max-tokens: 90tok;
  overflow: clip-middle;
  more: "\n[... {hidden} tokens hidden ...]\n";
}

max-tokens is the limit. clip-middle means keep both ends. more is the marker, and {hidden} becomes the number of tokens left out.

shell.tsx
import "./shell.tss";
const Output = ({ children }) => children;

export default function Shell({ command, output }) {
  return <>
    {`$ ${command}\n`}
    <Output>{output}</Output>
  </>;
}

The app prints the command and its output. It says nothing about limits. The style sheet applies to anything named Output.

what the model reads
$ cargo test --release --lib
running 66 tests
test emit::drop_cut_tests::graded_results_grow_in_steps ... ok
test grammar::tests::byte_level_map_is_a_bijection ... ok
test
[... 1355 tokens hidden ...]
 ok

test result: ok. 66 passed; 0 failed; 0 ignored; 0 measured; 0 filtered out; finished in 3.21s

What happened

This test run printed 1,440 tokens. The model reads 98: the command, the first few tests, a marker saying that 1355 tokens were left out, and the last lines, including the one that says all 66 tests passed.

The limit is exact because Affordance counts in the model's own tokens while it builds the prompt. A program that trims text by characters has to guess, and check afterwards.

The app and the rule are separate files, as HTML and CSS are. For a model that can read more, you change the 90 in the style sheet and leave the app alone.

Try it

$ affordance render shell.tsx --state shell.json

The guide builds an app like this one step by step.