Mockup v0.1 · Visual DirectionAndhika's AI Research & Informatics Office
ALL CONTENT ON THIS PAGE IS SAMPLE DATA
01 · HOME SCREEN — GOD VIEW

The whole research campus, alive

A live 3D mockup, not a picture. Drag to rotate, right-drag to pan, scroll to zoom. Click a room or an agent. Try the Den button and the Step Inside toggle.

drag · rotateright-drag · panwheel · zoomclick · inspect

ANDHIKA'S AI RESEARCH & INFORMATICS OFFICE

Virtual Research Institute & Informatics Program Command Center

DEMO · SAMPLE DATA
AndhikaPI · Lecturer · Head of Informatics
Walking, typing, coffee = decorative animation Coloured floor ring = task status (SAMPLE here)
02 · MOBILE PREVIEW — STEP INSIDE

Pocket-sized, same living office

The phone shows the same world from Andhika's shoulder. Drag the joystick to walk (it takes over from the decorative routine); use the lift pad to change floors.

09:415G ▮▮▮
Andhika's AI OfficeResearch · Informatics
3
📍 Andhika's Office
MOVE
Tell the Direktur…
BOTTOM NAVIGATION

Five thumb-reach tabs

Office, Direktur, Projects, Approvals and More (Research, Publications, Software, Teaching, Program, Knowledge, Calendar, Agents, Settings).

VIRTUAL JOYSTICK

Walk the halls

Step Inside uses a joystick; God View uses one-finger orbit and two-finger pinch/pan with simplified controls.

ROOM TELEPORT

Skip the walk

Chips jump straight to My Office, the Direktur, labs, the Library, the café or the Den.

COMPACT DIRECTOR CHAT

Always one tap away

The Direktur bar expands into a full-height sheet with the plan card, approvals and quick prompts.

TOUCH TARGETS

44 px minimum

Agent profiles and approvals open as bottom sheets; long-press an agent to call them to a meeting.

HONEST STATUS

Same trust rules

Status rings, provenance chips and “integration required” labels are identical on every screen size.

03 · THE CAST

29 agents, one Direktur, one barista

Every mascot is generated from the same parametric builder, so new specialists can be added later in minutes. Click a card to find that agent in the office.

04 · KEY PANELS

Profiles, approvals, meetings, the Den

How the core interactions will look in the functional build.

05 · DASHBOARDS

Research pipeline, publications, program

Every project appears somewhere in the pipeline. Metrics that are not connected say so instead of showing a number.

RESEARCH PIPELINE

From idea to accepted

Project chips sit at their current stage. Stages after the current one stay empty until real work moves them.

PUBLICATION DASHBOARD

Manuscripts & journals

No Scopus indexing, quartile, citation or acceptance data is ever invented.

HEAD-OF-PROGRAM COMMAND CENTER

Informatics Study Program

Each tab reads from authorized sources only.

06 · TRUST & TRANSPARENCY

Every number knows where it came from

Seven provenance labels, twelve task states, and a hard line between decorative animation and verified activity.

PROVENANCE LABELS

Seven ways data can be true (or not)

Shown on every chip, card, shelf and board.

TASK STATES

Set only by task events

An agent is never WORKING just because it is typing on screen.

DecorativeWalking, typing, coffee, arcade, elevator rides. Driven by the animation bus. Never changes status.
VerifiedFloor ring + status pill. Driven by the task-event log with a timestamp and source.
INTEGRATIONS

Nothing is connected yet

Shelves, boards and inboxes stay empty until you authorize a source.

07 · ARCHITECTURE PREVIEW

Built to grow into an operating system

Modular layers and structured events; animation and computation never share a channel.

LAYERS

Ten separable layers

Each can be replaced or connected independently.

EVENT FLOW

From instruction to artifact

Every arrow is a logged, inspectable event.

TASK EVENT BUStask.created · task.assigned · status.changed · output.attached · review.requested · approval.decided
ANIMATION BUSwalk · sit · type · coffee · arcade · ride lift — purely visual, no state
08 · YOUR DECISION

What to approve before the functional build

Reply in chat with “approve”, or tell me what to change — colours, mascots, layout, panels, anything.

1
Isometric diorama stylePastel, warm light, soft shadows, cut-away walls, underground Den.
2
Mascot design languageChibi animals, outfits, division badges, Andhika as a human avatar.
3
Campus layoutTop floor, Director, Research, Library, Program, Tech, Comms, Leisure, Den.
4
UI chromeRail navigation, Talk-to-Direktur panel, briefing, zone bar, inspector.
5
Mobile patternStep Inside with joystick, teleport chips, compact Direktur bar, bottom nav.
6
Trust languageProvenance chips, status rings, empty-until-connected shelves.

After approval: the functional application

Same visual direction, real behaviour. Where a backend or integration is missing, the UI is built and labelled DEMO · MOCK DATA · INTEGRATION REQUIRED.

  • Project creation & project rooms that furnish from real context
  • Director command parser → plan → task graph
  • Agent profiles, task queues, status management
  • Approval queue with approve / reject / revise / comment / delegate
  • Knowledge library with provenance on every item
  • Meetings with agreement / disagreement summaries
  • Local persistence (IndexedDB) with export
  • Full Step Inside with doors, collisions and room boards
  • Audio engine: lo-fi, ambience, notifications, mute all
  • Integration layer stubs for Drive, Calendar, Gmail, GitHub