Design

What it does

One conversation for the whole project, in two states. Given a send handler it is a full chat — a feed plus an input field with file attachment; without one it is a read-only feed, which is exactly what a log needs. A message carries text, who wrote it, when, an optional mark of which channel made it, and up to six kinds of attachment: four the library knows by itself — audio, image, video, document — and two of ours, a place and a calendar event.

How to use it

The feed, the message and the input field come from AI Elements, vendored into `components/ai-elements/` in 80-2; this tool only decides what appears in them. Four kinds of attachment the library recognises by media type on its own, the two of ours are drawn here in the same row shape, so a person sees one list under a message rather than two. Scrolling belongs to `Conversation`: it holds the bottom and offers a way back, and no hand-written scroll work is allowed to appear here again. The tool never talks to the network — it takes messages as a prop and hands sent ones back out, so polling and cursors stay with whoever owns the storage.

What it gives you

Anything that shows a run of messages is the same thing under different names — a chat with a person, a chat with a model, a feed, a bot log, an inbox. Before this tool each of them was built by hand, and the log feed of 77-5 was assembled from list items while the library already sat in the repository. One implementation, three consumers: the block view, the architect layer, and the future messenger.

Package to install: ai, streamdown, use-stick-to-bottom, nanoid

Not used by anything yet — it is here, ready to be taken.

What it does

Shows source code with real highlighting. The engine is Shiki: it parses the actual grammar of the language instead of matching regular expressions, so CSS nested inside HTML or a generic in TypeScript is coloured correctly rather than almost correctly. The language is taken from an explicit prop or guessed from the file name.

How to use it

Shiki is imported lazily and only when there is something to show — a static import would make every page that merely might need the viewer pay for the language grammars. Both themes are produced at once (`defaultColor: false` puts light and dark colours into the markup as CSS variables), so switching the theme repaints the code instantly without parsing it again.

What it gives you

One highlighter in the product instead of two. This is the only tool that needs a package, and the package is not in this repository: without `shiki` the import fails inside `try/catch` and the highlighting degrades silently into plain text. That is a lawful state — unhighlighted code is readable, an empty screen is not.

Package to install: shiki

Not used by anything yet — it is here, ready to be taken.

What it does

A person describes in free words what they want to store, and the tool returns a filled-in record: machine name, human name, the form of the value, the instruction for recognising it, and what to do when it is implied but not extractable. The schema of fields comes as a parameter, so the tool serves any consumer, not only the fact registry.

How to use it

One call to the model with the field schema in the prompt and strict JSON back. Closed lists are verified HERE, not promised by the model: it will happily return a value outside the list and it will look plausible. A record that fails verification is dropped whole — half-parsed is worse than refused, because half-parsed gets saved. The field carries a microphone, which the browser only grants in a secure context: on plain http it is absent by construction and the person types instead.

What it gives you

Describing a thing in words is the only way a person can extend the system without an agent. The tool never writes anything: it proposes, and the person edits and saves — the law taken verbatim from socials-ai, because a model errs quietly and the only guard is human eyes between the proposal and the record.

Already used by: architect/facts-registry

What it does

Lets a person choose the visible part of a picture before it is saved and returns a ready JPEG. The frame sets a proportion — 16:9, 1:1 or 9:16 — not a size; the longer side is capped at 1200 pixels. All the work happens in the browser: canvas, dragging, a zoom slider. The server only learns the result.

How to use it

Open it over any field that accepts a picture, hand it a `blob:` link to the file just chosen or the address of a stored one, and take the blob in `onDone` — the tool saves nothing itself. Labels are optional: it carries English defaults so it can be installed into a project that has no dictionary of ours.

What it gives you

A picture that arrives already framed instead of one uploaded whole and cropped by CSS. It is why avatars, logos and covers keep one proportion across the site — and why the file is measured in kilobytes rather than megabytes. It cannot keep transparency: JPEG has none, so a logo on a transparent background is not its case.

Already used by: architect/image-fieldarchitect/icons-field

What it does

A person writes a phrase — a company name, a nickname, a line about themselves — and the tool proposes several social profiles that could be theirs. Every candidate is checked by an actual request to the network, and the three outcomes look different rather than being shades of one: found, not found, and «the network refuses strangers».

How to use it

The model only proposes; the person picks. Automatic selection of the most likely candidate would be wrong silently — and a link in the site footer would point at somebody else's profile until a human noticed. `closed` is not «no such profile»: Instagram and LinkedIn shut bots out regardless of whether the profile exists, and the words say so.

What it gives you

Filling in the footer's social links without hunting for each address by hand. It is also the one tool that arrived from the panel and was visibly rebuilt for this project — the owner's words: «it needs its styles adapted to the existing standards of this application». That is what an imported tool is supposed to look like afterwards.

Already used by: architect/socials-field

What it does

A window that any entity with translatable fields can open: a product today, a category and a page tomorrow. One card per language, automatic translation, saving one language at a time. A single-language application never sees it — the check stands on the first line, so the caller does not have to remember it.

How to use it

Languages come from the application's own `translations.config`, and the translating door is `/api/i18n/translate`. The whole dialog is limited to 80% of the window height while only the list of languages scrolls: the header with the translate buttons and the footer with saving stay in place. The cross means «skip», not «cancel» — the record already exists in the interface language, and translations are added later from the card.

What it gives you

The reason this tool has a home at all: it lived in `components/i18n/` for months, was not in any registry, and the translate button in the panel was therefore built from scratch — one line of text where a window belonged. A tool without a home does not exist, however good it is.

Already used by: manage/productsmanage/products/[productId]

What it does

Keeps the middle of a clip and cuts off the head and the tail. The browser only picks two points on a timeline; the cutting is done by the data layer with ffmpeg and `-c copy` — the streams are copied without re-encoding, so it is instant, lossless and costs the owner's machine nothing.

How to use it

The file is uploaded first and trimmed in place, so a person edits what actually lies in storage and can come back to it later from the same row. After a successful cut the tool calls `router.refresh()`: the row's data comes from the server rather than being patched in the browser's memory.

What it gives you

Editing without a 30 MB wasm editor in the page and without re-encoding on a laptop. The price is the honest requirement below: ffmpeg lives in the data layer, so a project running without it gets a refusal, not a silent no-op.

Not used by anything yet — it is here, ready to be taken.

What it does

A small button beside a field: hold it and it records, release it and the recording goes off to be transcribed. While recording, a 40-pixel bar shows the incoming sound with the elapsed time in its middle. It remembers the caret — the transcript lands where the cursor stood, not at the end of the field.

How to use it

Since 32-2 this file holds only the appearance; the mechanics — microphone permission, recording, level bars, timer, transcription, caret memory — live in `client/use-voice-recorder.ts`, one copy for every look. Building a second appearance means calling that hook, never copying the work with `AudioContext`. There is deliberately no shadcn, no lucide and no sonner inside: the tool has to stay an archive that works wherever the folder is unpacked, so a refusal is shown as a line under the button rather than as a platform toast.

What it gives you

Dictation instead of typing on the fields where a person actually speaks — a description, a text, an answer. That is also its boundary: the microphone belongs to what is spoken, not to everything textual. A confirmation code, coordinates and a HEX colour get a keyboard, and this is the owner's decision of 2026-08-28.

Already used by: manage/products/formcomponents/form/voice-control