// Drover-Go · style sketches v2 — "feels like real software" set. // Each artboard explores a DIFFERENT software UI paradigm + element vocabulary, // not just a different palette. 480×640 fixed Win11 window unless noted. const W = 480; const H = 640; const Win = ({ children, bg = '#fff', radius = 8, ring = 'rgba(0,0,0,.18)' }) => (
{children}
); const Mark = ({ size = 14, color = '#0c8c7a' }) => ( ); const TitleButtons = ({ color = '#666' }) => (
⚙ — ×
); // ═════════════════════════════════════════════════════════════════════════ // 1 · Fluent / Win11 native — the safe baseline // ═════════════════════════════════════════════════════════════════════════ const SketchFluent = () => { const f = "'Segoe UI Variable','Segoe UI',system-ui,sans-serif"; return (
Drover-Go 0.4.2
SOCKS5 Proxy
Status
Running diagnostics…
{[ ['✓', 'TCP reachability', '12 ms', '#107c10'], ['✓', 'SOCKS5 greeting', 'ok', '#107c10'], ['◐', 'TCP CONNECT to Discord', '…', '#0067c0'], ['·', 'UDP ASSOCIATE', '', '#bbb'], ['·', 'UDP round-trip via STUN', '', '#bbb'], ['·', 'Discord API reachable', '', '#bbb'], ].map(([ic, name, val, c], i) => (
{ic} {name} {val}
))}
); }; const FluentField = ({ label, value, flex, width }) => ( ); // ═════════════════════════════════════════════════════════════════════════ // 2 · Sidebar nav (VS Code / Postman / Tower) — left rail with sections // ═════════════════════════════════════════════════════════════════════════ const SketchSidebar = () => { const f = "'Inter', system-ui, sans-serif"; const m = "'JetBrains Mono', monospace"; return (
Drover-Go — proxy: 95.165.72.59:12334
{/* sidebar */}
{[['◉', 'Proxy', true], ['◇', 'Diagnose'], ['≋', 'Traffic'], ['≣', 'Logs'], ['⚙', 'Settings']].map(([ic, l, on], i) => (
{ic} {l}
))}
{/* breadcrumb / tabs */}
● Proxy
diagnostic.run
Endpoint
SOCKS5
95.165.72.59
:12334
Diagnostic results
{[ ['✓', 'tcp_reachability', '12 ms', '#21d07a'], ['✓', 'socks5_greeting', 'ok', '#21d07a'], ['✓', 'socks5_authentication', 'ok', '#21d07a'], ['✓', 'tcp_connect_discord', '38 ms', '#21d07a'], ['✗', 'udp_associate', 'EPERM: blocked', '#ff5e5e'], ['—', 'udp_stun_rtt', 'skipped', '#666'], ['—', 'discord_api', 'skipped', '#666'], ].map(([ic, n, v, c], i) => (
{ic} {n} {v}
))}
⚠ 1 of 7 checks failed. UDP voice/screenshare won't work.
{/* status bar */}
● 6/7 idle UTF-8 · LF · drover.toml
); }; // ═════════════════════════════════════════════════════════════════════════ // 3 · Step wizard / Tab progression — DigiCert / Tunnelblick connect-flow // ═════════════════════════════════════════════════════════════════════════ const SketchWizard = () => { const f = "'Inter', system-ui, sans-serif"; return (
Drover-Go · Setup
{/* stepper */}
{[['1', 'Configure', true], ['2', 'Verify', true], ['3', 'Connect', false]].map(([n, l, done], i) => (
{done && i !== 1 ? '✓' : n} {l}
{i < 2 &&
} ))}

Verifying your proxy

