feat(codex-dashboard): refine control center boundary card

This commit is contained in:
Tam Nhu Tran
2026-04-01 16:14:16 -04:00
parent 7fd2acadbe
commit c1ab210095
@@ -1,11 +1,10 @@
import { Route } from 'lucide-react';
import { FileCode2, History, PenLine, Settings2 } from 'lucide-react';
import { CodexFeaturesCard } from '@/components/compatible-cli/codex-features-card';
import { CodexMcpServersCard } from '@/components/compatible-cli/codex-mcp-servers-card';
import { CodexModelProvidersCard } from '@/components/compatible-cli/codex-model-providers-card';
import { CodexProfilesCard } from '@/components/compatible-cli/codex-profiles-card';
import { CodexProjectTrustCard } from '@/components/compatible-cli/codex-project-trust-card';
import { CodexTopLevelControlsCard } from '@/components/compatible-cli/codex-top-level-controls-card';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { ScrollArea } from '@/components/ui/scroll-area';
import type {
CodexConfigPatchInput,
@@ -54,26 +53,60 @@ export function CodexControlCenterTab({
}: CodexControlCenterTabProps) {
return (
<ScrollArea className="h-full">
<div className="space-y-4 pr-1">
<Card>
<CardHeader className="pb-2">
<CardTitle className="flex items-center gap-2 text-base">
<Route className="h-4 w-4" />
Structured controls boundary
</CardTitle>
</CardHeader>
<CardContent className="space-y-2 text-sm text-muted-foreground">
<p>
Guided controls write only the user-layer <code>config.toml</code>. They do not model
the full effective Codex runtime once trusted repo layers and CCS transient{' '}
<code>-c</code> overrides are involved.
</p>
<p>
Structured saves normalize TOML formatting and strip comments. Use the raw editor on
the right when exact layout matters.
</p>
</CardContent>
</Card>
<div className="space-y-6 pr-1 pb-6">
<div className="group relative overflow-hidden rounded-xl border border-border/80 bg-background/50 p-5 shadow-sm transition-all hover:bg-background hover:shadow-md dark:border-border/60">
<div className="absolute inset-x-0 -top-px h-px bg-gradient-to-r from-transparent via-foreground/15 to-transparent transition-opacity group-hover:via-foreground/30"></div>
<div className="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
<div className="flex-1 space-y-4">
<div className="flex items-center gap-3">
<div className="flex h-9 w-9 items-center justify-center rounded-lg border border-primary/20 bg-primary/10 text-primary transition-colors group-hover:border-primary/30">
<Settings2 className="h-4 w-4" />
</div>
<div>
<h2 className="text-base font-semibold tracking-tight text-foreground">
Structured controls boundary
</h2>
</div>
</div>
<ul className="grid gap-3 sm:grid-cols-2 text-sm text-muted-foreground">
<li className="flex items-start gap-2.5">
<PenLine className="h-4 w-4 shrink-0 text-muted-foreground/60 mt-0.5" />
<span className="leading-relaxed">
Writes exclusively to user-layer{' '}
<code className="text-[11px] bg-muted/70 px-1.5 py-0.5 rounded border border-border/50">
config.toml
</code>
</span>
</li>
<li className="flex items-start gap-2.5">
<History className="h-4 w-4 shrink-0 text-muted-foreground/60 mt-0.5" />
<span className="leading-relaxed">
Does not reflect repo trust layers or CLI overrides
</span>
</li>
</ul>
</div>
<div className="shrink-0 lg:w-[280px]">
<div className="relative overflow-hidden rounded-lg border border-amber-500/20 bg-amber-500/5 p-4 transition-colors group-hover:border-amber-500/30 group-hover:bg-amber-500/10 dark:border-amber-400/10 dark:bg-amber-400/5">
<div className="flex items-start gap-3">
<FileCode2 className="mt-0.5 h-4 w-4 shrink-0 text-amber-600 dark:text-amber-400" />
<div className="space-y-1">
<p className="text-[11px] font-bold text-amber-700 dark:text-amber-300 uppercase tracking-wider">
Formatting Note
</p>
<p className="text-[13px] leading-relaxed text-amber-800/80 dark:text-amber-200/70">
Saves normalize TOML formatting and strip comments. Switch to the raw editor
if exact layout matters.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<CodexTopLevelControlsCard
values={topLevelSettings}