Initial Vynte Connect clients

2026-05-26 16:41:14 -05:00
commit 980535d682
35 changed files with 4958 additions and 0 deletions
@@ -0,0 +1,84 @@
+# Vynte Connect Design Spec
+
+## Purpose
+
+Vynte Connect is an internal macOS menu bar app for connecting to the VynteHome NetBird VPN. It should feel obvious to non-infrastructure users: open app, sign in, connect, then open internal apps.
+
+## Visual Direction
+
+Use the Vynte pitch deck style:
+
+- Dark base with soft blue, orange, and pink warmth.
+- Flame icon asset from `icon.png` as the app and menu bar logo.
+- Montserrat typography.
+- Minimal copy focused on comfort, home, and secure team access.
+
+## Frames
+
+### First Launch
+
+- Header: VYNTE mark and wordmark.
+- Title: `Private access for the team`
+- Body: `Connect to VynteHome to open internal apps securely.`
+- Primary action: `Connect to VynteHome`
+- Secondary note: `Authentication opens in your browser.`
+
+### NetBird Missing
+
+- Title: `NetBird required`
+- Body: `Vynte Connect uses the official NetBird client securely underneath. Install NetBird, then come back here.`
+- Primary action: `Install NetBird`
+- Secondary action: `Refresh status`
+
+### Disconnected
+
+- Status: gray dot.
+- Title: `Ready to connect`
+- Body: `Connect to open Vynte internal apps securely.`
+- Primary action: `Connect to VynteHome`
+- Help bullets:
+  - `Authentication opens in your browser.`
+  - `Internal apps unlock after the tunnel connects.`
+  - `Vynte never stores your password.`
+
+### Connecting
+
+- Status: orange dot and spinner.
+- Title: `Authenticating`
+- Body: `Finishing NetBird registration...`
+- Primary action disabled: `Connecting...`
+
+### Connected
+
+- Status: green dot.
+- Title: `Connected`
+- Body: `Secure tunnel active as <NetBird IP>.`
+- Primary action: `Disconnect`
+- App links:
+  - `Vynte Home` -> `https://vynte.internal.vyntehome.com`
+  - `Plane` -> `https://plane.internal.zachsharma.us`
+- Show small reachability dots for internal links.
+
+### Error
+
+- Status: red dot.
+- Title: `Needs attention`
+- Body: concise error explanation.
+- Primary action changes based on error:
+  - Missing NetBird: `Install NetBird`
+  - Other errors: `Connect to VynteHome`
+- Footer always includes `Dashboard`, `Refresh`, and `Quit`.
+
+## Figma Notes
+
+Create a compact screen set, not a full design system. Suggested frame size: `384 x 560`, matching the app popover. Components to include:
+
+- Vynte mark and wordmark lockup.
+- Status card.
+- Primary button.
+- Internal app link row.
+- Error/help bullet row.
+
+Use the pitch deck background asset as a reference, but keep the actual app UI native SwiftUI so it remains lightweight.
+
+The browser-reviewable mockup sheet is in `docs/vynte-connect-mockups.html`.