From 4aab0fd5f64656a0795944c97d5dd4b66f383ae3 Mon Sep 17 00:00:00 2001 From: vahid-ahmadi Date: Wed, 12 Aug 2026 15:16:15 +0100 Subject: [PATCH] Enlarge the boundary diagram, drop the date, restore full-width text MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The diagram was the densest thing on the page and the hardest to read. Lanes widen from 380 to 410 units and boxes from 150 to 175 so the labels can go from 13px to 15px without "baseline + reform" overflowing its box; lane labels and crossing captions scale with them. The boundary line is now three segments, so "tool call" and "typed result" sit in gaps rather than having the dashed line run through them — centring them beside the line instead put them on top of the "Choose a tool" box. Verified by rendering the SVG and looking at it. Removed the publication date, and reverted the 78ch measure cap so running text and the subtitle use the full line again, both at the author's request. Line length was a review finding, so it is worth revisiting deliberately rather than by default. Mobile: the diagram keeps a 700px floor inside a container that scrolls, its padding no longer eats most of a phone screen, and the card-tabs header stacks instead of crowding. Co-Authored-By: Claude Opus 5 (1M context) --- content/current-article.md | 2 - src/App.jsx | 109 +++++++++++++++++++------------------ src/uk-chat.css | 47 ++++++++-------- 3 files changed, 80 insertions(+), 78 deletions(-) diff --git a/content/current-article.md b/content/current-article.md index 51a3ac3..341f154 100644 --- a/content/current-article.md +++ b/content/current-article.md @@ -2,8 +2,6 @@ _Introducing PolicyEngine's newest AI-powered tool to help users understand UK tax and benefit policy_ -_11 August 2026_ - People are increasingly turning to AI language models to answer complex questions about tax and benefit policy and reform because models can read loosely worded questions and answer them in plain language. This presents a problem: for many users, tax and benefit questions directly affect their lives and livelihoods, so they require correct, verifiable answers. Language models generate responses from learned statistical patterns, and an answer may be partly or wholly wrong. PolicyEngine therefore built UK Chat, an AI interface to PolicyEngine's deterministic rules and simulation engine. A language model interprets an open-ended request and proposes a structured plan. The gateway checks the proposed inputs and output against the current PolicyEngine catalogue; only then do deterministic tools compute quantitative policy results from actual tax and benefit rules. diff --git a/src/App.jsx b/src/App.jsx index 22c340f..5a222db 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -343,9 +343,6 @@ function Hero() { Introducing PolicyEngine's newest AI-powered tool to help users understand UK tax and benefit policy

-

- -

); } @@ -441,7 +438,7 @@ function BoundaryDiagram() { - + PREDICTIVE — LANGUAGE MODEL - + DETERMINISTIC — POLICYENGINE UK - - + + Interpret the - + question - - + + Choose a tool - + and arguments - - + + Explain the - + returned numbers - - + + Validate - + and look up - - + + Simulate - + baseline + reform - - + + Weighted outputs - + and chart rows - + {/* Broken into three segments so the two crossing captions sit in the gap + between the lanes without the dashed line running through them. */} + {[ + [30, 92], + [116, 182], + [196, 270], + ].map(([y1, y2]) => ( + + ))} TYPED TOOL BOUNDARY - + tool call - {/* Simulate (x 700-850) and Weighted outputs (x 615-765) overlap between - 700 and 765, so the two are joined by a plain vertical drop through the - middle of that overlap. Curving between their centres put the head in - at an angle, floating short of the box. */} + {/* Simulate (x 687-862) and Weighted outputs (x 588-763) overlap between + 687 and 763, so a plain vertical drop through the middle of that + overlap meets the box squarely. */} - + typed result diff --git a/src/uk-chat.css b/src/uk-chat.css index e091597..0c1d47b 100644 --- a/src/uk-chat.css +++ b/src/uk-chat.css @@ -149,13 +149,13 @@ .boundary-flow-svg .network-label { fill: var(--text-mid); font-family: 'JetBrains Mono', monospace; - font-size: 13px; + font-size: 15px; text-anchor: middle; } .boundary-flow-svg .lane-label { font-family: 'JetBrains Mono', monospace; - font-size: 11px; + font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em; text-anchor: middle; @@ -166,7 +166,7 @@ } .boundary-flow-svg .flow-caption { - font-size: 11px; + font-size: 12px; } .boundary-flow-svg .boundary-connector { @@ -553,6 +553,18 @@ } @media (max-width: 600px) { + /* The label and the count crowd each other on a phone. */ + .card-tabs-header { + align-items: flex-start; + flex-direction: column; + gap: 4px; + } + + /* .agent-flow-container's 60px of top padding is most of a phone screen. */ + .boundary-flow-container { + padding: 44px 14px 26px; + } + .tool-cards { grid-template-columns: 1fr; } @@ -598,31 +610,11 @@ results-table caveat and every card meta line. Darkened at the token in legacy-encode-policy.css; these are the knock-on fixes. */ -/* 18px serif across a 1160px wrapper runs to ~140 characters a line. Cap the - measure without narrowing the diagrams, tables, and card grids. */ -.article-wrapper > div > p, -.article-wrapper > div > ul, -.article-wrapper > div > ol, -.article-wrapper .step-content p, -.article-wrapper .subtitle { - max-width: 78ch; -} - -.article-date { - color: var(--text-mid); - font-family: 'JetBrains Mono', monospace; - font-size: 0.78rem; - letter-spacing: 0.04em; - margin-top: -34px; - margin-bottom: 50px; - text-transform: uppercase; -} - /* max-width: 100% stopped .agent-flow-container's overflow-x from ever engaging, so on a phone the 900-unit diagram shrank its labels to ~3.5px. A min-width lets the container scroll instead. */ .boundary-flow-svg { - min-width: 620px; + min-width: 700px; } /* Keyboard focus looked identical to the selected tool, so two chips read as @@ -677,3 +669,10 @@ flex-wrap: wrap; gap: 8px; } + +/* The diagram is the densest thing on the page; give it more of the wrapper + than .agent-flow-container's default 40px side padding allows. */ +.boundary-flow-container { + padding-left: 20px; + padding-right: 20px; +}