Skip to content

fix(webapp): associate model administration labels #4694

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
carderne merged 1 commit into from
Aug 19, 2026
+72 −23
Merged

fix(webapp): associate model administration labels #4694

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 36 additions & 11 deletions apps/webapp/app/routes/admin.llm-models.$modelId.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,8 +230,11 @@ export default function AdminLlmModelDetailRoute() {
<div className="space-y-4">
{/* Model fields */}
<div className="space-y-2">
<label className="text-xs font-medium text-text-dimmed">Model Name</label>
<label htmlFor="modelName" className="text-xs font-medium text-text-dimmed">
Model Name
</label>
<Input
id="modelName"
name="modelName"
value={modelName}
onChange={(e) => setModelName(e.target.value)}
Expand All @@ -241,8 +244,11 @@ export default function AdminLlmModelDetailRoute() {
</div>

<div className="space-y-2">
<label className="text-xs font-medium text-text-dimmed">Match Pattern (regex)</label>
<label htmlFor="matchPattern" className="text-xs font-medium text-text-dimmed">
Match Pattern (regex)
</label>
<Input
id="matchPattern"
name="matchPattern"
value={matchPattern}
onChange={(e) => setMatchPattern(e.target.value)}
Expand All @@ -254,9 +260,12 @@ export default function AdminLlmModelDetailRoute() {

{/* Test pattern */}
<div className="space-y-2">
<label className="text-xs font-medium text-text-dimmed">Test pattern match</label>
<label htmlFor="testPattern" className="text-xs font-medium text-text-dimmed">
Test pattern match
</label>
<div className="flex items-center gap-2">
<Input
id="testPattern"
value={testInput}
onChange={(e) => setTestInput(e.target.value)}
placeholder="Type a model name to test..."
Expand All @@ -277,12 +286,15 @@ export default function AdminLlmModelDetailRoute() {

{/* Catalog metadata */}
<div className="space-y-2 border-t border-grid-dimmed pt-4">
<label className="text-sm font-medium text-text-bright">Catalog Metadata</label>
<h3 className="text-sm font-medium text-text-bright">Catalog Metadata</h3>

<div className="grid grid-cols-2 gap-3">
<div className="space-y-1">
<label className="text-xs font-medium text-text-dimmed">Provider</label>
<label htmlFor="provider" className="text-xs font-medium text-text-dimmed">
Provider
</label>
<Input
id="provider"
name="provider"
value={provider}
onChange={(e) => setProvider(e.target.value)}
Expand All @@ -292,8 +304,11 @@ export default function AdminLlmModelDetailRoute() {
/>
</div>
<div className="space-y-1">
<label className="text-xs font-medium text-text-dimmed">Context Window</label>
<label htmlFor="contextWindow" className="text-xs font-medium text-text-dimmed">
Context Window
</label>
<Input
id="contextWindow"
name="contextWindow"
value={contextWindow}
onChange={(e) => setContextWindow(e.target.value)}
Expand All @@ -305,8 +320,11 @@ export default function AdminLlmModelDetailRoute() {
</div>

<div className="space-y-1">
<label className="text-xs font-medium text-text-dimmed">Description</label>
<label htmlFor="description" className="text-xs font-medium text-text-dimmed">
Description
</label>
<Input
id="description"
name="description"
value={description}
onChange={(e) => setDescription(e.target.value)}
Expand All @@ -318,8 +336,11 @@ export default function AdminLlmModelDetailRoute() {

<div className="grid grid-cols-2 gap-3">
<div className="space-y-1">
<label className="text-xs font-medium text-text-dimmed">Max Output Tokens</label>
<label htmlFor="maxOutputTokens" className="text-xs font-medium text-text-dimmed">
Max Output Tokens
</label>
<Input
id="maxOutputTokens"
name="maxOutputTokens"
value={maxOutputTokens}
onChange={(e) => setMaxOutputTokens(e.target.value)}
Expand All @@ -329,10 +350,11 @@ export default function AdminLlmModelDetailRoute() {
/>
</div>
<div className="space-y-1">
<label className="text-xs font-medium text-text-dimmed">
<label htmlFor="capabilities" className="text-xs font-medium text-text-dimmed">
Features (comma-separated)
</label>
<Input
id="capabilities"
name="capabilities"
value={capabilities}
onChange={(e) => setCapabilities(e.target.value)}
Expand All @@ -344,8 +366,11 @@ export default function AdminLlmModelDetailRoute() {
</div>

<div className="space-y-1">
<label className="text-xs font-medium text-text-dimmed">Pricing Unit</label>
<label htmlFor="pricingUnit" className="text-xs font-medium text-text-dimmed">
Pricing Unit
</label>
<select
id="pricingUnit"
name="pricingUnit"
value={pricingUnit}
onChange={(e) => setPricingUnit(e.target.value)}
Expand Down Expand Up @@ -374,7 +399,7 @@ export default function AdminLlmModelDetailRoute() {
{/* Pricing tiers */}
<div className="space-y-3">
<div className="flex items-center justify-between">
<label className="text-sm font-medium text-text-bright">Pricing Tiers</label>
<h3 className="text-sm font-medium text-text-bright">Pricing Tiers</h3>
<Button
type="button"
variant="tertiary/small"
Expand Down
3 changes: 2 additions & 1 deletion apps/webapp/app/routes/admin.llm-models._index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,12 +223,13 @@ export default function AdminLlmModelsRoute() {

{/* Model tester */}
<div className="rounded-md border border-grid-dimmed bg-background-bright p-3 space-y-2">
<label className="text-xs font-medium text-text-dimmed">
<label htmlFor="modelString" className="text-xs font-medium text-text-dimmed">
Test model string — paste a model name to see which pricing model matches
</label>
<testFetcher.Form method="post" className="flex items-center gap-2">
<input type="hidden" name="_action" value="test" />
<Input
id="modelString"
name="modelString"
placeholder="e.g. anthropic/claude-haiku-4-5-20251001, gpt-4o-mini, mistral/mistral-large-3"
variant="medium"
Expand Down
45 changes: 34 additions & 11 deletions apps/webapp/app/routes/admin.llm-models.new.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,8 +178,11 @@ export default function AdminLlmModelNewRoute() {

<div className="space-y-4">
<div className="space-y-2">
<label className="text-xs font-medium text-text-dimmed">Model Name</label>
<label htmlFor="modelName" className="text-xs font-medium text-text-dimmed">
Model Name
</label>
<Input
id="modelName"
name="modelName"
value={modelName}
onChange={(e) => setModelName(e.target.value)}
Expand All @@ -191,7 +194,7 @@ export default function AdminLlmModelNewRoute() {

<div className="space-y-2">
<div className="flex items-center justify-between">
<label className="text-xs font-medium text-text-dimmed">
<label htmlFor="matchPattern" className="text-xs font-medium text-text-dimmed">
Match Pattern (regex)
</label>
<button
Expand All @@ -203,6 +206,7 @@ export default function AdminLlmModelNewRoute() {
</button>
</div>
<Input
id="matchPattern"
name="matchPattern"
value={matchPattern}
onChange={(e) => setMatchPattern(e.target.value)}
Expand All @@ -214,9 +218,12 @@ export default function AdminLlmModelNewRoute() {
</div>

<div className="space-y-2">
<label className="text-xs font-medium text-text-dimmed">Test pattern match</label>
<label htmlFor="testPattern" className="text-xs font-medium text-text-dimmed">
Test pattern match
</label>
<div className="flex items-center gap-2">
<Input
id="testPattern"
value={testInput}
onChange={(e) => setTestInput(e.target.value)}
placeholder="Type a model name to test..."
Expand All @@ -237,12 +244,15 @@ export default function AdminLlmModelNewRoute() {

{/* Catalog metadata */}
<div className="space-y-2 border-t border-grid-dimmed pt-4">
<label className="text-sm font-medium text-text-bright">Catalog Metadata</label>
<h3 className="text-sm font-medium text-text-bright">Catalog Metadata</h3>

<div className="grid grid-cols-2 gap-3">
<div className="space-y-1">
<label className="text-xs font-medium text-text-dimmed">Provider</label>
<label htmlFor="provider" className="text-xs font-medium text-text-dimmed">
Provider
</label>
<Input
id="provider"
name="provider"
value={provider}
onChange={(e) => setProvider(e.target.value)}
Expand All @@ -252,8 +262,11 @@ export default function AdminLlmModelNewRoute() {
/>
</div>
<div className="space-y-1">
<label className="text-xs font-medium text-text-dimmed">Context Window</label>
<label htmlFor="contextWindow" className="text-xs font-medium text-text-dimmed">
Context Window
</label>
<Input
id="contextWindow"
name="contextWindow"
value={contextWindow}
onChange={(e) => setContextWindow(e.target.value)}
Expand All @@ -265,8 +278,11 @@ export default function AdminLlmModelNewRoute() {
</div>

<div className="space-y-1">
<label className="text-xs font-medium text-text-dimmed">Description</label>
<label htmlFor="description" className="text-xs font-medium text-text-dimmed">
Description
</label>
<Input
id="description"
name="description"
value={description}
onChange={(e) => setDescription(e.target.value)}
Expand All @@ -278,8 +294,11 @@ export default function AdminLlmModelNewRoute() {

<div className="grid grid-cols-2 gap-3">
<div className="space-y-1">
<label className="text-xs font-medium text-text-dimmed">Max Output Tokens</label>
<label htmlFor="maxOutputTokens" className="text-xs font-medium text-text-dimmed">
Max Output Tokens
</label>
<Input
id="maxOutputTokens"
name="maxOutputTokens"
value={maxOutputTokens}
onChange={(e) => setMaxOutputTokens(e.target.value)}
Expand All @@ -289,10 +308,11 @@ export default function AdminLlmModelNewRoute() {
/>
</div>
<div className="space-y-1">
<label className="text-xs font-medium text-text-dimmed">
<label htmlFor="capabilities" className="text-xs font-medium text-text-dimmed">
Features (comma-separated)
</label>
<Input
id="capabilities"
name="capabilities"
value={capabilities}
onChange={(e) => setCapabilities(e.target.value)}
Expand All @@ -304,8 +324,11 @@ export default function AdminLlmModelNewRoute() {
</div>

<div className="space-y-1">
<label className="text-xs font-medium text-text-dimmed">Pricing Unit</label>
<label htmlFor="pricingUnit" className="text-xs font-medium text-text-dimmed">
Pricing Unit
</label>
<select
id="pricingUnit"
name="pricingUnit"
value={pricingUnit}
onChange={(e) => setPricingUnit(e.target.value)}
Expand Down Expand Up @@ -334,7 +357,7 @@ export default function AdminLlmModelNewRoute() {
{/* Pricing tiers */}
<div className="space-y-3">
<div className="flex items-center justify-between">
<label className="text-sm font-medium text-text-bright">Pricing Tiers</label>
<h3 className="text-sm font-medium text-text-bright">Pricing Tiers</h3>
<Button
type="button"
variant="tertiary/small"
Expand Down
Loading