npm - opensidian - Versions diffs - 1.0.0 - Mend

opensidian 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (137) hide show

package/.eslintrc.json +1 -0
package/.github/ISSUE_TEMPLATE/bug_report.md +49 -0
package/.github/ISSUE_TEMPLATE/feature_request.md +35 -0
package/.github/ISSUE_TEMPLATE/question.md +23 -0
package/.github/PULL_REQUEST_TEMPLATE.md +45 -0
package/.github/README.md +5 -0
package/.github/workflows/cd.yml +44 -0
package/.github/workflows/ci.yml +128 -0
package/.github/workflows/qa.yml +45 -0
package/.planning/PROJECT.md +96 -0
package/.planning/REQUIREMENTS.md +66 -0
package/.planning/ROADMAP.md +129 -0
package/.planning/STATE.md +47 -0
package/.planning/config.json +14 -0
package/CONTRIBUTING.md +232 -0
package/LICENSE +21 -0
package/README.md +244 -0
package/dist/api/auth.d.ts +5 -0
package/dist/api/auth.d.ts.map +1 -0
package/dist/api/auth.js +112 -0
package/dist/api/auth.js.map +1 -0
package/dist/api/routes.d.ts +3 -0
package/dist/api/routes.d.ts.map +1 -0
package/dist/api/routes.js +119 -0
package/dist/api/routes.js.map +1 -0
package/dist/api/themes.d.ts +3 -0
package/dist/api/themes.d.ts.map +1 -0
package/dist/api/themes.js +48 -0
package/dist/api/themes.js.map +1 -0
package/dist/core/graph.d.ts +16 -0
package/dist/core/graph.d.ts.map +1 -0
package/dist/core/graph.js +115 -0
package/dist/core/graph.js.map +1 -0
package/dist/core/markdown.d.ts +21 -0
package/dist/core/markdown.d.ts.map +1 -0
package/dist/core/markdown.js +77 -0
package/dist/core/markdown.js.map +1 -0
package/dist/core/search.d.ts +34 -0
package/dist/core/search.d.ts.map +1 -0
package/dist/core/search.js +159 -0
package/dist/core/search.js.map +1 -0
package/dist/core/sync.d.ts +30 -0
package/dist/core/sync.d.ts.map +1 -0
package/dist/core/sync.js +121 -0
package/dist/core/sync.js.map +1 -0
package/dist/core/vault.d.ts +28 -0
package/dist/core/vault.d.ts.map +1 -0
package/dist/core/vault.js +235 -0
package/dist/core/vault.js.map +1 -0
package/dist/index.d.ts +2 -0
package/dist/index.d.ts.map +1 -0
package/dist/index.js +32 -0
package/dist/index.js.map +1 -0
package/dist/mcp/cli.d.ts +3 -0
package/dist/mcp/cli.d.ts.map +1 -0
package/dist/mcp/cli.js +7 -0
package/dist/mcp/cli.js.map +1 -0
package/dist/mcp/server.d.ts +18 -0
package/dist/mcp/server.d.ts.map +1 -0
package/dist/mcp/server.js +272 -0
package/dist/mcp/server.js.map +1 -0
package/dist/plugins/host.d.ts +23 -0
package/dist/plugins/host.d.ts.map +1 -0
package/dist/plugins/host.js +104 -0
package/dist/plugins/host.js.map +1 -0
package/dist/plugins/sample-plugin.d.ts +10 -0
package/dist/plugins/sample-plugin.d.ts.map +1 -0
package/dist/plugins/sample-plugin.js +23 -0
package/dist/plugins/sample-plugin.js.map +1 -0
package/dist/server.d.ts +15 -0
package/dist/server.d.ts.map +1 -0
package/dist/server.js +77 -0
package/dist/server.js.map +1 -0
package/dist/shared/types.d.ts +86 -0
package/dist/shared/types.d.ts.map +1 -0
package/dist/shared/types.js +2 -0
package/dist/shared/types.js.map +1 -0
package/docker/Dockerfile +37 -0
package/docker/docker-compose.yml +46 -0
package/docs/ARCHITECTURE.md +321 -0
package/futuras_implementacoes.md +0 -0
package/package.json +65 -0
package/scripts/fix-gitignore.ps1 +5 -0
package/scripts/seed-notes.mjs +60 -0
package/src/api/auth.ts +130 -0
package/src/api/routes.ts +133 -0
package/src/api/themes.ts +60 -0
package/src/core/graph.ts +145 -0
package/src/core/markdown.ts +92 -0
package/src/core/search.ts +208 -0
package/src/core/sync.ts +157 -0
package/src/core/vault.ts +286 -0
package/src/index.ts +37 -0
package/src/mcp/cli.ts +7 -0
package/src/mcp/server.ts +296 -0
package/src/plugins/host.ts +120 -0
package/src/plugins/sample-plugin.ts +29 -0
package/src/server.ts +90 -0
package/src/shared/types.ts +92 -0
package/tests/api/routes.test.ts +167 -0
package/tests/core/graph.test.ts +236 -0
package/tests/core/markdown.test.ts +157 -0
package/tests/core/search.test.ts +132 -0
package/tests/core/sync.test.ts +62 -0
package/tests/core/vault.test.ts +162 -0
package/tests/mcp/server.test.ts +118 -0
package/tests/plugins/host.test.ts +165 -0
package/tests/plugins/sample-plugin.test.ts +35 -0
package/tests/server.test.ts +76 -0
package/tsconfig.json +27 -0
package/vite.config.ts +27 -0
package/vitest.config.ts +33 -0
package/web/index.html +13 -0
package/web/package.json +26 -0
package/web/public/favicon.svg +4 -0
package/web/src/App.tsx +63 -0
package/web/src/api/auth.ts +65 -0
package/web/src/api/client.ts +117 -0
package/web/src/api/themes.ts +78 -0
package/web/src/components/GraphView.tsx +139 -0
package/web/src/components/Layout.tsx +74 -0
package/web/src/components/LoginPage.tsx +52 -0
package/web/src/components/NoteEditor.tsx +114 -0
package/web/src/components/NoteList.tsx +95 -0
package/web/src/components/RegisterPage.tsx +58 -0
package/web/src/components/SearchBar.tsx +71 -0
package/web/src/components/SearchPanel.tsx +152 -0
package/web/src/components/ThemeEditor.tsx +129 -0
package/web/src/components/ThemeSelector.tsx +41 -0
package/web/src/components/VaultList.tsx +89 -0
package/web/src/hooks/AuthContext.tsx +57 -0
package/web/src/hooks/ThemeContext.tsx +77 -0
package/web/src/hooks/useWebSocket.ts +34 -0
package/web/src/main.tsx +10 -0
package/web/src/styles/global.css +449 -0
package/web/tsconfig.json +21 -0
package/web/vite.config.ts +19 -0

