@nocobase/portal-template-default 1.0.1 → 1.0.3

package/README.MD

@@ -14,7 +14,15 @@ NOCOBASE_API_URL=https://develop.v2.test.nocobase.com/nocobase/api/__app/cms
 
 In development, the app auto-detects the proxy target from `NOCOBASE_API_URL` when that value is an absolute URL. The configured API URL can stay on the original sub-app path such as `/nocobase/api/__app/cms`.
 
-Refine resource names must match NocoBase collection names. For example, the supplied Swagger document exposes `collectionCategories`, so use that name when registering a corresponding Refine resource.
+Application resource names must match NocoBase collection names. The included
+Users example targets the default `users` collection, so it works without a
+project-specific business collection.
+
+Application-owned React translations live in `src/locales`. The entry registers
+an `app` namespace for business pages and augments the default `starter`
+namespace for shared controls. Feature-specific Registry translations remain
+inside their own extension namespace and are not mixed into application locale
+files.
 
 ## Available Scripts
 
@@ -48,6 +56,8 @@ Shadcn Registry item fields, each item has a local `source` mapping used to
 generate its standard `files` array. The same mapping lets the starter's
 `postinstall` hook copy a locally authored extension only when its target is
 missing. Existing installed source is never compared, updated, or overwritten.
+Optional entries can set `source.install` to `false`; they remain available to
+Registry builds and local previews but are not added by `postinstall`.
 
 You can run the same missing-only installation explicitly with:
 
