@auxiora/dashboard 1.0.0

package/ui/src/pages/SetupPersonality.tsx

@@ -0,0 +1,78 @@
+import { useState, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { api } from '../api';
+import { useApi } from '../hooks/useApi';
+import { SetupProgress } from '../components/SetupProgress';
+
+const VIBE_KEYWORDS: Record<string, string[]> = {
+  chill: ['chill', 'relaxed', 'laid-back', 'easygoing', 'calm'],
+  professional: ['professional', 'formal', 'precise', 'corporate', 'business'],
+  friendly: ['friendly', 'warm', 'kind', 'caring', 'supportive', 'best friend'],
+  creative: ['creative', 'imaginative', 'artistic', 'playful', 'quirky'],
+  mentor: ['mentor', 'teacher', 'guide', 'coach', 'wise'],
+  technical: ['technical', 'code', 'developer', 'engineer', 'hacker'],
+};
+
+function matchVibeToTemplate(vibe: string): string | null {
+  const lower = vibe.toLowerCase();
+  for (const [templateId, keywords] of Object.entries(VIBE_KEYWORDS)) {
+    if (keywords.some((kw) => lower.includes(kw))) return templateId;
+  }
+  return null;
+}
+
+export function SetupPersonality() {
+  const { data: templates, loading: templatesLoading, error: templatesError } = useApi(() => api.getSetupTemplates(), []);
+  const [selected, setSelected] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const navigate = useNavigate();
+  const recommendedId = useMemo(() => {
+    const vibe = localStorage.getItem('auxiora_setup_vibe');
+    if (!vibe) return null;
+    localStorage.removeItem('auxiora_setup_vibe');
+    return matchVibeToTemplate(vibe);
+  }, []);
+
+  const handleSelect = async (templateId: string) => {
+    setSelected(templateId);
+    setLoading(true);
+    setError('');
+    try {
+      await api.setupPersonality(templateId);
+      navigate('/setup/appearance');
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to set personality');
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="setup-page">
+      <SetupProgress currentStep={4} />
+      <div className="setup-card" style={{ maxWidth: 680 }}>
+        <h1>Personality</h1>
+        <p className="subtitle">Choose a personality template for your assistant.</p>
+        {templatesLoading && <p style={{ color: 'var(--text-secondary)' }}>Loading templates...</p>}
+        {templatesError && <p className="error">{templatesError}</p>}
+        {templates && (
+          <div className="template-grid">
+            {templates.data.map((t) => (
+              <div
+                key={t.id}
+                className={`template-card${selected === t.id ? ' selected' : ''}${recommendedId === t.id ? ' recommended' : ''}`}
+                onClick={() => !loading && handleSelect(t.id)}
+              >
+                <h3>{t.name}{recommendedId === t.id && <span className="badge badge-primary" style={{ marginLeft: '0.5rem', fontSize: '0.6rem' }}>Recommended</span>}</h3>
+                <p>{t.description}</p>
+                {t.preview && <p style={{ marginTop: '0.5rem', fontStyle: 'italic', fontSize: '0.75rem' }}>{t.preview}</p>}
+              </div>
+            ))}
+          </div>
+        )}
+        {error && <p className="error">{error}</p>}
+        {loading && <p style={{ color: 'var(--text-secondary)', textAlign: 'center' }}>Saving...</p>}
+      </div>
+    </div>
+  );
+}

package/ui/src/pages/SetupProvider.tsx

@@ -0,0 +1,65 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { api } from '../api';
+import { SetupProgress } from '../components/SetupProgress';
+
+export function SetupProvider() {
+  const [provider, setProvider] = useState('anthropic');
+  const [apiKey, setApiKey] = useState('');
+  const [endpoint, setEndpoint] = useState('http://localhost:11434');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+    try {
+      await api.setupProvider(
+        provider,
+        provider !== 'ollama' ? apiKey : undefined,
+        provider === 'ollama' ? endpoint : undefined,
+      );
+      navigate('/setup/channels');
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to configure provider');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="setup-page">
+      <SetupProgress currentStep={6} />
+      <div className="setup-card">
+        <h1>AI Provider</h1>
+        <p className="subtitle">Choose which AI model provider to use.</p>
+        <form onSubmit={handleSubmit}>
+          <label>Provider</label>
+          <select value={provider} onChange={(e) => setProvider(e.target.value)}>
+            <option value="anthropic">Anthropic Claude</option>
+            <option value="openai">OpenAI</option>
+            <option value="ollama">Ollama (Local)</option>
+          </select>
+          {provider !== 'ollama' && (
+            <>
+              <label>API Key</label>
+              <input type="password" value={apiKey} onChange={(e) => setApiKey(e.target.value)} placeholder="sk-..." />
+            </>
+          )}
+          {provider === 'ollama' && (
+            <>
+              <label>Endpoint URL</label>
+              <input type="text" value={endpoint} onChange={(e) => setEndpoint(e.target.value)} />
+            </>
+          )}
+          <button type="submit" className="setup-btn-primary" disabled={loading}>
+            {loading ? 'Saving...' : 'Continue'}
+          </button>
+          {error && <p className="error">{error}</p>}
+        </form>
+      </div>
+    </div>
+  );
+}

package/ui/src/pages/SetupVault.tsx

@@ -0,0 +1,50 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { api } from '../api';
+import { SetupProgress } from '../components/SetupProgress';
+import { PasswordStrength } from '../components/PasswordStrength';
+
+export function SetupVault() {
+  const [password, setPassword] = useState('');
+  const [confirm, setConfirm] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (password.length < 8) { setError('Password must be at least 8 characters'); return; }
+    if (password !== confirm) { setError('Passwords do not match'); return; }
+    setLoading(true);
+    setError('');
+    try {
+      await api.setupVault(password);
+      navigate('/setup/dashboard-password');
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to create vault');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="setup-page">
+      <SetupProgress currentStep={1} />
+      <div className="setup-card">
+        <h1>Create Vault Password</h1>
+        <p className="subtitle">This password encrypts your secrets. Store it somewhere safe — it cannot be recovered.</p>
+        <form onSubmit={handleSubmit}>
+          <label>Vault password</label>
+          <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} autoFocus />
+          <PasswordStrength password={password} />
+          <label>Confirm password</label>
+          <input type="password" value={confirm} onChange={(e) => setConfirm(e.target.value)} />
+          <button type="submit" className="setup-btn-primary" disabled={loading}>
+            {loading ? 'Creating...' : 'Create Vault'}
+          </button>
+          {error && <p className="error">{error}</p>}
+        </form>
+      </div>
+    </div>
+  );
+}

package/ui/src/pages/SetupWelcome.tsx

@@ -0,0 +1,19 @@
+import { useNavigate } from 'react-router-dom';
+
+export function SetupWelcome() {
+  const navigate = useNavigate();
+
+  return (
+    <div className="setup-page">
+      <div className="setup-card" style={{ textAlign: 'center' }}>
+        <h1>Welcome to Auxiora</h1>
+        <p className="subtitle">
+          Your personal AI assistant. Let's get you set up — it only takes a minute.
+        </p>
+        <button className="setup-btn-primary" onClick={() => navigate('/setup/vault')}>
+          Get Started
+        </button>
+      </div>
+    </div>
+  );
+}

package/ui/src/pages/UnlockVault.tsx

@@ -0,0 +1,56 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { api } from '../api';
+
+export function UnlockVault() {
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [agentName, setAgentName] = useState('Auxiora');
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    api.getSetupStatus()
+      .then(status => { if (status.agentName) setAgentName(status.agentName); })
+      .catch(() => {});
+  }, []);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!password) return;
+    setLoading(true);
+    setError('');
+    try {
+      await api.setupVault(password);
+      navigate('/login', { replace: true });
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Wrong password');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="login-page">
+      <div className="login-card">
+        <h1>Unlock Vault</h1>
+        <p style={{ color: 'var(--text-secondary)', marginBottom: '1.5rem', fontSize: '0.9rem' }}>
+          Enter your vault password to start {agentName}.
+        </p>
+        <form onSubmit={handleSubmit}>
+          <input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            placeholder="Vault password"
+            autoFocus
+          />
+          <button type="submit" disabled={loading || !password}>
+            {loading ? 'Unlocking...' : 'Unlock'}
+          </button>
+          {error && <p className="error">{error}</p>}
+        </form>
+      </div>
+    </div>
+  );
+}