package/vitest.config.ts ADDED Viewed

@@ -0,0 +1,33 @@
+import { defineConfig } from 'vitest/config';
+import { resolve } from 'path';
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'node',
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+      reportsDirectory: './coverage',
+      include: ['src/**/*.ts'],
+      exclude: [
+        'src/index.ts',
+        'src/**/types.ts',
+        '**/*.d.ts',
+      ],
+      thresholds: {
+        statements: 80,
+        branches: 80,
+        functions: 80,
+        lines: 80,
+      },
+    },
+    include: ['tests/**/*.test.ts'],
+    testTimeout: 10000,
+  },
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+    },
+  },
+});

package/web/index.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>OpenSidian</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/web/package.json ADDED Viewed

@@ -0,0 +1,26 @@
+{
+  "name": "opensidian-web",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "d3": "^7.9.0",
+    "marked": "^14.1.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.0"
+  },
+  "devDependencies": {
+    "@types/d3": "^7.4.3",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "typescript": "^5.6.2",
+    "vite": "^5.4.8"
+  }
+}

package/web/public/favicon.svg ADDED Viewed

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
+  <rect width="32" height="32" rx="6" fill="#6C31E0"/>
+  <path d="M8 10h16M8 16h16M8 22h10" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
+</svg>

package/web/src/App.tsx ADDED Viewed