@@ -55,7 +65,16 @@ You can run the same missing-only installation explicitly with:
 pnpm registry:install
 ```
 
-This repository currently authors four incremental NocoBase AI entries:
+This repository authors optional NocoBase integration entries. Internationalization
+is delivered as one cohesive Registry entry:
+
+- `i18n` provides frontend-owned UI resources, selected server-generated
+  namespaces such as `lm-collections`, the application translation provider,
+  locale persistence, `X-Locale` synchronization, legacy `{{t(...)}}`
+  compatibility, the language switcher, and the lazy-loaded showcase with its
+  prompt generator.
+
+The AI integration is available through four incremental entries:
 
 - `ai-runtime` provides AI services, providers, transports, and
   controllers. Its NocoBase requests use the starter's shared
@@ -64,7 +83,7 @@ This repository currently authors four incremental NocoBase AI entries:
   runtime entry.
 - `ai-react-hook-form` adds the optional React Hook Form adapter for the fixed
   Form filler Tool.
-- `ai` adds the Refine extension integration and Demo pages and depends on the
+- `ai` adds the application extension integration and Demo pages and depends on the
   chat entry.
 
 To refresh the local preview from the canonical Registry source, run:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/portal-template-default",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "type": "module",
   "devDependencies": {
     "@ai-sdk/react": "2.0.0",
@@ -29,8 +29,8 @@
     "echarts-for-react": "3.0.2",
     "embla-carousel-react": "^8.6.0",
     "eventsource-parser": "3.1.0",
-    "input-otp": "^1.4.2",
     "ignore": "^7.0.6",
+    "input-otp": "^1.4.2",
     "lucide-react": "^0.487.0",
     "next-themes": "^0.4.6",
     "postcss": "^8.5.3",
@@ -60,6 +60,7 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^16.0.0",
+    "i18next": "^25.3.2",
     "tailwindcss": "^4.1.4",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.30.1",
@@ -80,6 +81,7 @@
     "registry:preview": "node ./scripts/registry.mjs preview",
     "registry:build": "node ./scripts/registry.mjs build && shadcn build ./registry.json -o ./public/r",
     "test:acl": "node registry/nocobase-acl/tests/acl-regression.mjs",
+    "test:i18n": "node registry/nocobase-i18n/tests/i18n-regression.mjs",
     "start": "refine start",
     "refine": "refine"
   },

package/registry/nocobase-acl/components/role-options.ts

@@ -1,8 +1,15 @@
 import type { Role, RoleMode } from "@/lib/nocobase/acl";
+import { resolveTranslatableText } from "@/lib/i18n";
 
 export const UNION_ROLE = "__union__";
 export const ANONYMOUS_ROLE = "anonymous";
 
+export function resolveRoleTitle(role?: Role) {
+  return resolveTranslatableText(role?.title || role?.name || "Role", {
+    ns: "starter",
+  });
+}
+
 export function getRoleOptions({
   roles,
   roleMode,

package/registry/nocobase-acl/components/role-switcher.tsx

@@ -18,7 +18,7 @@ import {
   type Role,
 } from "@/lib/nocobase/acl";
 import { cn } from "@/lib/utils";
-import { getRoleOptions, UNION_ROLE } from "./role-options";
+import { getRoleOptions, resolveRoleTitle, UNION_ROLE } from "./role-options";
 
 export type RoleSwitcherProps = {
   className?: string;
@@ -82,7 +82,9 @@ export function RoleSwitcher({
             .then(() => window.location.reload())
             .catch((reason) => {
               setError(
-                reason instanceof Error ? reason.message : "Unable to switch role"
+                reason instanceof Error
+                  ? reason.message
+                  : "Unable to switch role"
               );
               setSwitching(false);
             });
@@ -120,11 +122,14 @@ function RoleOption({
   return (
     <>
       {showSeparator ? <SelectSeparator /> : null}
-      <SelectItem value={role.name}>{role.title || role.name}</SelectItem>
+      <SelectItem value={role.name}>{resolveRoleTitle(role)}</SelectItem>
     </>
   );
 }
 
 function getRoleTitle(roles: Role[], roleName?: string) {
-  return roles.find((role) => role.name === roleName)?.title || roleName || "Role";
+  return resolveRoleTitle(
+    roles.find((role) => role.name === roleName) ??
+      (roleName ? { name: roleName } : undefined)
+  );
 }

package/registry/nocobase-acl/demo/boundary-api.tsx

@@ -8,30 +8,95 @@ import {
   TableRow,
 } from "@/components/ui/table";
 
-type PropRow = [name: string, type: string, defaultValue: string, description: string];
+type PropRow = [
+  name: string,
+  type: string,
+  defaultValue: string,
+  description: string
+];
 
 const pageProps: PropRow[] = [
-  ["anyOf", "AclPermission[]", "undefined", "Allows the page when any listed permission is available."],
-  ["allOf", "AclPermission[]", "undefined", "Requires every listed permission before rendering the page."],
-  ["fallback", "ReactNode", "AccessDenied", "Replaces the complete page when its permission test fails."],
+  [
+    "anyOf",
+    "AclPermission[]",
+    "undefined",
+    "Allows the page when any listed permission is available.",
+  ],
+  [
+    "allOf",
+    "AclPermission[]",
+    "undefined",
+    "Requires every listed permission before rendering the page.",
+  ],
+  [
+    "fallback",
+    "ReactNode",
+    "AccessDenied",
+    "Replaces the complete page when its permission test fails.",
+  ],
   ["children", "ReactNode", "required", "The protected page content."],
 ];
 
 const regionProps: PropRow[] = [
-  ["resource", "string", "required", "NocoBase collection or ACL resource name."],
-  ["action", "string", "required", "Refine action such as list, show, create, edit, or delete."],
-  ["id", "BaseKey", "undefined", "Optional record ID for record-scoped permission checks."],
-  ["dataSourceKey", "string", "undefined", "Selects a non-main NocoBase data source."],
-  ["fallback", '"hidden" | "forbidden" | ReactNode', '"hidden"', "Hides the region or replaces it with a local denied state."],
+  [
+    "resource",
+    "string",
+    "required",
+    "NocoBase collection or ACL resource name.",
+  ],
+  [
+    "action",
+    "string",
+    "required",
+    "Resource action such as list, show, create, edit, or delete.",
+  ],
+  [
+    "id",
+    "BaseKey",
+    "undefined",
+    "Optional record ID for record-scoped permission checks.",
+  ],
+  [
+    "dataSourceKey",
+    "string",
+    "undefined",
+    "Selects a non-main NocoBase data source.",
+  ],
+  [
+    "fallback",
+    '"hidden" | "forbidden" | ReactNode',
+    '"hidden"',
+    "Hides the region or replaces it with a local denied state.",
+  ],
   ["children", "ReactNode", "required", "The protected page region."],
 ];
 
 const fieldProps: PropRow[] = [
-  ["resource", "string", "required", "NocoBase collection containing the field."],
-  ["action", "string", "required", "The action whose field whitelist should be checked."],
+  [
+    "resource",
+    "string",
+    "required",
+    "NocoBase collection containing the field.",
+  ],
+  [
+    "action",
+    "string",
+    "required",
+    "The action whose field whitelist should be checked.",
+  ],
   ["field", "string", "required", "Exact NocoBase field name."],
-  ["dataSourceKey", "string", "undefined", "Selects a non-main NocoBase data source."],
-  ["fallback", "ReactNode", "null", "Optional read-only replacement for a denied field."],
+  [
+    "dataSourceKey",
+    "string",
+    "undefined",
+    "Selects a non-main NocoBase data source.",
+  ],
+  [
+    "fallback",
+    "ReactNode",
+    "null",
+    "Optional read-only replacement for a denied field.",
+  ],
   ["children", "ReactNode", "required", "The protected field or field group."],
 ];
 
@@ -99,9 +164,15 @@ function ComponentApi({
           <TableBody>
             {rows.map(([name, type, defaultValue, propDescription]) => (
               <TableRow key={name}>
-                <TableCell className="font-mono text-xs font-medium">{name}</TableCell>
-                <TableCell className="font-mono text-xs text-muted-foreground">{type}</TableCell>
-                <TableCell className="font-mono text-xs text-muted-foreground">{defaultValue}</TableCell>
+                <TableCell className="font-mono text-xs font-medium">
+                  {name}
+                </TableCell>
+                <TableCell className="font-mono text-xs text-muted-foreground">
+                  {type}
+                </TableCell>
+                <TableCell className="font-mono text-xs text-muted-foreground">
+                  {defaultValue}
+                </TableCell>
                 <TableCell className="min-w-72 whitespace-normal text-muted-foreground">
                   {propDescription}
                 </TableCell>

package/registry/nocobase-acl/demo/components.tsx

@@ -19,7 +19,12 @@ import {
 import { RoleSwitcher } from "../components";
 import { RoleSwitcherPromptGenerator } from "./role-switcher-prompt-generator";
 
-type PropRow = [name: string, type: string, defaultValue: string, description: string];
+type PropRow = [
+  name: string,
+  type: string,
+  defaultValue: string,
+  description: string
+];
 
 const roleSwitcherProps: PropRow[] = [
   [
@@ -49,11 +54,20 @@ const roleSwitcherProps: PropRow[] = [
 ];
 
 const roleBehaviors = [
-  ["Multiple assigned roles", "Renders a Select using roles from the current Refine identity."],
+  [
+    "Multiple assigned roles",
+    "Renders a Select using roles from the signed-in identity.",
+  ],
   ["allow-use-union", "Prepends Full permissions using the __union__ role."],
-  ["only-use-union", "Shows Full permissions as the current non-interactive role."],
+  [
+    "only-use-union",
+    "Shows Full permissions as the current non-interactive role.",
+  ],
   ["allowAnonymous", "Appends Anonymous to the available role options."],
-  ["One available role", "Returns null, or shows the current-role badge when showWhenUnavailable is true."],
+  [
+    "One available role",
+    "Returns null, or shows the current-role badge when showWhenUnavailable is true.",
+  ],
 ];
 
 export function AclComponentsPage() {
@@ -64,8 +78,8 @@ export function AclComponentsPage() {
           Role switcher
         </h1>
         <p className="max-w-3xl text-sm leading-6 text-muted-foreground">
-          A reusable role selector backed by the Starter&apos;s NocoBase ACL store
-          and current Refine identity.
+          A reusable role selector backed by the Starter&apos;s NocoBase ACL
+          store and signed-in identity.
         </p>
       </header>
 
@@ -146,14 +160,15 @@ export function AclComponentsPage() {
               {roleBehaviors.map(([condition, behavior]) => (
                 <TableRow key={condition}>
                   <TableCell className="font-medium">{condition}</TableCell>
-                  <TableCell className="text-muted-foreground">{behavior}</TableCell>
+                  <TableCell className="text-muted-foreground">
+                    {behavior}
+                  </TableCell>
                 </TableRow>
               ))}
             </TableBody>
           </Table>
         </Card>
       </section>
-
     </div>
   );
 }
@@ -173,9 +188,15 @@ function PropsTable({ rows }: { rows: PropRow[] }) {
         <TableBody>
           {rows.map(([name, type, defaultValue, description]) => (
             <TableRow key={name}>
-              <TableCell className="font-mono text-xs font-medium">{name}</TableCell>
-              <TableCell className="font-mono text-xs text-muted-foreground">{type}</TableCell>
-              <TableCell className="font-mono text-xs text-muted-foreground">{defaultValue}</TableCell>
+              <TableCell className="font-mono text-xs font-medium">
+                {name}
+              </TableCell>
+              <TableCell className="font-mono text-xs text-muted-foreground">
+                {type}
+              </TableCell>
+              <TableCell className="font-mono text-xs text-muted-foreground">
+                {defaultValue}
+              </TableCell>
               <TableCell className="min-w-72 whitespace-normal text-muted-foreground">
                 {description}
               </TableCell>

package/registry/nocobase-acl/demo/index.tsx

@@ -70,7 +70,7 @@ export function AclPatternsPage() {
         prompt={{
           title: "Resource navigation",
           description:
-            "Generate Refine resources, sidebar behavior, and guarded routes backed by NocoBase collections.",
+            "Generate application resources, sidebar behavior, and guarded routes backed by NocoBase collections.",
           defaultScene: "User and role administration",
           defaultTarget:
             "Allow the Users resource but remove Roles from navigation and block its direct URL.",
@@ -98,7 +98,8 @@ export function AclPatternsPage() {
           description:
             "Generate a complete page whose availability depends on NocoBase permissions.",
           defaultScene: "User directory and account administration page",
-          defaultTarget: "Require users:list before rendering the complete page.",
+          defaultTarget:
+            "Require users:list before rendering the complete page.",
           requirements: `- Wrap the complete business page with AclPage.
 - Use anyOf when one accessible collection is enough, or allOf when every permission is required.
 - Provide a useful page-level fallback instead of rendering an empty screen.
