[EPIC] Android UI/UX overhaul — symbolic workspace, drawer navigation, Prolog inspector, and built-in themes #321

Open
opened 2026-09-08 02:03:31 +00:00 by nsaspy · 0 comments
Owner

Goal

Give the Android app a coherent Zara-native product identity and stop treating the phone UI like a generic disconnected Material shell.

This epic owns the Android visual/interaction overhaul. It integrates with #622 (offline-first Android) and #623 (Core+Android worker), but does not replace their runtime/security/lifecycle contracts.

DESIGN FREEZE — 2026-09-07

The operator-approved three-panel design is now the implementation target.

Design-freeze PR: #649

Canonical repo inputs after merge:

  • android/design/reference-2026-09-07.svg — visual authority;
  • android/DESIGN.md — semantic/product implementation contract;
  • android/AGENTS.md — mandatory worker instructions for Android work.

The current plain Material ZaraApp.kt is a baseline to migrate, not a competing design authority.

Workers should stop iterating a different visual direction unless the operator explicitly changes the freeze.

Current design language

The default design is dark Outrun:

  • near-black/navy base;
  • restrained magenta/cyan/violet/blue accents;
  • thin luminous outlines rather than giant glowing cards;
  • roomy mobile layout with the chat/composer as the dominant surface;
  • symbolic/Prolog information may use empty-state space but disappears/collapses once a real chat begins;
  • no giant ZARA wordmark in primary chrome — use the compact abstract Zara sigil;
  • no ChatGPT clone; use the frozen Zara hierarchy.

The visual reference is compositional authority, not a bitmap skin. Rebuild it with native Compose primitives and semantic tokens.

Navigation

Use a full-height left drawer for secondary navigation and history.

Primary drawer destinations:

  • Chat
  • Logic
  • Voice
  • Projects
  • Remote / Connection
  • Scheduled
  • Plugins
  • Themes / Appearance
  • Diagnostics
  • Settings
  • About

The drawer also owns pinned chats, recent chats, See all history entry points, new-chat affordance and compact local/remote runtime state. Pinned/recents do not permanently consume the main chat screen.

Chat surface

Before the first real turn, the empty area may show the approved symbolic home: Zara sigil, bounded local/private/extensible status, real action tiles (Run a query, Inspect logic, Build something, Analyze data, Summarize, Explore) and restrained ambience.

Once real conversation begins, the symbolic home collapses so messages own the viewport.

The composer stays compact and reachable with attachments/actions/tools/mic/voice controls. Do not build a giant thick composer/card.

Logic / Prolog UX

Prolog is a product feature, not hidden implementation detail.

Logic must expose at least:

  • Effective configuration
  • User facts
  • Runtime facts
  • Intent rules
  • Plugin rules
  • Sources/modules

Add a read-only source viewer with actual origin/path where available, syntax highlighting, line numbers, source/load state, provenance, copy and safe open-file handoff. Distinguish source from effective loaded runtime KB. Unrestricted Android Prolog editing/reload is not part of this epic.

Theme system

Built-ins:

  1. Outrun — default
  2. StarIntel — black + gold
  3. Midnight — dark violet/blue
  4. Terminal — black + green
  5. Light — neutral light
  6. System — follows Android

All screens consume one semantic-token component hierarchy. Support reduced glow/accessibility-friendly rendering.

Voice / Remote / Diagnostics

Use the same design system and explicitly distinguish local symbolic ready, remote connected/reconnecting/offline, auth/enrollment missing, degraded and unavailable capability states.

Per #622, remote disconnect must not tombstone the whole app when local symbolic capability remains available.

Icon / identity

Use a compact abstract Zara mark for launcher/adaptive icon, drawer header, assistant/avatar and small notification rendering. No portrait/mascot dependency and no giant wordmark.

Zara-first implementation / Prolog-RLM reuse rule

Implement and prove product behavior in Zara first.

Do not stall Android waiting for Prolog-RLM to invent abstractions in the dark.

When executable Zara behavior reveals a genuinely domain-neutral symbolic/runtime seam:

  1. land or at least produce the Zara implementation plus RED-first tests/fixtures;
  2. document what is generic versus Zara-specific;
  3. open/update a focused lost-rob0t/prolog-rlm issue that points directly to the Zara issue, implementation and tests;
  4. Prolog-RLM extracts/generalizes the reusable contract;
  5. Zara later consumes the upstream contract when it reduces duplication without regressing behavior.

