total-recall-brain 3.16.1 → 3.17.0

package/frontend/src/components/VoiceInput.tsx

@@ -50,7 +50,12 @@ export function VoiceInput({ onTranscript, isRecording = false }: VoiceInputProp
 
   if (!supported) {
     return (
-      <button disabled className="p-2 bg-gray-200 text-gray-500 rounded-full" title="Voice input not supported">
+      <button 
+        disabled 
+        className="chat-send-btn" 
+        style={{ background: 'var(--bg-tertiary)', border: '1px solid var(--border)', color: 'var(--text-tertiary)', opacity: 0.5, cursor: 'not-allowed' }}
+        title="Voice input not supported"
+      >
         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></svg>
       </button>
     );
@@ -59,7 +64,13 @@ export function VoiceInput({ onTranscript, isRecording = false }: VoiceInputProp
   return (
     <button 
       onClick={toggleRecording}
-      className={`p-2 rounded-full transition-colors ${recording ? 'bg-red-500 text-white animate-pulse' : 'bg-blue-500 text-white hover:bg-blue-600'}`}
+      className="chat-send-btn"
+      style={{
+        background: recording ? 'var(--error)' : 'var(--bg-tertiary)',
+        border: '1px solid var(--border)',
+        color: recording ? '#fff' : 'var(--text-secondary)',
+        transition: 'all var(--transition-fast)'
+      }}
       title={recording ? "Stop recording" : "Start voice input"}
     >
       <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></svg>

package/frontend/src/index.css

@@ -355,6 +355,156 @@ code, pre { font-family: var(--font-mono); }
 
 .btn-sm { padding: 6px 11px; font-size: 12px; }
 
+/* ─── Alerts ─────────────────────────────────────────────────────────────────── */
+
+.alert {
+  padding: 12px 16px;
+  border-radius: var(--radius-sm);
+  font-size: 13px;
+  font-weight: 500;
+  border: 1px solid transparent;
+}
+
+.alert-error {
+  background: var(--error-muted);
+  border-color: rgba(248, 113, 113, 0.25);
+  color: var(--error);
+}
+
+.alert-success {
+  background: var(--success-muted);
+  border-color: rgba(52, 211, 153, 0.25);
+  color: var(--success);
+}
+
+/* ─── Form Controls ──────────────────────────────────────────────────────────── */
+
+.input, .select {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 9px 12px;
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-size: 13px;
+  outline: none;
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.input:focus, .select:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-muted);
+}
+
+.input::placeholder {
+  color: var(--text-tertiary);
+}
+
+.select {
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  padding-right: 32px;
+}
+
+/* ─── Data Tables ────────────────────────────────────────────────────────────── */
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.data-table th {
+  text-align: left;
+  padding: 12px 16px;
+  color: var(--text-secondary);
+  font-weight: 500;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-secondary);
+}
+
+.data-table td {
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border);
+  color: var(--text-primary);
+  font-size: 13px;
+}
+
+.data-table tbody tr {
+  transition: background var(--transition-fast);
+}
+
+.data-table tbody tr:hover {
+  background: var(--bg-hover);
+}
+
+.data-table tr.is-leader td {
+  background: var(--accent-soft);
+}
+
+/* ─── Page Layout ────────────────────────────────────────────────────────────── */
+
+.page-container {
+  padding: 32px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 32px;
+}
+
+.page-header h1 {
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+/* ─── Badges ─────────────────────────────────────────────────────────────────── */
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+}
+
+.badge-online, .badge-active {
+  background: var(--success-muted);
+  color: var(--success);
+}
+
+.badge-offline, .badge-inactive {
+  background: var(--error-muted);
+  color: var(--error);
+}
+
+.badge-leader {
+  background: rgba(59, 130, 246, 0.15);
+  color: var(--accent-hover);
+}
+
+.badge-follower {
+  background: var(--bg-hover);
+  color: var(--text-secondary);
+}
+
+.badge-warning {
+  background: var(--warning-muted);
+  color: var(--warning);
+}
+
 /* Premium surfaces */
 .surface-premium {
   background: linear-gradient(165deg, rgba(23, 32, 51, 0.92), rgba(12, 18, 32, 0.96));

package/frontend/src/pages/MeshPage.css

@@ -0,0 +1,11 @@
+/* ─── MeshPage-specific styles ───────────────────────────────────────────────── */
+/* Global classes (card, data-table, badge, page-container, page-header) live in index.css */
+
+.mesh-page {
+  animation: mesh-fade-in 0.35s ease-out;
+}
+
+@keyframes mesh-fade-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}

package/frontend/src/pages/MeshPage.spec.tsx

@@ -2,7 +2,8 @@ import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { MeshPage } from './MeshPage';
-import { fetchLeader, fetchNodes, forceReElection } from '../api/mesh';
+import { fetchLeader, fetchNodes as fetchMeshNodes, forceReElection } from '../api/mesh';
+import { fetchHeadscaleNodes, deleteHeadscaleNode, fetchPreAuthKeys, createPreAuthKey, fetchHeadscaleUsers } from '../api/headscale';
 
 vi.mock('../api/mesh', () => ({
   fetchLeader: vi.fn(),
@@ -10,14 +11,23 @@ vi.mock('../api/mesh', () => ({
   forceReElection: vi.fn(),
 }));
 
+vi.mock('../api/headscale', () => ({
+  fetchHeadscaleNodes: vi.fn(),
+  deleteHeadscaleNode: vi.fn(),
+  fetchPreAuthKeys: vi.fn(),
+  createPreAuthKey: vi.fn(),
+  fetchHeadscaleUsers: vi.fn(),
+}));
+
 describe('MeshPage', () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    window.confirm = vi.fn(() => true);
   });
 
   it('renders mesh nodes and leader', async () => {
     vi.mocked(fetchLeader).mockResolvedValue({ hostname: 'macmini.mesh', ip: '1.2.3.4' });
-    vi.mocked(fetchNodes).mockResolvedValue([
+    vi.mocked(fetchMeshNodes).mockResolvedValue([
       { hostname: 'macmini.mesh', ip: '1.2.3.4', status: 'online', role: 'leader', lastHeartbeat: '2024-01-01T00:00:00Z' },
       { hostname: 'laptop.mesh', ip: '1.2.3.5', status: 'offline', role: 'follower', lastHeartbeat: '2024-01-01T00:00:00Z' },
     ]);
@@ -32,7 +42,7 @@ describe('MeshPage', () => {
 
   it('handles force re-election', async () => {
     vi.mocked(fetchLeader).mockResolvedValue({ hostname: 'macmini.mesh', ip: '1.2.3.4' });
-    vi.mocked(fetchNodes).mockResolvedValue([]);
+    vi.mocked(fetchMeshNodes).mockResolvedValue([]);
     vi.mocked(forceReElection).mockResolvedValue(undefined);
 
     render(<MeshPage />);
@@ -44,4 +54,74 @@ describe('MeshPage', () => {
     await userEvent.click(screen.getByText('Force Re-Election'));
     expect(forceReElection).toHaveBeenCalled();
   });
+
+  it('renders Headscale Nodes tab and allows deletion', async () => {
+    vi.mocked(fetchLeader).mockResolvedValue({ hostname: 'macmini.mesh', ip: '1.2.3.4' });
+    vi.mocked(fetchMeshNodes).mockResolvedValue([]);
+    vi.mocked(fetchHeadscaleNodes).mockResolvedValue([
+      { id: '1', name: 'node-one', user: 'testuser', ipAddresses: ['100.64.0.1'], online: true, createdAt: '2024-01-01', lastSeen: '2024-01-01T00:00:00Z' }
+    ]);
+    vi.mocked(deleteHeadscaleNode).mockResolvedValue(undefined);
+
+    render(<MeshPage />);
+
+    const tabBtn = screen.getByText('Headscale Nodes');
+    await userEvent.click(tabBtn);
+
+    await waitFor(() => {
+      expect(screen.getByText('node-one')).toBeInTheDocument();
+      expect(screen.getByText('100.64.0.1')).toBeInTheDocument();
+    });
+
+    const deleteBtn = screen.getByText('Delete');
+    await userEvent.click(deleteBtn);
+    expect(window.confirm).toHaveBeenCalled();
+    expect(deleteHeadscaleNode).toHaveBeenCalledWith('1');
+  });
+
+  it('renders Pre-Auth Keys tab and supports key generation', async () => {
+    vi.mocked(fetchLeader).mockResolvedValue({ hostname: 'macmini.mesh', ip: '1.2.3.4' });
+    vi.mocked(fetchMeshNodes).mockResolvedValue([]);
+    vi.mocked(fetchPreAuthKeys).mockResolvedValue([
+      { id: 'key1', key: 'hspkey_xyz', user: 'default', reusable: true, expiration: '2099-12-31T23:59:59Z', createdAt: '2024-01-01', used: false }
+    ]);
+    vi.mocked(createPreAuthKey).mockResolvedValue({} as any);
+
+    render(<MeshPage />);
+
+    const tabBtn = screen.getByText('Pre-Auth Keys');
+    await userEvent.click(tabBtn);
+
+    await waitFor(() => {
+      expect(screen.getByText('hspkey_xyz')).toBeInTheDocument();
+      expect(screen.getByText('Generate Key')).toBeInTheDocument();
+    });
+
+    const generateBtn = screen.getByText('Generate Key');
+    await userEvent.click(generateBtn);
+
+    expect(createPreAuthKey).toHaveBeenCalledWith({
+      user: 'default',
+      reusable: false,
+      ephemeral: false,
+      expiration: '2099-12-31T23:59:59Z'
+    });
+  });
+
+  it('renders Users tab', async () => {
+    vi.mocked(fetchLeader).mockResolvedValue({ hostname: 'macmini.mesh', ip: '1.2.3.4' });
+    vi.mocked(fetchMeshNodes).mockResolvedValue([]);
+    vi.mocked(fetchHeadscaleUsers).mockResolvedValue([
+      { id: 'u1', name: 'alice', createdAt: '2024-01-01T00:00:00Z' }
+    ]);
+
+    render(<MeshPage />);
+
+    const tabBtn = screen.getByText('Users');
+    await userEvent.click(tabBtn);
+
+    await waitFor(() => {
+      expect(screen.getByText('alice')).toBeInTheDocument();
+    });
+  });
 });