Platform-wide UI consistency: theme tokens, sidebar indicators, inline search, header styling, transition animations

ROADMAP.md

@@ -781,6 +781,45 @@ The `FlowDesigner` is a canvas-based flow editor that bridges the gap between th
 - [x] `exportOptions` schema reconciliation: Zod validator updated to accept both spec `string[]` format and ObjectUI object format via `z.union()`. ListView normalizes string[] to `{ formats }` at render time.
 - [x] `pagination.pageSizeOptions` backend integration: Page size selector is now a controlled component that dynamically updates `effectivePageSize`, triggering data re-fetch. `onPageSizeChange` callback fires on selection. Full test coverage for selector rendering, option enumeration, and data reload.
 
+### P2.7 Platform UI Consistency & Interaction Optimization ✅
+
+> All items from the UI consistency optimization (Issue #749) have been implemented.
+
+**Global Theme & Design Tokens:**
+- [x] Hardcoded gray colors in `GridField.tsx`, `ReportRenderer.tsx`, and `ObjectGrid.tsx` replaced with theme tokens (`text-muted-foreground`, `bg-muted`, `border-border`, `border-foreground`)
+- [x] Global font-family (`Inter`, ui-sans-serif, system-ui) injected in `index.css` `:root`
+- [x] `--config-panel-width: 280px` CSS custom property added for unified config panel sizing
+- [x] Border radius standardized to `rounded-lg` across report/grid components
+- [x] `transition-colors duration-150` added to all interactive elements (toolbar buttons, tab bar, sidebar menu buttons)
+- [x] `LayoutRenderer.tsx` outer shell `bg-slate-50/50 dark:bg-zinc-950` replaced with `bg-background` theme token
+
+**Sidebar Navigation:**
+- [x] `SidebarMenuButton` active state enhanced with 3px left indicator bar via `before:` pseudo-element
+- [x] `SidebarMenuButton` transition expanded to include `color, background-color` with `duration-150`
+- [x] `SidebarGroupLabel` visual separator added (`border-t border-border/30 pt-3 mt-2`)
+- [x] Collapsed-mode tooltip support in `SidebarNav` via `tooltip={item.title}` prop
+- [ ] `LayoutRenderer.tsx` hand-written sidebar → `SidebarNav` unification (deferred: requires extending SidebarNav to support nested menus, logo, version footer)
+
+**ListView Toolbar:**
+- [x] Search changed from expandable button to always-visible inline `<Input>` (`w-48`)
+- [x] Activated state (`bg-primary/10 border border-primary/20`) added to Filter/Sort/Group/Color buttons when active
+- [x] Toolbar overflow improved with `overflow-x-auto` for responsive behavior
+- [x] `transition-colors duration-150` added to all toolbar buttons
+
+**ObjectGrid Cell Renderers:**
+- [x] `formatRelativeDate()` function added for relative time display ("Today", "2 days ago", "Yesterday")
+- [x] DataTable/VirtualGrid header styling unified: `text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70 bg-muted/30`
+- [x] Remaining hardcoded gray colors in ObjectGrid loading spinner and status badge fallback replaced with theme tokens
+
+**ConfigPanelRenderer:**
+- [x] `<Separator>` added between sections for visual clarity
+- [x] Panel width uses `--config-panel-width` CSS custom property
+
+**View Tab Bar:**
+- [x] Tab spacing tightened (`gap-0.5`, `px-3 py-1.5`)
+- [x] Active tab indicator changed to bottom border (`border-b-2 border-primary font-medium text-foreground`)
+- [x] `transition-colors duration-150` added to tab buttons
+
 ### P2.5 PWA & Offline (Real Sync)
 
 - [ ] Background sync queue → real server sync (replace simulation)

packages/components/src/custom/config-panel-renderer.tsx

@@ -12,6 +12,7 @@ import { X, Save, RotateCcw, ChevronRight } from 'lucide-react';
 
 import { cn } from '../lib/utils';
 import { Button } from '../ui/button';
+import { Separator } from '../ui/separator';
 import { SectionHeader } from './section-header';
 import { ConfigFieldRenderer } from './config-field-renderer';
 import type { ConfigPanelSchema } from '../types/config-panel';
@@ -128,7 +129,7 @@ export function ConfigPanelRenderer({
  aria-label={ariaLabel}
  tabIndex={tabIndex}
  className={cn(
- 'absolute inset-y-0 right-0 w-full sm:w-72 lg:w-80 sm:relative border-l bg-background flex flex-col shrink-0 z-20',
+ 'absolute inset-y-0 right-0 w-full sm:w-[var(--config-panel-width,280px)] sm:relative border-l bg-background flex flex-col shrink-0 z-20',
  className,
  )}
  >
@@ -167,13 +168,14 @@ export function ConfigPanelRenderer({
 
  {/* ── Scrollable sections ────────────────────────────── */}
  <div className="flex-1 overflow-auto px-4 pb-4">
- {schema.sections.map((section) => {
+ {schema.sections.map((section, sectionIdx) => {
  if (section.visibleWhen && !section.visibleWhen(draft)) return null;
 
  const sectionCollapsed = isCollapsed(section.key, section.defaultCollapsed);
 
  return (
  <div key={section.key} data-testid={`config-section-${section.key}`}>
+ {sectionIdx > 0 && <Separator className="my-1" />}
  <SectionHeader
  title={section.title}
  collapsible={section.collapsible}

packages/components/src/index.css

@@ -74,11 +74,15 @@
 
  --radius: 0.5rem;
 
+ --config-panel-width: 280px;
+
  --chart-1: 12 76% 61%;
  --chart-2: 173 58% 39%;
  --chart-3: 197 37% 24%;
  --chart-4: 43 74% 66%;
  --chart-5: 27 87% 67%;
+
+ font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
 }
 
 .dark {

packages/components/src/renderers/complex/data-table.tsx

@@ -624,18 +624,18 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
  <div className="rounded-md border flex-1 min-h-0 overflow-auto relative bg-background [-webkit-overflow-scrolling:touch] shadow-[inset_-8px_0_8px_-8px_rgba(0,0,0,0.08)]">
  <Table>
  {caption && <TableCaption>{caption}</TableCaption>}
- <TableHeader className="sticky top-0 bg-background z-10 shadow-sm">
+ <TableHeader className="sticky top-0 bg-muted/30 z-10">
  <TableRow>
  {selectable && (
- <TableHead className={cn("w-12 bg-background", frozenColumns > 0 && "sticky left-0 z-20")}>
+ <TableHead className={cn("w-12 bg-muted/30", frozenColumns > 0 && "sticky left-0 z-20")}>
  <Checkbox
  checked={allPageRowsSelected ? true : somePageRowsSelected ? 'indeterminate' : false}
  onCheckedChange={handleSelectAll}
  />
  </TableHead>
  )}
  {showRowNumbers && (
- <TableHead className={cn("w-12 bg-background text-center", frozenColumns > 0 && "sticky z-20")} style={frozenColumns > 0 ? { left: selectable ? 48 : 0 } : undefined}>
+ <TableHead className={cn("w-12 bg-muted/30 text-center", frozenColumns > 0 && "sticky z-20")} style={frozenColumns > 0 ? { left: selectable ? 48 : 0 } : undefined}>
  <span className="text-xs text-muted-foreground">#</span>
  </TableHead>
  )}
@@ -664,7 +664,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
  isDragOver && 'border-l-2 border-primary',
  col.align === 'right' && 'text-right',
  col.align === 'center' && 'text-center',
- 'relative group bg-background',
+ 'relative group bg-muted/30',
  isFrozen && 'sticky z-20',
  isFrozen && index === frozenColumns - 1 && 'border-r-2 border-border shadow-[2px_0_4px_-2px_rgba(0,0,0,0.1)]',
  )}
@@ -692,7 +692,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
  {col.headerIcon && (
  <span className="text-muted-foreground flex-shrink-0">{col.headerIcon}</span>
  )}
- <span>{col.header}</span>
+ <span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70">{col.header}</span>
  {sortable && col.sortable !== false && getSortIcon(col.accessorKey)}
  </div>
  {resizableColumns && col.resizable !== false && (
@@ -707,7 +707,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
  );
  })}
  {rowActions && (
- <TableHead className="w-24 text-right bg-background">Actions</TableHead>
+ <TableHead className="w-24 text-right bg-muted/30">Actions</TableHead>
  )}
  </TableRow>
  </TableHeader>

packages/fields/src/index.tsx

@@ -104,6 +104,32 @@ export function formatPercent(value: number, precision: number = 0): string {
  return `${displayValue.toFixed(precision)}%`;
 }
 
+/**
+ * Format date as relative time (e.g., "2 days ago", "Today", "Overdue 3d")
+ */
+export function formatRelativeDate(value: string | Date): string {
+ if (!value) return '-';
+ const date = typeof value === 'string' ? new Date(value) : value;
+ if (isNaN(date.getTime())) return '-';
+
+ const now = new Date();
+ const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+ const startOfDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+ const diffMs = startOfDate.getTime() - startOfToday.getTime();
+ const diffDays = Math.round(diffMs / (1000 * 60 * 60 * 24));
+
+ if (diffDays === 0) return 'Today';
+ if (diffDays === 1) return 'Tomorrow';
+ if (diffDays === -1) return 'Yesterday';
+ if (diffDays < -1) {
+ const absDays = Math.abs(diffDays);
+ if (absDays <= 30) return `${absDays} days ago`;
+ return formatDate(date);
+ }
+ if (diffDays > 1 && diffDays <= 30) return `In ${diffDays} days`;
+ return formatDate(date);
+}
+
 /**
  * Format date value
  */
@@ -119,6 +145,10 @@ export function formatDate(value: string | Date, style?: string): string {
  const year = String(date.getFullYear()).slice(-2);
  return `${month} ${day}, '${year}`;
  }
+
+ if (style === 'relative') {
+ return formatRelativeDate(date);
+ }
 
  // Default format: MMM DD, YYYY
  return date.toLocaleDateString('en-US', {

packages/fields/src/widgets/GridField.tsx

@@ -12,39 +12,39 @@ export function GridField({ value, field, readonly, ...props }: FieldWidgetProps
  const columns = gridField?.columns || [];
 
  if (!value || !Array.isArray(value)) {
- return <span className="text-sm text-gray-500">-</span>;
+ return <span className="text-sm text-muted-foreground">-</span>;
  }
 
  if (readonly) {
  return (
  <div className={cn("text-sm", props.className)}>
- <span className="text-gray-700">{value.length} rows</span>
+ <span className="text-foreground">{value.length} rows</span>
  </div>
  );
  }
 
  // Simple read-only table view
  return (
- <div className={cn("border border-gray-200 rounded-md overflow-hidden", props.className)}>
+ <div className={cn("border border-border rounded-lg overflow-hidden", props.className)}>
  <div className="overflow-auto max-h-60">
  <table className="w-full text-sm">
- <thead className="bg-gray-50 border-b border-gray-200">
+ <thead className="bg-muted border-b border-border">
  <tr>
  {columns.map((col: any, idx: number) => (
  <th
  key={idx}
- className="px-3 py-2 text-left text-xs font-medium text-gray-700"
+ className="px-3 py-2 text-left text-xs font-medium text-muted-foreground"
  >
  {col.label || col.name}
  </th>
  ))}
  </tr>
  </thead>
- <tbody className="divide-y divide-gray-200">
+ <tbody className="divide-y divide-border">
  {value.slice(0, 5).map((row: any, rowIdx: number) => (
- <tr key={rowIdx} className="hover:bg-gray-50">
+ <tr key={rowIdx} className="hover:bg-muted/50 transition-colors">
  {columns.map((col: any, colIdx: number) => (
- <td key={colIdx} className="px-3 py-2 text-gray-900">
+ <td key={colIdx} className="px-3 py-2 text-foreground">
  {row[col.name] != null ? String(row[col.name]) : '-'}
  </td>
  ))}
@@ -54,7 +54,7 @@ export function GridField({ value, field, readonly, ...props }: FieldWidgetProps
  </table>
  </div>
  {value.length > 5 && (
- <div className="bg-gray-50 px-3 py-2 text-xs text-gray-500 border-t border-gray-200">
+ <div className="bg-muted px-3 py-2 text-xs text-muted-foreground border-t border-border">
  Showing 5 of {value.length} rows
  </div>
  )}

packages/layout/src/SidebarNav.tsx

@@ -36,7 +36,7 @@ export function SidebarNav({ items, title = "Application", className, collapsibl
  <SidebarMenu>
  {items.map((item) => (
  <SidebarMenuItem key={item.href}>
- <SidebarMenuButton asChild isActive={location.pathname === item.href}>
+ <SidebarMenuButton asChild isActive={location.pathname === item.href} tooltip={item.title}>
  <NavLink to={item.href}>
  {item.icon && <item.icon />}
  <span>{item.title}</span>

packages/plugin-grid/src/ObjectGrid.tsx

@@ -708,8 +708,8 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
  }
  return (
  <div className="p-4 sm:p-8 text-center">
- <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
- <p className="mt-2 text-sm text-gray-600">Loading grid...</p>
+ <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-foreground"></div>
+ <p className="mt-2 text-sm text-muted-foreground">Loading grid...</p>
  </div>
  );
  }
@@ -909,7 +909,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
  return 'bg-indigo-100 text-indigo-800 border-indigo-300';
  if (v.includes('prospecting') || v.includes('new') || v.includes('open'))
  return 'bg-purple-100 text-purple-800 border-purple-300';
- return 'bg-gray-100 text-gray-800 border-gray-300';
+ return 'bg-muted text-muted-foreground border-border';
  };
 
  // Left border color for card accent based on stage

packages/plugin-grid/src/VirtualGrid.tsx

@@ -84,7 +84,7 @@ export const VirtualGrid: React.FC<VirtualGridProps> = ({
  <div className={className}>
  {/* Header */}
  <div
- className={`grid border-b sticky top-0 bg-background z-10 ${headerClassName}`}
+ className={`grid border-b sticky top-0 bg-muted/30 z-10 ${headerClassName}`}
  style={{
  gridTemplateColumns: columns
  .map((col) => col.width || '1fr')
@@ -94,7 +94,7 @@ export const VirtualGrid: React.FC<VirtualGridProps> = ({
  {columns.map((column, index) => (
  <div
  key={index}
- className={`px-4 py-2 font-semibold text-sm ${
+ className={`px-4 py-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70 ${
  column.align === 'center'
  ? 'text-center'
  : column.align === 'right'