Compose UI, Android lifecycle, visual themes, navigation and Zara-specific product policy remain in Zara.

Implementation queue

  • #650 — semantic design system, drawer and screenshot harness
  • #651 — symbolic empty state, active chat and compact composer
  • #652 — Logic browser and Prolog source/runtime inspection
  • #653 — Projects and project-scoped chat/context
  • #654 — Scheduled task list/inspection/safe controls
  • #655 — Plugins catalog/permissions/configuration/health
  • #656 — six-theme selector and reduced-glow support
  • #657 — Voice/Remote/Diagnostics runtime-state unification

Testing / acceptance

Before closing this epic:

  • operator-approved design has a frozen repository reference proposed in #649;
  • #649 is merged and Android workers consume android/DESIGN.md + nested AGENTS.md;
  • Outrun is the default theme;
  • all six built-in themes render from semantic tokens;
  • compact theme selector with visual previews exists;
  • drawer contains navigation + pinned + recents + new chat;
  • main chat surface contains no permanent recent-chat list;
  • empty-state symbolic workspace disappears/collapses after first real turn;
  • composer remains compact on small screens and with IME open;
  • Logic browser + read-only syntax-highlighted Prolog source viewer exist;
  • Projects, Scheduled and Plugins are real behavior-backed surfaces rather than decorative placeholders;
  • local/offline vs remote connection state is explicit and #622-compatible;
  • Voice/Connection/Diagnostics use the same design system;
  • launcher/app identity uses the approved abstract Zara mark;
  • deterministic screenshots exist for core states across Outrun plus representative alternate themes;
  • minimum-screen, font-scale, accessibility/focus, rotation/recreation and dark/light tests are covered;
  • full Android/Core exact-head gates remain green.

Non-goals

  • no ChatGPT UI clone;
  • no giant decorative chat card consuming most of the screen;
  • no permanent recents on the main chat page;
  • no unrestricted mobile Prolog editor;
  • no runtime/security architecture fork;
  • no Android-only scheduler/plugin loader/history owner;
  • no speculative Prolog-RLM blocker before Zara proves the reusable seam.
