@rubytech/create-maxy 1.0.0

package/payload/maxy/app/page.tsx

@@ -0,0 +1,594 @@
+'use client'
+
+import { useState, useRef, useEffect, FormEvent } from 'react'
+import { Eye, EyeOff, BotOff } from 'lucide-react'
+import { ActivityTimeline, type AdminEvent } from './admin/components/ActivityTimeline'
+
+type AppState = 'loading' | 'set-pin' | 'enter-pin' | 'connect-claude' | 'chat'
+
+interface Message {
+  role: 'admin' | 'maxy'
+  content?: string
+  events?: AdminEvent[]
+}
+
+export default function AdminPage() {
+  const [appState, setAppState] = useState<AppState>('loading')
+  const [pin, setPin] = useState('')
+  const [confirmPin, setConfirmPin] = useState('')
+  const [pinError, setPinError] = useState('')
+  const [showPin, setShowPin] = useState(false)
+  const [authPolling, setAuthPolling] = useState(false)
+  const [authLoading, setAuthLoading] = useState(false)
+  const [sessionKey, setSessionKey] = useState<string | null>(null)
+  const [messages, setMessages] = useState<Message[]>([])
+  const [input, setInput] = useState('')
+  const [isStreaming, setIsStreaming] = useState(false)
+  const [elapsedSeconds, setElapsedSeconds] = useState(0)
+  const elapsedRef = useRef<ReturnType<typeof setInterval> | null>(null)
+  const [sessionElapsed, setSessionElapsed] = useState(0)
+  const sessionStartRef = useRef<number | null>(null)
+  const sessionIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
+  const messagesEndRef = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const pinInputRef = useRef<HTMLInputElement>(null)
+
+  function startElapsedTimer() {
+    if (!sessionStartRef.current) {
+      sessionStartRef.current = Date.now()
+      sessionIntervalRef.current = setInterval(() => {
+        setSessionElapsed(Math.floor((Date.now() - sessionStartRef.current!) / 1000))
+      }, 1000)
+    }
+    setElapsedSeconds(0)
+    elapsedRef.current = setInterval(() => setElapsedSeconds(s => s + 1), 1000)
+  }
+
+  function stopElapsedTimer() {
+    if (elapsedRef.current) {
+      clearInterval(elapsedRef.current)
+      elapsedRef.current = null
+    }
+  }
+
+  function formatSessionTime(s: number): string {
+    if (s < 60) return `${s}s`
+    const m = Math.floor(s / 60)
+    const rem = s % 60
+    return rem > 0 ? `${m}m ${rem}s` : `${m}m`
+  }
+
+  function fmtTokens(n: number): string {
+    return n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(n)
+  }
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [messages])
+
+  // Check platform state on mount
+  useEffect(() => {
+    async function checkHealth() {
+      try {
+        const res = await fetch('/api/health')
+        if (!res.ok) {
+          setAppState('set-pin')
+          return
+        }
+        const health = await res.json()
+        if (!health.pin_configured) {
+          setAppState('set-pin')
+        } else if (!health.claude_authenticated) {
+          setAppState('connect-claude')
+        } else {
+          setAppState('enter-pin')
+        }
+      } catch {
+        setAppState('set-pin')
+      }
+    }
+    checkHealth()
+  }, [])
+
+  useEffect(() => {
+    if (appState === 'set-pin' || appState === 'enter-pin') {
+      setTimeout(() => pinInputRef.current?.focus(), 100)
+    }
+    if (appState === 'chat' && messages.length === 0 && sessionKey) {
+      const greetingTimer = setTimeout(() => sendSystemPrompt('[New session. Assess the current state and introduce yourself. Be proactive.]'), 300)
+      return () => clearTimeout(greetingTimer)
+    } else if (appState === 'chat') {
+      setTimeout(() => inputRef.current?.focus(), 100)
+    }
+  }, [appState])
+
+  async function handleSetPin(e: FormEvent) {
+    e.preventDefault()
+    setPinError('')
+
+    if (pin.length < 4) {
+      setPinError('PIN must be at least 4 characters.')
+      return
+    }
+    if (pin !== confirmPin) {
+      setPinError('PINs do not match.')
+      return
+    }
+
+    try {
+      const res = await fetch('/api/onboarding/set-pin', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ pin }),
+      })
+
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}))
+        setPinError(data.error || 'Failed to set PIN.')
+        return
+      }
+
+      // PIN set — move to Claude auth
+      setPin('')
+      setConfirmPin('')
+      setAppState('connect-claude')
+    } catch {
+      setPinError('Could not connect.')
+    }
+  }
+
+  async function handleLogin(e: FormEvent) {
+    e.preventDefault()
+    setPinError('')
+    await doLogin(pin)
+  }
+
+  async function doLogin(pinValue: string) {
+    try {
+      const res = await fetch('/api/admin/session', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ pin: pinValue }),
+      })
+
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}))
+        setPinError(data.error || 'Invalid PIN')
+        return
+      }
+
+      const data = await res.json()
+      setSessionKey(data.session_key)
+      setPin('')
+      setConfirmPin('')
+      setAppState('chat')
+    } catch {
+      setPinError('Could not connect.')
+    }
+  }
+
+  // Agent-initiated message — no user message shown in chat
+  async function sendSystemPrompt(directive: string) {
+    if (isStreaming || !sessionKey) return
+    startElapsedTimer()
+    setIsStreaming(true)
+
+    const maxyMessage: Message = { role: 'maxy', events: [] }
+    setMessages([maxyMessage])
+
+    try {
+      const res = await fetch('/api/admin/chat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ message: directive, session_key: sessionKey }),
+      })
+
+      if (!res.ok) throw new Error('Chat request failed')
+
+      const reader = res.body?.getReader()
+      if (!reader) throw new Error('No response stream')
+
+      const decoder = new TextDecoder()
+      let buffer = ''
+
+      while (true) {
+        const { done, value } = await reader.read()
+        if (done) break
+
+        buffer += decoder.decode(value, { stream: true })
+        const parts = buffer.split('\n')
+        buffer = parts.pop()!
+
+        for (const line of parts) {
+          if (!line.startsWith('data: ')) continue
+          const payload = line.slice(6)
+          if (payload === '[DONE]') continue
+
+          let parsed: { type: string; [key: string]: unknown }
+          try { parsed = JSON.parse(payload) } catch { continue }
+          if (parsed.type === 'done' || parsed.type === 'session_init') continue
+
+          const event = parsed as AdminEvent
+          setMessages(prev => {
+            const updated = [...prev]
+            if (updated[0]?.role === 'maxy') {
+              updated[0] = { ...updated[0], events: [...(updated[0].events ?? []), event] }
+            }
+            return updated
+          })
+        }
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Something went wrong'
+      setMessages([{ role: 'maxy', events: [{ type: 'text', content: `Error: ${errorMessage}` }] }])
+    } finally {
+      stopElapsedTimer()
+      setIsStreaming(false)
+      inputRef.current?.focus()
+    }
+  }
+
+  async function sendMessage(text: string) {
+    if (!text || isStreaming || !sessionKey) return
+
+    const adminMessage: Message = { role: 'admin', content: text }
+    const currentLength = messages.length
+    setMessages(prev => [...prev, adminMessage])
+    setInput('')
+    startElapsedTimer()
+    setIsStreaming(true)
+
+    const maxyMessage: Message = { role: 'maxy', events: [] }
+    setMessages(prev => [...prev, maxyMessage])
+    const messageIndex = currentLength + 1
+
+    try {
+      const res = await fetch('/api/admin/chat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ message: text, session_key: sessionKey }),
+      })
+
+      if (!res.ok) throw new Error('Chat request failed')
+
+      const reader = res.body?.getReader()
+      if (!reader) throw new Error('No response stream')
+
+      const decoder = new TextDecoder()
+      let buffer = ''
+
+      while (true) {
+        const { done, value } = await reader.read()
+        if (done) break
+
+        buffer += decoder.decode(value, { stream: true })
+        const parts = buffer.split('\n')
+        buffer = parts.pop()!
+
+        for (const line of parts) {
+          if (!line.startsWith('data: ')) continue
+          const payload = line.slice(6)
+          if (payload === '[DONE]') continue
+
+          let parsed: { type: string; [key: string]: unknown }
+          try { parsed = JSON.parse(payload) } catch { continue }
+          if (parsed.type === 'done' || parsed.type === 'session_init') continue
+
+          const event = parsed as AdminEvent
+          setMessages(prev => {
+            const updated = [...prev]
+            const msg = updated[messageIndex]
+            if (msg && msg.role === 'maxy') {
+              updated[messageIndex] = {
+                ...msg,
+                events: [...(msg.events ?? []), event],
+              }
+            }
+            return updated
+          })
+        }
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Something went wrong'
+      setMessages(prev => {
+        const updated = [...prev]
+        updated[messageIndex] = {
+          role: 'maxy',
+          events: [{ type: 'text', content: `Error: ${errorMessage}` }],
+        }
+        return updated
+      })
+    } finally {
+      stopElapsedTimer()
+      setIsStreaming(false)
+      inputRef.current?.focus()
+    }
+  }
+
+  // --- Loading ---
+  if (appState === 'loading') {
+    return (
+      <div className="chat-page admin-page">
+        <header className="chat-header">
+          <img src="/brand/maxy-black.png" alt="Maxy" className="chat-logo" />
+        </header>
+      </div>
+    )
+  }
+
+  // --- Set PIN (first boot) ---
+  if (appState === 'set-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">Welcome to Maxy</h1>
+          <p className="chat-intro">Choose a PIN to secure your admin access.</p>
+        </header>
+        <div className="admin-pin-form">
+          <form onSubmit={handleSetPin}>
+            <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>
+      </div>
+    )
+  }
+
+  // --- Connect Claude ---
+  if (appState === 'connect-claude') {
+    async function startAuth() {
+      setAuthLoading(true)
+      setPinError('')
+      try {
+        const res = await fetch('/api/onboarding/claude-auth', { method: 'POST' })
+        const data = await res.json()
+        if (data.started) {
+          setAuthPolling(true)
+          setAuthLoading(false)
+          for (let i = 0; i < 60; i++) {
+            await new Promise(r => setTimeout(r, 2000))
+            const pollRes = await fetch('/api/onboarding/claude-auth', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ action: 'wait' }),
+            })
+            const pollData = await pollRes.json()
+            if (pollData.authenticated) {
+              await fetch('/api/onboarding/claude-auth', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ action: 'stop' }),
+              })
+              setAppState('enter-pin')
+              return
+            }
+          }
+          setPinError('Timed out waiting for sign-in. Try again.')
+          setAuthPolling(false)
+        } else if (data.error) {
+          setPinError(data.error)
+        }
+      } catch {
+        setPinError('Could not start auth flow.')
+      }
+      setAuthLoading(false)
+    }
+
+    if (authPolling) {
+      async function cancelAuth() {
+        await fetch('/api/onboarding/claude-auth', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ action: 'stop' }),
+        })
+        setAuthPolling(false)
+        setPinError('')
+      }
+
+      return (
+        <div style={{ display: 'flex', flexDirection: 'column', height: '100dvh', overflow: 'auto' }}>
+          <header className="chat-header" style={{ paddingBottom: '12px', flexShrink: 0, position: 'relative', maxWidth: '680px', width: '100%', margin: '0 auto', padding: '24px 20px 12px' }}>
+            <button
+              onClick={cancelAuth}
+              style={{ position: 'absolute', top: '12px', right: '12px', background: 'none', border: 'none', color: '#999', fontSize: '13px', cursor: 'pointer', padding: '4px 8px' }}
+              aria-label="Cancel"
+            >
+              ✕
+            </button>
+            <img src="/brand/claude.png" alt="Claude" className="chat-logo" />
+            <h1 className="chat-tagline">Connect Claude</h1>
+            <p className="chat-intro">Sign in and authorize in the browser below.</p>
+          </header>
+          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0, gap: '10px', padding: '0 0 16px' }}>
+            <iframe
+              src={`/vnc-viewer.html?host=${window.location.hostname}&port=6080`}
+              style={{ flex: 1, width: '100%', minHeight: 0, border: 'none', background: '#111', display: 'block' }}
+              title="Claude Sign-in"
+            />
+          </div>
+        </div>
+      )
+    }
+
+    return (
+      <div className="chat-page admin-page">
+        <header className="chat-header">
+          <img src="/brand/claude.png" alt="Claude" className="chat-logo" />
+          <h1 className="chat-tagline">Connect Claude</h1>
+          <p className="chat-intro">to power Maxy</p>
+        </header>
+        <div className="admin-pin-form">
+          <button
+            className="btn-primary"
+            onClick={startAuth}
+            disabled={authLoading}
+          >
+            {authLoading ? 'Starting...' : 'Sign in'}
+          </button>
+          {pinError && <p className="admin-pin-error">{pinError}</p>}
+        </div>
+      </div>
+    )
+  }
+
+  // --- Enter PIN (returning user) ---
+  if (appState === '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">Maxy</h1>
+          <p className="chat-intro">AI for Productive People.</p>
+        </header>
+        <div className="admin-pin-form">
+          <form onSubmit={handleLogin}>
+            <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>
+      </div>
+    )
+  }
+
+  // --- Chat ---
+  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">Maxy</h1>
+        <p className="chat-intro">AI for Productive People.</p>
+      </header>
+
+      <div className="chat-messages">
+        {messages.map((msg, i) => (
+          <div key={i} className={`message ${msg.role === 'admin' ? 'visitor' : 'maxy'}`}>
+            {msg.role === 'admin' ? (
+              <div className="bubble">{msg.content}</div>
+            ) : (
+              <ActivityTimeline
+                events={msg.events ?? []}
+                isStreaming={isStreaming && i === messages.length - 1}
+                elapsedSeconds={i === messages.length - 1 ? elapsedSeconds : 0}
+              />
+            )}
+          </div>
+        ))}
+        <div ref={messagesEndRef} />
+      </div>
+
+      <div className="chat-input-area">
+        {(() => {
+          const sessionTokens = messages.reduce((sum, msg) => {
+            const usage = msg.events?.find(e => e.type === 'usage') as { type: 'usage'; input_tokens: number; output_tokens: number } | undefined
+            return usage ? sum + usage.input_tokens + usage.output_tokens : sum
+          }, 0)
+          const latestInputTokens = [...messages].reverse().reduce<number>((found, msg) => {
+            if (found > 0) return found
+            const usage = msg.events?.find(e => e.type === 'usage') as { type: 'usage'; input_tokens: number; output_tokens: number } | undefined
+            return usage?.input_tokens ?? 0
+          }, 0)
+          const contextPct = latestInputTokens > 0 ? Math.round(latestInputTokens / 200000 * 100) : 0
+          return messages.some(m => m.role === 'maxy') ? (
+            <div className="session-stats">
+              <span className="session-stat">Effort <b>Standard</b></span>
+              <span className="session-stat">Style <b>Standard</b></span>
+              <span className="session-stat">Context <b>{contextPct > 0 ? `${contextPct}%` : '—'}</b></span>
+              <span className="session-stat">Tokens <b>{fmtTokens(sessionTokens)}</b></span>
+              <span className="session-stat">Session <b>{formatSessionTime(sessionElapsed)}</b></span>
+            </div>
+          ) : null
+        })()}
+        <form className="chat-form" onSubmit={(e) => { e.preventDefault(); sendMessage(input.trim()) }}>
+          <input
+            ref={inputRef}
+            className="chat-input"
+            type="text"
+            value={input}
+            onChange={e => setInput(e.target.value)}
+            placeholder=""
+            disabled={isStreaming}
+            aria-label="Type a message..."
+          />
+          <button
+            className="chat-send"
+            type="submit"
+            disabled={isStreaming || !input.trim()}
+            aria-label="Send message"
+          >
+            <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>
+        </form>
+        <div className="chat-actions">
+          <button
+            className="chat-action"
+            onClick={async () => {
+              await fetch('/api/onboarding/claude-auth', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ action: 'logout' }),
+              })
+              setSessionKey(null)
+              setMessages([])
+              setAppState('connect-claude')
+            }}
+          >
+            <BotOff size={14} />
+            <span className="action-label">Disconnect Claude</span>
+          </button>
+        </div>
+      </div>
+
+    </div>
+  )
+}

