| author |  Julius Marminge <julius0216@outlook.com> 2026-07-24 14:01:47+02:00 |
| committer |  GitHub <noreply@github.com> 2026-07-24 14:01:47+02:00 |
| log | f7cc7764887a3c0616973043fa77e12671e3f9ef |
| tree | 00e6c1244b3a0e63bd2f65557471c2faba621d43 |
| parent | 15e875a2d9bdda2fc08909c4b1582a363d288403 |
| signature | Signed by PGP key B5690EEEBB952194 |
Restore model picker layout and retain iterative test state (#4450)
Co-authored-by: codex <codex@users.noreply.github.com>5 files changed, 39 insertions(+), 13 deletions(-)
.agents
skills
test-t3-app
- SKILL.md
agents
apps
web
src
.agents/skills/test-t3-app/SKILL.md+21-3
| ... | ... | @@ -1,6 +1,6 @@ |
| 1 | 1 | --- |
| 2 | 2 | name: test-t3-app |
| 3 | description: Launch and test the T3 Code web app in isolated development environments, including first-try browser authentication with one-time pairing URLs, pairing-token recovery, worktree-safe state directories, dev server lifecycle, and direct SQLite inspection or fixture seeding. Use when an agent needs to run T3 locally, test UI behavior in a browser, recover from an expired or consumed pairing token, isolate dev state, or prepare test data in state.sqlite. | |
| 3 | description: Launch, retain, and test the T3 Code web app in isolated development environments, including first-try browser authentication with one-time pairing URLs, pairing-token recovery, worktree-safe state directories, cross-turn dev server lifecycle, and direct SQLite inspection or fixture seeding. Use when an agent needs to run T3 locally, iteratively test UI behavior with a human, recover from an expired or consumed pairing token, isolate dev state, or prepare test data in state.sqlite. | |
| 4 | 4 | --- |
| 5 | 5 | |
| 6 | 6 | # Test T3 App |
| ... | ... | @@ -20,6 +20,16 @@ Treat a base directory as disposable only when it was created or deliberately se |
| 20 | 20 | |
| 21 | 21 | The dev runner disables browser auto-open by default. Do not pass `--browser` during automated testing: an automatically opened page can consume the one-time bootstrap token before the controlled browser uses it. |
| 22 | 22 | |
| 23 | ## Preserve the environment while iterating | |
| 24 | ||
| 25 | Treat the overall testing or implementation loop—not an assistant turn or one verification pass—as the environment lifecycle boundary. | |
| 26 | ||
| 27 | - Keep the dev process, base directory, selected ports, authenticated browser tab, registered projects, and seeded fixtures alive while the user may inspect the result or request follow-up changes. | |
| 28 | - Do not stop the server merely because one verification pass completed or because you are yielding a response to the user. | |
| 29 | - Before starting another environment, check whether the existing process and browser tab still serve the task. Reuse them when healthy instead of discarding useful state. | |
| 30 | - On a later turn, verify that the existing process is alive and reuse its printed ports and base directory. If it exited, restart with the same base directory; create a new pairing token only when the browser session is no longer valid. | |
| 31 | - Tell the user when a test environment remains available, including its non-secret web URL when useful. Never include a pairing token. | |
| 32 | ||
| 23 | 33 | ## Authenticate the browser on the first navigation |
| 24 | 34 | |
| 25 | 35 | 1. Wait for the server log that says authentication is required and includes a URL ending in `/pair#token=...`. |
| ... | ... | @@ -58,9 +68,17 @@ Read [references/sqlite-fixtures.md](references/sqlite-fixtures.md) before chang |
| 58 | 68 | |
| 59 | 69 | The helper refuses to write to the shared `~/.t3` directory by default and creates a database backup before each mutation. |
| 60 | 70 | |
| 61 | ## Finish the test | |
| 71 | ## Tear down only when the testing loop is finished | |
| 72 | ||
| 73 | Tear down when the user explicitly asks, confirms the iteration is finished, or the overall task is genuinely complete with no pending human review. Do not infer completion from the end of an assistant turn. | |
| 74 | ||
| 75 | When teardown is appropriate: | |
| 76 | ||
| 77 | 1. Stop the dev process with its terminal interrupt. | |
| 78 | 2. Preserve the isolated base directory when it contains useful reproduction evidence or state for a likely follow-up. | |
| 79 | 3. Otherwise remove only a path created for this test after resolving and verifying the exact target. | |
| 62 | 80 | |
| 63 | Stop the dev process with its terminal interrupt. Preserve the isolated base directory when it contains useful reproduction evidence; otherwise remove only a path that was created for this test after resolving and verifying the exact target. A fresh isolated base directory is the safest reset when authentication, migrations, or fixture state becomes ambiguous. | |
| 81 | If completion is uncertain, keep the environment alive and mention that it is retained for further iteration. A fresh isolated base directory remains the safest reset when authentication, migrations, or fixture state becomes ambiguous. | |
| 64 | 82 | |
| 65 | 83 | ## Troubleshoot predictably |
| 66 | 84 |
.agents/skills/test-t3-app/agents/openai.yaml+2-2
| ... | ... | @@ -1,4 +1,4 @@ |
| 1 | 1 | interface: |
| 2 | 2 | display_name: "T3 App Testing" |
| 3 | short_description: "Launch and seed isolated T3 test environments" | |
| 4 | default_prompt: "Use $test-t3-app to launch an isolated T3 development environment and test it in the browser." | |
| 3 | short_description: "Launch and retain isolated T3 test environments" | |
| 4 | default_prompt: "Use $test-t3-app to launch an isolated T3 environment and iteratively test it in the browser while preserving state." |
apps/web/src/components/chat/ModelPickerContent.tsx+10-5
| ... | ... | @@ -521,7 +521,7 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: { |
| 521 | 521 | return ( |
| 522 | 522 | <TooltipProvider delay={0}> |
| 523 | 523 | <div |
| 524 | className="dropdown-glass model-picker-surface relative flex h-screen max-h-96 w-screen max-w-100 flex-row overflow-hidden rounded-xl text-popover-foreground" | |
| 524 | className="dropdown-glass model-picker-surface relative flex h-screen max-h-96 w-screen max-w-100 flex-row overflow-hidden rounded-lg text-popover-foreground" | |
| 525 | 525 | data-model-picker-content="true" |
| 526 | 526 | > |
| 527 | 527 | {/* Sidebar */} |
| ... | ... | @@ -568,18 +568,23 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: { |
| 568 | 568 | handleModelSelect(slug, instanceId); |
| 569 | 569 | }} |
| 570 | 570 | > |
| 571 | <div className="flex min-h-0 flex-1 flex-col overflow-hidden"> | |
| 571 | <div | |
| 572 | className={cn( | |
| 573 | "flex min-h-0 flex-1 flex-col overflow-hidden bg-muted/40", | |
| 574 | showSidebar && "border-l", | |
| 575 | )} | |
| 576 | > | |
| 572 | 577 | {/* Search bar */} |
| 573 | 578 | <div className="px-4 pt-2.5"> |
| 574 | <div className="-translate-y-px rounded-lg bg-accent px-2 py-1"> | |
| 579 | <div className="-translate-y-px border-b border-border/70 pb-2.5 transition-colors focus-within:border-ring"> | |
| 575 | 580 | <ComboboxInput |
| 576 | 581 | ref={searchInputRef} |
| 577 | 582 | className="[&_input]:h-6.5 [&_input]:font-sans [&_input]:leading-6.5" |
| 578 | inputClassName="rounded-none bg-transparent text-sm placeholder:text-muted-foreground/80" | |
| 583 | inputClassName="rounded-none bg-transparent text-sm" | |
| 579 | 584 | placeholder="Search models..." |
| 580 | 585 | showTrigger={false} |
| 581 | 586 | startAddon={ |
| 582 | <SearchIcon className="-translate-x-0.5 size-4 shrink-0 text-muted-foreground/80" /> | |
| 587 | <SearchIcon className="-translate-x-0.5 size-4 shrink-0 text-muted-foreground/55" /> | |
| 583 | 588 | } |
| 584 | 589 | value={searchQuery} |
| 585 | 590 | onChange={(e) => setSearchQuery(e.target.value)} |
apps/web/src/components/chat/ModelPickerSidebar.tsx+5-2
| ... | ... | @@ -97,7 +97,10 @@ export const ModelPickerSidebar = memo(function ModelPickerSidebar(props: { |
| 97 | 97 | }, [props.instanceEntries, props.selectedInstanceId, showFavorites]); |
| 98 | 98 | |
| 99 | 99 | return ( |
| 100 | <div className="w-12 shrink-0 overflow-hidden bg-muted/60" data-model-picker-sidebar="true"> | |
| 100 | <div | |
| 101 | className="w-12 shrink-0 overflow-hidden border-r bg-muted/30" | |
| 102 | data-model-picker-sidebar="true" | |
| 103 | > | |
| 101 | 104 | <div className="h-full overflow-y-auto overscroll-contain [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"> |
| 102 | 105 | <div |
| 103 | 106 | ref={sidebarContentRef} |
| ... | ... | @@ -115,7 +118,7 @@ export const ModelPickerSidebar = memo(function ModelPickerSidebar(props: { |
| 115 | 118 | ) : null} |
| 116 | 119 | {/* Favorites section */} |
| 117 | 120 | {showFavorites ? ( |
| 118 | <div className="mb-1 pb-1"> | |
| 121 | <div className="mb-1 border-b pb-1"> | |
| 119 | 122 | <div className="relative w-full"> |
| 120 | 123 | <Tooltip> |
| 121 | 124 | <TooltipTrigger |
apps/web/src/components/chat/ProviderModelPicker.tsx+1-1
| ... | ... | @@ -188,7 +188,7 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: { |
| 188 | 188 | <PopoverPopup |
| 189 | 189 | align="start" |
| 190 | 190 | className="border-0 bg-transparent p-0 shadow-none before:hidden [--viewport-inline-padding:0]" |
| 191 | viewportClassName="!overflow-hidden p-0" | |
| 191 | viewportClassName="rounded-lg !overflow-hidden p-0 [clip-path:inset(0_round_var(--radius-lg))]" | |
| 192 | 192 | > |
| 193 | 193 | <ModelPickerContent |
| 194 | 194 | activeInstanceId={activeInstanceId} |