@standardagents/cli 0.10.1-next.bbd142a → 0.11.0-next.ab7e1ea

package/chat/src/components/Sidebar.tsx

@@ -0,0 +1,253 @@
+'use client'
+
+import { useState } from 'react'
+import { type Thread, getThreadTitle, getTagValue } from '../hooks/useThreads'
+import { LogoMark } from './Logo'
+import { useTheme } from '../hooks/useTheme'
+import { useAuth } from '../hooks/useAuth'
+
+interface SidebarProps {
+  threads: Thread[]
+  currentThreadId: string | null
+  onSelectThread: (threadId: string) => void
+  onNewThread: () => void
+  onDeleteThread: (threadId: string) => void
+  isOpen: boolean
+  onToggle: () => void
+  loading?: boolean
+}
+
+export function Sidebar({
+  threads,
+  currentThreadId,
+  onSelectThread,
+  onNewThread,
+  onDeleteThread,
+  isOpen,
+  onToggle,
+  loading,
+}: SidebarProps) {
+  const [confirmingDelete, setConfirmingDelete] = useState<string | null>(null)
+  const { theme, toggleTheme } = useTheme()
+  const { logout } = useAuth()
+
+  const formatRelativeTime = (timestamp: number) => {
+    // Handle different timestamp formats based on magnitude
+    let ms: number
+    if (timestamp > 1e15) {
+      ms = timestamp / 1000
+    } else if (timestamp > 1e12) {
+      ms = timestamp
+    } else {
+      ms = timestamp * 1000
+    }
+
+    const date = new Date(ms)
+    const now = new Date()
+    const diffMs = now.getTime() - date.getTime()
+    const diffSeconds = Math.floor(diffMs / 1000)
+    const diffMinutes = Math.floor(diffSeconds / 60)
+    const diffHours = Math.floor(diffMinutes / 60)
+    const diffDays = Math.floor(diffHours / 24)
+    const diffWeeks = Math.floor(diffDays / 7)
+    const diffMonths = Math.floor(diffDays / 30)
+    const diffYears = Math.floor(diffDays / 365)
+
+    const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
+
+    if (diffSeconds < 60) {
+      return rtf.format(-diffSeconds, 'second')
+    } else if (diffMinutes < 60) {
+      return rtf.format(-diffMinutes, 'minute')
+    } else if (diffHours < 24) {
+      return rtf.format(-diffHours, 'hour')
+    } else if (diffDays < 7) {
+      return rtf.format(-diffDays, 'day')
+    } else if (diffWeeks < 4) {
+      return rtf.format(-diffWeeks, 'week')
+    } else if (diffMonths < 12) {
+      return rtf.format(-diffMonths, 'month')
+    } else {
+      return rtf.format(-diffYears, 'year')
+    }
+  }
+
+  const handleDeleteClick = (e: React.MouseEvent, threadId: string) => {
+    e.stopPropagation()
+    setConfirmingDelete(threadId)
+  }
+
+  const handleConfirmDelete = (e: React.MouseEvent, threadId: string) => {
+    e.stopPropagation()
+    onDeleteThread(threadId)
+    setConfirmingDelete(null)
+  }
+
+  const handleCancelDelete = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    setConfirmingDelete(null)
+  }
+
+  return (
+    <aside
+      className={`
+        fixed top-0 left-0 h-full w-72 bg-[var(--bg-secondary)] flex flex-col border-r border-[var(--border-primary)] z-40
+        transform transition-transform duration-300 ease-out
+        ${isOpen ? 'translate-x-0' : '-translate-x-full'}
+      `}
+    >
+      {/* Header */}
+      <div className="h-[47px] flex items-center justify-between px-3 border-b border-[var(--border-primary)]">
+        <div className="flex items-center gap-2">
+          <LogoMark className="w-[18px] h-[18px] text-[var(--text-secondary)]" />
+        </div>
+        <div className="flex items-center gap-1">
+          <button
+            onClick={onNewThread}
+            className="p-2 rounded-lg hover:bg-[var(--bg-hover)] transition-colors"
+            title="New chat"
+          >
+            <svg className="w-5 h-5 text-[var(--text-secondary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 4v16m8-8H4" />
+            </svg>
+          </button>
+          <button
+            onClick={onToggle}
+            className="p-2 rounded-lg hover:bg-[var(--bg-hover)] transition-colors"
+            title="Collapse sidebar"
+          >
+            {/* ChatGPT drawer icon */}
+            <svg className="w-5 h-5 text-[var(--text-secondary)]" viewBox="0 0 20 20" fill="currentColor">
+              <path d="M6.835 4c-.451.004-.82.012-1.137.038-.386.032-.659.085-.876.162l-.2.086c-.44.224-.807.564-1.063.982l-.103.184c-.126.247-.206.562-.248 1.076-.043.523-.043 1.19-.043 2.135v2.664c0 .944 0 1.612.043 2.135.042.515.122.829.248 1.076l.103.184c.256.418.624.758 1.063.982l.2.086c.217.077.49.13.876.162.316.026.685.034 1.136.038zm11.33 7.327c0 .922 0 1.654-.048 2.243-.043.522-.125.977-.305 1.395l-.082.177a4 4 0 0 1-1.473 1.593l-.276.155c-.465.237-.974.338-1.57.387-.59.048-1.322.048-2.244.048H7.833c-.922 0-1.654 0-2.243-.048-.522-.042-.977-.126-1.395-.305l-.176-.082a4 4 0 0 1-1.594-1.473l-.154-.275c-.238-.466-.34-.975-.388-1.572-.048-.589-.048-1.32-.048-2.243V8.663c0-.922 0-1.654.048-2.243.049-.597.15-1.106.388-1.571l.154-.276a4 4 0 0 1 1.594-1.472l.176-.083c.418-.18.873-.263 1.395-.305.589-.048 1.32-.048 2.243-.048h4.334c.922 0 1.654 0 2.243.048.597.049 1.106.15 1.571.388l.276.154a4 4 0 0 1 1.473 1.594l.082.176c.18.418.262.873.305 1.395.048.589.048 1.32.048 2.243zm-10 4.668h4.002c.944 0 1.612 0 2.135-.043.514-.042.829-.122 1.076-.248l.184-.103c.418-.256.758-.624.982-1.063l.086-.2c.077-.217.13-.49.162-.876.043-.523.043-1.19.043-2.135V8.663c0-.944 0-1.612-.043-2.135-.032-.386-.085-.659-.162-.876l-.086-.2a2.67 2.67 0 0 0-.982-1.063l-.184-.103c-.247-.126-.562-.206-1.076-.248-.523-.043-1.19-.043-2.135-.043H8.164L8.165 4z" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      {/* Thread list */}
+      <div className="flex-1 overflow-y-auto py-2">
+        {loading ? (
+          <div className="px-4 py-8 text-center">
+            <div className="inline-block w-5 h-5 border-2 border-[var(--text-muted)] border-t-[var(--text-secondary)] rounded-full animate-spin" />
+          </div>
+        ) : threads.length === 0 ? (
+          <div className="px-4 py-8 text-center">
+            <p className="text-sm text-[var(--text-tertiary)]">No conversations yet</p>
+            <p className="text-xs text-[var(--text-muted)] mt-1">Start a new chat to begin</p>
+          </div>
+        ) : (
+          <div className="space-y-0.5 px-2">
+            {threads.map((thread) => {
+              const isConfirming = confirmingDelete === thread.id
+
+              return (
+                <div
+                  key={thread.id}
+                  onClick={() => !isConfirming && onSelectThread(thread.id)}
+                  className={`group rounded-xl transition-all duration-150 ${
+                    isConfirming
+                      ? 'bg-[var(--bg-active)]'
+                      : thread.id === currentThreadId
+                        ? 'bg-[var(--bg-active)] cursor-pointer'
+                        : 'hover:bg-[var(--bg-hover)] cursor-pointer'
+                  }`}
+                >
+                  {isConfirming ? (
+                    // Delete confirmation UI
+                    <div className="px-3 py-3 space-y-2">
+                      <p className="text-sm text-[var(--text-primary)]">Delete this thread?</p>
+                      <div className="flex gap-2">
+                        <button
+                          onClick={handleCancelDelete}
+                          className="flex-1 px-3 py-1.5 text-xs font-medium text-[var(--text-secondary)] bg-[var(--bg-hover)] hover:bg-[var(--bg-active)] rounded-lg transition-colors"
+                        >
+                          Cancel
+                        </button>
+                        <button
+                          onClick={(e) => handleConfirmDelete(e, thread.id)}
+                          className="flex-1 px-3 py-1.5 text-xs font-medium text-white bg-red-600/80 hover:bg-red-600 rounded-lg transition-colors"
+                        >
+                          Delete
+                        </button>
+                      </div>
+                    </div>
+                  ) : (
+                    // Normal thread row
+                    <div className="flex items-center gap-3 px-3 py-2.5">
+                      <div className="flex-1 min-w-0">
+                        {(() => {
+                          const title = getTagValue(thread.tags, 'title')
+                          const agentName = thread.agent?.title || thread.agent?.name || 'Agent'
+                          return (
+                            <>
+                              <p className={`text-sm truncate ${
+                                thread.id === currentThreadId ? 'text-[var(--text-primary)]' : 'text-[var(--text-secondary)]'
+                              }`}>
+                                {title || agentName}
+                              </p>
+                              <div className="flex items-center gap-2 mt-0.5">
+                                <span className="text-xs text-[var(--text-muted)]">
+                                  {formatRelativeTime(thread.created_at)}
+                                </span>
+                                {title && (
+                                  <span className="text-[10px] px-1.5 py-0.5 rounded bg-[var(--bg-hover)] text-[var(--text-muted)]">
+                                    {agentName}
+                                  </span>
+                                )}
+                              </div>
+                            </>
+                          )
+                        })()}
+                      </div>
+                      <button
+                        onClick={(e) => handleDeleteClick(e, thread.id)}
+                        className="opacity-0 group-hover:opacity-100 p-1.5 hover:bg-[var(--bg-active)] rounded-lg transition-all shrink-0"
+                        title="Delete thread"
+                      >
+                        <svg className="w-3.5 h-3.5 text-[var(--text-tertiary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
+                        </svg>
+                      </button>
+                    </div>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* Bottom toolbar */}
+      <div className="px-3 py-2 border-t border-[var(--border-primary)] flex items-center justify-between">
+        <button
+          onClick={toggleTheme}
+          className="p-2 rounded-lg hover:bg-[var(--bg-hover)] transition-colors"
+          title={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
+        >
+          {theme === 'dark' ? (
+            <svg className="w-5 h-5 text-[var(--text-secondary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+            </svg>
+          ) : (
+            <svg className="w-5 h-5 text-[var(--text-secondary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+            </svg>
+          )}
+          <span className="sr-only">
+            {theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
+          </span>
+        </button>
+        <button
+          onClick={logout}
+          className="p-2 rounded-lg hover:bg-[var(--bg-hover)] transition-colors"
+          title="Log out"
+        >
+          <svg className="w-5 h-5 text-[var(--text-secondary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+          </svg>
+          <span className="sr-only">Log out</span>
+        </button>
+      </div>
+    </aside>
+  )
+}

package/chat/src/hooks/useAuth.tsx

@@ -0,0 +1,118 @@
+'use client'
+
+import { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from 'react'
+
+interface User {
+  id: string
+  username: string
+  role: string
+}
+
+interface AuthContextValue {
+  isAuthenticated: boolean
+  isLoading: boolean
+  user: User | null
+  login: (username: string, password: string) => Promise<{ success: boolean; error?: string }>
+  logout: () => void
+}
+
+const AuthContext = createContext<AuthContextValue | null>(null)
+
+const TOKEN_KEY = 'agentbuilder_auth_token'
+
+function getBaseUrl() {
+  const isVite = typeof import.meta !== 'undefined' && import.meta.env
+  if (isVite) {
+    return import.meta.env.VITE_AGENTBUILDER_URL || ''
+  }
+  return process.env.NEXT_PUBLIC_AGENTBUILDER_URL || ''
+}
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<User | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
+
+  const baseUrl = getBaseUrl()
+
+  // Check for existing session on mount
+  useEffect(() => {
+    const token = localStorage.getItem(TOKEN_KEY)
+    if (!token) {
+      setIsLoading(false)
+      return
+    }
+
+    // Validate token by calling /api/auth/me
+    fetch(`${baseUrl}/api/auth/me`, {
+      headers: { 'Authorization': `Bearer ${token}` }
+    })
+      .then(res => {
+        if (res.ok) return res.json()
+        throw new Error('Invalid token')
+      })
+      .then(data => {
+        setUser(data.user)
+      })
+      .catch(() => {
+        localStorage.removeItem(TOKEN_KEY)
+      })
+      .finally(() => {
+        setIsLoading(false)
+      })
+  }, [baseUrl])
+
+  const login = useCallback(async (username: string, password: string) => {
+    try {
+      const res = await fetch(`${baseUrl}/api/auth/login`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ username, password })
+      })
+
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}))
+        return { success: false, error: data.error || 'Invalid credentials' }
+      }
+
+      const data = await res.json()
+      localStorage.setItem(TOKEN_KEY, data.token)
+      setUser(data.user)
+      return { success: true }
+    } catch (err) {
+      return { success: false, error: 'Network error' }
+    }
+  }, [baseUrl])
+
+  const logout = useCallback(() => {
+    const token = localStorage.getItem(TOKEN_KEY)
+    if (token) {
+      // Fire and forget logout request
+      fetch(`${baseUrl}/api/auth/logout`, {
+        method: 'POST',
+        headers: { 'Authorization': `Bearer ${token}` }
+      }).catch(() => {})
+    }
+    localStorage.removeItem(TOKEN_KEY)
+    setUser(null)
+  }, [baseUrl])
+
+  return (
+    <AuthContext.Provider value={{
+      isAuthenticated: !!user,
+      isLoading,
+      user,
+      login,
+      logout
+    }}>
+      {children}
+    </AuthContext.Provider>
+  )
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext)
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider')
+  }
+  return context
+}

