anyos-client 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Xuheng Li
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,218 @@
+# anyos-client
+
+One window on an [anyOS](https://github.com/pid1labs/anyos) kernel — here, or
+on another machine.
+
+The client contains no kernel, no filesystem and no agents. Those live on a
+machine; this opens a window on that machine's URL and gets exactly what a
+browser would get. The desktop page runs with no preload, no IPC and no node
+integration, so it holds no powers a browser tab did not have.
+
+```sh
+npm install -g anyos-client
+anyos
+```
+
+Its one dependency is Electron, which brings its own binary.
+
+## The picker
+
+`anyos` opens a list of machines. `⌘⇧O` brings it back.
+
+**This computer** is found rather than configured, and reads as one of three
+things:
+
+| | |
+|---|---|
+| a kernel is running at 127.0.0.1:8765 | opening connects to it |
+| anyos is installed here — opening starts it | opening runs `anyos`, and closing the window stops it |
+| anyos is not installed on this computer | there is no local machine; add an address |
+
+A kernel that was already running is not the client's, so closing its window
+leaves it running. One the client started is, and stops with its window.
+
+To have a local kernel, install one:
+
+```sh
+npm install -g anyos
+```
+
+The client looks for it in `$ANYOS_KERNEL` (a command, or a path to the
+kernel's bin), then `anyos` on `PATH`, then an `anyos` package installed
+alongside this one. The kernel was called `webos` before it was called
+`anyos`, so each of those falls back to the old name — a machine that has not
+pulled the rename still starts, and `$WEBOS_KERNEL` is still read.
+
+## Tokens
+
+A kernel started with `ANYOS_TOKEN` set costs that secret on every route. The
+client answers for you.
+
+The scheme is HTTP Basic, and that is the point: app code loaded by
+`import()`, the event stream and the first navigation cannot set a header of
+their own, but Chromium attaches a Basic credential to all of them once it
+has one. So the whole of authentication is one handler in the main process,
+and no token is threaded through any request.
+
+A kernel **this client starts** gets a fresh 32-byte secret per launch, held
+in the two live processes and never written down. Nothing to configure, and
+nothing on disk to leak. If `ANYOS_TOKEN` is already set in your environment,
+that one is inherited instead — your kernel, your key.
+
+A kernel **already running** is not ours and its secret is not either. If it
+wants one, the local row says so and offers **Token**. For another machine,
+the token goes in its **Edit** form. What is stored is what the field shows,
+so clearing the field forgets it.
+
+Tokens live in `secrets.json` beside the machine list, never in
+`machines.json` — that file stays a plain document. Where the OS has a
+keychain, Electron's `safeStorage` seals each value and what lands on disk is
+ciphertext; where it does not, the value is written as it is and the record
+says `"how": "plain"` rather than implying otherwise. The file is `0600`
+either way.
+
+Over `http` the credential travels in the clear, so the token is not what
+makes a remote kernel safe to reach — the forward is, or the certificate
+below.
+
+## Certificates
+
+A kernel started with `--tls-cert` and `--tls-key` serves HTTPS, and its
+certificate is self-signed. There is no authority to ask about it, so this
+client asks nothing: it pins one fingerprint per machine and accepts that
+certificate and no other.
+
+That is a stronger claim than a public CA would give, not a weaker one. A
+certificate signed by an authority means *someone vouched for this name*; a
+pin means *this exact key, or nothing*. It also frees a kernel from having to
+match a name, so it can live at a bare IP that changes.
+
+The kernel prints the fingerprint when it starts:
+
+```
+cert       50:CE:50:AE:30:01:DF:13:…
+```
+
+Put that in the machine's **Certificate** field. Colons and case are ignored,
+so paste it however it came. If the certificate ever stops matching, the
+connection stops with it — a machine whose key changed is treated as a
+different machine, which is the entire point.
+
+**A new machine's fingerprint has to be entered by hand.** The friendlier
+alternative — accept whatever certificate appears the first time, pin it, and
+complain only if it later changes — was not taken. It is exactly the first
+connection that a pin is supposed to protect, and trusting it because it came
+first protects every connection except the one that mattered. You are already
+reading the kernel's startup output to copy its token; the fingerprint is
+printed on the line below it.
+
+Pins live beside the tokens in `secrets.json`, written plain, because a
+fingerprint is not a secret — the kernel prints it for anyone to read. It is
+kept there rather than in `machines.json` because quietly editing a pin is an
+attack, and that file is a document people are told they may edit.
+
+`https` changes nothing else. The token still travels as HTTP Basic, the door
+still answers 401 without it, and `app.on('login')` is untouched — TLS and the
+door compose rather than replacing one another.
+
+Loopback stays HTTP. A kernel on this computer, whether found or started
+here, gains nothing from encrypting a conversation that never leaves the
+machine.
+
+## One line instead of three fields
+
+A machine takes an address, a token and a fingerprint. The kernel's
+`remote.sh` prints all three as a single line:
+
+```
+anyos://eyJ2IjoxLCJuYW1lIjoiY2xhdy1zZXJ2ZXIiLCJhZGRyZXNz…
+```
+
+**Paste it into the picker and it connects.** Anywhere in the window — the
+address box, or just at the list. There is no form to fill and nothing to
+press: the machine is saved, named after its host, and opened.
+
+There is no review step because there would be nothing to review. None of
+those values were typed here, so none of them can have been mistyped, and a
+64-character fingerprint is not something anyone checks by eye.
+
+The machine is saved *before* the connection is tried, so a kernel that is
+down or a port the firewall has not opened yet leaves an entry in the list to
+retry — rather than sending you back to the terminal for the line again.
+
+Pasting a line for an address already in the list replaces its token and its
+pinned certificate, and asks first, because that is the one case where a paste
+destroys something.
+
+A line that is damaged, or of a version this client does not know, says so and
+changes nothing.
+
+> **The line contains the token, so the line is a secret.** Typing the token
+> into its own labelled box made that obvious; one opaque blob does not. Treat
+> it exactly as you would the token: not in a chat log, not in a ticket, not
+> in a screenshot.
+
+**Add a machine…** asks for a name and an address, and nothing else. A kernel
+reached by hand is one on a forward, and a forward needs neither a token nor a
+certificate. Anything that does have credentials arrives by pasting its line.
+
+Editing a machine you already have shows its token and certificate too, because
+replacing a token after `./remote.sh renew` is a real job and that is where it
+is done.
+
+## Another machine
+
+Install the kernel on that machine — it runs no window, so it needs neither
+Electron nor this package. Start it there (`anyos`).
+
+The kernel binds loopback and asks no caller who they are, so it is never put
+on a network directly. Bring it to this machine over a forward you open
+yourself:
+
+```sh
+ssh -N -L 8765:127.0.0.1:8765 user@host
+```
+
+Then **Add a machine…** with the address the forward made local —
+`localhost:8765` — and its token if that kernel was started with one. Open
+it.
+
+A kernel serving HTTPS can be reached directly instead, at `https://host:8765`
+with its fingerprint pinned, and then the certificate is what protects the
+credential rather than the forward. The desktop you see is that machine's, with
+its files and its agents. The client does not start or stop that kernel;
+closing the window leaves it running, and the connection ends when you end the
+forward.
+
+The list of machines is the only thing the client remembers. It lives in
+Electron's user-data directory as `machines.json`.
+
+## Development
+
+```sh
+npm install
+npm test        # the machine list, the address, the local kernel, the handlers
+npm run lint    # that this package reaches nothing outside itself
+npm start
+```
+
+The last of those tests runs the certificate and login handlers on a real
+Electron against a real TLS server, including the cases where they must
+refuse — a pin never seen to reject proves nothing. It needs Electron's
+binary, which is a separate download (`node node_modules/electron/install.js`),
+a display (`xvfb-run` will do), and `openssl` to mint a certificate. Missing
+any of those it says which and skips, rather than passing quietly.
+
+To run against a kernel you are working on rather than an installed one, name
+it — the client spawns a command, so any checkout will do:
+
+```sh
+ANYOS_KERNEL=../anyos/bin/anyos.js npm start
+```
+
+`npm run lint` is the rule this package is built on: every import is a Node
+builtin, `electron`, or a relative path that stays inside this directory, and
+the picker links no stylesheet it does not own. The client must keep working
+on a machine with no kernel on it at all.
+
+MIT.

package/bin/anyos.js

@@ -0,0 +1,18 @@
+#!/usr/bin/env node
+/**
+ * anyos — open the client.
+ *
+ * Electron's package exports the path to its own binary when it is required
+ * from Node, so this is the whole launcher: run that binary on this package
+ * and pass along whatever was asked for.
+ */
+import { spawn } from 'node:child_process';
+import { createRequire } from 'node:module';
+import path from 'node:path';
+
+const electron = createRequire(import.meta.url)('electron');
+const client = path.resolve(import.meta.dirname, '..');
+
+const child = spawn(electron, [client, ...process.argv.slice(2)], { stdio: 'inherit' });
+child.on('error', err => { console.error(err.message); process.exit(1); });
+child.on('close', code => process.exit(code ?? 0));

package/connect-line.js

@@ -0,0 +1,75 @@
+/**
+ * The connect line: one string carrying everything needed to reach a machine.
+ *
+ *   anyos://<base64url of {v,name,address,fingerprint,token}>
+ *
+ * A machine takes three values, and three values typed into three boxes is
+ * three chances to put the right one in the wrong box — after which the only
+ * report is that it did not connect. The kernel's remote.sh prints this
+ * instead, and pasting it fills the form in, visibly, so what arrived can
+ * still be read and corrected before it is saved.
+ *
+ * It carries the token, so it is as secret as the token is.
+ *
+ * This file imports nothing. It is the one module the picker's page and the
+ * main process both run, and a page cannot have node: builtins.
+ */
+
+export const PREFIX = 'anyos://';
+
+/** Is this a connect line rather than an address someone is typing? */
+export const isConnectLine = text => String(text ?? '').trim().startsWith(PREFIX);
+
+const oops = message => Object.assign(new Error(message), { status: 400 });
+
+/* base64url, unpadded, and possibly with a newline where a terminal wrapped
+   it — the whitespace goes before anything else looks at it */
+function decode(body) {
+  const b64 = body.replace(/\s+/g, '').replaceAll('-', '+').replaceAll('_', '/');
+  const padded = b64 + '='.repeat((4 - (b64.length % 4)) % 4);
+  const binary = atob(padded);
+  const bytes = Uint8Array.from(binary, ch => ch.charCodeAt(0));
+  return new TextDecoder('utf-8', { fatal: true }).decode(bytes);
+}
+
+/**
+ * Read one, or throw a sentence saying what is wrong with it. Returns the
+ * fields in the names the form uses, so it drops straight into the picker:
+ * { name, url, fingerprint, token }.
+ *
+ * Nothing here is trusted for being inside a connect line — the address is
+ * still cleaned, the fingerprint still has to be one, and a version this
+ * client does not know is refused rather than guessed at.
+ */
+export function readConnectLine(text) {
+  const raw = String(text ?? '').trim();
+  if (!raw.startsWith(PREFIX)) throw oops('that is not a connect line');
+  /* the prefix comes off as a string. It is not a URL: the payload is
+     base64url, whose alphabet has `_` in it, which is not a legal hostname
+     and which a URL parser would mangle or refuse. */
+  const body = raw.slice(PREFIX.length).trim();
+  if (!body) throw oops('that connect line is empty');
+
+  let parsed;
+  try {
+    parsed = JSON.parse(decode(body));
+  } catch {
+    throw oops('that connect line is damaged — copy the whole of it');
+  }
+  if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+    throw oops('that connect line is damaged — copy the whole of it');
+  }
+  if (parsed.v !== 1) {
+    throw oops(`that connect line is version ${JSON.stringify(parsed.v) ?? 'unknown'}, which this client does not know — update it`);
+  }
+
+  const address = String(parsed.address ?? '').trim();
+  if (!address) throw oops('that connect line carries no address');
+
+  return {
+    name: String(parsed.name ?? '').trim(),
+    url: address,
+    fingerprint: String(parsed.fingerprint ?? '').trim(),
+    token: String(parsed.token ?? '').trim()
+  };
+}

package/connect.css

@@ -0,0 +1,166 @@
+/* The picker: one small window in the desktop's own vocabulary — panels on
+   hairlines, no radii, the phosphor for what is live.
+
+   The tokens and the handful of controls are carried here rather than linked
+   out of the desktop's stylesheet: this package ships without a kernel, so
+   there is no web/ to reach into. It is a copy of a shared language, not a
+   dependency on one — the picker is the only page the client ever draws, and
+   it is drawn dark, because the window it opens onto is.
+
+   The type runs a step above the desktop's. A desktop is read at arm's length
+   with a window full of context around every word; this is one window on an
+   empty screen, read once, and its smallest words — an address, a field label
+   — are exactly the ones that must not be guessed at. Hairlines stay 1px:
+   what grows is the reading, not the frame. */
+
+:root {
+  --font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
+  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+
+  --ground: #0c1014;
+  --panel: #10161b;
+  --raised: #172029;
+  --hair: #223039;
+  --hair-soft: #1a242c;
+  --text: #d7e0e6;
+  --text-2: #a9b7c0;
+  --text-3: #7d8d98;
+  --live: #3ddc97;
+  --bad: #ff6b57;
+  --accent-text: #0c1014;
+  --field: var(--ground);
+  --field-border: var(--hair);
+  --scroll: rgba(215,224,230,.22);
+}
+
+* { box-sizing: border-box; }
+[hidden] { display: none !important; }
+html, body { height: 100%; margin: 0; background: var(--ground); }
+
+body {
+  font-family: var(--font);
+  font-size: 13px;
+  color: var(--text);
+  overflow: hidden;
+  -webkit-font-smoothing: antialiased;
+  user-select: none;
+  cursor: default;
+}
+
+button { font: inherit; color: inherit; background: none; border: 0; cursor: default; }
+input { font: inherit; color: inherit; }
+::selection { background: color-mix(in srgb, var(--live) 30%, transparent); }
+
+* { scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; }
+*::-webkit-scrollbar { width: 9px; }
+*::-webkit-scrollbar-thumb { background: var(--scroll); border: 3px solid transparent; background-clip: content-box; }
+*::-webkit-scrollbar-track { background: transparent; }
+
+/* the shared vocabulary, as much of it as one window needs */
+.spec-heading { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
+.spec-text { margin: 0; line-height: 1.6; font-size: 14px; max-width: 62ch; }
+.spec-text.muted { color: var(--text-3); font-size: 13px; }
+.spec-item-title { font-size: 13px; font-weight: 500; }
+.spec-item-detail { font-size: 12px; color: var(--text-3); }
+
+/* a button says exactly what it does; one primary per screen, in phosphor */
+.btn {
+  height: 28px; padding: 0 12px; font-family: var(--mono); font-size: 11px;
+  color: var(--text); background: var(--panel); border: 1px solid var(--hair);
+}
+.btn:hover { background: var(--raised); }
+.btn:active { background: var(--live); color: var(--accent-text); border-color: var(--live); }
+.btn.primary { color: var(--live); border-color: var(--live); }
+.btn.primary:active { background: var(--live); color: var(--accent-text); }
+.btn:disabled { color: var(--text-3); border-color: var(--hair-soft); background: var(--panel); }
+
+/* a ground-coloured well; focus draws the hairline in phosphor */
+.field {
+  height: 28px; padding: 0 10px; outline: none; font-family: var(--mono); font-size: 12px;
+  color: var(--text); background: var(--field); border: 1px solid var(--field-border); user-select: text;
+}
+.field::placeholder { color: var(--text-3); }
+.field:focus { border-color: var(--live); }
+
+.vibe-error { color: var(--bad); font-size: 12px; font-family: var(--mono); white-space: pre-wrap; }
+/* the same line also reports something going right — a pasted connect line */
+.vibe-error.good { color: var(--live); }
+
+/* the picker itself ------------------------------------------ */
+.picker { height: 100%; display: flex; flex-direction: column; gap: 16px; padding: 0 28px 20px; }
+
+/* hiddenInset puts the traffic lights top-left and leaves no title bar, so the
+   header is the handle that moves the window — and it takes the strip above it
+   too, which is the first place a hand reaches for and was padding before */
+.drag { -webkit-app-region: drag; padding-top: 40px; }
+.drag .spec-heading { margin: 0; font-size: 23px; }
+.drag .spec-text { margin-top: 4px; font-size: 14px; }
+/* small, and always there: the answer to "which build am I looking at" */
+.build { margin: 6px 0 0; font-family: var(--mono); font-size: 11px; color: var(--text-2); opacity: .7; }
+
+.machines { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
+.list { list-style: none; margin: 0; padding: 0; overflow: auto; border: 1px solid var(--hair); background: var(--panel); }
+.machine {
+  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
+  border-bottom: 1px solid var(--hair-soft); outline: none;
+}
+.machine:last-child { border-bottom: 0; }
+.machine:hover { background: var(--raised); }
+.machine.selected { background: var(--raised); box-shadow: inset 2px 0 0 var(--live); }
+.machine .glyph { display: inline-flex; color: var(--text-3); }
+.machine.selected .glyph { color: var(--live); }
+.machine .spec-item-title { font-size: 15px; }
+.machine .text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
+.machine .spec-item-detail { font-family: var(--mono); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.machine .tools { display: none; gap: 12px; }
+.machine:hover .tools, .machine.selected .tools { display: inline-flex; }
+
+/* what this computer has: a kernel answering, or none to answer */
+.spec-item-detail.tone-good { color: var(--live); }
+.spec-item-detail.tone-bad { color: var(--bad); }
+.machine.unavailable .spec-item-title, .machine.unavailable .glyph { color: var(--text-3); }
+
+.link { padding: 0; font-family: var(--mono); font-size: 13px; color: var(--text-2); }
+.link:hover { color: var(--text); }
+
+/* the controls, a step up with them — a taller well for a taller word */
+.picker .field { height: 32px; font-size: 14px; }
+.picker .btn { height: 32px; padding: 0 14px; font-size: 13px; }
+
+.editor {
+  display: grid; grid-template-columns: 84px 1fr; gap: 10px 12px; align-items: center;
+  padding: 14px 12px; border: 1px solid var(--hair); background: var(--panel);
+}
+.editor label { display: contents; }
+/* the two groups that hide together are not boxes: they hand their fields
+   straight to the grid, or a wrapper would break the label/field columns */
+.editor #address, .editor #credentials, .editor #certificate { display: contents; }
+.editor #address[hidden], .editor #credentials[hidden], .editor #certificate[hidden] { display: none; }
+.editor label > span { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
+.editor .field { width: 100%; }
+.editor .note { grid-column: 2; margin: 0; font-size: 13px; }
+.editor .actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 4px; }
+
+/* While the form is open it is the whole window: the list gives way to it.
+   The window cannot be resized and the body does not scroll, so a form that
+   outgrew the viewport would put Save where no one could reach it. The error
+   line stays, because that is where a rejected address explains itself. */
+.picker:has(#form:not([hidden])) #list,
+.picker:has(#form:not([hidden])) .build { display: none; }
+
+footer { display: flex; justify-content: space-between; align-items: center; }
+.vibe-error { margin: 10px 0 0; font-size: 13px; }
+
+/* busy is shown, never said: the rows dim, a phosphor hairline crawls along the top of the list */
+.machines.busy .machine { opacity: .55; pointer-events: none; }
+.machines.busy::before {
+  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 1;
+  background: linear-gradient(90deg, transparent, var(--live) 40%, var(--live) 60%, transparent);
+  background-size: 50% 100%; background-repeat: no-repeat;
+  animation: vibe-crawl 1.8s ease-in-out infinite alternate;
+}
+@keyframes vibe-crawl { from { background-position: -100% 0; } to { background-position: 200% 0; } }
+
+@media (prefers-reduced-motion: reduce) {
+  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
+}

package/connect.html

@@ -0,0 +1,68 @@
+<!doctype html>
+<html lang="en" data-theme="dark">
+<head>
+<meta charset="utf-8">
+<!-- This page holds the only door into the main process, so it is told exactly
+     what it may load: its own script and style, the one font service, and
+     nothing else at all. It has no inline script or style to allow. -->
+<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self'; style-src 'self' https://fonts.googleapis.com; font-src https://fonts.gstatic.com; img-src 'self' data:; form-action 'none'; base-uri 'none'">
+<title>anyOS</title>
+<!-- the desktop's vocabulary, carried in connect.css: this package ships no web/ -->
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Instrument+Sans:wght@400;500;600&display=swap">
+<link rel="stylesheet" href="connect.css">
+</head>
+<body>
+<main class="picker">
+  <header class="drag">
+    <h1 class="spec-heading">Open a machine</h1>
+    <p class="spec-text muted">The desktop, its files and its agents live where the kernel runs.</p>
+    <p class="build" id="build" title="which copy of the client this window is"></p>
+  </header>
+
+  <section class="machines" id="machines">
+    <ol class="list" id="list"></ol>
+    <p class="vibe-error" id="problem" hidden></p>
+  </section>
+
+  <form class="editor" id="form" hidden>
+    <div id="address">
+      <label><span>Name</span><input class="field" name="name" placeholder="devbox" autocomplete="off" spellcheck="false"></label>
+      <label><span>Address</span><input class="field" name="url" placeholder="localhost:8765" autocomplete="off" spellcheck="false" required></label>
+    </div>
+    <div id="credentials">
+      <label><span>Token</span><input class="field" name="token" type="password" placeholder="only if that kernel asks for one" autocomplete="off" spellcheck="false"></label>
+      <p class="spec-text muted note" id="token-note">The kernel's <code>ANYOS_TOKEN</code>, if it was started with one. Empty forgets it.</p>
+    </div>
+    <div id="certificate">
+    <label><span>Certificate</span><input class="field" name="fingerprint" placeholder="only for an https address" autocomplete="off" spellcheck="false"></label>
+    <p class="spec-text muted note" id="cert-note">For an <code>https://</code> address, the fingerprint its kernel printed — <code>cert&nbsp;50:CE:…</code>. Nothing else is accepted.</p>
+    </div>
+    <div class="actions">
+      <button type="button" class="link" id="cancel">Cancel</button>
+      <button type="submit" class="btn primary">Save</button>
+    </div>
+  </form>
+
+  <footer id="footer">
+    <button type="button" class="link" id="add">Add a machine…</button>
+    <button type="button" class="btn primary" id="open" disabled>Open</button>
+  </footer>
+</main>
+
+<template id="row">
+  <li class="machine" tabindex="-1">
+    <span class="glyph"></span>
+    <span class="text"><span class="spec-item-title"></span><span class="spec-item-detail"></span></span>
+    <span class="tools">
+      <button type="button" class="link token">Token</button>
+      <button type="button" class="link edit">Edit</button>
+      <button type="button" class="link remove">Remove</button>
+    </span>
+  </li>
+</template>
+<template id="glyph-local"><svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.2"><rect x="2.5" y="3.5" width="11" height="7"/><path d="M1 12.5h14"/></svg></template>
+<template id="glyph-remote"><svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.2"><rect x="2.5" y="2.5" width="11" height="4"/><rect x="2.5" y="9.5" width="11" height="4"/><circle cx="5" cy="4.5" r=".9" fill="currentColor" stroke="none"/><circle cx="5" cy="11.5" r=".9" fill="currentColor" stroke="none"/></svg></template>
+
+<script type="module" src="connect.js"></script>
+</body>
+</html>