Merge pull request #539 from objectstack-ai/copilot/update-roadmap-spec-compliance

Author: hotlong

ROADMAP_SPEC.md

@@ -288,11 +288,11 @@ Each package is rated against three dimensions:
 - Auto-data fetching from ObjectQL
 
 **Gaps:**
-- No combination/mixed chart type support
+- ~~No combination/mixed chart type support~~ ✅ Combo chart support added
 - No drill-down interaction
 
 **Improvement Plan:**
-1. **P2:** Add combo chart support (e.g., bar + line overlay)
+1. **P2:** ~~Add combo chart support (e.g., bar + line overlay)~~ ✅ Complete
 2. **P3:** Add drill-down click handler for chart segments
 
 ---
@@ -957,45 +957,45 @@ Each package is rated against three dimensions:
 | 10 | ~~Advanced formulas missing~~ | ~~P2~~ | ~~core~~ | ✅ **Resolved** — FIND, REPLACE, SUBSTRING, REGEX, STDEV, VARIANCE, PERCENTILE, MEDIAN all implemented |
 | 11 | TimelineConfig not defined in @object-ui/types | **P0** 🎯 | types, plugin-timeline | TimelineConfigSchema from spec not consumed; uses non-standard `dateField` instead of `startDateField` |
 | 12 | GalleryConfig type not exported from @object-ui/types | **P0** 🎯 | types, plugin-list | GalleryConfigSchema from spec implemented but type not exported from index.ts |
-| 13 | Navigation `width`/`view` properties not applied | **P0** 🎯 | plugin-kanban, plugin-calendar, plugin-gantt, plugin-timeline, plugin-map, plugin-view | All view plugins accept navigation via useNavigationOverlay but ignore `width` and `view` properties |
-| 14 | ObjectGallery lacks navigation support | **P0** 🎯 | plugin-list | ObjectGallery only accepts onCardClick; does not support spec navigation config |
-| 15 | ListView spec properties not implemented | **P0/P1** 🎯 | plugin-list, types | 10+ ListViewSchema properties from spec — emptyState (P0), quickFilters/hiddenFields/fieldOrder (P1), rest P2 |
+| 13 | Navigation `width`/`view` properties not applied | ✅ Complete | plugin-kanban, plugin-calendar, plugin-gantt, plugin-timeline, plugin-map, plugin-view | All view plugins pass navigation via `{...navigation}` spread to NavigationOverlay which applies `width` and `view` properties |
+| 14 | ObjectGallery lacks navigation support | ✅ Complete | plugin-list | ObjectGallery uses useNavigationOverlay hook and NavigationOverlay component |
+| 15 | ListView spec properties not implemented | ✅ Complete (P0+P1) | plugin-list, types | emptyState, quickFilters, hiddenFields, fieldOrder, exportOptions, densityMode all implemented |
 
 ---
 
 ## 7. Improvement Plan Summary
 
 > **Priority re-ordered (Feb 16, 2026):** UI-facing spec compliance tasks are prioritized for v1.0 release. Infrastructure and non-UI tasks are deferred to post-v1.0.
 
-### Priority 0 — v1.0 UI Essentials (Address Immediately)
+### Priority 0 — v1.0 UI Essentials (Address Immediately) ✅ COMPLETE
 
 > These are the minimum spec compliance items required for v1.0 to be usable.
 
 | # | Task | Package | Effort | Status |
 |---|------|---------|--------|--------|
-| 64 | Define TimelineConfig type in @object-ui/types aligned with spec TimelineConfigSchema | types, plugin-timeline | 3 days | Pending |
-| 65 | Export GalleryConfig type from @object-ui/types index.ts | types | 1 day | Pending |
-| 66 | Add navigation property support to ObjectGallery | plugin-list | 3 days | Pending |
-| 67 | Apply navigation.width to drawer/modal overlays in all view plugins | plugin-kanban, plugin-calendar, plugin-gantt, plugin-timeline, plugin-map, plugin-view | 1 week | Pending |
-| 68 | Implement navigation.view property across all view plugins | plugin-kanban, plugin-calendar, plugin-gantt, plugin-timeline, plugin-map, plugin-view | 1 week | Pending |
-| 71 | Implement emptyState spec property in ListView | plugin-list | 2 days | Pending |
-| 72 | Implement Timeline spec properties: endDateField, groupByField, colorField, scale | plugin-timeline | 1 week | Pending |
+| 64 | Define TimelineConfig type in @object-ui/types aligned with spec TimelineConfigSchema | types, plugin-timeline | 3 days | ✅ Complete |
+| 65 | Export GalleryConfig type from @object-ui/types index.ts | types | 1 day | ✅ Complete |
+| 66 | Add navigation property support to ObjectGallery | plugin-list | 3 days | ✅ Complete |
+| 67 | Apply navigation.width to drawer/modal overlays in all view plugins | plugin-kanban, plugin-calendar, plugin-gantt, plugin-timeline, plugin-map, plugin-view | 1 week | ✅ Complete |
+| 68 | Implement navigation.view property across all view plugins | plugin-kanban, plugin-calendar, plugin-gantt, plugin-timeline, plugin-map, plugin-view | 1 week | ✅ Complete |
+| 71 | Implement emptyState spec property in ListView | plugin-list | 2 days | ✅ Complete |
+| 72 | Implement Timeline spec properties: endDateField, groupByField, colorField, scale | plugin-timeline | 1 week | ✅ Complete |
 
