leankg 0.19.13

Lightweight Knowledge Graph for AI-Assisted Development
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108

import type { LayoutMode } from '../lib/graph-adapter';
import { Database, Loader2 } from 'lucide-react';

interface HeaderProps {
  project?: string;
  statusText: string;
  searchTerm: string;
  onSearchChange: (v: string) => void;
  onSearchSubmit: () => void;
  connected: boolean;
  layoutMode: LayoutMode;
  onLayoutMode: (m: LayoutMode) => void;
}

export function Header({
  project,
  statusText,
  searchTerm,
  onSearchChange,
  onSearchSubmit,
  connected,
  layoutMode,
  onLayoutMode,
}: HeaderProps) {
  return (
    <header className="h-12 shrink-0 border-b border-border-subtle bg-deep flex items-center gap-3 px-4">
      <Database className="w-5 h-5 text-accent" />
      <span className="font-semibold text-text-primary tracking-wide">LeanKG</span>
      <span className="text-xs text-text-muted truncate max-w-[240px]" title={project}>
        {project || 'local project'}
      </span>
      <div className="flex-1" />
      <div className="flex items-center gap-1 rounded-lg bg-surface border border-border-subtle p-0.5">
        {(['force', 'tree', 'circles'] as LayoutMode[]).map((m) => (
          <button
            key={m}
            type="button"
            data-testid={`layout-${m}`}
            onClick={() => onLayoutMode(m)}
            className={`px-2.5 py-1 text-xs rounded-md capitalize ${
              layoutMode === m
                ? 'bg-accent text-white'
                : 'text-text-secondary hover:text-text-primary'
            }`}
          >
            {m}
          </button>
        ))}
      </div>
      <form
        className="flex items-center gap-2"
        onSubmit={(e) => {
          e.preventDefault();
          onSearchSubmit();
        }}
      >
        <input
          data-testid="header-search"
          value={searchTerm}
          onChange={(e) => onSearchChange(e.target.value)}
          placeholder="Search…"
          className="w-48 bg-surface border border-border-default rounded-md px-2 py-1 text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:border-accent"
        />
      </form>
      <span
        data-testid="connection-status"
        className={`text-xs ${connected ? 'text-emerald-400' : 'text-amber-400'}`}
      >
        {connected ? 'connected' : 'disconnected'}
      </span>
      <span className="text-xs text-text-muted hidden sm:inline">{statusText}</span>
    </header>
  );
}

export function LoadingOverlay({ message }: { message: string }) {
  return (
    <div className="absolute inset-0 z-20 flex flex-col items-center justify-center bg-void/80">
      <Loader2 className="w-8 h-8 text-accent animate-spin mb-3" />
      <p className="text-text-secondary text-sm">{message}</p>
    </div>
  );
}

export function StatusBar({
  nodeCount,
  edgeCount,
  indexStatus,
}: {
  nodeCount: number;
  edgeCount: number;
  indexStatus: string;
}) {
  return (
    <footer
      data-testid="status-bar"
      className="h-7 shrink-0 border-t border-border-subtle bg-deep px-3 flex items-center gap-4 text-[11px] text-text-muted"
    >
      <span>
        nodes: <strong className="text-text-secondary">{nodeCount}</strong>
      </span>
      <span>
        edges: <strong className="text-text-secondary">{edgeCount}</strong>
      </span>
      <span className="truncate">{indexStatus}</span>
    </footer>
  );
}