@gntik-ai/templates 0.8.0 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gntik-ai/templates",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "gntik-ui page templates: complete product pages (auth, dashboard, resources, settings, system) on the kit layouts and blocks.",
   "license": "MIT",
   "type": "module",
@@ -35,14 +35,14 @@
     "react-dom": "^19.0.0"
   },
   "dependencies": {
-    "@gntik-ai/blocks": "0.8.0",
-    "@gntik-ai/charts": "0.5.0",
-    "@gntik-ai/chat": "0.7.0",
+    "@gntik-ai/blocks": "0.10.0",
+    "@gntik-ai/charts": "0.10.0",
+    "@gntik-ai/chat": "0.10.0",
     "@gntik-ai/editor": "0.5.0",
     "@gntik-ai/flow": "0.5.0",
     "@gntik-ai/icons": "0.5.0",
     "@gntik-ai/tokens": "0.2.1",
-    "@gntik-ai/ui": "0.7.0",
+    "@gntik-ai/ui": "0.10.0",
     "lucide-react": "^1.48.0"
   },
   "devDependencies": {

package/src/audit-log/Page.test.tsx

@@ -6,6 +6,59 @@ import { auditEvents } from './data';
 
 const ALL = { start: null, end: null };
 
+describe('auditEventsToCsv', () => {
+  it('neutralises an actor formula before applying CSV quoting', () => {
+    const event = {
+      ...auditEvents[0]!,
+      actor: { name: '=HYPERLINK("https://example.test","x")', email: 'ana@example.test' },
+    };
+
+    expect(auditEventsToCsv([event]).split('\n')[1]).toContain(
+      `,"'=HYPERLINK(""https://example.test"",""x"")",ana@example.test,`,
+    );
+  });
+
+  it.each([
+    ['equals', '=1+1', "'=1+1"],
+    ['plus', '+1', "'+1"],
+    ['minus', '-1', "'-1"],
+    ['at sign', '@SUM(A1)', "'@SUM(A1)"],
+    ['tab', '\tprojects/a', "'\tprojects/a"],
+    ['carriage return', '\rprojects/a', "'\rprojects/a"],
+  ])('neutralises a target starting with %s', (_label, target, expected) => {
+    const event = { ...auditEvents[0]!, target };
+
+    expect(auditEventsToCsv([event]).split('\n')[1]?.split(',')[5]).toBe(expected);
+  });
+
+  it.each([
+    ['plain', 'projects/a', 'projects/a'],
+    ['comma', 'projects/a,b', '"projects/a,b"'],
+    ['quote', 'projects/"a"', '"projects/""a"""'],
+    ['newline', 'projects/a\nb', '"projects/a\nb"'],
+    ['embedded equals', 'a=b', 'a=b'],
+    ['embedded minus', 'x-1', 'x-1'],
+    ['leading space', ' =1+1', ' =1+1'],
+    ['empty', '', ''],
+  ])('preserves safe cells with %s and the CSV format', (_label, target, expected) => {
+    const event = {
+      ...auditEvents[0]!,
+      at: new Date('2026-01-02T03:04:05.000Z'),
+      actor: { name: 'Ana López', email: 'ana@example.test' },
+      action: 'project.update',
+      resource: 'Project',
+      target,
+      ip: '10.0.0.4',
+      result: 'succeeded' as const,
+    };
+
+    expect(auditEventsToCsv([event])).toBe(
+      'time,actor,email,action,resource,target,ip,result\n' +
+        `2026-01-02T03:04:05.000Z,Ana López,ana@example.test,project.update,Project,${expected},10.0.0.4,succeeded`,
+    );
+  });
+});
+
 describe('AuditLogPage', () => {
   it('renders filters, date range and the events table', { timeout: 15000 }, async () => {
     render(<AuditLogPage />);

package/src/audit-log/Page.tsx

@@ -1,3 +1,5 @@
+import { useI18n } from '@gntik-ai/ui';
+import { matchText } from '@gntik-ai/ui';
 import {
   DataTable,
   DateRangeFilter,
@@ -60,13 +62,14 @@ export function filterAuditEvents(
   query: string,
   filters: readonly ActiveFilter[],
   range: DateRange,
+  locale?: string,
 ) {
-  const q = query.trim().toLowerCase();
+  const q = query.trim();
   const fields = [...new Set(filters.map((f) => f.field))];
   const from = range.start ? startOfDay(range.start).getTime() : -Infinity;
   const to = range.end ? startOfDay(range.end).getTime() + DAY : Infinity;
   return events.filter((e) => {
-    if (q && ![e.actor.name, e.actor.email, e.action, e.target].some((v) => v.toLowerCase().includes(q))) return false;
+    if (q && ![e.actor.name, e.actor.email, e.action, e.target].some((v) => matchText(v, q, { locale }))) return false;
     if (!fields.every((field) => filters.some((f) => f.field === field && f.value === fieldValue(e, field))))
       return false;
     const t = e.at.getTime();
@@ -74,7 +77,11 @@ export function filterAuditEvents(
   });
 }
 
-const csvCell = (v: string) => (/[",\n]/.test(v) ? `"${v.replace(/"/g, '""')}"` : v);
+/** Neutralises leading spreadsheet formula triggers before applying CSV quoting. */
+export function escapeCsvCell(value: string): string {
+  const safe = /^[=+@\t\r-]/.test(value) ? `'${value}` : value;
+  return /[",\n]/.test(safe) ? `"${safe.replace(/"/g, '""')}"` : safe;
+}
 
 /** CSV of the events (time, actor, action, resource, target, ip, result). */
 export function auditEventsToCsv(events: readonly AuditEvent[]) {
@@ -89,7 +96,7 @@ export function auditEventsToCsv(events: readonly AuditEvent[]) {
     e.ip,
     e.result,
   ]);
-  return [head, ...rows].map((r) => r.map(csvCell).join(',')).join('\n');
+  return [head, ...rows].map((r) => r.map(escapeCsvCell).join(',')).join('\n');
 }
 
 function downloadCsv(events: AuditEvent[]) {
@@ -104,6 +111,7 @@ function downloadCsv(events: AuditEvent[]) {
 
 /** Audit log: ConsoleShell + Page with FilterBar + DateRangeFilter, an events DataTable and a diff drawer. */
 export default function AuditLogPage(props: Partial<AuditLogProps>) {
+  const { locale } = useI18n();
   const {
     events = auditEvents,
     filterFields = auditFilterFields,
@@ -125,7 +133,7 @@ export default function AuditLogPage(props: Partial<AuditLogProps>) {
   });
   const [diffEvent, setDiffEvent] = useState<AuditEvent | null>(null);
 
-  const rows = filterAuditEvents(events, query, filters, range);
+  const rows = filterAuditEvents(events, query, filters, range, locale);
 
   const columns: DataTableColumn<AuditEvent>[] = [
     {

package/src/audit-log/template.meta.ts

@@ -6,7 +6,7 @@ export const meta: TemplateMeta = {
   priority: 'P2',
   status: 'beta',
   description:
-    'Workspace audit trail: FilterBar (search, actor / resource / result filters) and DateRangeFilter over a DataTable of events with actor, action, target and result; a drawer shows the change diff (CodeBlock); export to CSV.',
+    'Workspace audit trail: FilterBar (search, actor / resource / result filters) and DateRangeFilter over a DataTable of events with actor, action, target and result; a drawer shows the change diff (CodeBlock); export to CSV. CSV export neutralises leading spreadsheet formula triggers.',
   layout: 'SidebarLayout · Page',
   blocks: ['app-sidebar', 'app-topbar', 'page-header', 'filter-bar', 'date-range-filter', 'data-table', 'empty-states'],
 };

package/src/help-home/Page.tsx

@@ -1,3 +1,4 @@
+import { useI18n } from '@gntik-ai/ui';
 import { Clock, Search } from '@gntik-ai/icons';
 import {
   Badge,
@@ -36,6 +37,7 @@ export interface HelpHomeProps {
 
 /** Help center home on DocsLayout: search, category cards and popular articles. */
 export default function HelpHomePage(props: Partial<HelpHomeProps>) {
+  const { locale } = useI18n();
   const {
     brand = <Logo size={22} wordmark />,
     title = 'How can we help?',
@@ -53,7 +55,7 @@ export default function HelpHomePage(props: Partial<HelpHomeProps>) {
   } = props;
   const [query, setQuery] = useState('');
   const ids = useId();
-  const results = searchArticles(articles, query);
+  const results = searchArticles(articles, query, locale);
   const searching = query.trim() !== '';
   const categoryTitle = (id: string) => categories.find((c) => c.id === id)?.title ?? id;
 

package/src/help-home/data.ts

@@ -1,3 +1,4 @@
+import { matchText } from '@gntik-ai/ui';
 import { BookOpen, CreditCard, LifeBuoy, Plug, Rocket, Shield, type LucideIcon } from '@gntik-ai/icons';
 import type { NavGroup } from '@gntik-ai/ui';
 
@@ -144,8 +145,6 @@ export const helpArticles: HelpArticle[] = [
 ];
 
 /** Articles whose title or excerpt contains the query. */
-export function searchArticles(articles: readonly HelpArticle[], query: string): HelpArticle[] {
-  const q = query.trim().toLowerCase();
-  if (!q) return [...articles];
-  return articles.filter((a) => a.title.toLowerCase().includes(q) || a.excerpt.toLowerCase().includes(q));
+export function searchArticles(articles: readonly HelpArticle[], query: string, locale?: string): HelpArticle[] {
+  return articles.filter((a) => matchText(a.title, query, { locale }) || matchText(a.excerpt, query, { locale }));
 }

package/src/incident-board/Page.tsx

@@ -1,3 +1,4 @@
+import { useI18n } from '@gntik-ai/ui';
 import { FilterBar, KpiRow, PageHeader, type ActiveFilter, type FilterField } from '@gntik-ai/blocks';
 import { Download, Plus } from '@gntik-ai/icons';
 import {
@@ -95,13 +96,17 @@ function IncidentBoard({
   onDeclare,
   onExport,
 }: BoardProps) {
+  const { locale } = useI18n();
   const announce = useAnnounce();
   const [columns, setColumns] = useState(defaultColumns);
   const [query, setQuery] = useState('');
   const [filters, setFilters] = useState<ActiveFilter[]>(defaultFilters);
   const [openId, setOpenId] = useState<string | null>(defaultOpenId);
 
-  const visible = columns.map((c) => ({ ...c, cards: c.cards.filter((i) => matchesTriage(i, query, filters)) }));
+  const visible = columns.map((c) => ({
+    ...c,
+    cards: c.cards.filter((i) => matchesTriage(i, query, filters, locale)),
+  }));
   const shown = visible.reduce((n, c) => n + c.cards.length, 0);
   const openColumn = columns.find((c) => c.cards.some((i) => i.id === openId));
   const open = openColumn?.cards.find((i) => i.id === openId);

package/src/incident-board/data.ts

@@ -1,3 +1,4 @@
+import { matchText } from '@gntik-ai/ui';
 import type { ActiveFilter, FilterField, KpiItem } from '@gntik-ai/blocks';
 import {
   moveKanbanCard,
@@ -169,9 +170,14 @@ export function triageFieldValue(i: TriageIncident, field: string): string | und
 }
 
 /** True when the incident matches the search text and every filtered field (OR within a field). */
-export function matchesTriage(i: TriageIncident, query: string, filters: readonly ActiveFilter[]): boolean {
-  const q = query.trim().toLowerCase();
-  if (q && ![i.id, i.title, i.service, i.owner].some((v) => v.toLowerCase().includes(q))) return false;
+export function matchesTriage(
+  i: TriageIncident,
+  query: string,
+  filters: readonly ActiveFilter[],
+  locale?: string,
+): boolean {
+  const q = query.trim();
+  if (q && ![i.id, i.title, i.service, i.owner].some((v) => matchText(v, q, { locale }))) return false;
   const byField = new Map<string, string[]>();
   for (const f of filters) byField.set(f.field, [...(byField.get(f.field) ?? []), f.value]);
   return [...byField].every(([field, values]) => values.includes(triageFieldValue(i, field) ?? ''));

package/src/index.ts

@@ -57,7 +57,7 @@ export { meta as resetPasswordTemplateMeta } from './reset-password/template.met
 export type { ResetPasswordPageProps } from './reset-password/Page';
 export { default as ResourceDetailPage } from './resource-detail/Page';
 export { meta as resourceDetailTemplateMeta } from './resource-detail/template.meta';
-export type { ResourceDetailProps, ResourceDetailTab } from './resource-detail/Page';
+export type { ResourceDetailProps, ResourceDetailTab, ResourceDetailLabels } from './resource-detail/Page';
 export type { ResourceSettings } from './resource-detail/data';
 export { default as ResourceFormPage } from './resource-form/Page';
 export { meta as resourceFormTemplateMeta } from './resource-form/template.meta';

package/src/keyboard-shortcuts/Page.test.tsx

@@ -2,7 +2,45 @@ import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { expectNoAxeViolations } from '../test/a11y';
 import KeyboardShortcutsPage, { KeyboardShortcutsDialog } from './Page';
-import { filterShortcuts, shortcutGroups } from './data';
+import { filterShortcuts, shortcutGroups, type ShortcutGroup } from './data';
+import { ShortcutSheet } from './ShortcutSheet';
+
+describe('platform shortcut hints', () => {
+  afterEach(() => vi.unstubAllGlobals());
+
+  it('shows Ctrl on Linux and finds the command palette by ctrl k', async () => {
+    vi.stubGlobal('navigator', { platform: 'Linux x86_64' });
+    render(<ShortcutSheet groups={shortcutGroups} />);
+    const row = screen.getByText('Open the command palette').closest('li');
+    expect(row).not.toBeNull();
+    expect(within(row!).getByText('Ctrl')).toBeInTheDocument();
+    await userEvent.type(screen.getByRole('searchbox'), 'ctrl k');
+    expect(screen.getByText('Open the command palette')).toBeInTheDocument();
+    expect(screen.getByText('1 shortcut')).toBeInTheDocument();
+  });
+
+  it('matches platform modifier spellings without changing legacy callers', () => {
+    const ids = (groups: ShortcutGroup[]) => groups.flatMap((group) => group.shortcuts.map((shortcut) => shortcut.id));
+    expect(ids(filterShortcuts(shortcutGroups, 'CtRl k', 'en', 'linux'))).toEqual(['palette']);
+    expect(ids(filterShortcuts(shortcutGroups, '⌘ k', 'en', 'macos'))).toEqual(['palette']);
+    expect(ids(filterShortcuts(shortcutGroups, '⌘ k', 'en'))).toEqual(['palette']);
+    const legacy: ShortcutGroup[] = [
+      {
+        id: 'legacy',
+        title: 'Legacy',
+        shortcuts: [
+          { id: 'literal', description: 'Explicit shortcut', keys: ['⌘', 'K'] },
+          { id: 'sequence', description: 'Sequence', keys: ['G'], then: ['P'] },
+        ],
+      },
+    ];
+    expect(ids(filterShortcuts(legacy, '⌘ k', 'es'))).toEqual(['literal']);
+    expect(filterShortcuts(legacy, 'ctrl k', 'es')).toEqual([]);
+    expect(ids(filterShortcuts(legacy, 'g p'))).toEqual(['sequence']);
+    expect(filterShortcuts(legacy, 'legacy')).toEqual(legacy);
+    expect(filterShortcuts(legacy, ' ')).toEqual(legacy);
+  });
+});
 
 describe('KeyboardShortcutsPage', () => {
   it('renders the console page with every group', { timeout: 15000 }, async () => {

package/src/keyboard-shortcuts/ShortcutSheet.tsx

@@ -1,3 +1,4 @@
+import { useI18n, useOs } from '@gntik-ai/ui';
 import { Keyboard, Search } from '@gntik-ai/icons';
 import { EmptyState, Grid, Heading, Input, KbdCombo, Stack, Text } from '@gntik-ai/ui';
 import { useId, useState } from 'react';
@@ -14,9 +15,11 @@ export interface ShortcutSheetProps {
 
 /** Searchable shortcut sheet shared by the page and the dialog. */
 export function ShortcutSheet({ groups, headingLevel = 2, columns = 2, autoFocus }: ShortcutSheetProps) {
+  const { locale } = useI18n();
+  const os = useOs();
   const [query, setQuery] = useState('');
   const countId = useId();
-  const visible = filterShortcuts(groups, query);
+  const visible = filterShortcuts(groups, query, locale, os);
   const total = visible.reduce((n, g) => n + g.shortcuts.length, 0);
   return (
     <Stack gap={5}>

package/src/keyboard-shortcuts/data.ts

@@ -1,10 +1,11 @@
-import type { BreadcrumbItem } from '@gntik-ai/ui';
+import { matchText } from '@gntik-ai/ui';
+import type { BreadcrumbItem, Os } from '@gntik-ai/ui';
 
 export interface Shortcut {
   id: string;
   /** What the shortcut does. */
   description: string;
-  /** Keys pressed together, e.g. ['⌘', 'K']. */
+  /** Keys pressed together, e.g. ['mod', 'K']. */
   keys: string[];
   /** A second combination that does the same (e.g. a sequence "G then P"). */
   then?: string[];
@@ -27,10 +28,10 @@ export const shortcutGroups: ShortcutGroup[] = [
     id: 'general',
     title: 'General',
     shortcuts: [
-      { id: 'palette', description: 'Open the command palette', keys: ['⌘', 'K'] },
+      { id: 'palette', description: 'Open the command palette', keys: ['mod', 'K'] },
       { id: 'help', description: 'Show keyboard shortcuts', keys: ['?'] },
-      { id: 'sidebar', description: 'Collapse or expand the sidebar', keys: ['⌘', 'B'] },
-      { id: 'theme', description: 'Switch theme', keys: ['⌘', '⇧', 'L'] },
+      { id: 'sidebar', description: 'Collapse or expand the sidebar', keys: ['mod', 'B'] },
+      { id: 'theme', description: 'Switch theme', keys: ['mod', '⇧', 'L'] },
     ],
   },
   {
@@ -58,26 +59,40 @@ export const shortcutGroups: ShortcutGroup[] = [
     id: 'editing',
     title: 'Editing',
     shortcuts: [
-      { id: 'save', description: 'Save changes', keys: ['⌘', 'S'] },
-      { id: 'submit', description: 'Submit a form or comment', keys: ['⌘', '↵'] },
+      { id: 'save', description: 'Save changes', keys: ['mod', 'S'] },
+      { id: 'submit', description: 'Submit a form or comment', keys: ['mod', '↵'] },
       { id: 'cancel', description: 'Cancel and close', keys: ['Esc'] },
-      { id: 'undo', description: 'Undo', keys: ['⌘', 'Z'] },
+      { id: 'undo', description: 'Undo', keys: ['mod', 'Z'] },
     ],
   },
 ];
 
-/** Groups with only the shortcuts whose description or keys match the query. */
-export function filterShortcuts(groups: readonly ShortcutGroup[], query: string): ShortcutGroup[] {
+/** Groups matching descriptions, titles or keys; mod accepts both Command and Ctrl spellings. */
+export function filterShortcuts(
+  groups: readonly ShortcutGroup[],
+  query: string,
+  locale?: string,
+  os: Os = 'undetermined',
+): ShortcutGroup[] {
   const q = query.trim().toLowerCase();
   if (!q) return [...groups];
+  const modifier = os === 'macos' || os === 'ios' ? '⌘' : 'Ctrl';
+  const alias = modifier === '⌘' ? 'Ctrl' : '⌘';
+  const matchesKeys = (shortcut: Shortcut) => {
+    const keys = [...shortcut.keys, ...(shortcut.then ?? [])];
+    return ['mod', modifier, alias].some(
+      (mod) =>
+        keys
+          .map((key) => (key === 'mod' ? mod : key))
+          .join(' ')
+          .toLowerCase() === q,
+    );
+  };
   return groups
     .map((g) => ({
       ...g,
       shortcuts: g.shortcuts.filter(
-        (s) =>
-          s.description.toLowerCase().includes(q) ||
-          g.title.toLowerCase().includes(q) ||
-          [...s.keys, ...(s.then ?? [])].join(' ').toLowerCase() === q,
+        (s) => matchText(s.description, query, { locale }) || matchText(g.title, query, { locale }) || matchesKeys(s),
       ),
     }))
     .filter((g) => g.shortcuts.length > 0);

package/src/live-event-stream/Page.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, within } from '@testing-library/react';
+import { render, screen, within, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { ThemeProvider } from '@gntik-ai/ui';
 import { expectNoAxeViolations } from '../test/a11y';
@@ -115,7 +115,9 @@ describe('LiveEventStreamPage', () => {
     const onSelectEvent = vi.fn();
     render(<LiveEventStreamPage status="live" events={events.slice(0, 2)} onSelectEvent={onSelectEvent} />);
     await user.click(screen.getByText('First record'));
-    expect(screen.getByRole('button', { name: 'Inspect event 12:00:00' })).toHaveAttribute('aria-pressed', 'true');
+    await waitFor(() =>
+      expect(screen.getByRole('button', { name: 'Inspect event 12:00:00' })).toHaveAttribute('aria-pressed', 'true'),
+    );
     const panel = screen.getByRole('complementary', { name: 'Event inspector' });
     expect(within(panel).getByRole('tree', { name: 'Event payload' })).toHaveTextContent('alpha');
     expect(onSelectEvent).toHaveBeenLastCalledWith(events[0]);
@@ -123,8 +125,10 @@ describe('LiveEventStreamPage', () => {
     await user.tab();
     expect(screen.getByRole('button', { name: 'Inspect event 12:00:01' })).toHaveFocus();
     await user.keyboard('{Enter}');
-    expect(screen.getByRole('button', { name: 'Inspect event 12:00:01' })).toHaveAttribute('aria-pressed', 'true');
-    expect(within(panel).getByRole('tree', { name: 'Event payload' })).toHaveTextContent('beta');
+    await waitFor(() =>
+      expect(screen.getByRole('button', { name: 'Inspect event 12:00:01' })).toHaveAttribute('aria-pressed', 'true'),
+    );
+    await waitFor(() => expect(within(panel).getByRole('tree', { name: 'Event payload' })).toHaveTextContent('beta'));
     expect(onSelectEvent).toHaveBeenLastCalledWith(events[1]);
     await expectNoAxeViolations();
   });

package/src/resource-detail/Page.labels.test.tsx

@@ -0,0 +1,67 @@
+import { act, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { I18nProvider, es } from '@gntik-ai/ui';
+import ResourceDetailPage, { type ResourceDetailLabels } from './Page';
+import { detailResource, detailMeta, detailItems } from './data';
+import { expectNoAxeViolations } from '../test/a11y';
+
+it(
+  'localizes only resource tabs and their tablist, preserves fixtures, and remains keyboard accessible',
+  { timeout: 15000 },
+  async () => {
+    const user = userEvent.setup();
+    const { container } = render(
+      <I18nProvider locale="es">
+        <ResourceDetailPage />
+      </I18nProvider>,
+    );
+    expect(screen.getByRole('tablist', { name: es['resourceDetail.sections'] })).toBeVisible();
+    for (const key of ['overview', 'activity', 'settings'] as const)
+      expect(screen.getByRole('tab', { name: es[`resourceDetail.${key}`] })).toBeVisible();
+    const overview = screen.getByRole('tab', { name: 'Resumen' });
+    expect(overview).toHaveAttribute('aria-selected', 'true');
+    act(() => overview.focus());
+    await user.keyboard('{ArrowRight}{Enter}');
+    expect(screen.getByRole('tab', { name: 'Actividad' })).toHaveAttribute('aria-selected', 'true');
+    await user.click(overview);
+    expect(screen.getByRole('heading', { name: detailResource.name })).toBeVisible();
+    expect(screen.getByText(detailResource.description)).toBeVisible();
+    for (const item of detailMeta) expect(screen.getAllByText(String(item.value))[0]).toBeVisible();
+    for (const item of detailItems) expect(screen.getAllByText(item.label)[0]).toBeVisible();
+    expect(screen.getByRole('heading', { name: 'Configuration' })).toBeVisible();
+    expect(screen.getAllByRole('button', { name: 'View logs' })[0]).toBeVisible();
+    expect(screen.getAllByRole('link', { name: 'Deployments' })[0]).toHaveAttribute('href', '/deployments');
+    expect(container.textContent).not.toContain('{');
+    await expectNoAxeViolations(container);
+  },
+);
+
+it('keeps the English defaults and renders every tab override with catalog fallback in readOnly mode', () => {
+  const { rerender } = render(<ResourceDetailPage />);
+  expect(screen.getByRole('tablist', { name: 'Resource sections' })).toBeVisible();
+  for (const name of ['Overview', 'Activity', 'Settings']) expect(screen.getByRole('tab', { name })).toBeVisible();
+  const labels: ResourceDetailLabels = {
+    overview: 'Overview override',
+    activity: 'Activity override',
+    settings: 'Settings override',
+    sections: 'Sections override',
+  };
+  const view = (overrides: Partial<ResourceDetailLabels>, readOnly = false) => (
+    <I18nProvider locale="es">
+      <ResourceDetailPage labels={overrides} readOnly={readOnly} />
+    </I18nProvider>
+  );
+  rerender(view(labels));
+  expect(screen.getByRole('tablist', { name: labels.sections })).toBeVisible();
+  for (const name of [labels.overview, labels.activity, labels.settings])
+    expect(screen.getByRole('tab', { name })).toBeVisible();
+  rerender(view({ overview: 'Only overview' }));
+  expect(screen.getByRole('tablist', { name: es['resourceDetail.sections'] })).toBeVisible();
+  expect(screen.getByRole('tab', { name: 'Only overview' })).toBeVisible();
+  expect(screen.getByRole('tab', { name: es['resourceDetail.activity'] })).toBeVisible();
+  expect(screen.getByRole('tab', { name: es['resourceDetail.settings'] })).toBeVisible();
+  rerender(view({}, true));
+  expect(screen.getAllByRole('tab')).toHaveLength(1);
+  expect(screen.getByRole('tab', { name: es['resourceDetail.overview'] })).toHaveAttribute('aria-selected', 'true');
+  expect(screen.getByRole('tablist', { name: es['resourceDetail.sections'] })).toBeVisible();
+});

package/src/resource-detail/Page.tsx

@@ -28,6 +28,7 @@ import {
   TabsPanel,
   TabsTab,
   Textarea,
+  useI18n,
   type BreadcrumbItem,
 } from '@gntik-ai/ui';
 import { useState } from 'react';
@@ -45,7 +46,16 @@ import {
 
 export type ResourceDetailTab = 'overview' | 'activity' | 'settings';
 
+export interface ResourceDetailLabels {
+  overview: string;
+  activity: string;
+  settings: string;
+  sections: string;
+}
+
 export interface ResourceDetailProps {
+  /** Per-key copy overrides; explicit props take precedence, then labels, then the active catalog. */
+  labels?: Partial<ResourceDetailLabels>;
   /**
    * Optional boolean, default false. Shows only the keyboard-accessible Overview tab in
    * the "Resource sections" tablist, using explicit resource props without sample defaults.
@@ -85,14 +95,11 @@ export interface ResourceDetailProps {
   shell: Omit<ConsoleShellProps, 'children'>;
 }
 
-const TABS: Array<{ value: ResourceDetailTab; label: string }> = [
-  { value: 'overview', label: 'Overview' },
-  { value: 'activity', label: 'Activity' },
-  { value: 'settings', label: 'Settings' },
-];
+const TABS: ResourceDetailTab[] = ['overview', 'activity', 'settings'];
 
 /** Resource detail: editable tabs by default, or explicit-only Overview when readOnly is true. */
 export default function ResourceDetailPage(props: Partial<ResourceDetailProps>) {
+  const { t } = useI18n();
   const readOnly = props.readOnly ?? false;
   const {
     name = readOnly ? '' : detailResource.name,
@@ -114,6 +121,7 @@ export default function ResourceDetailPage(props: Partial<ResourceDetailProps>)
     onSaveSettings,
     onDangerAction,
     shell,
+    labels,
   } = props;
   const meta = metaProp ?? (readOnly ? [] : detailMeta);
   const actions: PageChromeAction[] =
@@ -130,7 +138,10 @@ export default function ResourceDetailPage(props: Partial<ResourceDetailProps>)
   const [settings, setSettings] = useState<ResourceSettings>({ name, description });
   const [saved, setSaved] = useState<ResourceSettings>({ name, description });
   const dirty = settings.name !== saved.name || settings.description !== saved.description;
-  const tabs = readOnly ? TABS.filter((t) => t.value === 'overview') : TABS;
+  const tabs = (readOnly ? TABS.filter((value) => value === 'overview') : TABS).map((value) => ({
+    value,
+    label: labels?.[value] ?? t(`resourceDetail.${value}`),
+  }));
 
   return (
     <ConsoleShell currentHref="/deployments" breadcrumbs={breadcrumbs} {...shell}>
@@ -156,7 +167,7 @@ export default function ResourceDetailPage(props: Partial<ResourceDetailProps>)
             onTabChange?.(next);
           }}
         >
-          <TabsList aria-label="Resource sections">
+          <TabsList aria-label={labels?.sections ?? t('resourceDetail.sections')}>
             {tabs.map((t) => (
               <TabsTab key={t.value} value={t.value}>
                 {t.label}

package/src/resource-detail/examples/Labels.tsx

@@ -0,0 +1,18 @@
+import { I18nProvider } from '@gntik-ai/ui';
+import ResourceDetailPage from '../Page';
+
+/** Each tab label and the tablist name can be overridden independently. */
+export default function Labels() {
+  return (
+    <I18nProvider locale="es">
+      <ResourceDetailPage
+        labels={{
+          overview: 'Resource overview',
+          activity: 'Resource activity',
+          settings: 'Resource settings',
+          sections: 'Resource navigation',
+        }}
+      />
+    </I18nProvider>
+  );
+}

package/src/resource-detail/examples/Spanish.tsx

@@ -0,0 +1,11 @@
+import { I18nProvider } from '@gntik-ai/ui';
+import ResourceDetailPage from '../Page';
+
+/** Only tab chrome is translated; imported resource data and section content stay unchanged. */
+export default function Spanish() {
+  return (
+    <I18nProvider locale="es">
+      <ResourceDetailPage />
+    </I18nProvider>
+  );
+}

package/src/resource-detail/template.meta.ts

@@ -6,7 +6,7 @@ export const meta: TemplateMeta = {
   priority: 'P1',
   status: 'beta',
   description:
-    'Resource detail with editable Overview, Activity and Settings tabs by default; optional readOnly (boolean, default false) uses only explicit header and detail props and one Overview tab, with optional history (readonly StatusEvent[], default undefined): omitted hides the history card, [] shows the named empty state, and events render exactly as supplied without invented actors. Read-only ignores activity, events, dangerActions, defaultTab, onSaveSettings and onDangerAction; explicit actions and onEditDetails are honored. The Resource sections tablist retains Tab, arrow, Home/End and Enter/Space keyboard navigation; history is a named group containing the Status history list or empty-state region. Uses token styling in dark (default), light and high_contrast. Examples: runtime-with-transition maps state and lastTransitionAt to one actor-free event, runtime-without-transition maps null to [], and realtime-configuration and postgres-table-detail omit history. ConsoleShell retains sample frame defaults unless explicit shell props are supplied, as in the examples.',
+    'Resource detail with editable Overview, Activity and Settings tabs by default; optional readOnly (boolean, default false) uses only explicit header and detail props and one Overview tab, with optional history (readonly StatusEvent[], default undefined): omitted hides the history card, [] shows the named empty state, and events render exactly as supplied without invented actors. Read-only ignores activity, events, dangerActions, defaultTab, onSaveSettings and onDangerAction; explicit actions and onEditDetails are honored. The Resource sections tablist retains Tab, arrow, Home/End and Enter/Space keyboard navigation; history is a named group containing the Status history list or empty-state region. Uses token styling in dark (default), light and high_contrast. Examples: runtime-with-transition maps state and lastTransitionAt to one actor-free event, runtime-without-transition maps null to [], and realtime-configuration and postgres-table-detail omit history. Optional labels?: Partial<ResourceDetailLabels> overrides overview, activity, settings and sections (all strings). Unset keys use I18nProvider (en/es); no provider keeps English. Only the tabs and tablist are localized by this template; fixtures and other section text are unchanged. readOnly keeps only the localized overview tab. See the Catalog labels live preview. ConsoleShell retains sample frame defaults unless explicit shell props are supplied, as in the examples.',
   layout: 'SidebarLayout + Page',
   blocks: [
     'app-sidebar',

package/src/resource-gallery/Page.tsx

@@ -1,3 +1,4 @@
+import { useI18n } from '@gntik-ai/ui';
 import {
   DataTable,
   NoResultsEmpty,
@@ -43,10 +44,11 @@ export default function ResourceGalleryPage({
   onAction,
   shell,
 }: Partial<ResourceGalleryProps>) {
+  const { locale } = useI18n();
   const [items, setItems] = useState<readonly ResourceCard[]>(initialItems);
   const [view, setView] = useState<GalleryView>(defaultView);
   const [query, setQuery] = useState('');
-  const visible = searchResources(items, query);
+  const visible = searchResources(items, query, locale);
 
   const handleAction = (action: ResourceAction, item: ResourceCard) => {
     if (onAction) onAction(action, item);