History

Enhance build process and improve component styling

- Updated the build script in `build-release.ts` to set `NODE_ENV` and `VITE_USER_NODE_ENV` to production, ensuring proper environment configuration. - Refined the styling of various components including `approvals-view.tsx`, `dashboard/view.tsx`, `tasks-view.tsx`, and others to improve visual consistency with rounded borders and adjusted background colors. - Enhanced the `PendingApprovalRow` and `PoliciesPanel` components for better user interaction and layout.

Rhys Sullivan committed 8 months ago

Commit a445fa81 parent d19e8159 files · +34 −19Browse files

Unified · Split

9 files
  1. executor/apps/web/package.json +1 −1
  2. executor/apps/web/src/components/approvals/approvals-view.tsx +2 −2
  3. executor/apps/web/src/components/dashboard/pending/approvals-card.tsx +3 −3
  4. executor/apps/web/src/components/dashboard/view.tsx +1 −1
  5. executor/apps/web/src/components/tasks/tasks-view.tsx +2 −2
  6. executor/apps/web/src/components/tools/credentials.tsx +2 −1
  7. executor/apps/web/src/components/tools/explorer.tsx +14 −2
  8. executor/apps/web/src/components/tools/policies.tsx +6 −6
  9. executor/scripts/release/build-release.ts +3 −1
