@auxiora/dashboard 1.0.0 → 1.3.0

package/ui/src/pages/Login.tsx

@@ -1,64 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,185 +0,0 @@
-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

@@ -1,201 +0,0 @@
-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>
-  );
-}