KDX
Concept · v1

KDX Client & Server

The UI concept for KDX: a single-window desktop metaphor rendered entirely in a webview, styled after the terminals of the system it's reviving — an early-2000s Hotline-style server. Chrome-red window frames, a phosphor-green data layer, amber for advisories, and a scanline/vignette wash over black. Every window is a floating pane you drag, resize, minimize, and dock, launched from one vertical control strip: the Button Bar.

Windows
14
Palette
5 core colors
Chrome
1 window system
Launcher
1 Button Bar

This is the design concept — the visual language and interaction patterns the whole client is built from. For exact command names, event payloads, and protocol detail, see the GUI & Feature Handoff.

One shell, many windows There is exactly one piece of window chrome, one titlebar component, one context-menu component. Every one of the 14 windows is built from the same primitives, so learning to operate any one of them teaches you all of them.
Orientation

Design language

The palette does double duty as a status vocabulary — the same five colors that make up the chrome also carry meaning everywhere in the UI: green is "live and verified," amber is "advisory," red is "alert or destructive," grey is "dim/inactive."

desk / bg
#060404
chrome
#7a0a0a
alert
#e11b1b
green
#3df56e
amber
#ffb020
grey
#9c8080

Chrome red

Window borders, titlebars, the Button Bar frame. Structural — it says "this is the machine," not "this is data."

Phosphor green

Live data: chat text, connection status, chunk bitmaps, verified checkmarks. If it's green, it's real and current.

Amber

Advisory, not alarming: flood warnings, drop-box markers, "needs privilege" notes, pending confirmations.

Everything runs in ui-monospace (SF Mono / Menlo / Consolas) — there is no sans-serif anywhere in the running client; the terminal feel is load-bearing, not decorative. A subtle scanline overlay and a dark red vignette sit behind every window, tying the whole desktop together even when a dozen panes are open.

The shell

Window anatomy

One wireframe describes every window in the client. The titlebar is draggable; the body is whatever that window needs; the corner grip resizes; geometry persists per window across sessions.

WINDOW TITLE ▤ □ _ ✕
body content — table, form, transcript, or tree,
depending on the window

Chrome, left to right

  • Traffic dots — decorative, in the house red/black scheme rather than macOS colors.
  • Title — the window's name; some carry a live tag (member count, unread count).
  • Window menu (▤) — Keep on Top, Maximize/Restore, Save Location/Size, Minimize, Close.
  • Maximize / Minimize / Close — minimize sends it to the dock; close discards it (reopens fresh from the Button Bar).
Dock & focus Minimized windows collect as a row of chips in the bottom-left corner; clicking one restores it. Clicking anywhere in a window's body brings it to the front — there's no separate "focus" affordance, the whole pane is the hit target.
The shell

Button Bar

The one persistent piece of chrome. Not a taskbar fixed to an edge — it's itself a floating window, draggable and sized to its content, so it can be parked anywhere on the desktop. It's the only way to launch a window that isn't already open.

⣿ KDX
127.0.0.1:10700
News
Public Chat
Files
User List
Administration
Disconnect
Address Book
File Transfers
Messages ●
Settings
About
Exit
12 online2 xfers

Why a floating launcher, not a menu bar

  • Matches the source material's vertical button-strip launcher rather than a conventional top menu.
  • Every feature is one click away regardless of what else is open or focused.
  • The footer turns it into a lightweight status dashboard — online count, room count, active transfers — without needing a separate window.
  • Buttons enable/disable live as connection state changes, so it also communicates "what can I do right now."
The shell

Interaction patterns

Right-click verbs

Rows in User List, Files, and News threads all carry a right-click menu of verbs specific to that row — Send Message, Get Info, Disconnect, Download, Delete, Reply. The same single-instance popup component renders all of them.

Slash commands

The chat input doubles as a command line: /me, /topic, /away, /back, /afk, /clear, /help — both / and \ work, echoing the original client's dual-prefix habit.

Live LEDs

The Messages button on the Button Bar lights up when a private message arrives and the window isn't focused — the same "you have new mail" signal the source material used for private messages.

Filter-as-you-type

User List, Files, and Address Book all use the same pattern: a filter box above a list, narrowing rows on every keystroke with no separate "search" mode to enter or exit.

The windows

Core loop

Connect → Chat → Files → Transfers is the spine every session runs: authenticate, land in the lobby, move files, watch them verify.

21:58*** phraq joined
21:59<acidburn> anyone seed the 1620 build?
22:00*** zerocool waves
! flood protection: slow down
  • Connect — host/port/login form; the TOFU trust prompt lives here.
  • Chat — transcript + user sidebar + topic bar; five message tones (normal, action, system, warning, error).
  • Files — folder tree with [DIR] / [FILE] / [DROP] / [UP] kind tags; amber marks write-only drop boxes.
  • Transfers — one card per transfer with a live chunk-bitmap grid, the client's signature visual.
The windows

Presence & messaging

Where the client goes beyond a single lobby: a server-wide sense of who's around, and a private channel to reach them.

  • User List — every session on the server, not just the current room; class-colored bars, idle time, live add/remove as people connect and disconnect.
  • User Info — the detail card behind a User List row: class, login time, idle duration, address.
  • Messages — a two-pane DM client (conversation list + thread), the same shape as the public Chat window but scoped to one other person.
The windows

Public News

A three-pane newsreader — newsgroups, threaded posts, post viewer — that borrows Files' tree-on-the-left layout and Chat's access-by-class model, applied to asynchronous threaded discussion instead of a live room.

The windows

Administration

Two windows carry the SysOp's toolkit: Administration for roles (name, rank, color, a privilege checkbox grid) and the disconnect/ban panel; Accounts for creating logins and setting per-account privilege overrides. Both reuse the filterable-list-plus-edit-dialog pattern already established by Files and Address Book, so an admin window never introduces a new layout idiom — just a new set of fields.

The windows

Client conveniences

Address Book & Trackers

Address Book is your own saved bookmarks; Trackers is the live directory the connected server publishes. Same filter-and-click-to-connect pattern, different source of truth — one local, one remote.

Settings & About

Settings carries the theme picker (Blood Red is the default; TRON, Amber, and Matrix are alternate palettes over the same chrome) plus identity fields. About is pure branding — the client's own manifesto.

Motifs

Recurring motifs

The chunk bitmap

Every transfer card renders its resume bitmap as a grid — the single most distinctive visual in the client, and not just decoration: what you see is the literal byte state used to resume an interrupted transfer.

Class color coding

guest user power admin — the same four colors mark class everywhere a user appears: User List rows, chat nicknames, account summaries. Learn the four colors once, read privilege at a glance everywhere.

Reference

See also

This concept doc covers the visual and interaction language. For the exact command surface, event payloads, protocol packet types, and privilege bit values, see the GUI & Feature Handoff (v0.2) — and its frozen v0.1 baseline for the original 4-window concept this system grew out of.