package/ui/src/pages/Webhooks.tsx

@@ -0,0 +1,158 @@
+import { useState } from 'react';
+import { useApi } from '../hooks/useApi';
+import { usePolling } from '../hooks/usePolling';
+import { api } from '../api';
+import { DataTable } from '../components/DataTable';
+import { StatusBadge } from '../components/StatusBadge';
+
+export function Webhooks() {
+  const { data, refresh } = useApi(() => api.getWebhooks(), []);
+  const { data: behaviorsData } = useApi(() => api.getBehaviors(), []);
+  usePolling(refresh);
+
+  const webhooks = data?.data ?? [];
+  const behaviors = behaviorsData?.data ?? [];
+
+  const [showForm, setShowForm] = useState(false);
+  const [name, setName] = useState('');
+  const [secret, setSecret] = useState('');
+  const [behaviorId, setBehaviorId] = useState('');
+  const [creating, setCreating] = useState(false);
+  const [error, setError] = useState('');
+  const [createdUrl, setCreatedUrl] = useState('');
+
+  const columns = [
+    { key: 'name', label: 'Name' },
+    { key: 'type', label: 'Type' },
+    { key: 'enabled', label: 'Status', render: (w: any) => <StatusBadge status={w.enabled ? 'enabled' : 'disabled'} /> },
+    { key: 'behaviorId', label: 'Behavior', render: (w: any) => w.behaviorId || '-' },
+    { key: 'createdAt', label: 'Created', render: (w: any) => new Date(w.createdAt).toLocaleDateString() },
+  ];
+
+  const handleToggle = async (w: any) => {
+    try {
+      await api.patchWebhook(w.id, { enabled: !w.enabled });
+      refresh();
+    } catch (err: any) {
+      alert(err.message || 'Failed to update webhook');
+    }
+  };
+
+  const handleDelete = async (w: any) => {
+    if (!confirm(`Delete webhook "${w.name}"?`)) return;
+    try {
+      await api.deleteWebhook(w.id);
+      refresh();
+    } catch (err: any) {
+      alert(err.message || 'Failed to delete webhook');
+    }
+  };
+
+  const resetForm = () => {
+    setName('');
+    setSecret('');
+    setBehaviorId('');
+    setError('');
+    setCreatedUrl('');
+  };
+
+  const handleCreate = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setCreatedUrl('');
+    setCreating(true);
+
+    try {
+      const input: Record<string, unknown> = { name, secret };
+      if (behaviorId) input.behaviorId = behaviorId;
+
+      await api.createWebhook(input);
+      const webhookUrl = `${window.location.origin}/api/v1/webhooks/custom/${name}`;
+      setCreatedUrl(webhookUrl);
+      resetForm();
+      setShowForm(false);
+      refresh();
+    } catch (err: any) {
+      setError(err.message || 'Failed to create webhook');
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  return (
+    <div className="page">
+      <h2>Webhooks</h2>
+
+      <div className="create-form-toggle">
+        <button
+          className="btn-sm"
+          onClick={() => { setShowForm(!showForm); if (showForm) resetForm(); }}
+        >
+          {showForm ? 'Cancel' : 'New Webhook'}
+        </button>
+      </div>
+
+      {createdUrl && (
+        <div className="create-form-success">
+          Webhook created. URL: <code>{createdUrl}</code>
+        </div>
+      )}
+
+      {showForm && (
+        <div className="create-form">
+          <form onSubmit={handleCreate}>
+            <label>Name</label>
+            <input
+              type="text"
+              value={name}
+              onChange={e => setName(e.target.value)}
+              placeholder="my-webhook"
+              pattern="[a-zA-Z0-9_-]+"
+              title="URL-safe: letters, numbers, hyphens, underscores"
+              required
+            />
+
+            <label>Secret</label>
+            <input
+              type="password"
+              value={secret}
+              onChange={e => setSecret(e.target.value)}
+              placeholder="HMAC signing key"
+              required
+            />
+
+            <label>Behavior (optional)</label>
+            <select value={behaviorId} onChange={e => setBehaviorId(e.target.value)}>
+              <option value="">None</option>
+              {behaviors.map((b: any) => (
+                <option key={b.id} value={b.id}>
+                  {b.action?.slice(0, 50) || b.id}
+                </option>
+              ))}
+            </select>
+
+            {error && <div className="error">{error}</div>}
+
+            <button type="submit" className="settings-btn" disabled={creating || !name || !secret}>
+              {creating ? 'Creating...' : 'Create Webhook'}
+            </button>
+          </form>
+        </div>
+      )}
+
+      <DataTable
+        columns={columns}
+        rows={webhooks}
+        keyField="id"
+        actions={(w: any) => (
+          <>
+            <button className="btn-sm" onClick={() => handleToggle(w)}>
+              {w.enabled ? 'Disable' : 'Enable'}
+            </button>
+            <button className="btn-sm btn-danger" onClick={() => handleDelete(w)}>Delete</button>
+          </>
+        )}
+      />
+    </div>
+  );
+}

package/ui/src/pages/settings/Appearance.tsx

@@ -0,0 +1,63 @@
+import { useState, useEffect } from 'react';
+import { ThemeSelector } from '../../components/ThemeSelector';
+import { useTheme, type ThemeId } from '../../contexts/ThemeContext';
+import { api } from '../../api';
+
+export function SettingsAppearance() {
+  const { theme, setTheme } = useTheme();
+  const [saving, setSaving] = useState(false);
+  const [success, setSuccess] = useState('');
+  const [error, setError] = useState('');
+  const [serverTheme, setServerTheme] = useState<ThemeId | null>(null);
+
+  useEffect(() => {
+    api.getAppearance()
+      .then(res => {
+        const t = res.data.theme as ThemeId;
+        setServerTheme(t);
+      })
+      .catch(() => {
+        // If server has no saved theme, treat current theme as the baseline
+        setServerTheme(theme);
+      });
+  }, []);
+
+  const hasChanges = serverTheme !== null && theme !== serverTheme;
+
+  const handleSave = async () => {
+    setSaving(true);
+    setError('');
+    setSuccess('');
+    try {
+      await api.updateAppearance(theme);
+      setServerTheme(theme);
+      setSuccess('Theme updated successfully');
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to save theme');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div className="page">
+      <h2>Appearance</h2>
+      <p style={{ color: 'var(--text-secondary)', marginBottom: '1.5rem' }}>
+        Choose your theme. Changes preview instantly.
+      </p>
+      <ThemeSelector />
+      {hasChanges && (
+        <button
+          className="btn-primary"
+          onClick={handleSave}
+          disabled={saving}
+          style={{ marginTop: '1.5rem' }}
+        >
+          {saving ? 'Saving...' : 'Save Theme'}
+        </button>
+      )}
+      {success && <p className="success" style={{ marginTop: '0.75rem' }}>{success}</p>}
+      {error && <p className="error" style={{ marginTop: '0.75rem' }}>{error}</p>}
+    </div>
+  );
+}

package/ui/src/pages/settings/Channels.tsx

@@ -0,0 +1,138 @@
+import { useState } from 'react';
+import { useApi } from '../../hooks/useApi';
+import { api } from '../../api';
+
+const AVAILABLE_CHANNELS = [
+  { type: 'discord', label: 'Discord', fields: [{ key: 'botToken', label: 'Bot Token', secret: true }] },
+  { type: 'telegram', label: 'Telegram', fields: [{ key: 'botToken', label: 'Bot Token', secret: true }] },
+  { type: 'slack', label: 'Slack', fields: [{ key: 'botToken', label: 'Bot Token', secret: true }, { key: 'appToken', label: 'App Token', secret: true }] },
+  { type: 'twilio', label: 'Twilio', fields: [{ key: 'accountSid', label: 'Account SID', secret: false }, { key: 'authToken', label: 'Auth Token', secret: true }] },
+  { type: 'matrix', label: 'Matrix', fields: [{ key: 'accessToken', label: 'Access Token', secret: true }] },
+  {
+    type: 'email',
+    label: 'Email',
+    fields: [
+      { key: 'imapHost', label: 'IMAP Host', secret: false },
+      { key: 'imapPort', label: 'IMAP Port', secret: false },
+      { key: 'smtpHost', label: 'SMTP Host', secret: false },
+      { key: 'smtpPort', label: 'SMTP Port', secret: false },
+      { key: 'email', label: 'Email Address', secret: false },
+      { key: 'password', label: 'Password (App Password for Gmail)', secret: true },
+    ],
+  },
+];
+
+interface ChannelState {
+  enabled: boolean;
+  credentials: Record<string, string>;
+}
+
+export function SettingsChannels() {
+  const { data } = useApi(() => api.getChannels(), []);
+  const connected = data?.data?.connected ?? [];
+  const configured = data?.data?.configured ?? [];
+
+  const [channelStates, setChannelStates] = useState<Record<string, ChannelState>>({});
+  const [saving, setSaving] = useState(false);
+  const [success, setSuccess] = useState('');
+  const [error, setError] = useState('');
+
+  const getState = (type: string): ChannelState => {
+    if (channelStates[type]) return channelStates[type];
+    const conf = configured.find(c => c.type === type);
+    return { enabled: conf?.enabled ?? false, credentials: {} };
+  };
+
+  const toggleChannel = (type: string) => {
+    const current = getState(type);
+    setChannelStates(prev => ({
+      ...prev,
+      [type]: { ...current, enabled: !current.enabled },
+    }));
+  };
+
+  const updateCredential = (type: string, key: string, value: string) => {
+    const current = getState(type);
+    setChannelStates(prev => ({
+      ...prev,
+      [type]: { ...current, credentials: { ...current.credentials, [key]: value } },
+    }));
+  };
+
+  const handleSave = async () => {
+    setSaving(true);
+    setError('');
+    setSuccess('');
+    try {
+      const channels = AVAILABLE_CHANNELS
+        .filter(ch => getState(ch.type).enabled || Object.values(getState(ch.type).credentials).some(v => v))
+        .map(ch => {
+          const state = getState(ch.type);
+          const creds: Record<string, string> = {};
+          for (const [k, v] of Object.entries(state.credentials)) {
+            if (v) creds[k] = v;
+          }
+          return {
+            type: ch.type,
+            enabled: state.enabled,
+            ...(Object.keys(creds).length > 0 ? { credentials: creds } : {}),
+          };
+        });
+      await api.updateChannels(channels);
+      setSuccess('Channels updated successfully');
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div className="page">
+      <h2>Channels</h2>
+      <div className="channel-grid">
+        {AVAILABLE_CHANNELS.map(ch => {
+          const state = getState(ch.type);
+          const isConnected = connected.includes(ch.type);
+          return (
+            <div key={ch.type} className="channel-card">
+              <div className="channel-card-header">
+                <h3>{ch.label}</h3>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                  {isConnected
+                    ? <span className="badge badge-green">Connected</span>
+                    : state.enabled && <span className="badge badge-yellow">Configured</span>
+                  }
+                  <div
+                    className={`toggle${state.enabled ? ' active' : ''}`}
+                    onClick={() => toggleChannel(ch.type)}
+                  />
+                </div>
+              </div>
+              {state.enabled && (
+                <div className="channel-card-fields">
+                  {ch.fields.map(f => (
+                    <div key={f.key}>
+                      <label>{f.label}</label>
+                      <input
+                        type={f.secret ? 'password' : 'text'}
+                        value={state.credentials[f.key] ?? ''}
+                        onChange={(e) => updateCredential(ch.type, f.key, e.target.value)}
+                        placeholder={isConnected ? '(configured)' : `Enter ${f.label.toLowerCase()}`}
+                      />
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+      <button className="settings-btn" onClick={handleSave} disabled={saving}>
+        {saving ? 'Saving...' : 'Save Changes'}
+      </button>
+      {success && <div className="settings-success">{success}</div>}
+      {error && <div className="error">{error}</div>}
+    </div>
+  );
+}