@rubytech/create-maxy 1.0.0

package/payload/maxy/app/admin/components/ActivityTimeline.tsx

@@ -0,0 +1,348 @@
+'use client'
+
+import { useState, useEffect, useRef } from 'react'
+import {
+  Lightbulb, Terminal, FileText, Search, Globe, Wrench, Bot,
+  Star, Sparkle, Sparkles,
+  Loader,
+  ChevronDown, ChevronRight, Check, X,
+} from 'lucide-react'
+import { MarkdownMessage } from './MarkdownMessage'
+
+export type AdminEvent =
+  | { type: 'text'; content: string }
+  | { type: 'thinking'; content: string }
+  | { type: 'tool_use'; name: string; input: Record<string, unknown> }
+  | { type: 'tool_result'; name: string; output: string; error?: boolean }
+  | { type: 'subagent_start'; name: string; task: string }
+  | { type: 'subagent_end'; name: string; result: string }
+  | { type: 'status'; message: string }
+  | { type: 'usage'; input_tokens: number; output_tokens: number }
+
+interface ActivityTimelineProps {
+  events: AdminEvent[]
+  isStreaming: boolean
+  elapsedSeconds: number
+}
+
+// --- Star loader (cycles Sparkle → Star → Sparkles) ---
+
+const STAR_FRAMES = [Sparkle, Star, Sparkles] as const
+
+function StarLoader({ size = 13 }: { size?: number }) {
+  const [frame, setFrame] = useState(0)
+  useEffect(() => {
+    const id = setInterval(() => setFrame(f => (f + 1) % 3), 380)
+    return () => clearInterval(id)
+  }, [])
+  const Icon = STAR_FRAMES[frame]
+  return <Icon size={size} className={`star-loader star-frame-${frame}`} />
+}
+
+// --- Tool helpers ---
+
+function toolSummary(name: string, input: Record<string, unknown>): string {
+  const str = (v: unknown) => String(v ?? '')
+  switch (name) {
+    case 'Read':     return `Read ${str(input.file_path ?? input.path)}`
+    case 'Write':    return `Write ${str(input.file_path ?? input.path)}`
+    case 'Edit':     return `Edit ${str(input.file_path ?? input.path)}`
+    case 'Bash':     return str(input.description ?? String(input.command ?? '').slice(0, 70))
+    case 'Glob':     return `Glob ${str(input.pattern)}`
+    case 'Grep':     return `Grep "${str(input.pattern)}" in ${str(input.path ?? '.')}`
+    case 'WebFetch': return `Fetch ${str(input.url)}`
+    case 'Agent':    return str(input.description ?? input.task ?? 'Subagent')
+    default: {
+      // MCP tools: mcp__server__tool-name → show tool-name
+      const mcpMatch = name.match(/^mcp__[^_]+__(.+)$/)
+      const display = mcpMatch ? mcpMatch[1] : name
+      const firstKey = Object.keys(input)[0]
+      return firstKey ? `${display}: ${str(input[firstKey]).slice(0, 50)}` : display
+    }
+  }
+}
+
+function ToolIcon({ name, size = 12 }: { name: string; size?: number }) {
+  switch (name) {
+    case 'Read':
+    case 'Write':
+    case 'Edit':     return <FileText size={size} />
+    case 'Bash':     return <Terminal size={size} />
+    case 'Glob':
+    case 'Grep':     return <Search size={size} />
+    case 'WebFetch': return <Globe size={size} />
+    case 'Agent':    return <Bot size={size} />
+    default:         return <Wrench size={size} />
+  }
+}
+
+// Pair tool_use indices → tool_result indices by name, first-unmatched in stream order
+function buildToolPairs(events: AdminEvent[]): Map<number, number> {
+  const pairs = new Map<number, number>()
+  const pending = new Map<string, number[]>()
+  events.forEach((e, i) => {
+    if (e.type === 'tool_use') {
+      const q = pending.get(e.name) ?? []
+      q.push(i)
+      pending.set(e.name, q)
+    } else if (e.type === 'tool_result') {
+      const q = pending.get(e.name)
+      if (q?.length) pairs.set(q.shift()!, i)
+    }
+  })
+  return pairs
+}
+
+function formatTokens(n: number): string {
+  return n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(n)
+}
+
+function formatElapsed(seconds: number): string {
+  if (seconds < 60) return `${seconds}s`
+  const m = Math.floor(seconds / 60)
+  const s = seconds % 60
+  return s > 0 ? `${m}m ${s}s` : `${m}m`
+}
+
+// --- TimelineStep ---
+
+interface StepProps {
+  icon: React.ReactNode
+  isPending: boolean
+  isError: boolean
+  summary: string
+  detail?: string
+  elapsed: number
+  isLast: boolean
+  expanded: boolean
+  onToggle: () => void
+}
+
+function TimelineStep({ icon, isPending, isError, summary, detail, elapsed, isLast, expanded, onToggle }: StepProps) {
+  const hasDetail = !!detail
+  return (
+    <div className="tl-step">
+      <div className="tl-col">
+        <div className={`tl-icon${isPending ? ' tl-pending' : isError ? ' tl-error' : ' tl-done'}`}>
+          {icon}
+        </div>
+        {!isLast && <div className="tl-line tl-line-grow" />}
+      </div>
+      <div className="tl-body">
+        <div className="tl-row" onClick={hasDetail ? onToggle : undefined} style={{ cursor: hasDetail ? 'pointer' : 'default' }}>
+          <span className="tl-summary">{summary}</span>
+          <span className="tl-step-elapsed">{formatElapsed(elapsed)}</span>
+          {hasDetail && (
+            <span className="tl-chevron">
+              {expanded ? <ChevronDown size={10} /> : <ChevronRight size={10} />}
+            </span>
+          )}
+        </div>
+        {hasDetail && expanded && (
+          <pre className="tl-detail">{detail}</pre>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// --- Main ---
+
+export function ActivityTimeline({ events, isStreaming, elapsedSeconds }: ActivityTimelineProps) {
+  const [expandedItems, setExpandedItems] = useState<Set<number>>(new Set())
+  // Track arrival time of each event index (client-side receipt time)
+  const arrivalRef = useRef<Map<number, number>>(new Map())
+  const prevLenRef = useRef(0)
+  // nowMs updates every second while streaming, to re-render per-step timers
+  const [nowMs, setNowMs] = useState(Date.now())
+
+  useEffect(() => {
+    const ts = Date.now()
+    for (let i = prevLenRef.current; i < events.length; i++) {
+      if (!arrivalRef.current.has(i)) arrivalRef.current.set(i, ts)
+    }
+    prevLenRef.current = events.length
+  }, [events])
+
+  useEffect(() => {
+    if (!isStreaming) return
+    const id = setInterval(() => setNowMs(Date.now()), 1000)
+    return () => clearInterval(id)
+  }, [isStreaming])
+
+  const toggleExpand = (i: number) => {
+    setExpandedItems(prev => {
+      const next = new Set(prev)
+      next.has(i) ? next.delete(i) : next.add(i)
+      return next
+    })
+  }
+
+  const stepElapsed = (startIdx: number, endIdx?: number): number => {
+    const start = arrivalRef.current.get(startIdx) ?? nowMs
+    const end = endIdx !== undefined ? (arrivalRef.current.get(endIdx) ?? nowMs) : nowMs
+    return Math.max(0, Math.floor((end - start) / 1000))
+  }
+
+  const toolPairs = buildToolPairs(events)
+  const resultIndices = new Set(toolPairs.values())
+
+  const textEvent = events.find(e => e.type === 'text')
+  const usageEvent = events.find(e => e.type === 'usage') as
+    { type: 'usage'; input_tokens: number; output_tokens: number } | undefined
+
+  // Steps shown in timeline — exclude text, usage, done, and standalone tool_results
+  const steps = events
+    .map((e, i) => ({ e, i }))
+    .filter(({ e, i }) =>
+      e.type !== 'text' &&
+      e.type !== 'usage' &&
+      (e as { type: string }).type !== 'done' &&
+      !resultIndices.has(i)
+    )
+
+  const hasSteps = steps.length > 0
+  const hasText = !!textEvent
+
+  return (
+    <div className="admin-activity">
+      {/* Global loading indicator — shown before any steps arrive */}
+      {isStreaming && !hasSteps && !hasText && (
+        <div className="tl-loading">
+          <StarLoader size={13} />
+          <span className="tl-elapsed">{formatElapsed(elapsedSeconds)}</span>
+        </div>
+      )}
+
+      {/* Timeline steps */}
+      {hasSteps && (
+        <div className="tl-steps">
+          {steps.map(({ e, i }, displayIdx) => {
+            const isFirst = displayIdx === 0
+            const isLast = displayIdx === steps.length - 1
+
+            if (e.type === 'thinking') {
+              const isExpanded = !expandedItems.has(i) // thinking is expanded by default
+              const nextIdx = !isLast ? steps[displayIdx + 1].i : undefined
+              return (
+                <div key={i} className="tl-step">
+                  <div className="tl-col">
+                    <div className="tl-icon tl-dim"><Lightbulb size={11} /></div>
+                    {!isLast && <div className="tl-line tl-line-grow" />}
+                  </div>
+                  <div className="tl-body">
+                    <div className="tl-row tl-row-top" onClick={() => toggleExpand(i)} style={{ cursor: 'pointer' }}>
+                      <div className="tl-thinking-col">
+                        <span className="tl-summary tl-thinking-label">Thinking</span>
+                        {isExpanded && (
+                          <div className="tl-thinking-body">{e.content}</div>
+                        )}
+                      </div>
+                      <span className="tl-step-elapsed">{formatElapsed(stepElapsed(i, nextIdx))}</span>
+                      <span className="tl-chevron">
+                        {isExpanded ? <ChevronDown size={10} /> : <ChevronRight size={10} />}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              )
+            }
+
+            if (e.type === 'status') {
+              return <div key={i} className="tl-status">{e.message}</div>
+            }
+
+            if (e.type === 'tool_use') {
+              const resultIdx = toolPairs.get(i)
+              const result = resultIdx !== undefined ? events[resultIdx] : undefined
+              const isPending = result === undefined
+              const isError = result?.type === 'tool_result' && !!result.error
+
+              const icon = isPending
+                ? <Loader size={11} className="tl-spinner" />
+                : isError ? <X size={11} /> : <ToolIcon name={e.name} size={11} />
+
+              const detail = result?.type === 'tool_result'
+                ? `Input:\n${JSON.stringify(e.input, null, 2)}\n\nResult:\n${result.output}`
+                : `Input:\n${JSON.stringify(e.input, null, 2)}`
+
+              return (
+                <TimelineStep
+                  key={i}
+                  icon={icon}
+                  isPending={isPending}
+                  isError={isError}
+                  summary={toolSummary(e.name, e.input)}
+                  detail={detail}
+                  elapsed={stepElapsed(i, resultIdx)}
+
+                  isLast={isLast}
+                  expanded={expandedItems.has(i)}
+                  onToggle={() => toggleExpand(i)}
+                />
+              )
+            }
+
+            if (e.type === 'subagent_start') {
+              const isDone = events.some(ev => ev.type === 'subagent_end' && ev.name === e.name)
+              const endIdx = isDone ? events.findIndex(ev => ev.type === 'subagent_end' && ev.name === e.name) : undefined
+              return (
+                <TimelineStep
+                  key={i}
+                  icon={isDone ? <Bot size={11} /> : <Loader size={11} className="tl-spinner" />}
+                  isPending={!isDone}
+                  isError={false}
+                  summary={`Agent: ${e.task.slice(0, 60)}${e.task.length > 60 ? '…' : ''}`}
+                  detail={e.task}
+                  elapsed={stepElapsed(i, endIdx)}
+
+                  isLast={isLast}
+                  expanded={expandedItems.has(i)}
+                  onToggle={() => toggleExpand(i)}
+                />
+              )
+            }
+
+            if (e.type === 'subagent_end') {
+              return (
+                <TimelineStep
+                  key={i}
+                  icon={<Check size={11} />}
+                  isPending={false}
+                  isError={false}
+                  summary={`Agent complete`}
+                  detail={e.result}
+                  elapsed={stepElapsed(i)}
+
+                  isLast={isLast}
+                  expanded={expandedItems.has(i)}
+                  onToggle={() => toggleExpand(i)}
+                />
+              )
+            }
+
+            return null
+          })}
+        </div>
+      )}
+
+      {/* Text response */}
+      {textEvent && (
+        <MarkdownMessage content={textEvent.content} />
+      )}
+
+      {/* Footer: total elapsed + token usage */}
+      {(hasText || (!isStreaming && hasSteps)) && (
+        <div className="tl-footer">
+          <span>{formatElapsed(elapsedSeconds)}</span>
+          {usageEvent && (
+            <>
+              <span className="tl-footer-sep">·</span>
+              <span>{formatTokens(usageEvent.input_tokens + usageEvent.output_tokens)} tokens</span>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/payload/maxy/app/admin/components/MarkdownMessage.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import ReactMarkdown from 'react-markdown'
+import type { Components } from 'react-markdown'
+
+interface MarkdownMessageProps {
+  content: string
+  elapsedSeconds?: number
+}
+
+const components: Components = {
+  p: ({ children }) => <p className="md-p">{children}</p>,
+  h1: ({ children }) => <h1 className="md-heading">{children}</h1>,
+  h2: ({ children }) => <h2 className="md-heading">{children}</h2>,
+  h3: ({ children }) => <h3 className="md-heading">{children}</h3>,
+  code: ({ children, className }) => {
+    const isBlock = className?.startsWith('language-')
+    return isBlock
+      ? <code className="md-code-block">{children}</code>
+      : <code className="md-code-inline">{children}</code>
+  },
+  pre: ({ children }) => <pre className="md-pre">{children}</pre>,
+  ul: ({ children }) => <ul className="md-list">{children}</ul>,
+  ol: ({ children }) => <ol className="md-list md-list-ordered">{children}</ol>,
+  li: ({ children }) => <li className="md-list-item">{children}</li>,
+  hr: () => <hr className="md-hr" />,
+  strong: ({ children }) => <strong className="md-strong">{children}</strong>,
+  a: ({ href, children }) => <a href={href} className="md-link" target="_blank" rel="noopener noreferrer">{children}</a>,
+}
+
+export function MarkdownMessage({ content, elapsedSeconds }: MarkdownMessageProps) {
+  return (
+    <div className="markdown-message">
+      <ReactMarkdown components={components}>{content}</ReactMarkdown>
+      {elapsedSeconds !== undefined && (
+        <div className="message-meta">{elapsedSeconds}s</div>
+      )}
+    </div>
+  )
+}

package/payload/maxy/app/api/admin/chat/route.ts

@@ -0,0 +1,72 @@
+import { NextRequest } from 'next/server'
+import { invokeAgent, validateSession } from '../../../lib/claude-agent'
+
+/**
+ * POST /api/admin/chat
+ * Invokes the admin agent via Claude Agent SDK and streams full activity as typed SSE events.
+ * Body: { message: string, session_key: string }
+ * Requires a valid admin session (PIN-gated via /api/admin/session).
+ */
+export async function POST(req: NextRequest) {
+  let body: { message: string; session_key: string }
+  try {
+    body = await req.json()
+  } catch {
+    return new Response(JSON.stringify({ error: 'Invalid request' }), {
+      status: 400,
+      headers: { 'Content-Type': 'application/json' },
+    })
+  }
+
+  if (!body.message || !body.session_key) {
+    return new Response(
+      JSON.stringify({ error: 'message and session_key required' }),
+      { status: 400, headers: { 'Content-Type': 'application/json' } },
+    )
+  }
+
+  // Validate that this session was created via admin PIN auth
+  if (!validateSession(body.session_key, 'admin')) {
+    return new Response(
+      JSON.stringify({ error: 'Invalid or expired admin session' }),
+      { status: 401, headers: { 'Content-Type': 'application/json' } },
+    )
+  }
+
+  const encoder = new TextEncoder()
+
+  const readable = new ReadableStream({
+    async start(controller) {
+      try {
+        for await (const event of invokeAgent(
+          { type: 'admin' },
+          body.message,
+          body.session_key,
+        )) {
+          const data = JSON.stringify(event)
+          controller.enqueue(encoder.encode(`data: ${data}\n\n`))
+        }
+      } catch (err) {
+        const message = err instanceof Error ? err.message : 'Agent error'
+        controller.enqueue(
+          encoder.encode(
+            `data: ${JSON.stringify({ type: 'text', content: `Error: ${message}` })}\n\n`,
+          ),
+        )
+        controller.enqueue(
+          encoder.encode(`data: ${JSON.stringify({ type: 'done' })}\n\n`),
+        )
+      } finally {
+        controller.close()
+      }
+    },
+  })
+
+  return new Response(readable, {
+    headers: {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      Connection: 'keep-alive',
+    },
+  })
+}

package/payload/maxy/app/api/admin/logs/route.ts

@@ -0,0 +1,40 @@
+import { NextResponse } from 'next/server'
+import { readdirSync, readFileSync, statSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { homedir } from 'node:os'
+
+const LOG_DIR = resolve(homedir(), '.maxy/logs')
+const TAIL_BYTES = 8192 // last 8KB per file
+
+/**
+ * GET /api/admin/logs
+ * Returns the tail of every log file in ~/.maxy/logs, newest-modified first.
+ * No auth — logs are local-only and access is already restricted to the LAN.
+ */
+export async function GET() {
+  let files: string[]
+  try {
+    files = readdirSync(LOG_DIR).filter(f => f.endsWith('.log'))
+  } catch {
+    return NextResponse.json({ logs: {} })
+  }
+
+  const logs: Record<string, string> = {}
+
+  files
+    .map(f => ({ name: f, mtime: statSync(resolve(LOG_DIR, f)).mtimeMs }))
+    .sort((a, b) => b.mtime - a.mtime)
+    .forEach(({ name }) => {
+      try {
+        const content = readFileSync(resolve(LOG_DIR, name))
+        const tail = content.length > TAIL_BYTES
+          ? content.subarray(content.length - TAIL_BYTES).toString('utf-8')
+          : content.toString('utf-8')
+        logs[name] = tail.trim() || '(empty)'
+      } catch {
+        logs[name] = '(unreadable)'
+      }
+    })
+
+  return NextResponse.json({ logs })
+}

package/payload/maxy/app/api/admin/session/route.ts

@@ -0,0 +1,74 @@
+import { NextResponse } from 'next/server'
+import { registerSession } from '../../../lib/claude-agent'
+import { readFileSync, readdirSync, existsSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { createHash } from 'node:crypto'
+
+const PERSISTENT_DIR = resolve(process.env.HOME ?? '/root', '.maxy')
+const PIN_FILE = resolve(PERSISTENT_DIR, '.admin-pin')
+const ACCOUNTS_DIR = resolve(process.cwd(), '../platform/config/accounts')
+
+function hashPin(pin: string): string {
+  return createHash('sha256').update(pin).digest('hex')
+}
+
+function getStoredPinHash(): string | null {
+  if (existsSync(PIN_FILE)) {
+    return readFileSync(PIN_FILE, 'utf-8').trim()
+  }
+  // Fallback to env var (legacy)
+  if (process.env.ADMIN_PIN) {
+    return hashPin(process.env.ADMIN_PIN)
+  }
+  return null
+}
+
+function getDefaultAccountId(): string | null {
+  if (!existsSync(ACCOUNTS_DIR)) return null
+  const entries = readdirSync(ACCOUNTS_DIR, { withFileTypes: true })
+  for (const entry of entries) {
+    if (!entry.isDirectory()) continue
+    const configPath = resolve(ACCOUNTS_DIR, entry.name, 'account.json')
+    if (!existsSync(configPath)) continue
+    const config = JSON.parse(readFileSync(configPath, 'utf-8'))
+    return config.accountId
+  }
+  return null
+}
+
+/**
+ * POST /api/admin/session
+ * PIN-gated session creation for the admin agent.
+ * Body: { pin: string }
+ */
+export async function POST(req: Request) {
+  const storedHash = getStoredPinHash()
+
+  if (!storedHash) {
+    return NextResponse.json(
+      { error: 'PIN not configured. Complete onboarding first.' },
+      { status: 503 },
+    )
+  }
+
+  let body: { pin: string }
+  try {
+    body = await req.json()
+  } catch {
+    return NextResponse.json({ error: 'Invalid request' }, { status: 400 })
+  }
+
+  if (!body.pin || hashPin(body.pin) !== storedHash) {
+    return NextResponse.json({ error: 'Invalid PIN' }, { status: 401 })
+  }
+
+  const accountId = getDefaultAccountId() ?? 'default'
+
+  const sessionKey = crypto.randomUUID()
+  registerSession(sessionKey, 'admin', accountId)
+
+  return NextResponse.json({
+    session_key: sessionKey,
+    agent_id: 'admin',
+  })
+}

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

@@ -0,0 +1,72 @@
+import { NextRequest } from 'next/server'
+import { invokeAgent, validateSession } from '../../lib/claude-agent'
+
+/**
+ * POST /api/chat
+ * Invokes the public agent via Claude Agent SDK and streams SSE responses.
+ * Body: { message: string, session_key: string }
+ * SSE format: data: { text: "..." } (matches existing frontend)
+ */
+export async function POST(req: NextRequest) {
+  let body: { message: string; session_key: string }
+  try {
+    body = await req.json()
+  } catch {
+    return new Response(JSON.stringify({ error: 'Invalid request' }), {
+      status: 400,
+      headers: { 'Content-Type': 'application/json' },
+    })
+  }
+
+  if (!body.message || !body.session_key) {
+    return new Response(
+      JSON.stringify({ error: 'message and session_key required' }),
+      { status: 400, headers: { 'Content-Type': 'application/json' } },
+    )
+  }
+
+  if (!validateSession(body.session_key, 'public')) {
+    return new Response(
+      JSON.stringify({ error: 'Invalid or expired session' }),
+      { status: 401, headers: { 'Content-Type': 'application/json' } },
+    )
+  }
+
+  const encoder = new TextEncoder()
+
+  const readable = new ReadableStream({
+    async start(controller) {
+      try {
+        for await (const event of invokeAgent(
+          { type: 'public' },
+          body.message,
+          body.session_key,
+        )) {
+          if (event.type === 'text') {
+            const data = JSON.stringify({ text: event.content })
+            controller.enqueue(encoder.encode(`data: ${data}\n\n`))
+          } else if (event.type === 'done') {
+            controller.enqueue(encoder.encode('data: [DONE]\n\n'))
+          }
+          // Public agent: only text events reach the client
+        }
+      } catch (err) {
+        const message = err instanceof Error ? err.message : 'Agent error'
+        controller.enqueue(
+          encoder.encode(`data: ${JSON.stringify({ error: message })}\n\n`),
+        )
+        controller.enqueue(encoder.encode('data: [DONE]\n\n'))
+      } finally {
+        controller.close()
+      }
+    },
+  })
+
+  return new Response(readable, {
+    headers: {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      Connection: 'keep-alive',
+    },
+  })
+}

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

@@ -0,0 +1,26 @@
+import { NextResponse } from 'next/server'
+import { existsSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { homedir } from 'node:os'
+import { execFileSync } from 'node:child_process'
+
+const PIN_FILE = resolve(homedir(), '.maxy/.admin-pin')
+
+/**
+ * GET /api/health
+ * Returns platform state for the onboarding flow.
+ */
+export async function GET() {
+  const pinConfigured = existsSync(PIN_FILE)
+
+  let claudeAuthenticated = false
+  try {
+    execFileSync('claude', ['auth', 'status'], { encoding: 'utf-8', timeout: 5000 })
+    claudeAuthenticated = true
+  } catch { /* claude not installed or not authenticated — non-zero exit means not logged in */ }
+
+  return NextResponse.json({
+    pin_configured: pinConfigured,
+    claude_authenticated: claudeAuthenticated,
+  })
+}