@@ -0,0 +1,63 @@
+import { useState } from 'react';
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { AuthProvider, useAuth } from './hooks/AuthContext';
+import { ThemeProvider } from './hooks/ThemeContext';
+import Layout from './components/Layout';
+import VaultList from './components/VaultList';
+import NoteList from './components/NoteList';
+import NoteEditor from './components/NoteEditor';
+import GraphView from './components/GraphView';
+import ThemeEditor from './components/ThemeEditor';
+import SearchPanel from './components/SearchPanel';
+import LoginPage from './components/LoginPage';
+import RegisterPage from './components/RegisterPage';
+function AppRoutes() {
+  const [currentVault, setCurrentVault] = useState<string>('');
+  const { user, loading, logout } = useAuth();
+  if (loading) {
+    return <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh' }}><p>Carregando...</p></div>;
+  }
+  if (!user) {
+    return (
+      <Routes>
+        <Route path="/login" element={<LoginPage />} />
+        <Route path="/register" element={<RegisterPage />} />
+        <Route path="*" element={<Navigate to="/login" replace />} />
+      </Routes>
+    );
+  }
+  return (
+    <ThemeProvider>
+      <Layout
+        currentVault={currentVault}
+        onVaultChange={setCurrentVault}
+        user={user}
+        onLogout={logout}
+      >
+        <Routes>
+          <Route path="/" element={<VaultList onSelect={setCurrentVault} />} />
+          <Route path="/notes" element={<NoteList vaultPath={currentVault} />} />
+          <Route path="/notes/:path" element={<NoteEditor vaultPath={currentVault} />} />
+          <Route path="/graph" element={<GraphView vaultPath={currentVault} />} />
+          <Route path="/themes" element={<ThemeEditor />} />
+          <Route path="/search" element={<SearchPanel />} />
+          <Route path="*" element={<Navigate to="/" replace />} />
+        </Routes>
+      </Layout>
+    </ThemeProvider>
+  );
+}
+export default function App() {
+  return (
+    <BrowserRouter>
+      <AuthProvider>
+        <AppRoutes />
+      </AuthProvider>
+    </BrowserRouter>
+  );
+}

package/web/src/api/auth.ts ADDED Viewed

@@ -0,0 +1,65 @@
+const AUTH_BASE = '/auth';
+function authRequest<T>(url: string, options?: RequestInit): Promise<T> {
+  return fetch(`${AUTH_BASE}${url}`, {
+    headers: { 'Content-Type': 'application/json' },
+    ...options,
+  }).then(async res => {
+    const body = await res.json();
+    if (!res.ok) throw new Error(body.error || `HTTP ${res.status}`);
+    return body;
+  });
+}
+export interface AuthUser {
+  id: string;
+  email: string;
+  name: string;
+}
+export interface AuthResponse {
+  token: string;
+  user: AuthUser;
+}
+export function getToken(): string | null {
+  return localStorage.getItem('opensidian_token');
+}
+export function setToken(token: string): void {
+  localStorage.setItem('opensidian_token', token);
+}
+export function removeToken(): void {
+  localStorage.removeItem('opensidian_token');
+}
+export function authHeaders(): Record<string, string> {
+  const token = getToken();
+  return token ? { Authorization: `Bearer ${token}` } : {};
+}
+export const authApi = {
+  register: (email: string, password: string, name: string) =>
+    authRequest<AuthResponse>('/register', {
+      method: 'POST',
+      body: JSON.stringify({ email, password, name }),
+    }),
+  login: (email: string, password: string) =>
+    authRequest<AuthResponse>('/login', {
+      method: 'POST',
+      body: JSON.stringify({ email, password }),
+    }),
+  me: () =>
+    authRequest<{ user: AuthUser & { createdAt: string } }>('/me', {
+      headers: { ...authHeaders(), 'Content-Type': 'application/json' },
+    }),
+  logout: () =>
+    authRequest<{ message: string }>('/logout', {
+      method: 'POST',
+      headers: { ...authHeaders(), 'Content-Type': 'application/json' },
+    }),
+};

package/web/src/api/client.ts ADDED Viewed