package/chat/src/hooks/useTheme.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import { createContext, useContext, useState, useEffect, type ReactNode } from 'react'
+
+type Theme = 'light' | 'dark'
+
+interface ThemeContextValue {
+  theme: Theme
+  toggleTheme: () => void
+  setTheme: (theme: Theme) => void
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null)
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setThemeState] = useState<Theme>(() => {
+    // Check localStorage first
+    const stored = localStorage.getItem('theme') as Theme | null
+    if (stored === 'light' || stored === 'dark') return stored
+    // Fall back to system preference
+    if (typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: light)').matches) {
+      return 'light'
+    }
+    return 'dark'
+  })
+
+  useEffect(() => {
+    // Update document class and localStorage when theme changes
+    document.documentElement.classList.remove('light', 'dark')
+    document.documentElement.classList.add(theme)
+    localStorage.setItem('theme', theme)
+  }, [theme])
+
+  const toggleTheme = () => {
+    setThemeState(prev => prev === 'dark' ? 'light' : 'dark')
+  }
+
+  const setTheme = (newTheme: Theme) => {
+    setThemeState(newTheme)
+  }
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext)
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider')
+  }
+  return context
+}

package/chat/src/hooks/useThreads.ts

@@ -0,0 +1,131 @@
+'use client'
+
+import { useState, useEffect, useCallback, useMemo } from 'react'
+
+export interface Thread {
+  id: string
+  agent_id: string
+  user_id: string | null
+  tags: string[]
+  created_at: number
+  agent: {
+    name?: string
+    title?: string
+    type: string
+  }
+}
+
+// Helper to get a tag value by key (format: "key:value")
+export function getTagValue(tags: string[], key: string): string | undefined {
+  const tag = tags.find(t => t.startsWith(`${key}:`))
+  return tag ? tag.slice(key.length + 1) : undefined
+}
+
+// Helper to get thread title from tags
+export function getThreadTitle(thread: Thread): string {
+  return getTagValue(thread.tags, 'title') || 'Untitled'
+}
+
+// Helper to get API config
+function getApiConfig() {
+  const isVite = typeof import.meta !== 'undefined' && import.meta.env
+  const baseUrl = isVite
+    ? (import.meta.env.VITE_AGENTBUILDER_URL || '')
+    : (process.env.NEXT_PUBLIC_AGENTBUILDER_URL || '')
+
+  // Token is stored in localStorage by auth flow
+  const token = typeof localStorage !== 'undefined'
+    ? localStorage.getItem('agentbuilder_auth_token') || ''
+    : ''
+
+  return { baseUrl, token }
+}
+
+export function useThreads() {
+  const [threads, setThreads] = useState<Thread[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const { baseUrl, token } = useMemo(() => getApiConfig(), [])
+
+  const headers = useMemo(() => {
+    const h: Record<string, string> = { 'Content-Type': 'application/json' }
+    if (token) h['Authorization'] = `Bearer ${token}`
+    return h
+  }, [token])
+
+  const fetchThreads = useCallback(async () => {
+    try {
+      setLoading(true)
+      const response = await fetch(`${baseUrl}/api/threads?limit=50`, { headers })
+      if (!response.ok) throw new Error('Failed to fetch threads')
+      const data = await response.json()
+      setThreads(data.threads || [])
+      setError(null)
+    } catch (err) {
+      console.error('Failed to load threads:', err)
+      setError(err instanceof Error ? err.message : 'Failed to load threads')
+    } finally {
+      setLoading(false)
+    }
+  }, [baseUrl, headers])
+
+  useEffect(() => {
+    fetchThreads()
+  }, [fetchThreads])
+
+  const deleteThread = useCallback(async (threadId: string) => {
+    try {
+      const response = await fetch(`${baseUrl}/api/threads/${threadId}`, {
+        method: 'DELETE',
+        headers,
+      })
+      if (!response.ok) throw new Error('Failed to delete thread')
+      setThreads((prev) => prev.filter((t) => t.id !== threadId))
+    } catch (err) {
+      console.error('Failed to delete thread:', err)
+      throw err
+    }
+  }, [baseUrl, headers])
+
+  const updateThreadTitle = useCallback(async (threadId: string, title: string) => {
+    // Find the thread and update tags optimistically
+    setThreads((prev) => prev.map((t) => {
+      if (t.id !== threadId) return t
+      // Remove existing title tag and add new one
+      const tagsWithoutTitle = t.tags.filter(tag => !tag.startsWith('title:'))
+      return { ...t, tags: [...tagsWithoutTitle, `title:${title}`] }
+    }))
+
+    try {
+      // Get current thread to preserve other tags
+      const thread = threads.find(t => t.id === threadId)
+      if (!thread) return
+
+      const tagsWithoutTitle = thread.tags.filter(tag => !tag.startsWith('title:'))
+      const newTags = [...tagsWithoutTitle, `title:${title}`]
+
+      const response = await fetch(`${baseUrl}/api/threads/${threadId}`, {
+        method: 'PATCH',
+        headers,
+        body: JSON.stringify({ tags: newTags }),
+      })
+      if (!response.ok) {
+        console.error('Failed to update thread title:', response.status)
+        fetchThreads() // Revert on failure
+      }
+    } catch (err) {
+      console.error('Failed to update thread:', err)
+      fetchThreads() // Revert on failure
+    }
+  }, [baseUrl, headers, fetchThreads, threads])
+
+  return {
+    threads,
+    loading,
+    error,
+    refreshThreads: fetchThreads,
+    deleteThread,
+    updateThreadTitle
+  }
+}