feat(web): add a public /download page for the desktop client

Lists the desktop installers straight from the GitHub Releases API, grouped
by platform with architecture detection and the visitor's own platform
highlighted.

Filters releases on the desktop-v tag prefix rather than using
/releases/latest. The repo publishes two unrelated series from one tags
list — v1.3.0 (the app) and desktop-v* (this client) — and /releases/latest
returns the newest of either, so it hands back the app release and would
point every download button at the wrong artifact.

"No desktop build published yet" is kept distinct from "could not reach
GitHub", so a failed fetch can never render as an empty catalogue.

Adds /download to AUTH_PUBLIC_PATHS in both client.js and useAuth.jsx.
Without it, useAuth's mount effect redirects any non-allowlisted path to
/login when there is no session — bouncing exactly the logged-out visitors
the page exists for.

The page uses fetch rather than lib/api/client.js on purpose: that module is
the DeepSQL backend's axios layer (auth headers, refresh, error envelope),
none of which applies to a third-party public API, and the page must work
with no session and a down backend.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: venkateshsakamuri-lab

src/App.jsx

@@ -5,6 +5,7 @@ import Login from './pages/Login'
 import Signup from './pages/Signup'
 import ActivateInvite from './pages/ActivateInvite'
 import CliAuthorize from './pages/CliAuthorize'
+import Download from './pages/Download'
 import Onboarding from './pages/Onboarding'
 import PublicDashboardPage from './pages/PublicDashboardPage'
 import SharedDashboardPage from './pages/SharedDashboardPage'