@@ -0,0 +1,117 @@
+const BASE = '/api';
+function authHeaders(): Record<string, string> {
+  const token = localStorage.getItem('opensidian_token');
+  return token ? { Authorization: `Bearer ${token}` } : {};
+}
+async function request<T>(url: string, options?: RequestInit): Promise<T> {
+  const res = await fetch(`${BASE}${url}`, {
+    headers: { 'Content-Type': 'application/json', ...authHeaders() },
+    ...options,
+  });
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({}));
+    throw new Error(body.error || `HTTP ${res.status}`);
+  }
+  if (res.status === 204) return undefined as T;
+  return res.json();
+}
+export interface Vault {
+  path: string;
+  name: string;
+  created: string;
+  notes: Note[];
+}
+export interface Note {
+  path: string;
+  filename: string;
+  content: string;
+  frontmatter: Record<string, unknown>;
+  links: string[];
+  created: string;
+  modified: string;
+}
+export interface GraphNode {
+  id: string;
+  label: string;
+  tags?: string[];
+  connections?: number;
+}
+export interface GraphEdge {
+  id: string;
+  source: string;
+  target: string;
+  type: string;
+}
+export interface Graph {
+  nodes: GraphNode[];
+  edges: GraphEdge[];
+}
+export interface SearchResultItem {
+  path: string;
+  filename: string;
+  snippet: string;
+  score: number;
+  tags: string[];
+  modified: string;
+  backlinks: number;
+}
+export const api = {
+  vaults: {
+    list: () => request<{ vaults: Vault[] }>('/vaults'),
+    create: (name: string, path: string) =>
+      request<{ vault: Vault }>('/vaults', {
+        method: 'POST',
+        body: JSON.stringify({ name, path }),
+      }),
+  },
+  notes: {
+    list: (vaultPath: string) =>
+      request<{ notes: Note[] }>(`/notes?vault=${encodeURIComponent(vaultPath)}`),
+    get: (vaultPath: string, path: string) =>
+      request<{ note: Note }>(
+        `/notes/${encodeURIComponent(path)}?vault=${encodeURIComponent(vaultPath)}`
+      ),
+    create: (vaultPath: string, filename: string, content: string) =>
+      request<{ note: Note }>('/notes', {
+        method: 'POST',
+        body: JSON.stringify({ vaultPath, filename, content }),
+      }),
+    update: (vaultPath: string, path: string, content: string) =>
+      request<{ note: Note }>(
+        `/notes/${encodeURIComponent(path)}?vault=${encodeURIComponent(vaultPath)}`,
+        { method: 'PUT', body: JSON.stringify({ content }) }
+      ),
+    delete: (vaultPath: string, path: string) =>
+      request<void>(
+        `/notes/${encodeURIComponent(path)}?vault=${encodeURIComponent(vaultPath)}`,
+        { method: 'DELETE' }
+      ),
+  },
+  graph: {
+    get: (vaultPath: string) =>
+      request<{ graph: Graph }>(`/graph?vault=${encodeURIComponent(vaultPath)}`),
+    neighbors: (vaultPath: string, path: string) =>
+      request<{ neighbors: GraphNode[] }>(
+        `/graph/neighbors/${encodeURIComponent(path)}?vault=${encodeURIComponent(vaultPath)}`
+      ),
+  },
+  search: {
+    fullText: (vaultPath: string, q: string, filters?: { tag?: string; after?: string; before?: string; hasBacklinks?: boolean }) => {
+      let url = `/notes/search?vault=${encodeURIComponent(vaultPath)}&q=${encodeURIComponent(q)}`;
+      if (filters?.tag) url += `&tag=${encodeURIComponent(filters.tag)}`;
+      if (filters?.after) url += `&after=${encodeURIComponent(filters.after)}`;
+      if (filters?.before) url += `&before=${encodeURIComponent(filters.before)}`;
+      if (filters?.hasBacklinks !== undefined) url += `&hasBacklinks=${filters.hasBacklinks}`;
+      return request<{ results: SearchResultItem[] }>(url);
+    },
+  },
+};

package/web/src/api/themes.ts ADDED Viewed

