Mockups

Three HTML artifacts, cross-linked. Open each in a browser for the full layout (chat bubbles, SVG architecture diagrams, dark theme).

Viewing the artifacts

Rendered (best)

Primary: GitHub Pages (stable, no Tailscale required):

Fallback: Tailscale HTTPS while the Mac Mini HTTP server is up:

Version history

• Mockup 00 v0.2 (2026-04-23) — Architecture diagram collapsed to one Jacob's-phone box with annotation explaining "out-of-band = different DM thread, not different endpoint." Fix for Jacob's feedback on v0.1.
• Mockup 00 v0.1 (2026-04-23) — Initial draft. Diagram drew Jacob's phone twice (inbound DM box + out-of-band approval box). Same device, confusing — superseded by v0.2.
• Mockups 01 and 02 v0.1 (2026-04-23) — Initial concrete-architecture mockups, no revisions yet.

Source

Note: WikiHub serves HTML files as application/octet-stream (raw source), so Safari will likely download them instead of rendering. Use the Tailscale URL for rendered view, or clone the wiki repo (git clone https://wikihub.globalbr.ai/@jacobcole/picortex.git) to view locally.

What each shows

00 — Platonic ideal

The texting experience from the user's side + the abstract (channel- and executor-agnostic) architecture. Contents:

• User stories — 6 cards covering Jacob + friends + group members
• Scene A — bot respects attention. Group chat mockup with four human turns of silence, then one @mention triggers one reply.
• Scene B — the consent loop (the banger). Side-by-side: group view (bot says "let me check", types, answers) + Jacob's DM (bot shows question context + proposed reply + approve/deny keys). Below: the DisclosureEvent audit row that gets written.
• Scene C — manifest dialog. Bot discloses what it knows about Jacob in this chat.
• Scene D — reaction triggers. ⭐ on a bot message → saves to notes; ❌ → retracts.
• Architecture diagram (abstract). Channel adapter → Bot Gateway → {Attention, Executor, Consent Broker} → Knowledge Layer + out-of-band DM path + audit log. SVG, no machines named.
• Flow of a consent-loop turn as 8 numbered steps.

01 — Option 2 · Piyush-style

Concrete 3-machine architecture derived from Piyush's Jan 2026 design, adapted for per-chat isolation + P4 consent loop:

• Architecture SVG: Machine A (Bot Gateway, Hetzner VPS) + Machine B (Workspace host with per-chat Linux users) + Machine C (existing noos). SSH + claude --session-id <chat> -p per turn.
• "What lives where" table — component × machine × failure cost.
• Concrete wire-view consent loop (8 steps with exact commands).
• Code sketch — Bot Gateway executor in TypeScript.
• Strengths/costs, head-to-head — 5 strengths, 5 costs.
• 5 failure modes table with user-visible + recovery.

02 — Option 4 · Noos-style

Concrete single-box stateless architecture, closest to noos's existing Slack bot:

• Architecture SVG: One Fly Machine + noos. Per-turn ephemeral claude --print subprocess with transcript rebuilt from SQLite.
• Storage table — everything durable goes through SQLite; no workspace FS.
• Concrete wire-view consent loop (7 steps).
• Code sketch — executeTurn() + paused_turns SQLite schema.
• Strengths/costs, head-to-head — cheapest to ship; no code execution surface.
• 5 failure modes table.
• Migration path Option 4 → Option 2 — additive, not a rewrite.

Design principles used in all three

• Self-contained single-file HTML (no CDN, no JS, no external fetches)
• Dark theme for screenshot-ability
• iMessage-style chat bubbles with reply-to pills and reaction badges
• Inline SVG for architecture diagrams (crisp at any zoom)
• Cross-linked top nav on every page
• Mobile-friendly layout (split panels stack on narrow viewports)

Tickets closed

• picortex-b7c — [Mockup] Platonic-ideal UX + architecture
• picortex-ofb — [Mockup] Option 2 concrete architecture
• picortex-95r — [Mockup] Option 4 concrete architecture

Still open

If the option-1 (current picortex tmux) arch ever needs a concrete mockup, file a new ticket. Right now it's documented narratively in the original specs and has provisional banners saying "do not start implementation here."