Extends the existing Engine-API-based docker integration adapter rather than
porting Termix's SSH+CLI approach, since ArchNest's docker integrations only
ever configure a baseUrl. Adds backend/src/docker/{client,exec}.ts and
backend/src/routes/docker.ts (REST + websocket exec-terminal via raw socket
hijack), and a new Containers page wired into the sidebar/router.
Verified end-to-end against a real dockerd instance and a real container in
this sandbox, which caught and fixed a genuine bug: calling /exec/{id}/resize
before starting the exec hangs the daemon indefinitely; fixed by setting the
initial size via ConsoleSize at exec-create time instead.
Ephemeral per-request SFTP connections, whole-file-in-memory view/edit
with a 50MB cap and binary detection, streaming download for files of
any size, multipart upload. No sudo/permission-elevation or
server-to-server transfer in this pass (documented gaps, matching
Termix's own scope for the latter).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
- backend/src/ssh/connect.ts: extracted shared SSH-connect logic
(jump-host chaining, TOFU host-key verification) out of terminal.ts
so tunnels can reuse it.
- backend/src/tunnels/manager.ts + socks5.ts: in-memory tunnel
runtime manager supporting local forward (forwardOut), remote
forward (forwardIn), and dynamic SOCKS5 proxying, with automatic
reconnect/retry and an auto-start-on-boot option. New `tunnels`
table persists configs as the saved presets.
- backend/src/routes/tunnels.ts: REST CRUD + connect/disconnect.
- src/pages/Tunnels.tsx: new /tunnels page (sidebar entry added) to
create, start/stop, and delete tunnels with live status polling.
- Verified end-to-end against a real ssh2 test server handling real
forwardOut/forwardIn requests and a real upstream TCP echo server -
all three tunnel modes moved real data, and disconnect correctly
tore down the local listener.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
- terminal.ts: connectWithCertificate() shells out to system ssh via
node-pty for OpenSSH certificate auth (ssh2 has no native support);
list_tmux WS message + tmuxSession connect param for tmux
attach/create with shell-injection-safe name validation;
sessionLogging config field appends terminal output to disk.
- Settings.tsx: certificate secret field and sessionLogging checkbox
for SSH host integrations.
- Terminal.tsx: tmux session picker in each pane's header.
- Verified end-to-end against a real test SSH server running real
bash/tmux processes (plain shell, tmux create+list, session log
written to disk). Cert auth path type-checks but is unverified in
this sandbox (no ssh CLI available) - documented as a gap in
TERMIX_MIGRATION.md.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
Terminal.tsx is rebuilt around a reusable TerminalPane component (one
xterm + WebSocket connection each) so a tab can hold 1, 2, or 4 panes
(single / split-2 / 2x2 grid), each independently connectable to any SSH
host. Added a small terminal preferences bar (theme preset, font size,
font family) persisted to localStorage and applied per-pane.
Also fixes two build-time issues surfaced while wiring this up: an unused
parameter in Settings.tsx's fieldsWithJumpHost helper, and a stale
JSX.Element reference that doesn't resolve under this project's tsc -b
project-reference build (replaced with React.ReactElement).
This completes Phase 1b of the Termix migration (see TERMIX_MIGRATION.md).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
Terminal connections can now reference a jumpHostIntegrationId on the SSH
integration config; the backend connects to the jump host first and tunnels
to the real target via ssh2's forwardOut(), rather than connecting directly.
Added an ssh_host_keys table and a hostVerifier callback that accepts and
stores a host's fingerprint on first connect, then hard-rejects on any
mismatch on subsequent connects (trust-on-first-use).
Settings previously only ever showed/edited one integration per type, which
silently prevented configuring more than one SSH host at all. Added a
dedicated multi-host SSH section (per-host Save/Test/Delete, Add SSH Host,
and a Jump Host dropdown) so jump-host chaining is actually usable from the UI.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
Implements the minimal-viable terminal described in TERMIX_MIGRATION.md
Phase 1a: a real interactive SSH session in the browser over a
WebSocket, using xterm.js on the frontend and ssh2 on the backend.
Reuses ArchNest's existing SSH integrations (host/port/username/
password/privateKey/passphrase) instead of introducing a second,
duplicate host-management system the way Termix has one.
Backend: new /api/terminal WebSocket route (registered via
@fastify/websocket) handling connect/input/resize/disconnect messages,
authenticated via a JWT passed as a query param (browsers can't set
custom headers on the WS handshake). Extracted the integration secret
loader out of routes/integrations.ts into db/secrets.ts so the new
terminal route can reuse it without duplicating the decrypt logic.
Frontend: new Terminal.tsx page listing configured SSH hosts and
rendering an xterm.js terminal wired to the WebSocket; wired into
App.tsx at /terminal. vite.config.ts's dev proxy now forwards
WebSocket upgrades (ws: true) so this works under `npm run dev`.
Verified end-to-end against a real (test) ssh2-based SSH server:
connect, shell banner, keystroke echo, and prompt redraw all worked
correctly over the actual WebSocket protocol.
Deliberately deferred to Phase 1b/1c per the migration doc: jump-host
chaining, tab/split-pane UI, terminal theme/font settings, OPKSSH cert
auth, tmux session monitor, session recording.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
Many self-hosted machines have no management API, so add an SSH-based
adapter (using ssh2) that connects with password or key auth and probes
hostname/disk/mem/load via a single shell command, surfacing health
status like the other integrations. Also fixes routes/integrations.ts's
hardcoded type enum, which was out of sync with the IntegrationType
union and rejected the new 'ssh' type.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
TopBar, Sidebar, and the Settings profile form previously showed a hardcoded
"ArchNest Ops" identity, a fake unread-notification count, and a static "All
Systems Operational" indicator. These now use the real logged-in user (with
a new PUT /api/auth/me endpoint to edit display name/email/avatar) and real
integration health for the sidebar status dot.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
Adds an events table + logEvent helper for a genuine activity log, and
a /api/integrations/resources aggregate endpoint backed by a new optional
listResources adapter method (implemented for Docker via its containers API).
StatusCards, MiddleRow, BottomRow, and Infrastructure now render real
integration/resource/event data instead of hardcoded numbers, with empty
states where no data source exists yet (AWS cost, historical trends).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
Bookmarks, categories, favorites, quick access, recently added, link
health, and category breakdown are now all derived from real backend
data instead of hardcoded arrays. Adds an Add Bookmark modal (with
inline new-category creation) and a working favorite toggle, both
backed by the existing /api/bookmarks endpoints. Adds
createBookmarkCategory/updateBookmark to the API client.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
Replaces mock integration data in Settings.tsx with live calls to
api.listIntegrations/createIntegration/updateIntegration/testIntegration.
Also fixes apiFetch sending Content-Type: application/json on bodyless
requests, which made Fastify reject Test Connection calls with 400.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
- New AuthContext drives app state (loading/needs-setup/enrolling/
logged-out/logged-in) by checking GET /api/system/setup-status and
GET /api/auth/me on load; JWT stored in localStorage
- Enrollment page: step 1 creates the admin account via POST /api/setup,
step 2 lets you connect integrations (or skip) before entering the app
- Login page for returning sessions; TopBar's Sign Out now calls
logout() instead of being a dead link
- Verified end-to-end in a browser: fresh setup -> connect/skip ->
dashboard, reload persists the session, sign out -> login -> back in
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
- Profile section: click avatar to upload a personal photo (FileReader
preview, hover camera icon overlay), replacing static initials
- README.md rewritten with project-specific page status table, dev
setup, tech stack, and deployment notes
- design-decisions.md: add Settings Page subsection documenting layout,
section-switching, and the avatar upload technique
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
Drop the /network route, page, and sidebar entry. Network will instead
become a tab alongside Overview on the Infrastructure page later, so add
a disabled placeholder tab for now.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
First pass built from the blueprint spec: status cards row, Top Talkers,
Network Topology dot map, Interface Utilization + Alert Summary, Traffic
Over Time, Protocol Distribution, Recent Events, and footer stats bar.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
A world map didn't fit a small-scale infra. Show servers as a tile grid
with colored status dots (healthy/warning/critical) instead.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
Resource Trend stays plain per clarification; only Resource Distribution
and Infrastructure Map get the hero-style blend.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
Make status cards more transparent with centered, better-spaced content,
and apply the network-traffic background to Resource Trend with a
blue/orange/green/brown line set.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
The baked-in labels on the Resource Distribution and Infrastructure Map
background art were getting covered by the dim/shadow overlay, so switch
both cards to the blank KPI background and render the title as our own
text element on top instead.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
The blank KPI background didn't read well on the top status row, so
revert those to the plain card style. Add a dimming overlay to the
Resource Distribution and Infrastructure Map backgrounds to reduce
visual clutter in the middle row.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
Swap back to Resource Distribution + Infrastructure Map in the middle
row, drop Resource Utilization, and scale the card vignette back so
border art stays readable while still blending into the background.
Apply the new blank KPI background asset to the top status cards row.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
Fix radial-gradient vignette to use closest-side sizing so card border
art fades fully at edge midpoints, not just corners. Remove the Resource
Distribution donut card and expand Infrastructure Map to fill the space.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
Pulls in the new gold-framed hex-pattern background assets for Resource
Distribution, Infrastructure Map, and Top Resources by Utilization,
replacing the plain card styling with the baked-in border/labels.
Also stages network-kpi-bg.png in public/ for the future Network page.
Moves the hero rendering to the layout level so the banner shows the
full golden arch and sky behind the page title, search bar, and
sub-tabs row. TopBar and the search input backgrounds are now
transparent so the banner reads through cleanly.
Wires up react-router-dom so the sidebar nav actually navigates between
pages, with route-aware active highlighting and dynamic page titles.
Extracts Glance content into its own page component and adds a new
Infrastructure page matching the mockup: status cards, resource
distribution/cost breakdown donuts, infra map, top resources by
utilization, resource trend chart, recent activity, and footer stats.
Previously sat as an inline button below the nav items, disconnected
from the rest of the layout. Now it's a small circle straddling the
sidebar/content boundary, vertically centered on the viewport - the
common pattern for collapsible side panels.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
Sidebar: prominent gold arc logo using a cleaned transparent-background
asset (keys out the source PNG's baked-in brown texture), horizontal
icon+label nav items with larger spacing, and a filled gold-tinted
highlight box on the selected item.
Layout: main content is now a flex column filling the viewport - hero
fixed at top, middle row (Resource Overview / Recent Activity / Top
Alerts) stretches to fill available height with items distributed, and
the bottom row (Network Traffic / Shortcuts) anchored to the bottom.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
Sidebar expanded width 140px -> 200px and collapsed 60px -> 64px to
match mockup proportions. Hero banner now uses a fixed shorter height
with object-fit cover, a bottom mask fade, and a radial vignette so
its edges blend into the page background instead of sitting in a
bordered box. KPI cards are now semi-transparent so the hero image
bleeds through behind them.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
Fix System Status "Operational" text to green (was gold italic) and
bump size, and switch Shortcuts from a 2x2 grid to a single row of 4
with gold icons to match the blueprint mockup.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