@@ -151,7 +152,7 @@ export function AclPatternsPage() {
           defaultTarget:
             "Allow all actions for one user record and show a view-only row when update and delete are denied.",
           requirements: `- Use the Starter dataProvider so X-With-ACL-Meta captures NocoBase allowedActions from list, get, and getMany responses.
-- Use Refine Create, Show, Edit, and Delete buttons; do not manually compare user IDs or role names.
+- Use the built-in Create, Show, Edit, and Delete buttons; do not manually compare user IDs or role names.
 - Collection-level denial hides the action everywhere.
 - Record-level allowedActions must hide or disable only the affected row action.
 - Keep 403 responses authenticated and let NocoBase perform the final action validation.`,
@@ -177,7 +178,7 @@ export function AclPatternsPage() {
           defaultTarget:
             "Allow nickname editing, make email read-only, and hide phone when those fields are denied.",
           requirements: `- Wrap each protected field or field group with AclField.
-- Pass the collection resource, Refine action, and exact field name.
+- Pass the collection resource, application action, and exact field name.
 - Choose whether a denied field is hidden, replaced by read-only output, or shown with a custom fallback.
 - Do not infer field access from the overall edit permission.
 - Submit only values the current UI is allowed to edit; NocoBase still performs final field validation.`,
@@ -231,9 +232,13 @@ function NavigationPreview({ showUsers }: { showUsers: boolean }) {
   return (
     <div className="grid min-h-48 grid-cols-[150px_minmax(0,1fr)] overflow-hidden rounded-xl border bg-background">
       <aside className="border-r bg-muted/35 p-3">
-        <div className="mb-3 text-xs font-semibold text-muted-foreground">Workspace</div>
+        <div className="mb-3 text-xs font-semibold text-muted-foreground">
+          Workspace
+        </div>
         <NavItem icon={<LayoutPanelTop />} label="Dashboard" />
-        {showUsers ? <NavItem icon={<UsersRound />} label="Users" active /> : null}
+        {showUsers ? (
+          <NavItem icon={<UsersRound />} label="Users" active />
+        ) : null}
         <NavItem icon={<UserRoundCog />} label="Roles" />
       </aside>
       <div className="flex items-center justify-center p-5 text-center">
@@ -241,7 +246,9 @@ function NavigationPreview({ showUsers }: { showUsers: boolean }) {
           <div>
             <UsersRound className="mx-auto size-7 text-primary" />
             <div className="mt-2 font-medium">Users</div>
-            <div className="mt-1 text-xs text-muted-foreground">Route is available</div>
+            <div className="mt-1 text-xs text-muted-foreground">
+              Route is available
+            </div>
           </div>
         ) : (
           <div>
@@ -372,15 +379,27 @@ function ActionsPreview({ allowed }: { allowed: boolean }) {
                 <td className="py-3 text-muted-foreground">{user.role}</td>
                 <td className="py-3">
                   <div className="flex justify-end gap-1">
-                    <Button variant="ghost" size="icon-sm" aria-label="View user">
+                    <Button
+                      variant="ghost"
+                      size="icon-sm"
+                      aria-label="View user"
+                    >
                       <Eye />
                     </Button>
                     {allowed ? (
                       <>
-                        <Button variant="ghost" size="icon-sm" aria-label="Edit user">
+                        <Button
+                          variant="ghost"
+                          size="icon-sm"
+                          aria-label="Edit user"
+                        >
                           <Pencil />
                         </Button>
-                        <Button variant="ghost" size="icon-sm" aria-label="Delete user">
+                        <Button
+                          variant="ghost"
+                          size="icon-sm"
+                          aria-label="Delete user"
+                        >
                           <Trash2 />
                         </Button>
                       </>
@@ -412,7 +431,9 @@ function ProfileFormPreview({ restricted }: { restricted: boolean }) {
           {restricted ? (
             <div className="rounded-md border bg-muted/45 px-3 py-2 text-sm text-muted-foreground">
               {user.email}
-              <Badge className="ml-2" variant="outline">Read only</Badge>
+              <Badge className="ml-2" variant="outline">
+                Read only
+              </Badge>
             </div>
           ) : (
             <Input defaultValue={user.email} />
@@ -429,7 +450,13 @@ function ProfileFormPreview({ restricted }: { restricted: boolean }) {
   );
 }
 
-function DemoField({ label, children }: { label: string; children: React.ReactNode }) {
+function DemoField({
+  label,
+  children,
+}: {
+  label: string;
+  children: React.ReactNode;
+}) {
   return (
     <label className="block space-y-2">
       <span className="text-xs font-medium">{label}</span>
@@ -453,7 +480,9 @@ function CompactUsersTable({ limit = 3 }: { limit?: number }) {
             <tr key={user.id} className="border-b last:border-0">
               <td className="py-3">
                 <div className="font-medium">{user.name}</div>
-                <div className="text-xs text-muted-foreground">{user.username}</div>
+                <div className="text-xs text-muted-foreground">
+                  {user.username}
+                </div>
               </td>
               <td className="py-3 text-muted-foreground">{user.email}</td>
             </tr>
@@ -468,7 +497,9 @@ function RoleRow({ title, name }: { title: string; name: string }) {
   return (
     <div className="rounded-lg border px-3 py-2">
       <div className="text-sm font-medium">{title}</div>
-      <div className="mt-0.5 font-mono text-xs text-muted-foreground">{name}</div>
+      <div className="mt-0.5 font-mono text-xs text-muted-foreground">
+        {name}
+      </div>
     </div>
   );
 }

package/registry/nocobase-acl/demo/lazy-route.tsx

@@ -1,14 +1,9 @@
 import { Suspense, type ReactNode } from "react";
+import { LoadingState } from "@/components/app-shell/loading-state";
 
 export function LazyAclRoute({ children }: { children: ReactNode }) {
   return (
-    <Suspense
-      fallback={
-        <div className="flex min-h-80 items-center justify-center text-sm text-muted-foreground">
-          Loading access control demo…
-        </div>
-      }
-    >
+    <Suspense fallback={<LoadingState className="min-h-80" />}>
       {children}
     </Suspense>
   );

package/registry/nocobase-acl/demo/prompt-generator.tsx

@@ -1,7 +1,14 @@
-import { Check, Copy, Sparkles } from "lucide-react";
+import { Check, ChevronDown, Copy, Sparkles } from "lucide-react";
 import { useMemo, useState } from "react";
 
 import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
@@ -25,7 +32,7 @@ export function AclScenarioPromptGenerator({
   const [copyError, setCopyError] = useState(false);
 
   const prompt = useMemo(
-    () => `Build a complete NocoBase ACL scene in the Refine Starter.
+    () => `Build a complete NocoBase ACL scene in the NocoBase Admin Starter.
 
 Business scene
 - Page or feature: ${scene}
@@ -41,7 +48,7 @@ Implementation contract
 - NocoBase roles:check is the source of truth. Do not create a second permission store or hard-code role names.
 - Keep backend ACL enforcement in place; frontend checks only control presentation and navigation.
 - Import reusable components from the installed local entry point at @/extensions/nocobase-acl when page composition is needed.
-- Resource actions use Refine names: list, show, create, edit, delete. Let the Starter map them to NocoBase list/get/create/update/destroy.
+- Resource actions use the application names list, show, create, edit, and delete. Let the Starter map them to NocoBase list/get/create/update/destroy.
 - Preserve dataSourceKey when the collection belongs to a non-main data source.
 - Show an understandable forbidden or hidden state where appropriate.
 - Deliver complete React component code, resource metadata, route integration, and the visible sample UI.`,
@@ -56,33 +63,44 @@ Implementation contract
         <span className="ml-auto text-xs font-normal text-muted-foreground">
           {config.title}
         </span>
+        <ChevronDown className="size-4 text-muted-foreground transition-transform group-open:rotate-180" />
       </summary>
-      <div className="grid gap-4 border-t p-4 lg:grid-cols-[minmax(0,320px)_minmax(0,1fr)]">
-        <div className="space-y-4">
-          <p className="text-xs leading-5 text-muted-foreground">
-            {config.description}
-          </p>
-          <div className="space-y-2">
-            <Label htmlFor={`${config.title}-scene`}>Business scene</Label>
-            <Input
-              id={`${config.title}-scene`}
-              value={scene}
-              onChange={(event) => setScene(event.target.value)}
-            />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor={`${config.title}-target`}>Permission target</Label>
-            <Textarea
-              id={`${config.title}-target`}
-              value={target}
-              onChange={(event) => setTarget(event.target.value)}
-              className="min-h-24"
-            />
-          </div>
-        </div>
-        <div className="min-w-0 overflow-hidden rounded-lg border bg-background">
-          <div className="flex items-center justify-between gap-3 border-b px-3 py-2">
-            <span className="text-xs font-medium">Generated prompt</span>
+      <div className="grid items-start gap-5 border-t p-4 xl:grid-cols-[360px_minmax(0,1fr)]">
+        <Card className="gap-0 py-0">
+          <CardHeader className="border-b py-4">
+            <CardTitle className="text-base">Scenario settings</CardTitle>
+            <CardDescription>{config.description}</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-5 py-5">
+            <div className="space-y-2">
+              <Label htmlFor={`${config.title}-scene`}>Business scene</Label>
+              <Input
+                id={`${config.title}-scene`}
+                value={scene}
+                onChange={(event) => setScene(event.target.value)}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor={`${config.title}-target`}>
+                Permission target
+              </Label>
+              <Textarea
+                id={`${config.title}-target`}
+                value={target}
+                onChange={(event) => setTarget(event.target.value)}
+                className="min-h-24"
+              />
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="min-w-0 gap-0 overflow-hidden py-0">
+          <div className="flex items-center justify-between gap-3 border-b px-4 py-3">
+            <div>
+              <div className="text-sm font-medium">Generated prompt</div>
+              <div className="text-xs text-muted-foreground">
+                Updates as you change the business scene and permission target.
+              </div>
+            </div>
             <Button
               size="sm"
               onClick={async () => {
@@ -101,14 +119,15 @@ Implementation contract
             </Button>
           </div>
           {copyError ? (
-            <p className="border-b px-3 py-2 text-xs text-destructive">
-              Clipboard access failed. Select the prompt text and copy it manually.
+            <p className="border-b px-4 py-2 text-xs text-destructive">
+              Clipboard access failed. Select the prompt text and copy it
+              manually.
             </p>
           ) : null}
-          <pre className="max-h-80 overflow-auto whitespace-pre-wrap p-4 font-mono text-xs leading-5 text-muted-foreground">
+          <pre className="max-h-[520px] overflow-auto whitespace-pre-wrap bg-muted/25 p-5 font-mono text-xs leading-5 text-muted-foreground">
             {prompt}
           </pre>
-        </div>
+        </Card>
       </div>
     </details>
   );