Deploy AIOS web (React glide grid + FastAPI slice)

RELEASES.json

@@ -1,5 +1,5 @@
 {
- "current": "07b629a",
+ "current": "80b80b9",
  "releases": [
   {
    "version": "v53",

VERSION

@@ -1 +1 @@
-07b629a
+80b80b9

platform/aios_grid.py

@@ -1395,7 +1395,7 @@ def _clean_rhs(raw, valid_keys):
 #: one lane's fence, so they ship in one change, and whether a mode may be CREATED is a separate
 #: question answered by `CREATABLE_MODES` / `HELD_MODES`.
 DISPLAY_MODES = {'grid', 'list', 'calendar', 'kanban', 'map', 'dashboard', 'chart',
-                 'timeseries', 'catalog', 'swipe', 'form', 'script'}
+                 'timeseries', 'catalog', 'swipe', 'form', 'script', 'gallery', 'timeline'}
 
 #: W37-T20 (C2) — the cap on `display.script.id`. Script-view ids are minted server-side as
 #: `'sv_' + secrets.token_urlsafe(9)` (`routes_script_views.py::create_script_view`), so ~15 chars;

web/src/customer-grid/CustomerGrid.tsx

@@ -136,6 +136,7 @@ import { MapView } from "./MapView";
 import type { RouteSourceView } from "./MapView";
 /* ═══ W18-C CATALOG ═══ (owner item 4, contract C6) */
 import { CatalogView } from "./CatalogView";
+import { GalleryView, TimelineView } from "./GalleryTimelineViews";
 import { CATALOG_CODE_FIELD } from "./catalogData";
 import type { CatalogSpec } from "./types";
 /* ═══ end W18-C CATALOG ═══ */
@@ -6889,6 +6890,8 @@ function CustomerGridSurface({
   const modeDataRows = useMemo(() => {
     if (
       displayMode !== "calendar" &&
+      displayMode !== "gallery" &&
+      displayMode !== "timeline" &&
       displayMode !== "kanban" &&
       displayMode !== "map" &&
       displayMode !== "chart" &&
@@ -8520,6 +8523,30 @@ function CustomerGridSurface({
                 This table has no date field to place records by.
               </div>
             ))}
+          {displayMode === "gallery" && (
+            <GalleryView
+              rows={modeDataRows}
+              fields={fields}
+              visibleKeys={visibleKeys}
+              titleKey={lockedKey}
+              onOpen={setDetailPid}
+            />
+          )}
+          {displayMode === "timeline" &&
+            (calendarField ? (
+              <TimelineView
+                rows={modeDataRows}
+                fields={fields}
+                visibleKeys={visibleKeys}
+                field={calendarField}
+                titleKey={lockedKey}
+                onOpen={setDetailPid}
+              />
+            ) : (
+              <div className="cg-mode-empty">
+                This table has no date field to place records on a timeline.
+              </div>
+            ))}
           {displayMode === "kanban" &&
             (kanbanField ? (
               <KanbanView

web/src/customer-grid/GalleryTimelineViews.css

@@ -0,0 +1,206 @@
+.cg-gallery,
+.cg-timeline {
+  padding: 16px;
+}
+
+.cg-gallery-bar,
+.cg-timeline-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 32px;
+  margin-bottom: 12px;
+  color: var(--lp-muted);
+  font-size: var(--lp-fs-2xs);
+}
+
+.cg-gallery-label,
+.cg-timeline-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--lp-ink);
+  font-weight: 600;
+}
+
+.cg-gallery-count,
+.cg-timeline-count {
+  font-variant-numeric: tabular-nums;
+}
+
+.cg-timeline-missing {
+  margin-left: auto;
+  color: var(--lp-yellow-deep);
+  background: var(--lp-yellow-tint);
+  border-radius: var(--lp-r-pill);
+  padding: 3px 8px;
+  font-variant-numeric: tabular-nums;
+}
+
+.cg-gallery-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
+  gap: 10px;
+}
+
+.cg-gallery-card,
+.cg-timeline-card {
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.cg-gallery-card {
+  display: grid;
+  grid-template-columns: 36px minmax(0, 1fr);
+  gap: 10px;
+  align-items: start;
+  min-height: 108px;
+  padding: 12px;
+  border: 1px solid var(--lp-line);
+  background: var(--lp-surface);
+  color: var(--lp-ink);
+  border-radius: var(--lp-r-md);
+  transition: transform 150ms ease-out, border-color 150ms ease-out, background 150ms ease-out;
+}
+
+.cg-gallery-mark {
+  display: grid;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  border-radius: var(--lp-r-sm);
+  color: var(--lp-blue-deep);
+  background: var(--lp-blue-tint);
+}
+
+.cg-gallery-copy,
+.cg-timeline-card {
+  display: grid;
+  gap: 7px;
+  min-width: 0;
+}
+
+.cg-gallery-copy > strong,
+.cg-timeline-card > strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--lp-fs-sm);
+  font-weight: 600;
+}
+
+.cg-gallery-detail,
+.cg-timeline-detail {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  color: var(--lp-muted);
+  font-size: var(--lp-fs-3xs);
+}
+
+.cg-gallery-detail b,
+.cg-timeline-detail b {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--lp-ink);
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+
+.cg-timeline-list {
+  display: grid;
+  gap: 18px;
+}
+
+.cg-timeline-month {
+  display: grid;
+  gap: 8px;
+}
+
+.cg-timeline-month > h3 {
+  margin: 0;
+  color: var(--lp-muted);
+  font-size: var(--lp-fs-2xs);
+  font-weight: 600;
+}
+
+.cg-timeline-event {
+  display: grid;
+  grid-template-columns: 72px minmax(0, 1fr);
+  gap: 12px;
+  align-items: stretch;
+}
+
+.cg-timeline-date {
+  position: relative;
+  padding-top: 12px;
+  color: var(--lp-muted);
+  font-size: var(--lp-fs-3xs);
+  text-align: right;
+}
+
+.cg-timeline-date::after {
+  position: absolute;
+  top: 14px;
+  right: -18px;
+  width: 8px;
+  height: 8px;
+  border-radius: var(--lp-r-pill);
+  background: var(--lp-yellow-deep);
+  content: "";
+}
+
+.cg-timeline-card {
+  position: relative;
+  padding: 11px 12px;
+  border: 1px solid var(--lp-line);
+  background: var(--lp-surface);
+  color: var(--lp-ink);
+  border-radius: var(--lp-r-md);
+  transition: transform 150ms ease-out, border-color 150ms ease-out, background 150ms ease-out;
+}
+
+.cg-timeline-card::before {
+  position: absolute;
+  top: -9px;
+  bottom: -9px;
+  left: -17px;
+  width: 1px;
+  background: var(--lp-line);
+  content: "";
+}
+
+.cg-gallery-card:focus-visible,
+.cg-timeline-card:focus-visible {
+  outline: 2px solid var(--lp-blue-deep);
+  outline-offset: 2px;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .cg-gallery-card:hover,
+  .cg-timeline-card:hover {
+    border-color: var(--lp-blue-deep);
+    background: var(--lp-surface-2);
+    transform: translateY(-1px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cg-gallery-card,
+  .cg-timeline-card {
+    transition: none;
+  }
+}
+
+@media (max-width: 620px) {
+  .cg-timeline-event {
+    grid-template-columns: 58px minmax(0, 1fr);
+    gap: 10px;
+  }
+}

web/src/customer-grid/GalleryTimelineViews.tsx

@@ -0,0 +1,176 @@
+import { memo, useMemo } from "react";
+
+import { NAV_MINIMIZE_EVENT, signal } from "../apiContract";
+import { formatDisplay } from "./display";
+import { ModeIcon } from "./icons";
+import type { Field, Row } from "./types";
+import "./GalleryTimelineViews.css";
+
+function visibleDetailFields(fields: Field[], visibleKeys: string[], excluded: string[]) {
+  const byKey = new Map(fields.map((field) => [field.key, field]));
+  return visibleKeys
+    .filter((key) => !excluded.includes(key))
+    .map((key) => byKey.get(key))
+    .filter((field): field is Field => !!field)
+    .slice(0, 3);
+}
+
+function titleFor(row: Row, titleKey: string) {
+  const value = String(row[titleKey] ?? "").trim();
+  return value || "Untitled record";
+}
+
+function openRecord(pid: number, detail: number, onOpen: (pid: number) => void) {
+  if (detail <= 1) signal(NAV_MINIMIZE_EVENT);
+  onOpen(pid);
+}
+
+/** A quiet card arrangement over the exact filtered rows the Grid would paint. */
+export const GalleryView = memo(function GalleryView({
+  rows,
+  fields,
+  visibleKeys,
+  titleKey,
+  onOpen,
+}: {
+  rows: Row[];
+  fields: Field[];
+  visibleKeys: string[];
+  titleKey: string;
+  onOpen: (pid: number) => void;
+}) {
+  const details = useMemo(
+    () => visibleDetailFields(fields, visibleKeys, [titleKey]),
+    [fields, visibleKeys, titleKey]
+  );
+
+  if (!rows.length) return <div className="cg-mode-empty">No records match this view.</div>;
+
+  return (
+    <section className="cg-gallery" aria-label="Gallery">
+      <div className="cg-gallery-bar">
+        <span className="cg-gallery-label"><ModeIcon mode="gallery" /> Gallery</span>
+        <span className="cg-gallery-count">{rows.length.toLocaleString()} records</span>
+      </div>
+      <div className="cg-gallery-grid">
+        {rows.map((row) => {
+          const title = titleFor(row, titleKey);
+          return (
+            <button
+              type="button"
+              className="cg-gallery-card"
+              key={row.pid}
+              onClick={(event) => openRecord(row.pid, event.detail, onOpen)}
+              aria-label={`Open ${title}`}
+            >
+              <span className="cg-gallery-mark" aria-hidden><ModeIcon mode="gallery" /></span>
+              <span className="cg-gallery-copy">
+                <strong>{title}</strong>
+                {details.map((field) => (
+                  <span className="cg-gallery-detail" key={field.key}>
+                    <span>{field.label}</span>
+                    <b>{formatDisplay(field, row[field.key])}</b>
+                  </span>
+                ))}
+              </span>
+            </button>
+          );
+        })}
+      </div>
+    </section>
+  );
+});
+
+type TimelineEvent = { row: Row; day: string; title: string };
+
+function monthLabel(day: string) {
+  return new Intl.DateTimeFormat(undefined, { month: "long", year: "numeric", timeZone: "UTC" })
+    .format(new Date(`${day.slice(0, 7)}-01T00:00:00Z`));
+}
+
+function dayLabel(day: string) {
+  return new Intl.DateTimeFormat(undefined, { weekday: "short", day: "numeric", timeZone: "UTC" })
+    .format(new Date(`${day}T00:00:00Z`));
+}
+
+/** A chronological projection. It never writes dates: editing remains in the normal record drawer. */
+export const TimelineView = memo(function TimelineView({
+  rows,
+  fields,
+  visibleKeys,
+  field,
+  titleKey,
+  onOpen,
+}: {
+  rows: Row[];
+  fields: Field[];
+  visibleKeys: string[];
+  field: Field;
+  titleKey: string;
+  onOpen: (pid: number) => void;
+}) {
+  const events = useMemo<TimelineEvent[]>(
+    () => rows
+      .map((row) => ({ row, day: String(row[field.key] ?? "").slice(0, 10), title: titleFor(row, titleKey) }))
+      .filter((event) => /^\d{4}-\d{2}-\d{2}$/.test(event.day))
+      .sort((a, b) => a.day.localeCompare(b.day) || a.title.localeCompare(b.title)),
+    [rows, field.key, titleKey]
+  );
+  const details = useMemo(
+    () => visibleDetailFields(fields, visibleKeys, [titleKey, field.key]),
+    [fields, visibleKeys, titleKey, field.key]
+  );
+  const missing = rows.length - events.length;
+  const months = useMemo(() => {
+    const grouped = new Map<string, TimelineEvent[]>();
+    for (const event of events) {
+      const key = event.day.slice(0, 7);
+      grouped.set(key, [...(grouped.get(key) ?? []), event]);
+    }
+    return [...grouped.entries()];
+  }, [events]);
+
+  if (!events.length) {
+    return (
+      <div className="cg-mode-empty">
+        No records have a valid {field.label} date for this timeline.
+      </div>
+    );
+  }
+
+  return (
+    <section className="cg-timeline" aria-label="Timeline">
+      <div className="cg-timeline-bar">
+        <span className="cg-timeline-label"><ModeIcon mode="timeline" /> Timeline</span>
+        <span className="cg-timeline-count">{events.length.toLocaleString()} dated records · by {field.label}</span>
+        {missing > 0 && <span className="cg-timeline-missing">{missing.toLocaleString()} without a date</span>}
+      </div>
+      <div className="cg-timeline-list">
+        {months.map(([month, monthEvents]) => (
+          <section className="cg-timeline-month" key={month} aria-label={monthLabel(`${month}-01`)}>
+            <h3>{monthLabel(`${month}-01`)}</h3>
+            {monthEvents.map((event) => (
+              <div className="cg-timeline-event" key={event.row.pid}>
+                <span className="cg-timeline-date">{dayLabel(event.day)}</span>
+                <button
+                  type="button"
+                  className="cg-timeline-card"
+                  onClick={(click) => openRecord(event.row.pid, click.detail, onOpen)}
+                  aria-label={`Open ${event.title}`}
+                >
+                  <strong>{event.title}</strong>
+                  {details.map((detail) => (
+                    <span className="cg-timeline-detail" key={detail.key}>
+                      <span>{detail.label}</span>
+                      <b>{formatDisplay(detail, event.row[detail.key])}</b>
+                    </span>
+                  ))}
+                </button>
+              </div>
+            ))}
+          </section>
+        ))}
+      </div>
+    </section>
+  );
+});

web/src/customer-grid/iconShapes.ts

@@ -196,6 +196,15 @@ export const MODE_SHAPES: Record<DisplayMode, IconShape[]> = {
     { d: "M5.4 10.6V7.2M8 10.6V5.4M10.6 10.6V8.6" },
   ],
   calendar: CALENDAR,
+  gallery: [
+    { d: "M2.8 3.2h4.1v4.1H2.8zM9.1 3.2h4.1v4.1H9.1zM2.8 9.1h4.1v3.7H2.8zM9.1 9.1h4.1v3.7H9.1z" },
+  ],
+  timeline: [
+    { d: "M4.1 3v10M4.1 5.2h2.1M4.1 8h4.2M4.1 10.8h2.1" },
+    { d: circle(4.1, 5.2, 0.8) },
+    { d: circle(4.1, 8, 0.8) },
+    { d: circle(4.1, 10.8, 0.8) },
+  ],
   kanban: [{ d: "M2.8 3.4h3.1v9.2H2.8zM6.5 3.4h3.1v6.2H6.5zM10.2 3.4h3.1v7.6h-3.1z" }],
   map: [
     { d: "M8 2.6a3.6 3.6 0 0 1 3.6 3.6c0 2.7-3.6 7.2-3.6 7.2S4.4 8.9 4.4 6.2A3.6 3.6 0 0 1 8 2.6z" },
@@ -416,6 +425,8 @@ export const MODE_LABELS: Record<DisplayMode, string> = {
   dashboard: "Chart",
   list: "List",
   calendar: "Calendar",
+  gallery: "Gallery",
+  timeline: "Timeline",
   kanban: "Kanban",
   map: "Map",
   timeseries: "Time series",
@@ -477,8 +488,8 @@ export const MODE_LABELS: Record<DisplayMode, string> = {
 // Wave-18 C6-CATALOG — `catalog` was held out of this list until `aios_grid.DISPLAY_MODES`
 // accepted the name, the same hold `timeseries` and `chart` served before it. SESSION A posted
 // "C6 HOST MIRROR APPLIED — you may flip CREATABLE_MODES now" (2026-08-03), so it is offerable.
-// It lands LAST by contract: the owner's seven-mode order above is a product decision and the
-// new mode joins the end of it rather than being sorted into it.
+// Each new mode joins the end by contract: the owner's order above is a product decision rather
+// than a candidate for alphabetical sorting.
 // ⭐ Wave-27 C3 (owner item 8) — `swipe` is HELD OUT of this list, and the reason corrects a
 // mistake this file made an hour earlier.
 //
@@ -508,8 +519,7 @@ export const MODE_LABELS: Record<DisplayMode, string> = {
 // for its CONSUMER — who imports/mounts/registers it — excluding the file itself, `_test/`, css
 // and comments. `SwipeView` had four hits and three were prose.
 // Mounted 2026-08-09 (`CustomerGrid.tsx`, `displayMode === "swipe"`), so `swipe` is offerable.
-// It lands LAST, by `catalog`'s rule: the owner's mode order is a product decision and a new
-// mode joins the end of it rather than being sorted into it.
+// Gallery and Timeline later join after Script by that same append-only ordering rule.
 export const CREATABLE_MODES: DisplayMode[] = [
   "grid",
   "chart",
@@ -547,6 +557,8 @@ export const CREATABLE_MODES: DisplayMode[] = [
   // it on a pool scope would mint a view the rail can never show
   // ([[permitted-is-not-answerable]]). It lands LAST by `catalog`'s rule.
   "script",
+  "gallery",
+  "timeline",
 ];
 
 /**
@@ -583,6 +595,8 @@ export const MODE_GROUP: Record<DisplayMode, ModeGroup> = {
   list: "View",
   kanban: "View",
   calendar: "View",
+  gallery: "View",
+  timeline: "View",
   chart: "View",
   dashboard: "View",
   // ⭐ WAVE-33 item 9 (owner, verbatim): "Let's move Swipe and Time-series under Interface instead
@@ -619,6 +633,8 @@ export const MODE_TONE: Record<DisplayMode, FolderTone> = {
   chart: "green",
   dashboard: "green",
   calendar: "yellow",
+  gallery: "blue",
+  timeline: "yellow",
   kanban: "yellow",
   map: "red",
   // Green with `chart`: it is the other analytical mode, and the two belong to one family.

web/src/customer-grid/types.ts

@@ -573,7 +573,7 @@ export type FieldScope = "cohort" | "global";
 // stored `script` view draws rather than blanking if the host mirror ever lands.
 export const DISPLAY_MODES = [
   "grid", "chart", "dashboard", "list", "calendar", "kanban", "map", "timeseries", "catalog",
-  "form", "swipe", "script",
+  "form", "swipe", "script", "gallery", "timeline",
 ] as const;
 export type DisplayMode = (typeof DISPLAY_MODES)[number];
 

web/src/customer-grid/viewModes.tsx

@@ -251,10 +251,10 @@ export function ModeSwitch({
           date field and a board without a stack field are not modes, so the picker is never
           in its placeholder state here unless the view names a field the table has lost —
           which it now SHOWS rather than silently replacing with the first choice. */}
-      {mode === "calendar" && dateChoices.length > 0 && (
+      {(mode === "calendar" || mode === "timeline") && dateChoices.length > 0 && (
         <FieldSelectButton
           className="cg-mode-field"
-          ariaLabel="Calendar date field"
+          ariaLabel={mode === "calendar" ? "Calendar date field" : "Timeline date field"}
           value={dateField?.key}
           onChange={(key) => onPickField("dateField", key)}
           fields={dateChoices.map((f) => ({ key: f.key, label: f.label, type: f.type }))}

web/src/index.css

@@ -13471,7 +13471,7 @@ input.conn-odoo-v:disabled { background: var(--lp-surface-2); color: var(--lp-mu
 .cg-date-grid { margin-top: 3px; }
 .cg-date-day { min-height: 27px; border: 0; border-radius: var(--lp-r-sm); background: transparent; color: var(--lp-ink); cursor: pointer; font: inherit; font-size: var(--lp-fs-2xs); }
 .cg-date-day:hover, .cg-date-day:focus-visible { background: var(--lp-surface-2); outline: none; }
-.cg-date-day.is-selected { background: var(--lp-blue-solid); color: var(--lp-on-blue, #fff); }
+.cg-date-day.is-selected { background: var(--lp-blue-solid); color: var(--lp-surface); }
 .cg-date-recurrence, .cg-date-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--lp-line); font-size: var(--lp-fs-2xs); }
 .cg-date-recurrence .cg-pop-title, .cg-date-preview .cg-pop-title { width: 100%; }
 .cg-date-interval { width: 42px; padding: 3px; }

web/wiring_rows/wave43_shell_repair.py

@@ -17,9 +17,9 @@ ROWS: list[tuple[str, str, str, str, str]] = [
      r'onChange=\{\(value\) => patchAndRecord\(datePicker\.pid, \{ \[dateField\.key\]: value \}, "a date"\)\}'),
     ("W43C-T02 recurrence is a required DatePicker contract and persists the field definition",
      "customer-grid/DatePicker.tsx",
-     r'onRecurrence: \(recurrence: NonNullable<Field\["recurrence"\]>, nextDate: string \| undefined\) => void;',
+     r'onRecurrence: \(recurrence: DateRecurrence \| null\) => void;',
      "customer-grid/CustomerGrid.tsx",
-     r'onRecurrence=\{\(recurrence, nextDate\) => saveField\(\{ \.\.\.dateField, recurrence, nextDate \}\)\}'),
+     r'onRecurrence=\{\(recurrence\) => saveField\(\{ \.\.\.dateField, recurrence: recurrence \?\? null \}\)\}'),
 ]
 
 DELETIONS: list[tuple[str, str, str, str]] = []