executor/apps/web/package.json+1−1
@@ -5,7 +5,7 @@ · 4 unmodified lines
55 "scripts": {
66 "with-env": "bun run --env-file=../../../.env --",
77 "dev": "bun with-env vite dev --port 4312",
8− "build": "bun with-env vite build",
8+ "build": "NODE_ENV=production bun with-env vite build --mode production",
99 "start": "bun with-env env PORT=5312 HOSTNAME=127.0.0.1 node dist/server/server.mjs",
1010 "lint": "eslint",
1111 "typecheck": "bunx --package @typescript/native-preview tsgo --noEmit -p tsconfig.json",
executor/apps/web/src/components/approvals/approvals-view.tsx+2−2
@@ -67,7 +67,7 @@ function ApprovalCard({ · 66 unmodified lines
6767 );
6868
6969 return (
70− <Card className="bg-card border-border border-l-2 border-l-terminal-amber glow-amber">
70+ <Card className="rounded-none bg-card/40 border-border/50 border-l-2 border-l-terminal-amber glow-amber">
7171 <CardContent className="p-4 space-y-3">
7272 {/* Header */}
7373 <div className="flex items-start justify-between gap-3">
@@ -180,7 +180,7 @@ export function ApprovalsView() { · 106 unmodified lines
180180 ))}
181181 </div>
182182 ) : count === 0 ? (
183− <Card className="bg-card border-border flex-1">
183+ <Card className="rounded-none bg-card/40 border-border/50 flex-1">
184184 <CardContent className="flex flex-col items-center justify-center py-20 gap-3">
185185 <div className="h-12 w-12 rounded-full bg-terminal-green/10 flex items-center justify-center">
186186 <CheckCircle2 className="h-6 w-6 text-terminal-green/60" />
executor/apps/web/src/components/dashboard/pending/approvals-card.tsx+3−3
@@ -11,7 +11,7 @@ function PendingApprovalRow({ approval }: { approval: PendingApprovalRecord }) { · 10 unmodified lines
1111 return (
1212 <button
1313 onClick={() => navigate("/approvals")}
14− className="w-full flex items-center gap-3 px-3 py-2.5 rounded-md hover:bg-accent/50 transition-colors text-left group"
14+ className="group flex w-full items-center gap-3 px-3 py-2.5 text-left transition-colors hover:bg-accent/20"
1515 >
1616 <div className="h-2 w-2 rounded-full bg-terminal-amber pulse-dot shrink-0" />
1717 <div className="flex-1 min-w-0">
@@ -33,7 +33,7 @@ export function DashboardPendingApprovalsCard({ · 15 unmodified lines
3333 const navigate = useNavigate();
3434
3535 return (
36− <Card className="bg-card border-border">
36+ <Card className="rounded-none border-border/50 bg-card/40">
3737 <CardHeader className="pb-3">
3838 <div className="flex items-center justify-between">
3939 <CardTitle className="text-sm font-medium flex items-center gap-2">
@@ -63,7 +63,7 @@ export function DashboardPendingApprovalsCard({ · 23 unmodified lines
6363 No pending approvals
6464 </div>
6565 ) : (
66− <div className="space-y-0.5">
66+ <div className="divide-y divide-border/30">
6767 {approvals.map((approval) => (
6868 <PendingApprovalRow key={approval.id} approval={approval} />
6969 ))}
executor/apps/web/src/components/dashboard/view.tsx+1−1
@@ -46,7 +46,7 @@ export function DashboardView() { · 45 unmodified lines
4646 />
4747 )}
4848
49− <Card id="mcp-setup" className="bg-card border-border min-h-0 flex flex-col">
49+ <Card id="mcp-setup" className="rounded-none bg-card/40 border-border/50 min-h-0 flex flex-col">
5050 <CardHeader className="pb-3">
5151 <CardTitle className="text-sm font-medium flex items-center gap-2">
5252 <Server className="h-4 w-4 text-primary" />
executor/apps/web/src/components/tasks/tasks-view.tsx+2−2
@@ -77,7 +77,7 @@ export function TasksView() { · 76 unmodified lines
7777
7878 <div className="flex min-h-0 flex-1 flex-col">
7979 <div className="grid h-full min-h-0 gap-6 lg:grid-cols-[minmax(360px,440px)_1fr]">
80− <Card className="bg-card border-border min-h-0 flex flex-col">
80+ <Card className="rounded-none bg-card/40 border-border/50 min-h-0 flex flex-col">
8181 <CardHeader className="pb-3">
8282 <CardTitle className="text-sm font-medium flex items-center gap-2">
8383 Task History
@@ -126,7 +126,7 @@ export function TasksView() { · 42 unmodified lines
126126 onClose={() => selectTask(null)}
127127 />
128128 ) : (
129− <Card className="bg-card border-border h-full">
129+ <Card className="rounded-none bg-card/40 border-border/50 h-full">
130130 <CardContent className="flex items-center justify-center py-24">
131131 <p className="text-sm text-muted-foreground">
132132 Select a task to view logs, output, and approval actions
executor/apps/web/src/components/tools/credentials.tsx+2−1
@@ -92,7 +92,7 @@ export function CredentialsPanel({ · 91 unmodified lines
9292 }, [credentials]);
9393
9494 return (
95− <section className="mx-auto flex h-full min-h-0 w-full max-w-6xl flex-col border border-border/50 bg-card/40">
95+ <section className="mx-auto flex h-full min-h-0 w-full max-w-6xl flex-col rounded-none border border-border/50 bg-card/30">
9696 <div className="flex items-center justify-between border-b border-border/40 px-4 py-3 sm:px-5">
9797 <div className="flex items-center gap-2">
9898 <div className="flex h-7 w-7 items-center justify-center border border-border/60 bg-background/80">
@@ -140,6 +140,7 @@ export function CredentialsPanel({ · 41 unmodified lines
140140 <div
141141 key={connection.key}
142142 className="group flex items-center gap-3 border border-border/50 bg-background/70 px-3 py-2.5 transition-colors hover:border-border hover:bg-accent/20"
143+ style={{ boxShadow: "inset 2px 0 0 0 color-mix(in oklch, var(--border) 70%, transparent)" }}
143144 >
144145 <div className="flex h-8 w-8 shrink-0 items-center justify-center border border-border/60 bg-muted/50 overflow-hidden">
145146 {firstSource ? (
executor/apps/web/src/components/tools/explorer.tsx+14−2
@@ -336,17 +336,29 @@ export function ToolExplorer({ · 335 unmodified lines
336336 }, [maybeLoadToolDetails, setFocusedSourceName]);
337337
338338 const handleSourceClick = useCallback((sourceName: string) => {
339+ const key = `source:${sourceName}`;
340+ const wasFocused = focusedSourceName === sourceName;
339341 const source = sourceByName.get(sourceName);
342+
343+ if (wasFocused) {
344+ setSourceFocusState(null, null);
345+ setExpandedKeys((prev) => {
346+ const next = new Set(prev);
347+ next.delete(key);
348+ return next;
349+ });
350+ return;
351+ }
352+
340353 setSourceFocusState(sourceName, source ?? null);
341354 // Ensure the source group is expanded
342355 setExpandedKeys((prev) => {
343− const key = `source:${sourceName}`;
344356 if (prev.has(key)) return prev;
345357 const next = new Set(prev);
346358 next.add(key);
347359 return next;
348360 });
349− }, [sourceByName]);
361+ }, [focusedSourceName, setSourceFocusState, sourceByName]);
350362
351363 const handleAddSource = useCallback(() => {
352364 setSourceFocusState(null, null);
executor/apps/web/src/components/tools/policies.tsx+6−6
@@ -748,7 +748,7 @@ function PolicyCard({ · 747 unmodified lines
748748 const [showTools, setShowTools] = useState(false);
749749
750750 return (
751− <div className="group relative rounded-lg border border-border/60 bg-card hover:border-border transition-colors">
751+ <div className="group relative rounded-none border border-border/60 bg-card/60 hover:border-border transition-colors">
752752 <div className="px-3.5 py-2.5">
753753 {/* Header row */}
754754 <div className="flex items-start gap-2.5">
@@ -1321,7 +1321,7 @@ export function PoliciesPanel({ · 566 unmodified lines
13211321 ))}
13221322 </div>
13231323 ) : policies.length === 0 ? (
1324− <div className="rounded-lg border border-dashed border-border/50 py-10 flex flex-col items-center gap-2.5">
1324+ <div className="rounded-none border border-dashed border-border/50 py-10 flex flex-col items-center gap-2.5">
13251325 <Shield className="h-8 w-8 text-muted-foreground/30" />
13261326 <div className="text-center">
13271327 <p className="text-xs text-muted-foreground">No tool policies configured</p>
@@ -1377,7 +1377,7 @@ export function PoliciesPanel({ · 49 unmodified lines
13771377
13781378 <Separator className="bg-border/40" />
13791379
1380− <details className="group rounded-lg border border-border/60 bg-card/40">
1380+ <details className="group rounded-none border border-border/60 bg-card/30">
13811381 <summary className="flex cursor-pointer list-none items-center justify-between gap-3 px-3 py-2.5">
13821382 <div>
13831383 <h4 className="text-sm font-medium">Policy Set Manager</h4>
@@ -1391,12 +1391,12 @@ export function PoliciesPanel({ · 7 unmodified lines
13911391
13921392 <div className="px-3 pb-3">
13931393 {!canManageRoles ? (
1394− <div className="rounded-lg border border-dashed border-border/50 p-4 text-xs text-muted-foreground">
1394+ <div className="rounded-none border border-dashed border-border/50 p-4 text-xs text-muted-foreground">
13951395 Organization owner/admin role required to manage tool policy sets.
13961396 </div>
13971397 ) : (
13981398 <div className="grid grid-cols-1 gap-4 lg:grid-cols-[280px_1fr]">
1399− <div className="space-y-3 rounded-lg border border-border/60 bg-card p-3">
1399+ <div className="space-y-3 rounded-none border border-border/60 bg-card/50 p-3">
14001400 <Label className="text-xs text-muted-foreground">Create policy set</Label>
14011401 <Input
14021402 value={roleForm.name}
@@ -1455,7 +1455,7 @@ export function PoliciesPanel({ · 52 unmodified lines
14551455 </div>
14561456 </div>
14571457
1458− <div className="space-y-4 rounded-lg border border-border/60 bg-card p-4">
1458+ <div className="space-y-4 rounded-none border border-border/60 bg-card/50 p-4">
14591459 {!selectedRole ? (
14601460 <p className="text-xs text-muted-foreground">Select a policy set to manage its rules and assignments.</p>
14611461 ) : (
executor/scripts/release/build-release.ts+3−1
@@ -447,9 +447,11 @@ async function buildWebArtifact(rootDir: string, releaseDir: string, checksums: · 446 unmodified lines
447447 EXECUTOR_WEB_CONVEX_SITE_URL: "http://127.0.0.1:5411",
448448 VITE_CONVEX_URL: "http://127.0.0.1:5410",
449449 VITE_CONVEX_SITE_URL: "http://127.0.0.1:5411",
450+ NODE_ENV: "production",
451+ VITE_USER_NODE_ENV: "production",
450452 };
451453
452− await runCommand(["bunx", "vite", "build"], {
454+ await runCommand(["bunx", "vite", "build", "--mode", "production"], {
453455 cwd: webAppDir,
454456 env: webBuildEnv,
455457 });