@@ -0,0 +1,78 @@
+import { authHeaders } from './auth';
+const BASE = '/api';
+export interface CustomTheme {
+  name: string;
+  variables: Record<string, string>;
+}
+export const themesApi = {
+  list: () =>
+    fetch(`${BASE}/themes`, { headers: { ...authHeaders() } })
+      .then(res => res.json() as Promise<{ themes: CustomTheme[] }>),
+  save: (theme: CustomTheme) =>
+    fetch(`${BASE}/themes`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', ...authHeaders() },
+      body: JSON.stringify(theme),
+    }).then(res => {
+      if (!res.ok) throw new Error('Falha ao salvar tema');
+      return res.json() as Promise<{ theme: CustomTheme }>;
+    }),
+  delete: (name: string) =>
+    fetch(`${BASE}/themes/${encodeURIComponent(name)}`, {
+      method: 'DELETE',
+      headers: { ...authHeaders() },
+    }),
+};
+export const BUILT_IN_THEMES: CustomTheme[] = [
+  {
+    name: 'Claro',
+    variables: {
+      '--bg': '#ffffff',
+      '--bg-secondary': '#f5f5f5',
+      '--bg-tertiary': '#ebebeb',
+      '--text': '#1a1a1a',
+      '--text-secondary': '#666',
+      '--border': '#ddd',
+      '--accent': '#6c31e0',
+      '--accent-hover': '#5a28c0',
+      '--danger': '#e03e3e',
+      '--success': '#2e7d32',
+    },
+  },
+  {
+    name: 'Escuro',
+    variables: {
+      '--bg': '#1a1a2e',
+      '--bg-secondary': '#16213e',
+      '--bg-tertiary': '#0f3460',
+      '--text': '#e0e0e0',
+      '--text-secondary': '#999',
+      '--border': '#333',
+      '--accent': '#7c4dff',
+      '--accent-hover': '#651fff',
+      '--danger': '#cf6679',
+      '--success': '#4caf50',
+    },
+  },
+];
+export const DEFAULT_VARIABLES = BUILT_IN_THEMES[0].variables;
+export const THEME_VARIABLE_LABELS: Record<string, string> = {
+  '--bg': 'Fundo principal',
+  '--bg-secondary': 'Fundo secundário',
+  '--bg-tertiary': 'Fundo terciário',
+  '--text': 'Texto principal',
+  '--text-secondary': 'Texto secundário',
+  '--border': 'Borda',
+  '--accent': 'Cor destaque',
+  '--accent-hover': 'Destaque hover',
+  '--danger': 'Erro/perigo',
+  '--success': 'Sucesso',
+};

package/web/src/components/GraphView.tsx ADDED Viewed