package/payload/maxy/app/privacy/page.tsx

@@ -0,0 +1,72 @@
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Privacy — Maxy',
+  description: 'How Maxy handles your data.',
+}
+
+export default function PrivacyPage() {
+  return (
+    <div className="legal-page">
+      <h1>Privacy</h1>
+
+      <h2>The short version</h2>
+      <p>
+        Maxy runs on a device in your home. Your data stays on that device.
+        We don&rsquo;t collect it, store it, or have access to it.
+      </p>
+
+      <h2>maxy.chat conversations</h2>
+      <p>
+        When you chat with Maxy on this website, your conversation is processed
+        by Claude (Anthropic&rsquo;s AI) to generate responses. We do not store
+        conversation content beyond the current session. No personal data is
+        retained unless you voluntarily provide contact information.
+      </p>
+      <p>
+        We may collect anonymous, aggregated data about conversation topics
+        (not content) to improve the product. This data cannot be linked back
+        to any individual.
+      </p>
+
+      <h2>The Maxy device</h2>
+      <p>
+        Once you have your own Maxy device, all data &mdash; conversations, memory,
+        files, customer records &mdash; is stored locally on the device. We have no
+        access to this data. It never leaves your home network.
+      </p>
+      <p>
+        AI processing requires a connection to Anthropic&rsquo;s Claude service.
+        Your conversations with Claude are subject to{' '}
+        <a href="https://www.anthropic.com/privacy" target="_blank" rel="noopener noreferrer">
+          Anthropic&rsquo;s privacy policy
+        </a>.
+      </p>
+
+      <h2>What we collect</h2>
+      <p>
+        From the marketing sites (maxy.chat and maxy.bot), we may collect
+        standard web analytics: page visits, referral source, and device type.
+        No cookies are used for tracking. No personal data is sold or shared
+        with third parties.
+      </p>
+
+      <h2>Your rights</h2>
+      <p>
+        You can request deletion of any data associated with you by contacting
+        us. Since Maxy device data is stored locally, you have full control
+        over it at all times &mdash; including the ability to delete everything.
+      </p>
+
+      <h2>Contact</h2>
+      <p>
+        Questions about privacy? Message us on WhatsApp or email{' '}
+        <a href="mailto:privacy@maxy.bot">privacy@maxy.bot</a>.
+      </p>
+
+      <p style={{ marginTop: '48px', fontSize: '13px', color: '#9A9A9A' }}>
+        Last updated: February 2026
+      </p>
+    </div>
+  )
+}