@auxiora/dashboard 1.0.0

package/ui/src/pages/Login.tsx

@@ -0,0 +1,64 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { api } from '../api';
+
+export function Login() {
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [checking, setChecking] = useState(true);
+  const [agentName, setAgentName] = useState('Auxiora');
+  const navigate = useNavigate();
+
+  // Check if vault needs unlocking before allowing login
+  useEffect(() => {
+    api.getSetupStatus()
+      .then(status => {
+        if (status.agentName) setAgentName(status.agentName);
+        if (status.needsSetup) {
+          navigate('/setup', { replace: true });
+        } else if (!status.vaultUnlocked) {
+          navigate('/unlock', { replace: true });
+        }
+      })
+      .catch(() => {})
+      .finally(() => setChecking(false));
+  }, []);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+    try {
+      await api.login(password);
+      navigate('/');
+    } catch (err: any) {
+      setError(err.message || 'Login failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (checking) return null;
+
+  return (
+    <div className="login-page">
+      <div className="login-card">
+        <h1>{agentName} Mission Control</h1>
+        <form onSubmit={handleSubmit}>
+          <input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            placeholder="Password"
+            autoFocus
+          />
+          <button type="submit" disabled={loading}>
+            {loading ? 'Logging in...' : 'Login'}
+          </button>
+          {error && <p className="error">{error}</p>}
+        </form>
+      </div>
+    </div>
+  );
+}

package/ui/src/pages/Overview.tsx

@@ -0,0 +1,56 @@
+import { useApi } from '../hooks/useApi';
+import { usePolling } from '../hooks/usePolling';
+import { api } from '../api';
+import { ActivityFeed } from '../components/ActivityFeed';
+import { BehaviorHealth } from '../components/BehaviorHealth';
+
+export function Overview() {
+  const { data: status, refresh } = useApi(() => api.getStatus(), []);
+  const { data: models, refresh: refreshModels } = useApi(() => api.getModels(), []);
+  usePolling(() => { refresh(); refreshModels(); });
+
+  const s = status?.data;
+  const primaryProvider = models?.providers?.find((p: any) => p.available)?.displayName ?? 'None';
+
+  return (
+    <div className="page">
+      <h2>Mission Control</h2>
+
+      {/* Quick status strip */}
+      <div className="status-grid">
+        <div className="status-card">
+          <h3>Connections</h3>
+          <div className="value">{s?.connections ?? 0}</div>
+          <div className="sub">Active sessions</div>
+        </div>
+        <div className="status-card">
+          <h3>Provider</h3>
+          <div className="value">{primaryProvider}</div>
+          <div className="sub">{s?.activeModel?.model ?? 'unknown'}</div>
+        </div>
+        <div className="status-card">
+          <h3>Uptime</h3>
+          <div className="value">{s ? formatUptime(s.uptime) : '-'}</div>
+          <div className="sub">Since last restart</div>
+        </div>
+      </div>
+
+      {/* Main two-column layout */}
+      <div className="mc-columns">
+        <div className="mc-left">
+          <BehaviorHealth />
+        </div>
+        <div className="mc-right">
+          <ActivityFeed />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function formatUptime(seconds: number): string {
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  if (h > 0) return `${h}h ${m}m`;
+  return `${m}m`;
+}

package/ui/src/pages/Sessions.tsx

@@ -0,0 +1,26 @@
+import { useApi } from '../hooks/useApi';
+import { usePolling } from '../hooks/usePolling';
+import { api } from '../api';
+import { DataTable } from '../components/DataTable';
+
+export function Sessions() {
+  const { data, refresh } = useApi(() => api.getSessions(), []);
+  usePolling(refresh);
+
+  const sessions = data?.data ?? [];
+
+  const columns = [
+    { key: 'id', label: 'Session ID', render: (s: any) => s.id.slice(0, 8) + '...' },
+    { key: 'channelType', label: 'Channel' },
+    { key: 'authenticated', label: 'Auth', render: (s: any) => s.authenticated ? 'Yes' : 'No' },
+    { key: 'voiceActive', label: 'Voice', render: (s: any) => s.voiceActive ? 'Active' : '-' },
+    { key: 'lastActive', label: 'Last Active', render: (s: any) => new Date(s.lastActive).toLocaleString() },
+  ];
+
+  return (
+    <div className="page">
+      <h2>Active Sessions</h2>
+      <DataTable columns={columns} rows={sessions} keyField="id" />
+    </div>
+  );
+}

package/ui/src/pages/SettingsAmbient.tsx

@@ -0,0 +1,185 @@
+import { useState, useEffect } from 'react';
+import { useApi } from '../hooks/useApi';
+import { api } from '../api';
+
+const CATEGORIES = ['Calendar', 'Email', 'Tasks', 'Patterns'] as const;
+
+interface AmbientConfig {
+  morningBriefing: {
+    enabled: boolean;
+    time: string;
+    categories: string[];
+  };
+  eveningSummary: {
+    enabled: boolean;
+    time: string;
+  };
+  deliveryChannel: string;
+}
+
+const DEFAULT_CONFIG: AmbientConfig = {
+  morningBriefing: {
+    enabled: true,
+    time: '08:00',
+    categories: ['Calendar', 'Email'],
+  },
+  eveningSummary: {
+    enabled: false,
+    time: '18:00',
+  },
+  deliveryChannel: 'all',
+};
+
+export function SettingsAmbient() {
+  const { data, loading: fetching } = useApi(() => api.getAmbientConfig(), []);
+  const [config, setConfig] = useState<AmbientConfig>(DEFAULT_CONFIG);
+  const [saving, setSaving] = useState(false);
+  const [success, setSuccess] = useState('');
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    if (data?.data) {
+      setConfig({
+        morningBriefing: {
+          enabled: data.data.morningBriefing?.enabled ?? DEFAULT_CONFIG.morningBriefing.enabled,
+          time: data.data.morningBriefing?.time ?? DEFAULT_CONFIG.morningBriefing.time,
+          categories: data.data.morningBriefing?.categories ?? DEFAULT_CONFIG.morningBriefing.categories,
+        },
+        eveningSummary: {
+          enabled: data.data.eveningSummary?.enabled ?? DEFAULT_CONFIG.eveningSummary.enabled,
+          time: data.data.eveningSummary?.time ?? DEFAULT_CONFIG.eveningSummary.time,
+        },
+        deliveryChannel: data.data.deliveryChannel ?? DEFAULT_CONFIG.deliveryChannel,
+      });
+    }
+  }, [data]);
+
+  const toggleCategory = (category: string) => {
+    setConfig(prev => {
+      const cats = prev.morningBriefing.categories;
+      const next = cats.includes(category)
+        ? cats.filter(c => c !== category)
+        : [...cats, category];
+      return {
+        ...prev,
+        morningBriefing: { ...prev.morningBriefing, categories: next },
+      };
+    });
+  };
+
+  const handleSave = async () => {
+    setSaving(true);
+    setError('');
+    setSuccess('');
+    try {
+      await api.updateAmbientConfig(config);
+      setSuccess('Ambient settings saved successfully');
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to save settings');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (fetching) return null;
+
+  return (
+    <div className="page">
+      <h2>Ambient Intelligence</h2>
+      <div className="settings-form">
+        <div className="settings-section">
+          <h3>Morning Briefing</h3>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '1rem' }}>
+            <div
+              className={`toggle${config.morningBriefing.enabled ? ' active' : ''}`}
+              onClick={() => setConfig(prev => ({
+                ...prev,
+                morningBriefing: { ...prev.morningBriefing, enabled: !prev.morningBriefing.enabled },
+              }))}
+            />
+            <span style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>
+              {config.morningBriefing.enabled ? 'Enabled' : 'Disabled'}
+            </span>
+          </div>
+          {config.morningBriefing.enabled && (
+            <>
+              <label>Delivery Time</label>
+              <input
+                type="time"
+                value={config.morningBriefing.time}
+                onChange={(e) => setConfig(prev => ({
+                  ...prev,
+                  morningBriefing: { ...prev.morningBriefing, time: e.target.value },
+                }))}
+              />
+              <label>Categories</label>
+              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', marginBottom: '1rem' }}>
+                {CATEGORIES.map(cat => (
+                  <label key={cat} style={{ display: 'flex', alignItems: 'center', gap: '0.4rem', cursor: 'pointer', fontSize: '0.85rem' }}>
+                    <input
+                      type="checkbox"
+                      checked={config.morningBriefing.categories.includes(cat)}
+                      onChange={() => toggleCategory(cat)}
+                      style={{ width: 'auto', marginBottom: 0 }}
+                    />
+                    {cat}
+                  </label>
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+
+        <div className="settings-section">
+          <h3>Evening Summary</h3>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '1rem' }}>
+            <div
+              className={`toggle${config.eveningSummary.enabled ? ' active' : ''}`}
+              onClick={() => setConfig(prev => ({
+                ...prev,
+                eveningSummary: { ...prev.eveningSummary, enabled: !prev.eveningSummary.enabled },
+              }))}
+            />
+            <span style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>
+              {config.eveningSummary.enabled ? 'Enabled' : 'Disabled'}
+            </span>
+          </div>
+          {config.eveningSummary.enabled && (
+            <>
+              <label>Delivery Time</label>
+              <input
+                type="time"
+                value={config.eveningSummary.time}
+                onChange={(e) => setConfig(prev => ({
+                  ...prev,
+                  eveningSummary: { ...prev.eveningSummary, time: e.target.value },
+                }))}
+              />
+            </>
+          )}
+        </div>
+
+        <div className="settings-section">
+          <label>Delivery Channel</label>
+          <select
+            value={config.deliveryChannel}
+            onChange={(e) => setConfig(prev => ({ ...prev, deliveryChannel: e.target.value }))}
+          >
+            <option value="all">All connected channels</option>
+            <option value="webchat">Webchat only</option>
+            <option value="discord">Discord</option>
+            <option value="telegram">Telegram</option>
+            <option value="slack">Slack</option>
+            <option value="email">Email</option>
+          </select>
+        </div>
+
+        <button className="settings-btn" onClick={handleSave} disabled={saving}>
+          {saving ? 'Saving...' : 'Save Settings'}
+        </button>
+        {success && <div className="settings-success">{success}</div>}
+        {error && <div className="error">{error}</div>}
+      </div>
+    </div>
+  );
+}

package/ui/src/pages/SettingsConnections.tsx

@@ -0,0 +1,201 @@
+import { useState, useEffect } from 'react';
+import { api } from '../api';
+
+interface ConnectorState {
+  hasCredentials: boolean;
+  connected: boolean;
+  expiresAt?: number;
+  loading: boolean;
+}
+
+const CONNECTORS = [
+  {
+    id: 'google-workspace',
+    name: 'Google Workspace',
+    description: 'Gmail, Google Calendar, and Google Drive',
+    scopes: 'Email summaries, calendar awareness, drive file access',
+    setupUrl: 'https://console.cloud.google.com/apis/credentials',
+    instructions: [
+      'Go to Google Cloud Console > APIs & Services > Credentials',
+      'Create an OAuth 2.0 Client ID (Web application type)',
+      'Add authorized redirect URI: {callbackUrl}',
+      'Enable Gmail API, Google Calendar API, and Google Drive API',
+    ],
+  },
+];
+
+export function SettingsConnections() {
+  const [states, setStates] = useState<Record<string, ConnectorState>>({});
+  const [clientId, setClientId] = useState('');
+  const [clientSecret, setClientSecret] = useState('');
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState('');
+  const [showSetup, setShowSetup] = useState<string | null>(null);
+
+  const callbackUrl = `${window.location.origin}/api/v1/dashboard/connectors/google-workspace/callback`;
+
+  useEffect(() => {
+    void loadStatuses();
+  }, []);
+
+  async function loadStatuses() {
+    for (const connector of CONNECTORS) {
+      setStates(prev => ({ ...prev, [connector.id]: { ...prev[connector.id]!, loading: true, hasCredentials: false, connected: false } }));
+      try {
+        const result = await api.getConnectorStatus(connector.id);
+        setStates(prev => ({
+          ...prev,
+          [connector.id]: {
+            hasCredentials: result.data.hasCredentials,
+            connected: result.data.connected,
+            expiresAt: result.data.expiresAt,
+            loading: false,
+          },
+        }));
+      } catch {
+        setStates(prev => ({ ...prev, [connector.id]: { hasCredentials: false, connected: false, loading: false } }));
+      }
+    }
+  }
+
+  async function handleSaveCredentials(connectorId: string) {
+    if (!clientId || !clientSecret) {
+      setError('Both Client ID and Client Secret are required');
+      return;
+    }
+    setError('');
+    try {
+      await api.saveConnectorCredentials(connectorId, clientId, clientSecret);
+      setSuccess('Credentials saved. Click "Connect" to authorize.');
+      setClientId('');
+      setClientSecret('');
+      setShowSetup(null);
+      void loadStatuses();
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to save credentials');
+    }
+  }
+
+  function handleStartOAuth(connectorId: string) {
+    window.location.href = `/api/v1/dashboard/connectors/${connectorId}/auth`;
+  }
+
+  async function handleDisconnect(connectorId: string) {
+    try {
+      await api.disconnectConnector(connectorId);
+      setSuccess('Disconnected successfully');
+      void loadStatuses();
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to disconnect');
+    }
+  }
+
+  return (
+    <div className="page">
+      <h2>Connections</h2>
+      <div className="settings-form">
+        {success && <div className="settings-success" onClick={() => setSuccess('')}>{success}</div>}
+        {error && <div className="error">{error}</div>}
+
+        {CONNECTORS.map(connector => {
+          const state = states[connector.id];
+          const isConnected = state?.connected;
+          const hasCredentials = state?.hasCredentials;
+
+          return (
+            <div key={connector.id} className="settings-section">
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <div>
+                  <h3>{connector.name}</h3>
+                  <span style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>
+                    {connector.description}
+                  </span>
+                </div>
+                <span className={isConnected ? 'badge badge-green' : 'badge badge-gray'}>
+                  {state?.loading ? 'Checking...' : isConnected ? 'Connected' : 'Not connected'}
+                </span>
+              </div>
+
+              <p style={{ fontSize: '0.8rem', color: 'var(--text-secondary)', margin: '0.5rem 0' }}>
+                Enables: {connector.scopes}
+              </p>
+
+              {isConnected ? (
+                <div style={{ display: 'flex', gap: '0.5rem', marginTop: '1rem', alignItems: 'center' }}>
+                  {state?.expiresAt && (
+                    <span style={{ fontSize: '0.75rem', color: 'var(--text-secondary)' }}>
+                      Token expires: {new Date(state.expiresAt).toLocaleDateString()}
+                    </span>
+                  )}
+                  <button type="button" className="btn-sm" onClick={() => handleStartOAuth(connector.id)}>
+                    Reconnect
+                  </button>
+                  <button type="button" className="btn-sm btn-danger" onClick={() => handleDisconnect(connector.id)}>
+                    Disconnect
+                  </button>
+                </div>
+              ) : hasCredentials ? (
+                <div style={{ display: 'flex', gap: '0.5rem', marginTop: '1rem' }}>
+                  <button type="button" className="settings-btn" onClick={() => handleStartOAuth(connector.id)}>
+                    Connect
+                  </button>
+                  <button type="button" className="btn-sm" onClick={() => setShowSetup(connector.id)}>
+                    Update Credentials
+                  </button>
+                </div>
+              ) : (
+                <div style={{ marginTop: '1rem' }}>
+                  {showSetup !== connector.id ? (
+                    <button type="button" className="settings-btn" onClick={() => setShowSetup(connector.id)}>
+                      Set Up
+                    </button>
+                  ) : null}
+                </div>
+              )}
+
+              {showSetup === connector.id && (
+                <div style={{ marginTop: '1rem', padding: '1rem', background: 'var(--bg-hover)', borderRadius: 'var(--radius)', border: '1px solid var(--border)' }}>
+                  <h4 style={{ margin: '0 0 0.75rem', fontFamily: 'var(--font-display)', fontWeight: 600 }}>Setup Instructions</h4>
+                  <ol style={{ fontSize: '0.8rem', color: 'var(--text-secondary)', paddingLeft: '1.25rem', margin: '0 0 1rem' }}>
+                    {connector.instructions.map((step, i) => (
+                      <li key={i} style={{ marginBottom: '0.35rem' }}>
+                        {step.replace('{callbackUrl}', callbackUrl)}
+                      </li>
+                    ))}
+                  </ol>
+
+                  <div style={{ fontSize: '0.75rem', color: 'var(--text-secondary)', marginBottom: '1rem', wordBreak: 'break-all' }}>
+                    Redirect URI: <code style={{ fontFamily: 'var(--font-mono)', background: 'var(--accent-subtle)', color: 'var(--accent)', padding: '0.15rem 0.35rem', borderRadius: '4px', fontSize: '0.82em' }}>{callbackUrl}</code>
+                  </div>
+
+                  <label>Client ID</label>
+                  <input
+                    type="text"
+                    value={clientId}
+                    onChange={(e) => setClientId(e.target.value)}
+                    placeholder="your-client-id.apps.googleusercontent.com"
+                  />
+                  <label>Client Secret</label>
+                  <input
+                    type="password"
+                    value={clientSecret}
+                    onChange={(e) => setClientSecret(e.target.value)}
+                    placeholder="GOCSPX-..."
+                  />
+                  <div style={{ display: 'flex', gap: '0.5rem', marginTop: '0.5rem' }}>
+                    <button type="button" className="settings-btn" onClick={() => handleSaveCredentials(connector.id)}>
+                      Save & Connect
+                    </button>
+                    <button type="button" className="btn-sm" onClick={() => { setShowSetup(null); setError(''); }}>
+                      Cancel
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}