Overview / Frontend
Layer 3 · In progress — the part we finalize together

The workspace panel
drives everything

This is the format you wanted from the very beginning: one chat with IQ, and a docked workspace panel beside it where every output, preview, deployment, and module lives. The shell is ported and wired to the backend. What's left is building each module the way you two want it.

Porting + finalizing Next.js 16 · TypeScript · Tailwind 4 15 workspace modules

The core idea

Chat on the left, the whole business on the right

You talk to IQ. The workspace panel reacts — when IQ builds something, the Preview tab shows it live; when it deploys, the Build tab tracks it; when it generates content, the Artifacts tab fills up. One surface, everything in context.

IQ Chat
you prompt, it streams
→
Tool runs
build · write · deploy
→
Workspace panel
preview · artifacts · build · resources

Desktop: docked, resizable right edge (width persisted). Mobile: bottom-sheet drawer. Live updates arrive via SSE miosa_update events straight from the backend.

Inside the panel

15 modules, gated by where the expert is

Tabs unlock progressively through onboarding and build stages — so the panel grows with the expert instead of overwhelming them on day one.

Operations

Business metrics & KPIs

Pulse

AI insights / status

Alerts

Notifications

Artifacts

Generated content list

Progress

Onboarding / pipeline

Preview ◆

Live iframe of the build

Apps

App-project list

Build ◆

Build status + logs

Assets

Drive / uploads

Queue

Publish queue

Knowledge

KB quick access

Integrations

Catalog

Access

Members & invites

Ops

Admin tools

Settings

Workspace prefs

◆ = the super-modules that display deployments and generated outputs — the heart of what I've been building.

Full module map

Every screen in the app

Beyond the chat + panel, the app has the full set of modules an expert runs their practice from — all wired to the backend with real data.

Core

  • Dashboard
  • Chat (IQ + workspace panel)
  • Knowledge base (docs, 3D graph, rules, strategy)

Create

  • Artifacts hub + detail/preview
  • Apps (files, diff, deploy)
  • Builders · Content · Funnels

Operate

  • Engines (automations)
  • Schedule / Publish
  • Resources (DB, storage, functions, crons)

Relate

  • Inbox (email, social, forms)
  • Calendar
  • Patients / Programs

Manage

  • Workspaces & members
  • Settings (profile, security, integrations)
  • Admin panel

Storage

  • Drive (assets, brand character)
  • Training / Help center
  • Notifications

How it talks to the backend

Clean data layer, real-time where it matters

Routes
Next.js App Router · /chat, /artifacts, /apps, /resources…
Hooks
TanStack Query per endpointuse-chat · use-artifacts · use-app-projects · use-miosa-*
Client
Axios + refresh-on-401 interceptorZustand (auth, UI prefs)
Realtime
SSE chat streammiosa_update events → live build/deploy status

What I need from you two here

The shell, routing, data layer, and the hardest plumbing (SSE, preview iframes, deploy status) are done. The open decision is the shape of each module inside the workspace panel — how Preview, Build, Artifacts, and Resources should look and behave for a ClinicIQ expert.

That's the conversation for our Zoom: we lock the format, and I build the modules to match. See the next-steps plan →

Back
← Backend