@@ -0,0 +1,139 @@
+import { useEffect, useRef, useState } from 'react';
+import * as d3 from 'd3';
+import { api, Graph, GraphNode } from '../api/client';
+interface GraphViewProps {
+  vaultPath: string;
+}
+type SimNode = d3.SimulationNodeDatum & GraphNode;
+type SimLink = d3.SimulationLinkDatum<SimNode>;
+export default function GraphView({ vaultPath }: GraphViewProps) {
+  const svgRef = useRef<SVGSVGElement>(null);
+  const [graph, setGraph] = useState<Graph | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [selected, setSelected] = useState<string | null>(null);
+  useEffect(() => {
+    if (!vaultPath) return;
+    setLoading(true);
+    api.graph.get(vaultPath).then(res => {
+      setGraph(res.graph);
+      setLoading(false);
+    }).catch(() => {
+      setGraph(null);
+      setLoading(false);
+    });
+  }, [vaultPath]);
+  useEffect(() => {
+    if (!svgRef.current || !graph || graph.nodes.length === 0) return;
+    const svg = d3.select(svgRef.current);
+    const width = svgRef.current.clientWidth;
+    const height = svgRef.current.clientHeight;
+    svg.selectAll('*').remove();
+    const nodes: SimNode[] = graph.nodes.map(n => ({ ...n }));
+    const nodeMap = new Map(nodes.map(n => [n.id, n]));
+    const links: SimLink[] = graph.edges
+      .filter(e => nodeMap.has(e.source as string) && nodeMap.has(e.target as string))
+      .map(e => ({ source: e.source as string, target: e.target as string }));
+    const simulation = d3.forceSimulation(nodes)
+      .force('link', d3.forceLink(links).distance(120))
+      .force('charge', d3.forceManyBody().strength(-300))
+      .force('center', d3.forceCenter(width / 2, height / 2))
+      .force('collision', d3.forceCollide(30));
+    const zoom = d3.zoom<SVGSVGElement, unknown>()
+      .scaleExtent([0.1, 4])
+      .on('zoom', (event) => g.attr('transform', event.transform));
+    svg.call(zoom);
+    const g = svg.append('g');
+    const linkElements = g.append('g')
+      .selectAll('line')
+      .data(links)
+      .join('line')
+      .attr('stroke', 'var(--border)')
+      .attr('stroke-width', 1.5)
+      .attr('stroke-opacity', 0.6);
+    const nodeElements = g.append('g')
+      .selectAll('circle')
+      .data(nodes)
+      .join('circle')
+      .attr('r', 8)
+      .attr('fill', (d: SimNode) => d.id === selected ? 'var(--accent)' : 'var(--accent)')
+      .attr('stroke', '#fff')
+      .attr('stroke-width', 2)
+      .attr('opacity', (d: SimNode) => selected && d.id !== selected ? 0.3 : 1)
+      .style('cursor', 'pointer')
+      .on('click', (_event: unknown, d: SimNode) => {
+        setSelected(d.id);
+        nodeElements.attr('opacity', (n: SimNode) => n.id === d.id ? 1 : 0.3);
+        linkElements.attr('opacity', (l: SimLink) => {
+          const s = typeof l.source === 'object' ? (l.source as SimNode).id : l.source;
+          const t = typeof l.target === 'object' ? (l.target as SimNode).id : l.target;
+          return s === d.id || t === d.id ? 1 : 0.1;
+        });
+      });
+    const labels = g.append('g')
+      .selectAll('text')
+      .data(nodes)
+      .join('text')
+      .text((d: SimNode) => d.label)
+      .attr('font-size', '11px')
+      .attr('dx', 12)
+      .attr('dy', 4)
+      .attr('fill', 'var(--text)')
+      .attr('opacity', (d: SimNode) => selected && d.id !== selected ? 0.3 : 0.8);
+    simulation.on('tick', () => {
+      linkElements
+        .attr('x1', (d: SimLink) => (d.source as SimNode).x!)
+        .attr('y1', (d: SimLink) => (d.source as SimNode).y!)
+        .attr('x2', (d: SimLink) => (d.target as SimNode).x!)
+        .attr('y2', (d: SimLink) => (d.target as SimNode).y!);
+      nodeElements
+        .attr('cx', (d: SimNode) => d.x!)
+        .attr('cy', (d: SimNode) => d.y!);
+      labels
+        .attr('x', (d: SimNode) => d.x!)
+        .attr('y', (d: SimNode) => d.y!);
+    });
+    return () => { simulation.stop(); };
+  }, [graph, selected]);
+  if (!vaultPath) {
+    return <div className="content-area"><div className="empty-state"><h2>Selecione um vault</h2><p>Escolha um vault para ver o grafo</p></div></div>;
+  }
+  if (loading) return <div className="content-area"><p>Carregando grafo...</p></div>;
+  if (!graph || graph.nodes.length === 0) {
+    return <div className="content-area"><div className="empty-state"><h2>Grafo vazio</h2><p>Crie notas com links para ver o grafo</p></div></div>;
+  }
+  return (
+    <div className="content-area" style={{ padding: 0 }}>
+      <div className="toolbar">
+        <strong>Grafo de conhecimento</strong>
+        <span style={{ fontSize: 13, color: 'var(--text-secondary)' }}>
+          {graph.nodes.length} nós · {graph.edges.length} arestas
+        </span>
+        {selected && (
+          <button onClick={() => setSelected(null)} style={{ marginLeft: 'auto' }}>Limpar seleção</button>
+        )}
+      </div>
+      <svg ref={svgRef} className="graph-container" />
+    </div>
+  );
+}

package/web/src/components/Layout.tsx ADDED Viewed

