deepspace 0.3.10 → 0.4.0

package/features/admin-page/feature.json

@@ -0,0 +1,29 @@
+{
+  "id": "admin-page",
+  "name": "Admin Page",
+  "category": "data",
+  "description": "User management and app settings admin panel",
+  "details": "Admin-only page with user management (list users, change roles) and key-value settings CRUD. Uses useUsers for listing, setRole for role changes, and useQuery/useMutations for a settings collection.",
+  "files": [
+    {
+      "src": "src/AdminPage.tsx",
+      "dest": "src/pages/admin.tsx"
+    },
+    {
+      "src": "src/admin-schema.ts",
+      "dest": "src/schemas/admin-schema.ts"
+    }
+  ],
+  "schema": {
+    "exportName": "settingsSchema",
+    "importPath": "./schemas/admin-schema",
+    "spreadOperator": false
+  },
+  "route": {
+    "path": "/admin",
+    "protected": true
+  },
+  "requires": [],
+  "instructions": [],
+  "patterns": []
+}

package/features/admin-page/src/AdminPage.tsx

@@ -0,0 +1,292 @@
+/**
+ * Admin Page
+ *
+ * User management + app settings page.
+ * - useUsers for listing all users
+ * - setRole for changing user roles
+ * - Admin-only settings collection
+ * - useQuery with admin permissions
+ */
+
+import { useState, useMemo } from 'react'
+import { useUser } from 'deepspace'
+import { useUsers } from 'deepspace'
+import { useQuery } from 'deepspace'
+import { useMutations } from 'deepspace'
+import { Button, Badge, Avatar, AvatarFallback, useToast } from 'deepspace'
+import { ROLES, ROLE_CONFIG, type Role } from 'deepspace'
+
+// ============================================================================
+// Types
+// ============================================================================
+
+interface Setting {
+  key: string
+  value: string
+}
+
+// ============================================================================
+// Main Page
+// ============================================================================
+
+export default function AdminPage() {
+  const { user } = useUser()
+  const isAdmin = user?.role === 'admin'
+  const { users, setRole } = useUsers()
+  const [activeTab, setActiveTab] = useState<'users' | 'settings'>('users')
+  const toast = useToast()
+
+  // Security: Don't render admin content if not an admin
+  if (!isAdmin) {
+    return (
+      <div className="flex items-center justify-center min-h-[60vh] bg-background">
+        <div className="text-center">
+          <div className="w-16 h-16 bg-destructive/20 rounded-2xl flex items-center justify-center mx-auto mb-4 border border-destructive/40">
+            <svg className="w-8 h-8 text-destructive" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+            </svg>
+          </div>
+          <h2 className="text-lg font-semibold text-destructive mb-1">Access Denied</h2>
+          <p className="text-muted-foreground text-sm">You don't have permission to view this page.</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="h-full bg-background overflow-y-auto">
+      {/* Header */}
+      <div className="bg-card/60 backdrop-blur-md border-b border-border sticky top-0 z-10">
+        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <h1 className="text-2xl font-bold text-foreground">Admin Panel</h1>
+              <p className="text-muted-foreground mt-1">Manage users and settings</p>
+            </div>
+          </div>
+
+          {/* Tabs */}
+          <div className="flex gap-1 mt-4">
+            <button
+              onClick={() => setActiveTab('users')}
+              className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+                activeTab === 'users'
+                  ? 'bg-primary/20 text-primary border border-primary/30'
+                  : 'text-muted-foreground hover:text-foreground hover:bg-muted/60 border border-transparent'
+              }`}
+            >
+              Users ({users.length})
+            </button>
+            <button
+              onClick={() => setActiveTab('settings')}
+              className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+                activeTab === 'settings'
+                  ? 'bg-primary/20 text-primary border border-primary/30'
+                  : 'text-muted-foreground hover:text-foreground hover:bg-muted/60 border border-transparent'
+              }`}
+            >
+              Settings
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {activeTab === 'users' ? (
+          <UsersPanel
+            users={users}
+            currentUserId={user?.id}
+            onSetRole={(userId, role) => {
+              setRole(userId, role)
+              toast.success('Role updated successfully')
+            }}
+          />
+        ) : (
+          <SettingsPanel toast={toast} />
+        )}
+      </div>
+
+    </div>
+  )
+}
+
+// ============================================================================
+// Users Panel
+// ============================================================================
+
+interface UsersPanelProps {
+  users: Array<{
+    id: string
+    email: string
+    name: string
+    imageUrl?: string
+    role: string
+    lastSeenAt: string
+  }>
+  currentUserId?: string
+  onSetRole: (userId: string, role: string) => void
+}
+
+function UsersPanel({ users, currentUserId, onSetRole }: UsersPanelProps) {
+  const [selectedUserId, setSelectedUserId] = useState<string | null>(null)
+
+  // Sort users by last seen
+  const sortedUsers = useMemo(() => {
+    return [...users].sort((a, b) =>
+      new Date(b.lastSeenAt).getTime() - new Date(a.lastSeenAt).getTime()
+    )
+  }, [users])
+
+  return (
+    <div className="space-y-4">
+      <div className="bg-muted/40 rounded-xl border border-border overflow-hidden">
+        <div className="divide-y divide-border/30">
+          {sortedUsers.map(user => {
+            const roleConfig = ROLE_CONFIG[user.role as Role] ?? ROLE_CONFIG[ROLES.VIEWER]
+            const isCurrentUser = user.id === currentUserId
+
+            return (
+              <div key={user.id} className="p-4 flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  <Avatar>
+                    <AvatarFallback>{user.name?.[0]?.toUpperCase() ?? '?'}</AvatarFallback>
+                  </Avatar>
+                  <div>
+                    <div className="flex items-center gap-2">
+                      <span className="font-medium text-foreground">{user.name}</span>
+                      {isCurrentUser && (
+                        <span className="text-xs text-muted-foreground">(you)</span>
+                      )}
+                    </div>
+                    <p className="text-sm text-muted-foreground">{user.email}</p>
+                  </div>
+                </div>
+
+                <div className="flex items-center gap-3">
+                  <p className="text-xs text-muted-foreground">
+                    Last seen: {new Date(user.lastSeenAt).toLocaleDateString()}
+                  </p>
+
+                  <div className="flex items-center gap-2">
+                    <Badge variant={roleConfig.badgeVariant as any}>{roleConfig.title}</Badge>
+                    <select
+                      value={user.role}
+                      onChange={(e) => onSetRole(user.id, e.target.value)}
+                      disabled={isCurrentUser}
+                      className="px-3 py-1.5 bg-transparent border border-border rounded-lg text-sm text-foreground focus:outline-none focus:ring-ring disabled:opacity-50"
+                    >
+                      {Object.entries(ROLE_CONFIG).map(([role, config]) => (
+                        <option key={role} value={role}>
+                          {config.title}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+
+      {users.length === 0 && (
+        <p className="text-center text-muted-foreground py-8">No users found</p>
+      )}
+    </div>
+  )
+}
+
+// ============================================================================
+// Settings Panel
+// ============================================================================
+
+interface SettingsPanelProps {
+  toast: ReturnType<typeof useToast>
+}
+
+function SettingsPanel({ toast }: SettingsPanelProps) {
+  const [newKey, setNewKey] = useState('')
+  const [newValue, setNewValue] = useState('')
+
+  // Query settings (admin-only collection)
+  const { records: settings, status } = useQuery<Setting>('settings')
+  const { create, put, remove } = useMutations<Setting>('settings')
+
+  const handleCreate = async () => {
+    if (!newKey.trim() || !newValue.trim()) return
+
+    await create({ key: newKey.trim(), value: newValue.trim() })
+    setNewKey('')
+    setNewValue('')
+    toast.success('Setting created')
+  }
+
+  const handleDelete = async (id: string) => {
+    if (confirm('Are you sure you want to delete this setting?')) {
+      await remove(id)
+      toast.success('Setting deleted')
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Add new setting */}
+      <div className="bg-muted/40 rounded-xl border border-border p-4">
+        <h3 className="text-sm font-medium text-muted-foreground mb-3">Add New Setting</h3>
+        <div className="flex gap-2">
+          <input
+            type="text"
+            value={newKey}
+            onChange={(e) => setNewKey(e.target.value)}
+            placeholder="Key"
+            className="flex-1 px-3 py-2 bg-transparent border border-border rounded-lg text-sm text-foreground placeholder-muted-foreground focus:outline-none focus:ring-ring"
+          />
+          <input
+            type="text"
+            value={newValue}
+            onChange={(e) => setNewValue(e.target.value)}
+            placeholder="Value"
+            className="flex-1 px-3 py-2 bg-transparent border border-border rounded-lg text-sm text-foreground placeholder-muted-foreground focus:outline-none focus:ring-ring"
+          />
+          <Button onClick={handleCreate} disabled={!newKey.trim() || !newValue.trim()}>
+            Add
+          </Button>
+        </div>
+      </div>
+
+      {/* Settings list */}
+      <div className="bg-muted/40 rounded-xl border border-border overflow-hidden">
+        {status === 'loading' ? (
+          <div className="flex items-center justify-center py-8">
+            <div className="w-6 h-6 border-2 border-primary/20 border-t-primary rounded-full animate-spin" />
+          </div>
+        ) : settings.length === 0 ? (
+          <p className="text-center text-muted-foreground py-8">No settings configured</p>
+        ) : (
+          <div className="divide-y divide-border/30">
+            {settings.map(setting => (
+              <div key={setting.recordId} className="p-4 flex items-center justify-between">
+                <div>
+                  <code className="text-sm bg-muted px-2 py-1 rounded text-primary">
+                    {setting.data.key}
+                  </code>
+                  <span className="text-muted-foreground mx-2">=</span>
+                  <span className="text-foreground">{setting.data.value}</span>
+                </div>
+                <button
+                  onClick={() => handleDelete(setting.recordId)}
+                  className="p-2 text-muted-foreground hover:text-destructive hover:bg-destructive/20 rounded-lg transition-colors"
+                >
+                  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                  </svg>
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/features/admin-page/src/admin-schema.ts

@@ -0,0 +1,20 @@
+/**
+ * Admin Feature - Schema
+ *
+ * Admin-only settings collection for key-value app configuration.
+ */
+
+import type { CollectionSchema } from 'deepspace/worker'
+
+export const settingsSchema: CollectionSchema = {
+  name: 'settings',
+  columns: [
+    { name: 'key', storage: 'text', interpretation: 'plain', required: true },
+    { name: 'value', storage: 'text', interpretation: 'plain', required: true },
+  ],
+  permissions: {
+    viewer: { read: false, create: false, update: false, delete: false },
+    member: { read: false, create: false, update: false, delete: false },
+    admin: { read: true, create: true, update: true, delete: true },
+  },
+}

package/features/ai-chat/feature.json

@@ -0,0 +1,41 @@
+{
+  "id": "ai-chat",
+  "name": "AI Chat",
+  "category": "assistant",
+  "description": "Embeddable AI chat panel with DO-backed conversation history",
+  "details": "ChatPanel (reusable component) and AiChatPage (full assistant page with conversation rail). Persists to ai-chats / ai-messages collections in the app's RecordRoom — no localStorage. Routes through the Vercel AI SDK proxy with Anthropic, OpenAI, and Cerebras. User-scoped via RBAC (read: 'own').",
+  "files": [
+    { "src": "src/ChatPanel.tsx", "dest": "src/components/ChatPanel.tsx" },
+    { "src": "src/AiChatPage.tsx", "dest": "src/pages/assistant.tsx" },
+    { "src": "src/ai-chat-schema.ts", "dest": "src/schemas/ai-chat-schema.ts" }
+  ],
+  "schema": {
+    "exportName": "aiChatSchemas",
+    "importPath": "./schemas/ai-chat-schema",
+    "spreadOperator": true
+  },
+  "route": {
+    "path": "/assistant",
+    "protected": true
+  },
+  "requires": [],
+  "dependencies": {
+    "react-markdown": "^9.0.0",
+    "remark-gfm": "^4.0.0",
+    "remark-breaks": "^4.0.0",
+    "rehype-highlight": "^7.0.0",
+    "highlight.js": "^11.10.0"
+  },
+  "instructions": [
+    "Embed ChatPanel standalone (without the conversation rail) for sidebar / modal / popover use. Pass `chatId={null}` to auto-create on first send; use `onChatCreated` to track the new id.",
+    "All chat data lives in the app's RecordRoom DO under the ai-chats and ai-messages collections. RBAC is enforced — users only see their own chats and messages.",
+    "The backend route POST /api/ai/chat takes { chatId, userMessageId, content, modelId? } and runs the full server-owned pipeline: load history, compact if needed, stream assistant, persist on finish.",
+    "Compaction (summarizing older history when the conversation grows large) is server-side and cached on the chat row. No client-side compaction logic."
+  ],
+  "patterns": [
+    "ChatPanel takes `chatId` (or null). Parent owns chat lifecycle (create / select / delete); pass `disabled` while a parent-driven create is in flight so the panel doesn't kick off its own auto-create.",
+    "ChatPanel's DEFAULT_MODELS and worker.ts's ALLOWED_MODELS must stay in sync — add entries to both when introducing a new model.",
+    "Compaction summary is stored on the ai-chats row (compactedSummary, compactedThroughId). The summarizer is user-billed by default; pass `makeDefaultSummarizer(c.env)` with no authToken in worker.ts to absorb the cost as the developer instead.",
+    "Tool execution is server-side and per-user RBAC-enforced (records.* tools see only what the caller would see). `stopWhen: stepCountIs(5)` caps tool-use rounds per turn."
+  ]
+}