feat(design): targeting-reticle text fields in Watch, Loop & file filter#653
Merged
Conversation
Extend the sci-fi corner-bracket reticle (#649) to the remaining text inputs so they match the New Agent name field. - Watch URL bar: the focused wrapper now grows the four accent corner brackets (over its --bg-elevated fill) instead of an accent border + ring. The sandboxed webview lacks theme.css, so this is an inline style mirroring the global input:focus rule. - Loop config inputs/textareas: inject the input:focus reticle rule (verbatim from theme.css, !important to beat inline background/border) into the loop webview's injected <style>. - File-tree "Filter files…" input: drop its solid box and opt into a reusable .reticle-input resting reticle (dimmed brackets at rest, bright on focus) — like the titlebar search. Generalized the former .titlebar-search-input resting rule into the shared .reticle-input. Token-only and theme-agnostic; rest states for unfocused fields and the loop textarea are unchanged. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
svenmalvik
added a commit
that referenced
this pull request
Jun 12, 2026
## Summary Follows up on #653, which gave the file filter a resting **targeting-reticle** edge (dimmed corner brackets when idle, brightening to full accent on focus) instead of a solid box. This applies the same treatment to the two remaining prominent text fields: - **New agent** — the "Agent name (optional)…" input (`TaskDescriptionField`) - **New project** — the "Paste the copied project instructions…" textarea (`NoProjectActions`) Both now opt into the shared `.reticle-input` class and drop their solid resting border + filled background: - `border` → `1px solid transparent` — keeps a border-box for the focus reticle to paint into without shifting layout - `background` → `transparent` — the brackets become the field's only edge No new tokens or CSS; reuses the `.reticle-input` / `input:focus` / `textarea:focus` rules already in `theme.css`. `--radius-md` corners stay square enough for the brackets to render. ## Testing - `npm test -- NoProjectActions.test.tsx NewAgentForm.test.tsx` → 24/24 pass - `npm run typecheck:web` → 37 errors, unchanged from baseline (none in the touched files) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Extends the sci-fi corner-bracket targeting reticle (introduced for the New Agent name field in #649) to the remaining text inputs, so every field shares the same focus language.
manifold.watch): on focus, the wrapper now grows the four accent corner brackets over its--bg-elevatedfill instead of an accent border + glow ring. The sandboxed webview doesn't loadtheme.css, so this is an inline-style mirror of the globalinput:focusrule.manifold.loop): inject theinput:focus, textarea:focusreticle rule verbatim fromtheme.css(with!importantto override the inputs' inlinebackground/border) into the webview's injected<style>..reticle-inputresting reticle — dimmed brackets at rest, bright on focus — exactly like the titlebar search. The former titlebar-only resting rule intheme.cssis generalized into the shared.reticle-inputclass.Token-only and theme-agnostic. Rest states for unfocused fields and the Loop textarea are unchanged.
Testing
npm run build:plugins— both plugins bundle clean.npm run typecheck:plugins/typecheck:web— no new errors (web stays at its 37-error baseline; the lone plugin error is the pre-existingScoreTrend.test.tsxjest-dom baseline, untouched here).theme.css+ the verbatim plugin-injected CSS / inline styles in Chromium (the same engine the renderer and plugin webviews use) and confirmed each state:--bg-elevatedfill with the border transparent (inlinebackground+backgroundImagecoexist correctly).🤖 Generated with Claude Code