@@ -0,0 +1,74 @@
+import { ReactNode } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { AuthUser } from '../api/auth';
+import ThemeSelector from './ThemeSelector';
+interface LayoutProps {
+  children: ReactNode;
+  currentVault: string;
+  onVaultChange: (vault: string) => void;
+  user: AuthUser;
+  onLogout: () => void;
+}
+export default function Layout(props: LayoutProps) {
+  const { children, currentVault, user, onLogout } = props;
+  const location = useLocation();
+  return (
+    <div className="layout">
+      <aside className="sidebar">
+        <div className="sidebar-header">
+          <h1>
+            <svg width="20" height="20" viewBox="0 0 32 32" fill="none">
+              <rect width="32" height="32" rx="6" fill="#6C31E0"/>
+              <path d="M8 10h16M8 16h16M8 22h10" stroke="white" strokeWidth="2.5" strokeLinecap="round"/>
+            </svg>
+            OpenSidian
+          </h1>
+        </div>
+        <nav className="sidebar-nav">
+          <Link to="/" className={`nav-item ${location.pathname === '/' ? 'active' : ''}`}>
+            📂 Vaults
+          </Link>
+          <Link to="/search" className={`nav-item ${location.pathname === '/search' ? 'active' : ''}`}>
+            🔍 Busca avançada
+          </Link>
+          {currentVault && (
+            <>
+              <Link to="/notes" className={`nav-item ${location.pathname.startsWith('/notes') ? 'active' : ''}`}>
+                📝 Notas
+              </Link>
+              <Link to="/graph" className={`nav-item ${location.pathname === '/graph' ? 'active' : ''}`}>
+                🔗 Grafo
+              </Link>
+            </>
+          )}
+        </nav>
+        <div style={{ flex: 1 }} />
+        <ThemeSelector />
+        <div style={{ borderTop: '1px solid var(--border)', padding: '12px 16px' }}>
+          <div style={{ fontSize: '13px', fontWeight: 500, marginBottom: 4 }}>{user.name}</div>
+          <div style={{ fontSize: '11px', color: 'var(--text-secondary)', marginBottom: 8 }}>{user.email}</div>
+          <button onClick={onLogout} style={{ width: '100%', fontSize: '12px', padding: '4px 8px' }}>
+            Sair
+          </button>
+        </div>
+        {currentVault && (
+          <div style={{ padding: '8px 16px', borderTop: '1px solid var(--border)', fontSize: '12px', color: 'var(--text-secondary)' }}>
+            Vault: {currentVault.split('/').pop() || currentVault}
+          </div>
+        )}
+      </aside>
+      <main className="main-content">
+        {children}
+      </main>
+    </div>
+  );
+}

package/web/src/components/LoginPage.tsx ADDED Viewed

@@ -0,0 +1,52 @@
+import { useState } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { useAuth } from '../hooks/AuthContext';
+export default function LoginPage() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [busy, setBusy] = useState(false);
+  const { login } = useAuth();
+  const navigate = useNavigate();
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setBusy(true);
+    try {
+      await login(email, password);
+      navigate('/');
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Erro ao entrar');
+    } finally {
+      setBusy(false);
+    }
+  };
+  return (
+    <div className="auth-page">
+      <div className="auth-card">
+        <div className="auth-logo">
+          <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
+            <rect width="32" height="32" rx="6" fill="#6C31E0"/>
+            <path d="M8 10h16M8 16h16M8 22h10" stroke="white" strokeWidth="2.5" strokeLinecap="round"/>
+          </svg>
+          <h1>OpenSidian</h1>
+        </div>
+        <h2>Entrar</h2>
+        <form onSubmit={handleSubmit}>
+          <input type="email" placeholder="Email" value={email} onChange={e => setEmail(e.target.value)} required />
+          <input type="password" placeholder="Senha" value={password} onChange={e => setPassword(e.target.value)} required />
+          {error && <p className="auth-error">{error}</p>}
+          <button className="primary" type="submit" disabled={busy} style={{ width: '100%' }}>
+            {busy ? 'Entrando...' : 'Entrar'}
+          </button>
+        </form>
+        <p className="auth-link">
+          Não tem conta? <Link to="/register">Cadastre-se</Link>
+        </p>
+      </div>
+    </div>
+  );
+}