@rubytech/create-maxy 0.3.8 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rubytech/create-maxy",
-  "version": "0.3.8",
+  "version": "0.4.0",
   "description": "Install Maxy — your personal AI assistant",
   "bin": {
     "create-maxy": "./dist/index.js"

package/payload/maxy/app/api/health/route.ts

@@ -1,20 +1,27 @@
 import { NextResponse } from 'next/server'
 import { existsSync } from 'node:fs'
 import { resolve } from 'node:path'
+import { execFileSync } from 'node:child_process'
 
-const INSTALL_DIR = resolve(process.cwd(), '..')
-const PIN_FILE = resolve(INSTALL_DIR, '.maxy', '.admin-pin')
-const HOME_PIN_FILE = resolve(process.env.HOME ?? '/root', '.maxy', '.admin-pin')
+const PERSISTENT_DIR = resolve(process.env.HOME ?? '/root', '.maxy')
+const PIN_FILE = resolve(PERSISTENT_DIR, '.admin-pin')
 
 /**
  * GET /api/health
  * Returns platform state for the onboarding flow.
  */
 export async function GET() {
-  const pinConfigured = existsSync(PIN_FILE) || existsSync(HOME_PIN_FILE) || !!process.env.ADMIN_PIN
+  const pinConfigured = existsSync(PIN_FILE) || !!process.env.ADMIN_PIN
 
-  // TODO: check Claude Code auth status
-  const claudeAuthenticated = false
+  let claudeAuthenticated = false
+  try {
+    const output = execFileSync('claude', ['auth', 'status', '--json'], {
+      encoding: 'utf-8',
+      timeout: 5000,
+    })
+    const status = JSON.parse(output)
+    claudeAuthenticated = status.loggedIn === true
+  } catch { /* not authenticated */ }
 
   return NextResponse.json({
     pin_configured: pinConfigured,

package/payload/maxy/app/api/onboarding/claude-auth/route.ts

@@ -0,0 +1,82 @@
+import { NextResponse } from 'next/server'
+import { spawn, execFileSync } from 'node:child_process'
+
+/**
+ * GET /api/onboarding/claude-auth
+ * Check Claude Code auth status.
+ */
+export async function GET() {
+  try {
+    const output = execFileSync('claude', ['auth', 'status', '--json'], {
+      encoding: 'utf-8',
+      timeout: 10000,
+      env: { ...process.env, BROWSER: 'echo' },
+    })
+    const status = JSON.parse(output)
+    return NextResponse.json({
+      authenticated: status.loggedIn === true,
+      email: status.email ?? null,
+    })
+  } catch {
+    return NextResponse.json({ authenticated: false, email: null })
+  }
+}
+
+/**
+ * POST /api/onboarding/claude-auth
+ * Start the Claude Code login flow. Returns the auth URL.
+ */
+export async function POST() {
+  return new Promise<Response>((resolve) => {
+    const child = spawn('claude', ['auth', 'login'], {
+      stdio: ['pipe', 'pipe', 'pipe'],
+      env: { ...process.env, BROWSER: 'echo' },
+    })
+
+    let output = ''
+    let resolved = false
+
+    function tryResolve() {
+      if (resolved) return
+
+      // Look for the auth URL in the output
+      const match = output.match(/(https:\/\/claude\.ai\/oauth\/authorize[^\s]+)/)
+      if (match) {
+        resolved = true
+        resolve(NextResponse.json({ authUrl: match[1] }))
+      }
+    }
+
+    child.stdout?.on('data', (chunk: Buffer) => {
+      output += chunk.toString()
+      tryResolve()
+    })
+
+    child.stderr?.on('data', (chunk: Buffer) => {
+      output += chunk.toString()
+      tryResolve()
+    })
+
+    // Timeout after 10 seconds
+    setTimeout(() => {
+      if (!resolved) {
+        resolved = true
+        child.kill()
+        resolve(NextResponse.json(
+          { error: 'Timed out waiting for auth URL.' },
+          { status: 500 },
+        ))
+      }
+    }, 10000)
+
+    child.on('exit', () => {
+      if (!resolved) {
+        resolved = true
+        resolve(NextResponse.json(
+          { error: 'Login process exited without providing auth URL.' },
+          { status: 500 },
+        ))
+      }
+    })
+  })
+}

package/payload/maxy/app/globals.css

@@ -1340,11 +1340,81 @@ a:hover {
 
 .admin-pin-form form {
   display: flex;
+  flex-direction: column;
   gap: 8px;
   width: 100%;
   max-width: 300px;
 }
 
+.pin-input-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.pin-input-row .chat-input {
+  flex: 1;
+}
+
+.pin-toggle {
+  background: none;
+  border: 1px solid var(--border-strong);
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+  font-size: 16px;
+  color: var(--text-secondary);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color 0.15s;
+}
+
+.pin-toggle:hover {
+  border-color: var(--sage);
+}
+
+.btn-primary {
+  padding: 12px 24px;
+  background: var(--sage);
+  color: white;
+  border: none;
+  border-radius: 24px;
+  font-family: var(--font-body);
+  font-size: 15px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.btn-primary:hover {
+  background: var(--sage-hover);
+}
+
+.btn-primary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-secondary {
+  padding: 10px 20px;
+  background: none;
+  color: var(--text-secondary);
+  border: 1px solid var(--border-strong);
+  border-radius: 24px;
+  font-family: var(--font-body);
+  font-size: 14px;
+  cursor: pointer;
+  text-decoration: none;
+  text-align: center;
+  transition: border-color 0.15s;
+}
+
+.btn-secondary:hover {
+  border-color: var(--sage);
+}
+
 .admin-pin-error {
   color: #c44;
   font-size: 14px;

package/payload/maxy/app/layout.tsx

@@ -17,14 +17,14 @@ const dmSans = DM_Sans({
 })
 
 export const metadata: Metadata = {
-  title: 'Maxy — No Stress. Quiet Life.',
+  title: 'Maxy — Convenience as standard.',
   description: 'A personal AI assistant that lives in your home. Your data never leaves.',
   icons: {
     icon: '/favicon.ico',
     apple: '/apple-icon.png',
   },
   openGraph: {
-    title: 'Maxy — No Stress. Quiet Life.',
+    title: 'Maxy — Convenience as standard.',
     description: 'A personal AI assistant that lives in your home. Your data never leaves.',
     siteName: 'Maxy',
     type: 'website',
@@ -33,13 +33,13 @@ export const metadata: Metadata = {
         url: '/og-landscape.png',
         width: 1200,
         height: 628,
-        alt: 'Maxy — No Stress. Quiet Life.',
+        alt: 'Maxy — Convenience as standard.',
       },
     ],
   },
   twitter: {
     card: 'summary_large_image',
-    title: 'Maxy — No Stress. Quiet Life.',
+    title: 'Maxy — Convenience as standard.',
     description: 'A personal AI assistant that lives in your home. Your data never leaves.',
     images: ['/og-landscape.png'],
   },

package/payload/maxy/app/page.tsx

@@ -1,9 +1,10 @@
 'use client'
 
 import { useState, useRef, useEffect, FormEvent } from 'react'
+import { Eye, EyeOff } from 'lucide-react'
 import { ActivityEvent, type AdminEvent } from './admin/components/ActivityEvent'
 
-type AppState = 'loading' | 'set-pin' | 'enter-pin' | 'chat'
+type AppState = 'loading' | 'set-pin' | 'enter-pin' | 'connect-claude' | 'chat'
 
 interface Message {
   role: 'admin' | 'maxy'
@@ -16,6 +17,9 @@ export default function AdminPage() {
   const [pin, setPin] = useState('')
   const [confirmPin, setConfirmPin] = useState('')
   const [pinError, setPinError] = useState('')
+  const [showPin, setShowPin] = useState(false)
+  const [authUrl, setAuthUrl] = useState<string | null>(null)
+  const [authLoading, setAuthLoading] = useState(false)
   const [sessionKey, setSessionKey] = useState<string | null>(null)
   const [messages, setMessages] = useState<Message[]>([])
   const [input, setInput] = useState('')
@@ -38,7 +42,13 @@ export default function AdminPage() {
           return
         }
         const health = await res.json()
-        setAppState(health.pin_configured ? 'enter-pin' : 'set-pin')
+        if (!health.pin_configured) {
+          setAppState('set-pin')
+        } else if (!health.claude_authenticated) {
+          setAppState('connect-claude')
+        } else {
+          setAppState('enter-pin')
+        }
       } catch {
         setAppState('set-pin')
       }
@@ -81,8 +91,10 @@ export default function AdminPage() {
         return
       }
 
-      // PIN set — now log in with it
-      await doLogin(pin)
+      // PIN set — move to Claude auth
+      setPin('')
+      setConfirmPin('')
+      setAppState('connect-claude')
     } catch {
       setPinError('Could not connect.')
     }
@@ -215,25 +227,35 @@ export default function AdminPage() {
         </header>
         <div className="admin-pin-form">
           <form onSubmit={handleSetPin}>
-            <input
-              ref={pinInputRef}
-              type="password"
-              value={pin}
-              onChange={e => setPin(e.target.value)}
-              placeholder="Choose a PIN"
-              className="chat-input"
-              autoFocus
-            />
-            <input
-              type="password"
-              value={confirmPin}
-              onChange={e => setConfirmPin(e.target.value)}
-              placeholder="Confirm PIN"
-              className="chat-input"
-            />
-            <button type="submit" className="chat-send" disabled={!pin || !confirmPin}>
-              Set PIN
-            </button>
+            <div className="pin-input-row">
+              <input
+                ref={pinInputRef}
+                type={showPin ? 'text' : 'password'}
+                value={pin}
+                onChange={e => setPin(e.target.value)}
+                placeholder="Choose a PIN"
+                className="chat-input"
+                autoFocus
+              />
+              <button type="button" className="pin-toggle" onClick={() => setShowPin(!showPin)} aria-label={showPin ? 'Hide' : 'Show'}>
+                {showPin ? <EyeOff size={18} /> : <Eye size={18} />}
+              </button>
+            </div>
+            <div className="pin-input-row">
+              <input
+                type={showPin ? 'text' : 'password'}
+                value={confirmPin}
+                onChange={e => setConfirmPin(e.target.value)}
+                placeholder="Confirm PIN"
+                className="chat-input"
+              />
+              <button type="submit" className="chat-send" disabled={!pin || !confirmPin} aria-label="Set PIN">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <line x1="5" y1="12" x2="19" y2="12" />
+                  <polyline points="12 5 19 12 12 19" />
+                </svg>
+              </button>
+            </div>
           </form>
           {pinError && <p className="admin-pin-error">{pinError}</p>}
         </div>
@@ -241,6 +263,63 @@ export default function AdminPage() {
     )
   }
 
+  // --- Connect Claude ---
+  if (appState === 'connect-claude') {
+    async function startAuth() {
+      setAuthLoading(true)
+      try {
+        const res = await fetch('/api/onboarding/claude-auth', { method: 'POST' })
+        const data = await res.json()
+        if (data.authUrl) {
+          setAuthUrl(data.authUrl)
+          window.open(data.authUrl, '_blank')
+        }
+      } catch { /* */ }
+      setAuthLoading(false)
+    }
+
+    async function checkAuth() {
+      const res = await fetch('/api/onboarding/claude-auth')
+      const data = await res.json()
+      if (data.authenticated) {
+        setAppState('enter-pin')
+      }
+    }
+
+    return (
+      <div className="chat-page admin-page">
+        <header className="chat-header">
+          <img src="/brand/maxy-black.png" alt="Maxy" className="chat-logo" />
+          <h1 className="chat-tagline">Connect Claude</h1>
+          <p className="chat-intro">Sign in with your Anthropic account to power Maxy.</p>
+        </header>
+        <div className="admin-pin-form">
+          {!authUrl ? (
+            <button
+              className="btn-primary"
+              onClick={startAuth}
+              disabled={authLoading}
+            >
+              {authLoading ? 'Starting...' : 'Sign in with Claude'}
+            </button>
+          ) : (
+            <>
+              <p className="chat-intro" style={{ fontSize: '14px', marginTop: 0 }}>
+                A browser window has opened. Sign in with Anthropic, then come back here.
+              </p>
+              <a href={authUrl} target="_blank" rel="noopener noreferrer" className="btn-secondary">
+                Open sign-in page again
+              </a>
+              <button className="btn-primary" onClick={checkAuth} style={{ marginTop: '12px' }}>
+                I{'\u2019'}ve signed in
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+    )
+  }
+
   // --- Enter PIN (returning user) ---
   if (appState === 'enter-pin') {
     return (
@@ -252,21 +331,26 @@ export default function AdminPage() {
         </header>
         <div className="admin-pin-form">
           <form onSubmit={handleLogin}>
-            <input
-              ref={pinInputRef}
-              type="password"
-              value={pin}
-              onChange={e => setPin(e.target.value)}
-              placeholder="Enter PIN"
-              className="chat-input"
-              autoFocus
-            />
-            <button type="submit" className="chat-send" disabled={!pin}>
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                <line x1="5" y1="12" x2="19" y2="12" />
-                <polyline points="12 5 19 12 12 19" />
-              </svg>
-            </button>
+            <div className="pin-input-row">
+              <input
+                ref={pinInputRef}
+                type={showPin ? 'text' : 'password'}
+                value={pin}
+                onChange={e => setPin(e.target.value)}
+                placeholder="Enter PIN"
+                className="chat-input"
+                autoFocus
+              />
+              <button type="button" className="pin-toggle" onClick={() => setShowPin(!showPin)} aria-label={showPin ? 'Hide' : 'Show'}>
+                {showPin ? <EyeOff size={18} /> : <Eye size={18} />}
+              </button>
+              <button type="submit" className="chat-send" disabled={!pin}>
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <line x1="5" y1="12" x2="19" y2="12" />
+                  <polyline points="12 5 19 12 12 19" />
+                </svg>
+              </button>
+            </div>
           </form>
           {pinError && <p className="admin-pin-error">{pinError}</p>}
         </div>