@@ -146,6 +147,9 @@ function App() {
           />
           {/* Legacy /setup route — now the real onboarding wizard, not a dead end. */}
           <Route path="/setup" element={<Navigate to="/onboarding" replace />} />
+          {/* Public desktop-client download page — no login: it is reached from
+              the marketing site by people who do not have an account yet. */}
+          <Route path="/download" element={<Download />} />
           <Route path="/cli-authorize" element={<CliAuthorize />} />
           <Route path="/cli-authorize/device" element={<CliAuthorize />} />
         </Routes>

src/hooks/useAuth.jsx

@@ -14,7 +14,8 @@ import { PERMISSIONS, ROLES, ROLE_BASELINE_PERMISSIONS, normalizeRole, isAdminRo
 
 const AuthContext = createContext(null)
 
-const AUTH_PUBLIC_PATHS = ['/login', '/signup', '/activate']
+// See the matching list in lib/api/client.js — '/download' is public.
+const AUTH_PUBLIC_PATHS = ['/login', '/signup', '/activate', '/download']
 
 const isPublicAuthPath = (pathname) => AUTH_PUBLIC_PATHS.some((prefix) => pathname.startsWith(prefix))
 

src/lib/api/client.js

@@ -13,7 +13,11 @@ const getApiBaseUrl = () => {
 export const API_BASE_URL = getApiBaseUrl();
 export const AUTH_CHANGE_EVENT = "deepsql-auth-change";
 
-const AUTH_PUBLIC_PATHS = ["/login", "/signup", "/activate"];
+// "/download" is reachable with no session on purpose: it is the public
+// desktop-client download page, linked from the marketing site by people who
+// do not have an account yet. Without it here, a logged-out visitor is bounced
+// to /login and never sees the installers.
+const AUTH_PUBLIC_PATHS = ["/login", "/signup", "/activate", "/download"];
 
 const isPublicAuthPath = (pathname = "") =>
   AUTH_PUBLIC_PATHS.some((prefix) => pathname.startsWith(prefix));

src/pages/Download.jsx

@@ -0,0 +1,286 @@
+import { useEffect, useMemo, useState } from 'react'
+import {
+  AlertTriangle,
+  Apple,
+  Download as DownloadIcon,
+  Loader2,
+  Monitor,
+  Package,
+  Terminal,
+} from 'lucide-react'
+
+/**
+ * Public download page for the DeepSQL desktop client.
+ *
+ * Asset list comes straight from the GitHub Releases API. This is the one place
+ * that deliberately does NOT go through lib/api/client.js: that module is the
+ * DeepSQL backend's axios layer (auth headers, refresh, error envelope), and
+ * none of it applies to a third-party public API. A plain fetch keeps the page
+ * working before a user has logged in — or on a box whose backend is down.
+ *
+ * The repo publishes two unrelated release series from the same tags list:
+ * `v1.3.0` (the DeepSQL app) and `desktop-v*` (this client). /releases/latest
+ * returns the newest of *either*, so it hands back the app release and would
+ * point every download button at the wrong artifact. Filter by tag prefix.
+ */
+
+const REPO = 'DeepSQLAI/deepsql'
+const TAG_PREFIX = 'desktop-v'
+
+const PLATFORMS = {
+  mac: { label: 'macOS', icon: Apple },
+  windows: { label: 'Windows', icon: Monitor },
+  linux: { label: 'Linux', icon: Terminal },
+}
+
+/** Classify a release asset by filename, not by position in the list. */
+function classify(asset) {
+  const name = asset.name.toLowerCase()
+  const arch = name.includes('arm64')
+    ? 'Apple Silicon'
+    : name.includes('x64') || name.includes('amd64') || name.includes('x86_64')
+      ? 'Intel / AMD64'
+      : null
+
+  if (name.endsWith('.dmg')) return { platform: 'mac', kind: 'Disk image', arch }
+  if (name.endsWith('.zip')) return { platform: 'mac', kind: 'Zip archive', arch }
+  if (name.endsWith('.exe'))
+    return {
+      platform: 'windows',
+      kind: name.includes('setup') ? 'Installer' : 'Portable',
+      arch,
+    }
+  if (name.endsWith('.appimage')) return { platform: 'linux', kind: 'AppImage', arch }
+  if (name.endsWith('.deb')) return { platform: 'linux', kind: 'Debian package', arch }
+  if (name.endsWith('.rpm')) return { platform: 'linux', kind: 'RPM package', arch }
+  return null
+}
+
+/** Best-effort guess so the primary button matches the visitor's machine. */
+function detectPlatform() {
+  const ua = navigator.userAgent || ''
+  if (/Mac|iPhone|iPad/i.test(ua)) return 'mac'
+  if (/Win/i.test(ua)) return 'windows'
+  if (/Linux|X11/i.test(ua)) return 'linux'
+  return null
+}
+
+function formatSize(bytes) {
+  if (!bytes) return ''
+  const mb = bytes / (1024 * 1024)
+  return `${mb.toFixed(1)} MB`
+}
+
+export default function Download() {
+  const [state, setState] = useState({ status: 'loading' })
+  const detected = useMemo(() => detectPlatform(), [])
+
+  useEffect(() => {
+    let cancelled = false
+
+    fetch(`https://api.github.com/repos/${REPO}/releases?per_page=30`, {
+      headers: { Accept: 'application/vnd.github+json' },
+    })
+      .then((res) => {
+        if (!res.ok) throw new Error(`GitHub returned ${res.status}`)
+        return res.json()
+      })
+      .then((releases) => {
+        if (cancelled) return
+        const release = releases.find(
+          (r) => r.tag_name?.startsWith(TAG_PREFIX) && !r.draft,
+        )
+        // No desktop release yet is a *different* answer from "we could not
+        // check", and the page must not blur the two into one empty state.
+        if (!release) return setState({ status: 'none' })
+        setState({ status: 'ready', release })
+      })
+      .catch((err) => {
+        if (cancelled) return
+        setState({ status: 'error', message: err.message })
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  const grouped = useMemo(() => {
+    if (state.status !== 'ready') return {}
+    const out = { mac: [], windows: [], linux: [] }
+    for (const asset of state.release.assets || []) {
+      const meta = classify(asset)
+      if (meta) out[meta.platform].push({ ...asset, ...meta })
+    }
+    return out
+  }, [state])
+
+  return (
+    <div className="min-h-screen bg-white text-gray-900">
+      <div className="max-w-3xl mx-auto px-6 py-16">
+        <header className="mb-12">
+          <div className="flex items-center gap-3 mb-4">
+            <div className="h-10 w-10 rounded-xl bg-gray-900 flex items-center justify-center">
+              <DownloadIcon className="h-5 w-5 text-white" />
+            </div>
+            <h1 className="text-3xl font-semibold tracking-tight">DeepSQL Desktop</h1>
+          </div>
+          <p className="text-gray-500 leading-relaxed">
+            A native client for your self-hosted DeepSQL server. Connects directly over
+            TLS or through an SSH tunnel, with connection health and transport status
+            built into the window chrome.
+          </p>
+        </header>
+
+        {state.status === 'loading' && (
+          <div className="flex items-center gap-3 text-gray-500 py-12">
+            <Loader2 className="h-5 w-5 animate-spin" />
+            <span>Looking up the latest release…</span>
+          </div>
+        )}
+
+        {state.status === 'error' && (
+          <Notice
+            tone="error"
+            title="Could not reach GitHub"
+            body={`The download list could not be loaded (${state.message}). This is a problem fetching the release list, not a sign that no build exists — you can browse releases directly on GitHub.`}
+            action={{ href: `https://github.com/${REPO}/releases`, label: 'Open releases on GitHub' }}
+          />
+        )}
+
+        {state.status === 'none' && (
+          <Notice
+            tone="info"
+            title="No desktop build published yet"
+            body="The release list loaded fine — there is simply no desktop-v* release with attached installers. Builds are produced by the desktop-release workflow when a desktop-v* tag is pushed."
+            action={{ href: `https://github.com/${REPO}/releases`, label: 'Open releases on GitHub' }}
+          />
+        )}
+
+        {state.status === 'ready' && (
+          <>
+            <div className="flex items-baseline gap-3 mb-8 pb-4 border-b border-gray-200">
+              <span className="text-sm font-semibold text-gray-900">
+                {state.release.tag_name.replace(TAG_PREFIX, 'Version ')}
+              </span>
+              <span className="text-sm text-gray-400">
+                released {new Date(state.release.published_at).toLocaleDateString()}
+              </span>
+            </div>
+
+            {Object.entries(PLATFORMS).map(([key, meta]) => {
+              const assets = grouped[key] || []
+              if (!assets.length) return null
+              return (
+                <PlatformSection
+                  key={key}
+                  platform={meta}
+                  assets={assets}
+                  highlight={detected === key}
+                  showMacNote={key === 'mac'}
+                />
+              )
+            })}
+
+            <p className="mt-12 text-sm text-gray-400">
+              Source and build instructions live in{' '}
+              <a
+                className="underline hover:text-gray-600 transition-colors"
+                href={`https://github.com/${REPO}/blob/main/desktop/README.md`}
+              >
+                desktop/README.md
+              </a>
+              .
+            </p>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function PlatformSection({ platform, assets, highlight, showMacNote }) {
+  const Icon = platform.icon
+  return (
+    <section className="mb-10">
+      <div className="flex items-center gap-2 mb-3">
+        <Icon className="h-4 w-4 text-gray-500" />
+        <h2 className="text-sm font-semibold uppercase tracking-wider text-gray-500">
+          {platform.label}
+        </h2>
+        {highlight && (
+          <span className="text-xs font-medium text-gray-900 bg-gray-100 px-2 py-0.5 rounded-full">
+            Detected
+          </span>
+        )}
+      </div>
+
+      <div className="space-y-2">
+        {assets.map((asset) => (
+          <a
+            key={asset.id}
+            href={asset.browser_download_url}
+            className={`flex items-center justify-between gap-4 rounded-xl border px-4 py-3 transition-all ${
+              highlight
+                ? 'border-gray-900 bg-gray-900 text-white hover:bg-gray-800'
+                : 'border-gray-200 bg-white text-gray-900 hover:border-gray-400'
+            }`}
+          >
+            <span className="flex items-center gap-3 min-w-0">
+              <Package className={`h-4 w-4 shrink-0 ${highlight ? 'text-gray-300' : 'text-gray-400'}`} />
+              <span className="min-w-0">
+                <span className="block text-sm font-medium truncate">
+                  {asset.kind}
+                  {asset.arch ? ` · ${asset.arch}` : ''}
+                </span>
+                <span
+                  className={`block text-xs truncate ${highlight ? 'text-gray-400' : 'text-gray-400'}`}
+                >
+                  {asset.name}
+                </span>
+              </span>
+            </span>
+            <span className={`text-xs shrink-0 ${highlight ? 'text-gray-300' : 'text-gray-400'}`}>
+              {formatSize(asset.size)}
+            </span>
+          </a>
+        ))}
+      </div>
+
+      {showMacNote && (
+        <p className="mt-3 text-xs text-gray-400 leading-relaxed">
+          Builds are unsigned unless signing credentials are configured, so the first
+          launch needs <span className="text-gray-600">right-click → Open</span> (or{' '}
+          <code className="text-gray-600">xattr -dr com.apple.quarantine /Applications/DeepSQL.app</code>
+          ).
+        </p>
+      )}
+    </section>
+  )
+}
+
+function Notice({ tone, title, body, action }) {
+  return (
+    <div
+      className={`rounded-xl border px-5 py-4 ${
+        tone === 'error' ? 'border-gray-300 bg-gray-50' : 'border-gray-200 bg-gray-50'
+      }`}
+    >
+      <div className="flex items-start gap-3">
+        <AlertTriangle className="h-4 w-4 text-gray-500 mt-0.5 shrink-0" />
+        <div>
+          <p className="text-sm font-semibold text-gray-900 mb-1">{title}</p>
+          <p className="text-sm text-gray-500 leading-relaxed">{body}</p>
+          {action && (
+            <a
+              href={action.href}
+              className="inline-block mt-3 text-sm font-medium text-gray-900 underline hover:text-gray-600 transition-colors"
+            >
+              {action.label}
+            </a>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}