Deploy Aether Garden application

app.py

@@ -333,7 +333,12 @@ def filter_entities(location_filter, type_filter, status_filter, search):
 
 
 def filter_book(entry_type, search):
-    return render_book_of_ages(entry_type=entry_type, search=search)
+    return render_book_of_ages(
+        entry_type=entry_type,
+        search=search,
+        limit=8,
+        include_header=False,
+    )
 
 
 def chat_with_soul(soul_id: str, player_message: str) -> str:
@@ -557,50 +562,52 @@ def build_app() -> gr.Blocks:
 
         with gr.Tabs(elem_id="tome-spreads", elem_classes=["realm-tabs"]) as tabs:
             with gr.Tab("The Realm", id="realm"):
-                world_vignette = gr.HTML(value=render_world_vignette())
-                realm_pulse = gr.HTML(value=render_realm_pulse())
-
-                with gr.Accordion("How this world works", open=False):
-                    gr.HTML(
-                        '<div class="how-it-works">'
-                        '<p><b>1 · You summon.</b> Describe anything below and an AI gives it a name, '
-                        'a look, goals, fears, and a home among the eight places.</p>'
-                        '<p><b>2 · The world lives on its own.</b> Every hour, even when no one is here, '
-                        'the souls wander, meet, form bonds, and the land throws up strange events.</p>'
-                        '<p><b>3 · Nothing is forgotten.</b> Every arrival, meeting, and event is written '
-                        'into the Book of Ages forever. Open the <b>Explore</b> tab to step inside a place '
-                        'and meet who lives there.</p>'
-                        '</div>'
-                    )
-
-                with gr.Row(elem_classes=["tome-spread-row"]):
-                    with gr.Column(scale=3, elem_classes=["tome-page-left"]):
-                        world_map = gr.HTML(
-                            value=render_world_map(),
-                            elem_id="world-map",
+                with gr.Column(elem_classes=["tome-spread-shell"]):
+                    with gr.Row(elem_classes=["tome-spread-row"]):
+                        with gr.Column(scale=1, elem_classes=["tome-page-left", "tome-printed-page"]):
+                            world_map = gr.HTML(
+                                value=render_world_map(),
+                                elem_id="world-map",
+                            )
+                            location_panel = gr.HTML(
+                                value=render_location_panel(None),
+                            )
+
+                        with gr.Column(scale=1, elem_classes=["tome-page-right", "tome-printed-page"]):
+                            current_event = gr.HTML(value=render_current_event())
+                            activity_feed = gr.HTML(value=render_activity_feed(limit=3))
+
+                with gr.Column(elem_classes=["tome-offpage-store"]):
+                    world_vignette = gr.HTML(value=render_world_vignette())
+                    realm_pulse = gr.HTML(value=render_realm_pulse())
+                    realm_diorama = gr.HTML(value="")
+                    map_pick = gr.Textbox(visible=False, elem_id="map_location_pick")
+                    with gr.Accordion("How this world works", open=False):
+                        gr.HTML(
+                            '<div class="how-it-works">'
+                            '<p><b>1 · You summon.</b> Describe anything below and an AI gives it a name, '
+                            'a look, goals, fears, and a home among the eight places.</p>'
+                            '<p><b>2 · The world lives on its own.</b> Every hour, even when no one is here, '
+                            'the souls wander, meet, form bonds, and the land throws up strange events.</p>'
+                            '<p><b>3 · Nothing is forgotten.</b> Every arrival, meeting, and event is written '
+                            'into the Book of Ages forever. Turn the page to <b>Explore</b> or open the '
+                            '<b>Book of Ages</b> for the full chronicle.</p>'
+                            '</div>'
                         )
-                        location_panel = gr.HTML(
-                            value=render_location_panel(None),
+                    with gr.Accordion("⚡ Advance the World Now", open=False):
+                        gr.HTML(
+                            '<p class="tome-muted">Manually trigger one simulation tick — the world will '
+                            'generate a new event, run soul encounters, and update memories in real time.</p>'
                         )
-                        realm_diorama = gr.HTML(value="")
-                        map_pick = gr.Textbox(visible=False, elem_id="map_location_pick")
-
-                    with gr.Column(scale=2, elem_classes=["sidebar-panel", "tome-page-right"]):
-                        current_event = gr.HTML(value=render_current_event())
-                        activity_feed = gr.HTML(value=render_activity_feed())
-                        with gr.Accordion("⚡ Advance the World Now", open=False):
-                            gr.HTML('<p style="color:var(--realm-text-tertiary);font-size:0.82rem;margin-bottom:0.6rem;">Manually trigger one simulation tick — the world will generate a new event, run soul encounters, and update memories in real time.</p>')
-                            live_tick_btn = gr.Button("Run simulation tick →", variant="secondary", size="sm")
-                            tick_result = gr.HTML()
+                        live_tick_btn = gr.Button("Run simulation tick →", variant="secondary", size="sm")
+                        tick_result = gr.HTML()
 
                 location_select = gr.Dropdown(
                     choices=[(l["name"], l["id"]) for l in get_all_locations()],
                     label="Explore Location",
-                    visible=True,
+                    visible=False,
                 )
 
-                featured_chars = gr.HTML(value=render_featured_characters())
-
             with gr.Tab("Explore the Realm", id="places"):
                 _all_locs = get_all_locations()
                 _default_loc_id = _all_locs[0]["id"] if _all_locs else None
@@ -645,26 +652,35 @@ def build_app() -> gr.Blocks:
                     soul_card = gr.HTML()
 
             with gr.Tab("Book of Ages", id="book"):
-                with gr.Row():
-                    book_filter = gr.Dropdown(
-                        choices=[
-                            ("All", "all"),
-                            ("Arrivals", "arrival"),
-                            ("Interactions", "interaction"),
-                            ("Events", "world_event"),
-                            ("Milestones", "milestone"),
-                            ("Dreams", "dream_fragment"),
-                        ],
-                        value="all",
-                        label="Filter",
-                        scale=1,
-                    )
-                    book_search = gr.Textbox(
-                        placeholder="Search by name...",
-                        label="Search",
-                        scale=2,
-                    )
-                book_display = gr.HTML(value=render_book_of_ages())
+                with gr.Column(elem_classes=["tome-spread-shell"]):
+                    with gr.Row(elem_classes=["tome-spread-row"]):
+                        with gr.Column(scale=1, elem_classes=["tome-page-left", "tome-printed-page", "tome-book-index"]):
+                            gr.HTML(
+                                '<div class="tome-printed-heading">'
+                                '<h2 class="book-title">Book of Ages</h2>'
+                                '<p class="book-subtitle">Every creation, encounter, and event — remembered forever</p>'
+                                '</div>'
+                            )
+                            book_filter = gr.Dropdown(
+                                choices=[
+                                    ("All", "all"),
+                                    ("Arrivals", "arrival"),
+                                    ("Interactions", "interaction"),
+                                    ("Events", "world_event"),
+                                    ("Milestones", "milestone"),
+                                    ("Dreams", "dream_fragment"),
+                                ],
+                                value="all",
+                                label="Filter",
+                            )
+                            book_search = gr.Textbox(
+                                placeholder="Search by name...",
+                                label="Search",
+                            )
+                        with gr.Column(scale=1, elem_classes=["tome-page-right", "tome-printed-page"]):
+                            book_display = gr.HTML(
+                                value=render_book_of_ages(limit=8, include_header=False)
+                            )
 
             with gr.Tab("Bonds and Alliances", id="bonds"):
                 gr.HTML(
@@ -676,6 +692,7 @@ def build_app() -> gr.Blocks:
                 rel_graph = gr.HTML(value=render_relationship_graph())
 
             with gr.Tab("Souls of the Garden", id="entities"):
+                featured_chars = gr.HTML(value=render_featured_characters())
                 with gr.Row():
                     loc_filter = gr.Dropdown(
                         choices=["all"] + [l["name"] for l in get_all_locations()],
@@ -962,11 +979,13 @@ def build_app() -> gr.Blocks:
                         panels.forEach((panel, i) => {
                             const active = i === panelIndex;
                             panel.style.setProperty('display', active ? 'flex' : 'none', 'important');
+                            panel.style.setProperty('flex-direction', 'column', 'important');
                             panel.style.setProperty('height', active ? '565px' : '0', 'important');
                             panel.style.setProperty('max-height', active ? '565px' : '0', 'important');
-                            panel.style.setProperty('overflow', active ? 'auto' : 'hidden', 'important');
+                            panel.style.setProperty('overflow', 'hidden', 'important');
                             panel.setAttribute('aria-hidden', active ? 'false' : 'true');
                         });
+                        wirePageExpand();
                         const pad = document.getElementById('aether-walk-pad');
                         if (pad && panelIndex !== 1) {
                             pad.classList.remove('visible', 'explore-only');
@@ -1149,6 +1168,44 @@ def build_app() -> gr.Blocks:
                         setActivePanel(sections[currentSpread].panel);
                     };
 
+                    const wirePageExpand = () => {
+                        document.querySelectorAll('.tome-page-left, .tome-page-right').forEach((page) => {
+                            if (page.querySelector(':scope > .tome-expand-btn')) return;
+                            const side = page.classList.contains('tome-page-left') ? 'left' : 'right';
+                            const btn = document.createElement('button');
+                            btn.type = 'button';
+                            btn.className = 'tome-expand-btn';
+                            btn.dataset.expand = side;
+                            btn.setAttribute('aria-label', `Expand ${side} page`);
+                            btn.title = `Expand ${side} page`;
+                            btn.textContent = '⛶';
+                            btn.addEventListener('click', (e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                const root = document.querySelector('.gradio-container');
+                                if (!root) return;
+                                const cls = `tome-expanded-${side}`;
+                                const on = root.classList.toggle(cls);
+                                root.classList.remove(side === 'left' ? 'tome-expanded-right' : 'tome-expanded-left');
+                                if (!on) root.classList.remove(cls);
+                            });
+                            page.insertBefore(btn, page.firstChild);
+                        });
+
+                        if (!document.getElementById('tome-expand-backdrop')) {
+                            const backdrop = document.createElement('button');
+                            backdrop.id = 'tome-expand-backdrop';
+                            backdrop.type = 'button';
+                            backdrop.className = 'tome-expand-backdrop';
+                            backdrop.setAttribute('aria-label', 'Close expanded page');
+                            backdrop.addEventListener('click', () => {
+                                const root = document.querySelector('.gradio-container');
+                                root?.classList.remove('tome-expanded-left', 'tome-expanded-right');
+                            });
+                            document.body.appendChild(backdrop);
+                        }
+                    };
+
                     const wireOpening = () => {
                         const gate = document.getElementById('realm-opening');
                         if (!gate || gate.dataset.bound) return;
@@ -1258,6 +1315,7 @@ def build_app() -> gr.Blocks:
 
                     wireOpening();
                     wireTomeNav();
+                    wirePageExpand();
 
           const bind = () => {
             document.querySelectorAll('#world-map [data-location-id]').forEach((node) => {
@@ -1446,6 +1504,7 @@ def build_app() -> gr.Blocks:
             wireDioramaFrames();
             wireWalkPad();
             updateWalkPadVisibility();
+            wirePageExpand();
           }).observe(document.body, { childList: true, subtree: true });
           setInterval(updateWalkPadVisibility, 800);
 

ui/book_display.py

@@ -25,6 +25,7 @@ def render_book_of_ages(
     entry_type: str = "all",
     search: str = "",
     limit: int = 40,
+    include_header: bool = True,
 ) -> str:
     entries = get_entries(limit=limit, entry_type=entry_type if entry_type != "all" else None, search=search or None)
 
@@ -44,14 +45,15 @@ def render_book_of_ages(
     if entry_type == "dream_fragment":
         subtitle = "Dreams of the Valley — fragments that surfaced while giants slept"
 
-    parts = [
-        '<div class="book-container">',
-        '<div class="book-header">',
-        '<h2 class="book-title">Book of Ages</h2>',
-        f'<p class="book-subtitle">{subtitle}</p>',
-        "</div>",
-        '<div class="book-entries">',
-    ]
+    parts = ['<div class="book-container">']
+    if include_header:
+        parts.extend([
+            '<div class="book-header">',
+            '<h2 class="book-title">Book of Ages</h2>',
+            f'<p class="book-subtitle">{subtitle}</p>',
+            "</div>",
+        ])
+    parts.append('<div class="book-entries">')
 
     for entry in entries:
         if entry["world_day"] != current_day:

ui/styles.css

@@ -2937,8 +2937,10 @@ body,
     height: 565px !important;
     max-height: 565px !important;
     min-height: 0 !important;
-    overflow: auto !important;
-    padding: 0.4rem 1rem 1rem !important;
+    overflow: hidden !important;
+    padding: 0.5rem 0.85rem 0.75rem !important;
+    display: flex !important;
+    flex-direction: column !important;
 }
 
 .realm-tabs [role="tabpanel"] > .column,
@@ -3138,7 +3140,7 @@ body,
     .realm-tabs [role="tabpanel"] {
         height: 565px !important;
         max-height: 565px !important;
-        overflow: auto !important;
+        overflow: hidden !important;
     }
 
     .realm-opening-inner {
@@ -3639,3 +3641,331 @@ body,
     border-radius: 10px;
     overflow: hidden;
 }
+
+/* -------------------------------------------------------------------------- */
+/* Living book spread — no scroll, printed pages, expand option                */
+/* -------------------------------------------------------------------------- */
+.tome-offpage-store {
+    display: none !important;
+    height: 0 !important;
+    max-height: 0 !important;
+    overflow: hidden !important;
+    visibility: hidden !important;
+    pointer-events: none !important;
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
+.tome-spread-shell {
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.tome-spread-row {
+    flex: 1 1 auto;
+    min-height: 0 !important;
+    max-height: 100% !important;
+    align-items: stretch !important;
+    overflow: hidden !important;
+    gap: 0 !important;
+    margin: 0 !important;
+}
+
+.tome-spread-row > .column,
+.tome-spread-row > .gr-column {
+    min-height: 0 !important;
+    max-height: 100% !important;
+    overflow: hidden !important;
+}
+
+.tome-printed-page {
+    position: relative;
+    display: flex !important;
+    flex-direction: column !important;
+    min-height: 0 !important;
+    max-height: 100% !important;
+    overflow: hidden !important;
+    padding: 0.85rem 1.15rem 0.75rem !important;
+    background:
+        radial-gradient(ellipse 110px 85px at 94% 90%, rgba(72, 44, 18, 0.14) 0%, transparent 64%),
+        radial-gradient(ellipse 95px 75px at 6% 12%, rgba(58, 34, 14, 0.1) 0%, transparent 58%),
+        radial-gradient(ellipse 80px 60px at 88% 8%, rgba(54, 32, 12, 0.08) 0%, transparent 55%),
+        radial-gradient(circle at 5% 38%, rgba(88, 62, 32, 0.09) 0 2px, transparent 3px),
+        radial-gradient(circle at 94% 62%, rgba(78, 54, 28, 0.08) 0 2px, transparent 3px),
+        linear-gradient(168deg, #ebe0c4 0%, #e0d0aa 45%, #d4c094 100%);
+    box-shadow: inset 0 0 28px rgba(88, 56, 24, 0.08);
+    isolation: isolate;
+}
+
+.tome-printed-page::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 0;
+    opacity: 0.4;
+    background:
+        repeating-linear-gradient(
+            0deg,
+            transparent,
+            transparent 2px,
+            rgba(62, 40, 18, 0.02) 2px,
+            rgba(62, 40, 18, 0.02) 3px
+        ),
+        radial-gradient(ellipse 100% 90% at 50% 50%, transparent 58%, rgba(48, 30, 14, 0.08) 100%);
+    mix-blend-mode: multiply;
+}
+
+.tome-printed-page > * {
+    position: relative;
+    z-index: 1;
+    min-height: 0;
+}
+
+.tome-page-left {
+    padding-right: 2.4rem !important;
+    padding-left: 0.5rem !important;
+    border-right: 1px solid rgba(98, 62, 28, 0.12);
+}
+
+.tome-page-right {
+    padding-left: 2.4rem !important;
+    padding-right: 0.5rem !important;
+}
+
+.tome-expand-btn {
+    position: absolute;
+    top: 0.35rem;
+    right: 0.4rem;
+    z-index: 6;
+    width: 1.65rem;
+    height: 1.65rem;
+    border: 1px solid rgba(98, 62, 28, 0.35);
+    border-radius: 6px;
+    background: rgba(248, 239, 216, 0.72);
+    color: #5c4228;
+    font-size: 0.72rem;
+    line-height: 1;
+    cursor: pointer;
+    opacity: 0.55;
+    transition: opacity 0.2s ease, background 0.2s ease;
+}
+
+.tome-page-right .tome-expand-btn {
+    right: auto;
+    left: 0.4rem;
+}
+
+.tome-printed-page:hover .tome-expand-btn {
+    opacity: 1;
+}
+
+.tome-expand-btn:hover {
+    background: rgba(240, 214, 150, 0.9);
+}
+
+.tome-expand-backdrop {
+    display: none;
+    position: fixed;
+    inset: 0;
+    z-index: 2190;
+    border: 0;
+    background: rgba(8, 5, 3, 0.62);
+    cursor: pointer;
+}
+
+.gradio-container.tome-expanded-left .tome-expand-backdrop,
+.gradio-container.tome-expanded-right .tome-expand-backdrop {
+    display: block;
+}
+
+.gradio-container.tome-expanded-left .tome-page-left,
+.gradio-container.tome-expanded-right .tome-page-right {
+    position: fixed !important;
+    z-index: 2200 !important;
+    top: 50% !important;
+    left: 50% !important;
+    transform: translate(-50%, -50%) !important;
+    width: min(920px, 92vw) !important;
+    max-width: 92vw !important;
+    height: min(82vh, 680px) !important;
+    max-height: 82vh !important;
+    overflow: auto !important;
+    padding: 1.5rem 1.75rem !important;
+    border: 1px solid rgba(98, 62, 28, 0.45) !important;
+    box-shadow: 0 28px 80px rgba(8, 4, 2, 0.55) !important;
+}
+
+.gradio-container.tome-expanded-left .tome-page-right,
+.gradio-container.tome-expanded-right .tome-page-left {
+    opacity: 0.12;
+    pointer-events: none;
+}
+
+/* Printed ink — content sits on paper, not in UI cards */
+.tome-printed-page .current-event,
+.tome-printed-page .activity-feed,
+.tome-printed-page .location-panel,
+.tome-printed-page .book-container,
+.tome-printed-page .book-entries {
+    background: transparent !important;
+    box-shadow: none !important;
+    border: none !important;
+    border-radius: 0 !important;
+}
+
+.tome-printed-page .current-event {
+    padding: 0 0 0.65rem !important;
+    margin: 0 0 0.5rem !important;
+    border-bottom: 1px solid rgba(98, 62, 28, 0.22) !important;
+}
+
+.tome-printed-page .event-label,
+.tome-printed-page .event-title,
+.tome-printed-page .event-text,
+.tome-printed-page .event-locations {
+    color: #3d2a16 !important;
+    text-shadow: 0 1px 0 rgba(255, 236, 196, 0.2);
+}
+
+.tome-printed-page .event-label {
+    color: #7a5a28 !important;
+    font-family: 'IM Fell English', serif !important;
+}
+
+.tome-printed-page .activity-feed {
+    padding: 0 !important;
+    margin: 0 !important;
+    overflow: hidden !important;
+}
+
+.tome-printed-page .feed-item {
+    padding: 0.4rem 0 !important;
+    border-bottom: 1px solid rgba(98, 62, 28, 0.16) !important;
+    background: transparent !important;
+}
+
+.tome-printed-page .feed-content {
+    color: #3d2a16 !important;
+    font-family: 'IM Fell English', serif !important;
+    font-size: 0.88rem !important;
+    line-height: 1.45 !important;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.tome-printed-page .feed-day {
+    color: #8a6424 !important;
+    font-family: 'Cinzel', serif !important;
+}
+
+.tome-printed-page #world-map,
+.tome-printed-page .realm-map {
+    flex: 1 1 auto;
+    min-height: 0;
+    max-height: 360px;
+    width: 100% !important;
+    border: 1px solid rgba(98, 62, 28, 0.28) !important;
+    border-radius: 2px !important;
+    box-shadow: inset 0 0 18px rgba(58, 36, 14, 0.12) !important;
+    background: rgba(12, 18, 14, 0.92) !important;
+}
+
+.tome-printed-page .location-panel {
+    padding: 0.45rem 0 0 !important;
+    margin: 0 !important;
+    font-family: 'IM Fell English', serif !important;
+    font-style: italic;
+    font-size: 0.82rem !important;
+    color: #5c4228 !important;
+}
+
+.tome-printed-page .location-panel * {
+    color: #5c4228 !important;
+}
+
+.tome-book-index .tome-printed-heading {
+    margin-bottom: 0.75rem;
+    padding-bottom: 0.65rem;
+    border-bottom: 1px solid rgba(98, 62, 28, 0.22);
+}
+
+.tome-book-index .book-title {
+    margin: 0 0 0.35rem;
+    font-size: 1.35rem !important;
+    color: #7a5a28 !important;
+}
+
+.tome-book-index .book-subtitle {
+    margin: 0;
+    font-family: 'IM Fell English', serif;
+    font-style: italic;
+    font-size: 0.88rem;
+    color: #5c4228;
+}
+
+.tome-printed-page .book-entries {
+    column-count: 1 !important;
+    column-gap: 0 !important;
+    overflow: hidden !important;
+    max-height: 100%;
+}
+
+.tome-printed-page .book-entry {
+    break-inside: avoid;
+    margin-bottom: 0.55rem !important;
+    padding-bottom: 0.45rem !important;
+    border-bottom: 1px solid rgba(98, 62, 28, 0.14) !important;
+    background: transparent !important;
+}
+
+.tome-printed-page .entry-content {
+    font-family: 'IM Fell English', serif !important;
+    font-size: 0.86rem !important;
+    line-height: 1.45 !important;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.tome-printed-page .book-day-header {
+    font-family: 'Cinzel', serif !important;
+    color: #8a6424 !important;
+    margin: 0.35rem 0 !important;
+}
+
+/* Aged spread binding — worn parchment across both pages */
+.realm-tabs [role="tabpanel"] {
+    background:
+        radial-gradient(ellipse 130px 100px at 3% 92%, rgba(72, 44, 18, 0.1) 0%, transparent 62%),
+        radial-gradient(ellipse 120px 95px at 97% 8%, rgba(58, 34, 14, 0.09) 0%, transparent 60%),
+        linear-gradient(90deg,
+            #e8d8b4 0%,
+            #e2d0a6 44.5%,
+            #c9a87a 48.8%,
+            #8e6840 49.8%,
+            #6b4a2c 50%,
+            #8e6840 50.2%,
+            #c9a87a 51.2%,
+            #e2d0a6 55.5%,
+            #ebe2c6 100%) !important;
+}
+
+.realm-tabs [role="tabpanel"]::-webkit-scrollbar {
+    display: none !important;
+    width: 0 !important;
+    height: 0 !important;
+}
+
+.tome-muted {
+    font-family: 'IM Fell English', serif;
+    font-style: italic;
+    font-size: 0.82rem;
+    color: #5c4228;
+}