## Goal Give the Android app a coherent Zara-native product identity and stop treating the phone UI like a generic disconnected Material shell. This epic owns the Android visual/interaction overhaul. It integrates with #622 (offline-first Android) and #623 (Core+Android worker), but does not replace their runtime/security/lifecycle contracts. ## DESIGN FREEZE — 2026-09-07 The operator-approved three-panel design is now the implementation target. Design-freeze PR: #649 Canonical repo inputs after merge: - `android/design/reference-2026-09-07.svg` — visual authority; - `android/DESIGN.md` — semantic/product implementation contract; - `android/AGENTS.md` — mandatory worker instructions for Android work. The current plain Material `ZaraApp.kt` is a baseline to migrate, **not** a competing design authority. Workers should stop iterating a different visual direction unless the operator explicitly changes the freeze. ## Current design language The default design is dark **Outrun**: - near-black/navy base; - restrained magenta/cyan/violet/blue accents; - thin luminous outlines rather than giant glowing cards; - roomy mobile layout with the chat/composer as the dominant surface; - symbolic/Prolog information may use empty-state space but disappears/collapses once a real chat begins; - no giant `ZARA` wordmark in primary chrome — use the compact abstract Zara sigil; - no ChatGPT clone; use the frozen Zara hierarchy. The visual reference is compositional authority, not a bitmap skin. Rebuild it with native Compose primitives and semantic tokens. ## Navigation Use a full-height left drawer for secondary navigation and history. Primary drawer destinations: - Chat - Logic - Voice - Projects - Remote / Connection - Scheduled - Plugins - Themes / Appearance - Diagnostics - Settings - About The drawer also owns pinned chats, recent chats, `See all` history entry points, new-chat affordance and compact local/remote runtime state. Pinned/recents do **not** permanently consume the main chat screen. ## Chat surface Before the first real turn, the empty area may show the approved symbolic home: Zara sigil, bounded local/private/extensible status, real action tiles (`Run a query`, `Inspect logic`, `Build something`, `Analyze data`, `Summarize`, `Explore`) and restrained ambience. Once real conversation begins, the symbolic home collapses so messages own the viewport. The composer stays compact and reachable with attachments/actions/tools/mic/voice controls. Do not build a giant thick composer/card. ## Logic / Prolog UX Prolog is a product feature, not hidden implementation detail. Logic must expose at least: - Effective configuration - User facts - Runtime facts - Intent rules - Plugin rules - Sources/modules Add a read-only source viewer with actual origin/path where available, syntax highlighting, line numbers, source/load state, provenance, copy and safe open-file handoff. Distinguish source from effective loaded runtime KB. Unrestricted Android Prolog editing/reload is not part of this epic. ## Theme system Built-ins: 1. **Outrun** — default 2. **StarIntel** — black + gold 3. **Midnight** — dark violet/blue 4. **Terminal** — black + green 5. **Light** — neutral light 6. **System** — follows Android All screens consume one semantic-token component hierarchy. Support reduced glow/accessibility-friendly rendering. ## Voice / Remote / Diagnostics Use the same design system and explicitly distinguish local symbolic ready, remote connected/reconnecting/offline, auth/enrollment missing, degraded and unavailable capability states. Per #622, remote disconnect must **not** tombstone the whole app when local symbolic capability remains available. ## Icon / identity Use a compact abstract Zara mark for launcher/adaptive icon, drawer header, assistant/avatar and small notification rendering. No portrait/mascot dependency and no giant wordmark. ## Zara-first implementation / Prolog-RLM reuse rule **Implement and prove product behavior in Zara first.** Do not stall Android waiting for Prolog-RLM to invent abstractions in the dark. When executable Zara behavior reveals a genuinely domain-neutral symbolic/runtime seam: 1. land or at least produce the Zara implementation plus RED-first tests/fixtures; 2. document what is generic versus Zara-specific; 3. open/update a focused `lost-rob0t/prolog-rlm` issue that points directly to the Zara issue, implementation and tests; 4. Prolog-RLM extracts/generalizes the reusable contract; 5. Zara later consumes the upstream contract when it reduces duplication without regressing behavior. Compose UI, Android lifecycle, visual themes, navigation and Zara-specific product policy remain in Zara. ## Implementation queue - [ ] #650 — semantic design system, drawer and screenshot harness - [ ] #651 — symbolic empty state, active chat and compact composer - [ ] #652 — Logic browser and Prolog source/runtime inspection - [ ] #653 — Projects and project-scoped chat/context - [ ] #654 — Scheduled task list/inspection/safe controls - [ ] #655 — Plugins catalog/permissions/configuration/health - [ ] #656 — six-theme selector and reduced-glow support - [ ] #657 — Voice/Remote/Diagnostics runtime-state unification ## Testing / acceptance Before closing this epic: - [x] operator-approved design has a frozen repository reference proposed in #649; - [ ] #649 is merged and Android workers consume `android/DESIGN.md` + nested `AGENTS.md`; - [ ] Outrun is the default theme; - [ ] all six built-in themes render from semantic tokens; - [ ] compact theme selector with visual previews exists; - [ ] drawer contains navigation + pinned + recents + new chat; - [ ] main chat surface contains no permanent recent-chat list; - [ ] empty-state symbolic workspace disappears/collapses after first real turn; - [ ] composer remains compact on small screens and with IME open; - [ ] Logic browser + read-only syntax-highlighted Prolog source viewer exist; - [ ] Projects, Scheduled and Plugins are real behavior-backed surfaces rather than decorative placeholders; - [ ] local/offline vs remote connection state is explicit and #622-compatible; - [ ] Voice/Connection/Diagnostics use the same design system; - [ ] launcher/app identity uses the approved abstract Zara mark; - [ ] deterministic screenshots exist for core states across Outrun plus representative alternate themes; - [ ] minimum-screen, font-scale, accessibility/focus, rotation/recreation and dark/light tests are covered; - [ ] full Android/Core exact-head gates remain green. ## Non-goals - no ChatGPT UI clone; - no giant decorative chat card consuming most of the screen; - no permanent recents on the main chat page; - no unrestricted mobile Prolog editor; - no runtime/security architecture fork; - no Android-only scheduler/plugin loader/history owner; - no speculative Prolog-RLM blocker before Zara proves the reusable seam.
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
nsaspy/zara#321
No description provided.