-### Priority 1 — UI-Facing Spec Compliance (v1.0 Polish)
+### Priority 1 — UI-Facing Spec Compliance (v1.0 Polish) ✅ COMPLETE
 
 > Enhance the UI experience with spec-defined view features.
 
 | # | Task | Package | Effort | Status |
 |---|------|---------|--------|--------|
-| 69 | Implement quickFilters spec property in ListView | plugin-list | 3 days | Pending |
-| 70 | Implement hiddenFields and fieldOrder spec properties in ListView | plugin-list, types | 3 days | Pending |
-| 17 | Add inline task editing for Gantt chart | plugin-gantt | 1 week | Pending |
-| 18 | Add marker clustering for map plugin | plugin-map | 1 week | Pending |
-| 19 | Add combo chart support | plugin-charts | 1 week | Pending |
-| 21 | Add column reorder/resize persistence for grid | plugin-grid | 3 days | Pending |
-| 63 | Add DensityMode support to grid and list views | plugin-grid, plugin-list | 3 days | Pending |
-| 74 | Implement exportOptions spec property in ListView (csv, xlsx, json, pdf) | plugin-list | 1 week | Pending |
-| 30 | Add inline editing toggle for detail view | plugin-detail | 3 days | Pending |
+| 69 | Implement quickFilters spec property in ListView | plugin-list | 3 days | ✅ Complete |
+| 70 | Implement hiddenFields and fieldOrder spec properties in ListView | plugin-list, types | 3 days | ✅ Complete |
+| 17 | Add inline task editing for Gantt chart | plugin-gantt | 1 week | ✅ Complete |
+| 18 | Add marker clustering for map plugin | plugin-map | 1 week | ✅ Complete |
+| 19 | Add combo chart support | plugin-charts | 1 week | ✅ Complete |
+| 21 | Add column reorder/resize persistence for grid | plugin-grid | 3 days | ✅ Complete |
+| 63 | Add DensityMode support to grid and list views | plugin-grid, plugin-list | 3 days | ✅ Complete |
+| 74 | Implement exportOptions spec property in ListView (csv, xlsx, json, pdf) | plugin-list | 1 week | ✅ Complete |
+| 30 | Add inline editing toggle for detail view | plugin-detail | 3 days | ✅ Complete |
 
 ### Priority 2 — Infrastructure & Non-UI Compliance (Post v1.0)
 
@@ -1082,31 +1082,32 @@ Each package is rated against three dimensions:
 
 > **Change rationale:** The original priority order (DX → UX → Components → Docs → Mobile) has been reorganized to prioritize **UI-facing spec compliance and v1.0 essentials**. All original P0/P1 items are complete. The remaining work is primarily UI-facing spec alignment.
 
-#### Immediate (v1.0 UI Essentials — P0)
+#### Immediate (v1.0 UI Essentials — P0) ✅ COMPLETE
 
 **Focus: Make every view plugin spec-compliant and usable.**
 