We're running 7 checks against 95.165.72.59:12334 to make sure Discord will work end-to-end.
{/* progress + ring */}
4/7
Testing UDP relay…
This usually takes 5–15 seconds.
{[ ['✓', 'TCP reachability', '12 ms', '#21a655'], ['✓', 'SOCKS5 greeting', 'ok', '#21a655'], ['✓', 'SOCKS5 authentication', 'ok', '#21a655'], ['✓', 'TCP CONNECT to Discord', '38 ms', '#21a655'], ['◐', 'UDP ASSOCIATE', 'running…', '#1e6fd9'], ['·', 'UDP round-trip via STUN', '', '#bbb'], ['·', 'Discord API reachable', '', '#bbb'], ].map(([ic, n, v, c], i) => (
{ic} {n} {v}
))}
); }; // ═════════════════════════════════════════════════════════════════════════ // 4 · Network monitor — gauges, sparklines, multi-pane (Wireshark / Activity) // ═════════════════════════════════════════════════════════════════════════ const SketchMonitor = () => { const f = "'Inter', system-ui, sans-serif"; const m = "'JetBrains Mono', monospace"; return (
Drover-Go ● ACTIVE 4m 12s
{/* compact endpoint */}
95.165.72.59:12334 SOCKS5 · auth
{/* meters */}
{/* sparkline panel */}
Throughput · last 60s peak 3.4 MB/s
{/* connections table */}
Proto Endpoint Up Down
{[ ['UDP', 'voice-eu-rtc-1.discord', '142 KB/s', '2.4 MB/s', '#1e6fd9'], ['TCP', 'gateway.discord:443', '8 KB/s', '12 KB/s', '#0c8c7a'], ['TCP', 'cdn.discordapp:443', '0', '380 KB/s', '#0c8c7a'], ['TCP', 'media.discordapp:443', '0', '8 KB/s', '#0c8c7a'], ].map((r, i) => (
{r[0]} {r[1]} {r[2]} {r[3]}
))}
); }; const Gauge = ({ label, v, unit, pct, c }) => (
{label}
{v} {unit}
); // ═════════════════════════════════════════════════════════════════════════ // 5 · Inspector / Properties — devtools-style key:value list // ═════════════════════════════════════════════════════════════════════════ const SketchInspector = () => { const f = "'Inter', system-ui, sans-serif"; const m = "'JetBrains Mono', monospace"; return (
Drover-Go 0.4.2
{/* tabs */}
{['Inspector', 'Network', 'Console', 'Settings'].map((t, i) => (
{t}
))}
} editable />
14 props · saved
); }; const Group = ({ title, expanded, children }) => (
{expanded ? '▼' : '▶'}{title}
{children}
); const KV = ({ k, v, t, color, editable }) => (
{k} {v} {t && {t}}
); // ═════════════════════════════════════════════════════════════════════════ // 6 · Command palette + form — Raycast / Linear / cmd+k feel // ═════════════════════════════════════════════════════════════════════════ const SketchPalette = () => { const f = "'Inter', system-ui, sans-serif"; const m = "'JetBrains Mono', monospace"; return (
Drover-Go
{/* command bar */}
⌘ esc
{/* suggestion */}
▸ Check connection ↵
● Start proxying ⇧↵
{/* Form below — proxy quick-edit */}
Proxy
Last run · 7/7 passed
{[ ['tcp_reachability', '12 ms'], ['socks5_greeting', 'ok'], ['udp_associate', 'relay 1.2.3.4'], ['udp_stun_rtt', '24 ms'], ['discord_api', '200'], ].map(([n, v], i) => (
✓ {n} {v}
))}
↵ run ⇧↵ start idle · ready
); }; const PalField = ({ label, value, flex, width }) => ( ); // ═════════════════════════════════════════════════════════════════════════ // 7 · Big toggle / Hero — TunnelBear / NordVPN big-button connect // ═════════════════════════════════════════════════════════════════════════ const SketchHero = () => { const f = "'Inter', system-ui, sans-serif"; const m = "'JetBrains Mono', monospace"; return (
Drover-Go ● connected
{/* Big circular button */}
⏻ ACTIVE
Discord is protected
via 95.165.72.59 · 4m 12s
{/* Stats row */}
{[ ['↑', '142', 'KB/s'], ['↓', '2.8', 'MB/s'], ['◇', '14', 'tcp'], ['◈', '3', 'udp'], ].map(([k, v, u], i) => (
{k}
{v}
{u}
))}
▸Logs (3 new)
); }; // ═════════════════════════════════════════════════════════════════════════ // 8 · Toolbar + ribbon — old-school Office / Audacity feel // ═════════════════════════════════════════════════════════════════════════ const SketchToolbar = () => { const f = "'Segoe UI', system-ui, sans-serif"; const m = "'Consolas', 'JetBrains Mono', monospace"; return (
Drover-Go — [Connected]
{/* menu bar */}
{['File', 'Edit', 'Run', 'View', 'Tools', 'Help'].map(m => ( {m} ))}
{/* ribbon */}
Host:
95.165.72.59
Port:
12334
✓ Authentication User:
alice
{[ ['✓', 'TCP reachability', 'PASS · 12 ms'], ['✓', 'SOCKS5 greeting', 'PASS · ok'], ['✓', 'SOCKS5 authentication', 'PASS · ok'], ['✓', 'TCP CONNECT to Discord', 'PASS · 38 ms'], ['✓', 'UDP ASSOCIATE', 'PASS · relay 1.2.3.4'], ['✓', 'UDP round-trip via STUN', 'PASS · 24 ms'], ['✓', 'Discord API reachable', 'PASS · 200'], ].map((r, i) => (
{r[0]} {r[1]} {r[2]}
))}
{/* status bar */}
Ready ● 7/7 ↑ 142 KB/s ↓ 2.8 MB/s uptime 4m 12s
); }; const Tool = ({ icon, label, primary, disabled }) => (
{icon} {label}
); const Fieldset = ({ label, children, flex }) => (
{label} {children}
); // ═════════════════════════════════════════════════════════════════════════ // 9 · Modern dev tool — Studio (Linear-ish, restrained dark) // ═════════════════════════════════════════════════════════════════════════ const SketchStudio = () => { const f = "'Inter', sans-serif"; return (
Drover-Go 0.4.2
SOCKS5 Proxy
Status ● All systems
{[ ['TCP reachability', '12 ms'], ['SOCKS5 greeting', 'ok'], ['SOCKS5 authentication', 'ok'], ['TCP CONNECT to Discord', '38 ms'], ['UDP ASSOCIATE', 'relay 1.2.3.4'], ['UDP round-trip via STUN', '24 ms'], ['Discord API reachable', '200'], ].map(([n, v], i) => (
✓ {n} {v}
))}
); }; const StField = ({ label, value, flex, width }) => ( ); // ═════════════════════════════════════════════════════════════════════════ // 10 · Pipeline / DAG — visualize the test chain as a flow // ═════════════════════════════════════════════════════════════════════════ const SketchPipeline = () => { const f = "'Inter', system-ui, sans-serif"; const m = "'JetBrains Mono', monospace"; const Node = ({ x, y, label, status, sub }) => { const c = status === 'pass' ? '#21a655' : status === 'fail' ? '#e85a4f' : status === 'run' ? '#1e6fd9' : '#aaa'; const bg = status === 'pass' ? '#e8f7ee' : status === 'fail' ? '#fdebe9' : status === 'run' ? '#eaf1fb' : '#f4f4f4'; return ( {label} {sub} ); }; const Arrow = ({ from, to, dashed }) => ( ); return (
Drover-Go · pipeline view
{/* compact endpoint */}
SOCKS5
{/* DAG */}
● 4/7 running
); }; // ═════════════════════════════════════════════════════════════════════════ // 11 · Bauhaus — geometric blocks, primary colors, asymmetric grid // ═════════════════════════════════════════════════════════════════════════ const SketchBauhaus = () => { const f = "'Space Grotesk', sans-serif"; return (
DROVER-GO v0.4.2 · ⚙ · — · ×
FORM 01
SOCKS5 PROXY
STATUS · 7/7
ALL CHECKS PASSED
{[ ['TCP reach', '12ms'], ['SOCKS5 greet', 'ok'], ['SOCKS5 auth', 'ok'], ['CONNECT', '38ms'], ['UDP assoc', 'ok'], ['UDP STUN', '24ms'], ['API', '200'], ].map(([n, v], i) => (
{n} {v}
))}
); }; const BaField = ({ label, value, flex, width, dark }) => ( ); // ═════════════════════════════════════════════════════════════════════════ // 12 · Brutalist — hard borders, mono, acid lime // ═════════════════════════════════════════════════════════════════════════ const SketchBrutalist = () => { const m = "'Geist Mono', 'JetBrains Mono', monospace"; return (
▶ DROVER-GO v0.4.2
[⚙][—][X]
// SOCKS5 PROXY
[X] AUTHENTICATION
// STATUS · 7/7 OK
{[ ['[OK]', 'TCP_REACHABILITY', '12ms'], ['[OK]', 'SOCKS5_GREETING', 'ok'], ['[OK]', 'SOCKS5_AUTH', 'ok'], ['[OK]', 'CONNECT_DISCORD', '38ms'], ['[OK]', 'UDP_ASSOCIATE', 'relay 1.2.3.4'], ['[OK]', 'UDP_STUN_RTT', '24ms'], ['[OK]', 'DISCORD_API', '200'], ].map(([s, n, v], i) => (
{s} {n} {v}
))}
); }; const BrField = ({ label, value, flex, width }) => ( ); // ═════════════════════════════════════════════════════════════════════════ // SketchesApp // ═════════════════════════════════════════════════════════════════════════ const SKETCHES = [ { id: 'fluent', label: '01 · Fluent / Win11 native', el: }, { id: 'sidebar', label: '02 · IDE sidebar (VS Code-ish)', el: }, { id: 'wizard', label: '03 · Wizard / stepper', el: }, { id: 'monitor', label: '04 · Network monitor (gauges)', el: }, { id: 'inspector', label: '05 · Inspector / properties', el: }, { id: 'palette', label: '06 · Command palette (cmd+k)', el: }, { id: 'hero', label: '07 · Big toggle (VPN-style)', el: }, { id: 'toolbar', label: '08 · Toolbar / ribbon (classic)', el: }, { id: 'studio', label: '09 · Studio (Linear-ish)', el: }, { id: 'pipeline', label: '10 · Pipeline / DAG view', el: }, { id: 'bauhaus', label: '11 · Bauhaus blocks', el: }, { id: 'brutalist', label: '12 · Brutalist (mono+lime)', el: }, ]; const SketchesApp = () => (
What changed

Removed the "marketing" stylings (ticket, synthwave, soft pastel, editorial serif). Replaced with software-native paradigms — each card explores a different way to organize the same UI, not just a different paint job:

  • Layout patterns: sidebar IDE · wizard/stepper · pipeline/DAG · ribbon · palette+form · big-toggle hero
  • Element vocab: gauges + sparklines · key/value inspector · fieldsets · tabs+breadcrumbs · status bar · toolbar buttons
  • Aesthetic: Fluent (Win11) · classic Office · Linear/Studio · brutalist · Bauhaus blocks

Tell me which paradigm/aesthetic combo to take forward.

 {SKETCHES.map(s => ( {s.el} ))} ); // Expose individual sketches so other files (e.g. shortlist) can render them. Object.assign(window, { SketchFluent, SketchSidebar, SketchWizard, SketchMonitor, SketchInspector, SketchPalette, SketchHero, SketchToolbar, SketchStudio, SketchPipeline, SketchBauhaus, SketchBrutalist, });