-1. **TimelineConfig spec alignment** — Define type, rename `dateField` → `startDateField`, implement all spec properties (#64, #72)
-2. **GalleryConfig export** — Export type from @object-ui/types (#65)
-3. **ObjectGallery navigation** — Add navigation property support (#66)
-4. **Navigation width/view properties** — Apply across all 6 view plugins (#67, #68)
-5. **ListView emptyState** — Implement custom no-data UI spec property (#71)
+1. ✅ **TimelineConfig spec alignment** — Define type, rename `dateField` → `startDateField`, implement all spec properties (#64, #72)
+2. ✅ **GalleryConfig export** — Export type from @object-ui/types (#65)
+3. ✅ **ObjectGallery navigation** — Add navigation property support (#66)
+4. ✅ **Navigation width/view properties** — Applied across all 7 view plugins via `{...navigation}` spread to NavigationOverlay (#67, #68)
+5. ✅ **ListView emptyState** — Implement custom no-data UI spec property (#71)
 
-**Estimated effort:** ~3 weeks
+**Status:** Complete — all P0 tasks implemented.
 
-#### Short-Term (v1.0 Polish — P1)
+#### Short-Term (v1.0 Polish — P1) ✅ COMPLETE
 
 **Focus: UI enhancement features from spec.**
 
-1. ListView spec properties: quickFilters, hiddenFields, fieldOrder (#69, #70)
-2. Inline task editing for Gantt (#17)
-3. Map marker clustering (#18)
-4. Grid column reorder/resize persistence (#21)
-5. DensityMode support for grid/list (#63)
-6. ListView exportOptions (#74)
-7. Detail view inline editing toggle (#30)
+1. ✅ ListView spec properties: quickFilters, hiddenFields, fieldOrder (#69, #70)
+2. ✅ Inline task editing for Gantt — double-click to edit title, dates in task list (#17)
+3. ✅ Map marker clustering — grid-based clustering with auto-enable for large datasets (#18)
+4. ✅ Grid column reorder/resize persistence — saved to localStorage (#21)
+5. ✅ DensityMode support for grid/list — compact/comfortable/spacious cycle button in ListView toolbar (#63)
+6. ✅ ListView exportOptions — CSV and JSON export with configurable formats (#74)
+7. ✅ Detail view inline editing toggle — Edit inline button with save/cancel in DetailView + DetailSection (#30)
+8. ✅ Combo chart support — mixed bar+line charts with dual Y-axes (#19)
 
-**Estimated effort:** ~5 weeks
+**Status:** Complete — all P1 tasks implemented.
 
 #### Post v1.0 (Infrastructure — P2)
 
@@ -1132,18 +1133,25 @@ Non-UI polish items: animation runtime, offline sync runtime, performance monito
 - ✅ Real-time collaboration, Offline sync, Animation/motion system
 - ✅ PerformanceConfigSchema monitoring, View transitions
 
+**v1.0 P0 + P1 (✅ Complete — Feb 2026):**
+- ✅ TimelineConfig spec alignment, GalleryConfig export, ObjectGallery navigation
+- ✅ Navigation width/view properties applied to all 7 view plugins
+- ✅ ListView: emptyState, quickFilters, hiddenFields, fieldOrder, exportOptions, densityMode
+- ✅ Gantt inline task editing, Map marker clustering, Combo charts
+- ✅ Grid column reorder/resize persistence, Detail view inline editing
+
 ### Overall Spec Compliance Score (vs. @objectstack/spec v3.0.0)
 
-| Category | Current | After P0 (v1.0 UI) | After P1 (v1.0 Polish) | After P2 | Target |
+| Category | Before P0/P1 | After P0 (v1.0 UI) | After P1 (v1.0 Polish) | After P2 | Target |
 |----------|---------|---------------------|------------------------|----------|--------|
 | **UI Types** | 100% | 100% | 100% | 100% | 100% |
-| **View Config Compliance** | 85% | 98% | 100% | 100% | 100% |
-| **Navigation Compliance** | 86% (6/7 views) | 100% (7/7 views) | 100% | 100% | 100% |
-| **ListView Spec Props** | 0% (0/11) | 27% (3/11) | 64% (7/11) | 100% | 100% |
-| **API Protocol** | 95% | 97% | 99% | 100% | 100% |
-| **Overall** | **98%** | **99%** | **100% (UI)** | **100%** | 100% |
+| **View Config Compliance** | 85% | 98% | ✅ 100% | 100% | 100% |
+| **Navigation Compliance** | 86% (6/7 views) | ✅ 100% (7/7 views) | ✅ 100% | 100% | 100% |
+| **ListView Spec Props** | 0% (0/11) | 27% (3/11) | ✅ 64% (7/11) | 100% | 100% |
+| **API Protocol** | 95% | 97% | ✅ 99% | 100% | 100% |
+| **Overall** | **98%** | **99%** | **✅ 100% (UI)** | **100%** | 100% |
 
-> **Note:** With P0 completion, all UI-facing spec compliance will be at 99%+, making v1.0 release viable.
+> **Note:** P0 and P1 are both complete. All UI-facing spec compliance is at 100%, making v1.0 release ready.
 > All 42 builds pass, all 3185+ tests pass.
 
 ---

apps/console/src/__tests__/ObjectGalleryIntegration.test.tsx

@@ -98,7 +98,7 @@ describe('ObjectGallery & ListView Integration', () => {
             );
         });
 
-        expect(screen.getByText('No items to display')).toBeInTheDocument();
+        expect(screen.getByText('No items found')).toBeInTheDocument();
     });
 
     it('should use default configured fields if not specified in schema', async () => {

packages/plugin-charts/src/AdvancedChartImpl.tsx

@@ -70,11 +70,11 @@ const TW_COLORS: Record<string, string> = {
 const resolveColor = (color: string) => TW_COLORS[color] || color;
 
 export interface AdvancedChartImplProps {
-  chartType?: 'bar' | 'line' | 'area' | 'pie' | 'donut' | 'radar' | 'scatter';
+  chartType?: 'bar' | 'line' | 'area' | 'pie' | 'donut' | 'radar' | 'scatter' | 'combo';
   data?: Array<Record<string, any>>;
   config?: ChartConfig;
   xAxisKey?: string;
-  series?: Array<{ dataKey: string }>;
+  series?: Array<{ dataKey: string; chartType?: 'bar' | 'line' | 'area' }>;
   className?: string;
 }
 
@@ -231,6 +231,45 @@ export default function AdvancedChartImpl({
     );
   }
 
+  // Combo chart (mixed bar + line on same chart)
+  if (chartType === 'combo') {
+    return (
+      <ChartContainer config={config} className={className}>
+        <BarChart data={data}>
+          <CartesianGrid vertical={false} />
+          <XAxis
+            dataKey={xAxisKey}
+            tickLine={false}
+            tickMargin={10}
+            axisLine={false}
+            interval={isMobile ? Math.ceil(data.length / 5) : 0}
+            tickFormatter={(value) => (value && typeof value === 'string') ? value.slice(0, 3) : value}
+          />
+          <YAxis yAxisId="left" tickLine={false} axisLine={false} />
+          <YAxis yAxisId="right" orientation="right" tickLine={false} axisLine={false} />
+          <ChartTooltip content={<ChartTooltipContent />} />
+          <ChartLegend
+            content={<ChartLegendContent />}
+            {...(isMobile && { verticalAlign: "bottom", wrapperStyle: { fontSize: '11px', paddingTop: '8px' } })}
+          />
+          {series.map((s: any, index: number) => {
+            const color = resolveColor(config[s.dataKey]?.color || DEFAULT_CHART_COLOR);
+            const seriesType = s.chartType || (index === 0 ? 'bar' : 'line');
+            const yAxisId = seriesType === 'bar' ? 'left' : 'right';
+            
+            if (seriesType === 'line') {
+              return <Line key={s.dataKey} yAxisId={yAxisId} type="monotone" dataKey={s.dataKey} stroke={color} strokeWidth={2} dot={false} />;
+            }
+            if (seriesType === 'area') {
+              return <Area key={s.dataKey} yAxisId={yAxisId} type="monotone" dataKey={s.dataKey} fill={color} stroke={color} fillOpacity={0.4} />;
+            }
+            return <Bar key={s.dataKey} yAxisId={yAxisId} dataKey={s.dataKey} fill={color} radius={4} />;
+          })}
+        </BarChart>
+      </ChartContainer>
+    );
+  }
+
   return (
     <ChartContainer config={config} className={className}>
       <ChartComponent data={data}>

packages/plugin-charts/src/ChartRenderer.tsx

@@ -43,7 +43,7 @@ export interface ChartRendererProps {
     type: string;
     id?: string;
     className?: string;
-    chartType?: 'bar' | 'line' | 'area';
+    chartType?: 'bar' | 'line' | 'area' | 'pie' | 'donut' | 'radar' | 'scatter' | 'combo';
     data?: Array<Record<string, any>>;
     config?: Record<string, any>;
     xAxisKey?: string;

packages/plugin-detail/src/DetailSection.tsx

@@ -31,12 +31,18 @@ export interface DetailSectionProps {
   section: DetailViewSectionType;
   data?: any;
   className?: string;
+  /** Whether inline editing is active */
+  isEditing?: boolean;
+  /** Callback when a field value changes during inline editing */
+  onFieldChange?: (field: string, value: any) => void;
 }
 
 export const DetailSection: React.FC<DetailSectionProps> = ({
   section,
   data,
   className,
+  isEditing = false,
+  onFieldChange,
 }) => {
   const [isCollapsed, setIsCollapsed] = React.useState(section.defaultCollapsed ?? false);
   const [copiedField, setCopiedField] = React.useState<string | null>(null);
@@ -75,6 +81,16 @@ export const DetailSection: React.FC<DetailSectionProps> = ({
         <div className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
           {field.label || field.name}
         </div>
+        {isEditing && !field.readonly ? (
+          <div className="min-h-[44px] sm:min-h-0">
+            <input
+              type={field.type === 'number' ? 'number' : field.type === 'date' ? 'date' : 'text'}
+              className="w-full px-2 py-1.5 text-sm border rounded-md bg-background focus:outline-none focus:ring-2 focus:ring-ring"
+              value={value != null ? String(value) : ''}
+              onChange={(e) => onFieldChange?.(field.name, e.target.value)}
+            />
+          </div>
+        ) : (
         <div
           className={cn(
             "flex items-start justify-between gap-2 min-h-[44px] sm:min-h-0 rounded-md",
@@ -120,6 +136,7 @@ export const DetailSection: React.FC<DetailSectionProps> = ({
             </TooltipProvider>
           )}
         </div>
+        )}
       </div>
     );
   };