@cybermem/dashboard 0.1.0

package/app/page.tsx

@@ -0,0 +1,150 @@
+"use client"
+
+import AuditLogTable from "@/components/dashboard/audit-log-table"
+import ChartsSection from "@/components/dashboard/charts-section"
+import DashboardHeader from "@/components/dashboard/header"
+import LoginModal from "@/components/dashboard/login-modal"
+import MCPConfigModal from "@/components/dashboard/mcp-config-modal"
+import MetricsGrid from "@/components/dashboard/metrics-grid"
+import SettingsModal from "@/components/dashboard/settings-modal"
+import { useDashboard } from "@/lib/data/dashboard-context"
+import { DashboardData } from "@/lib/data/types"
+import { useEffect, useState } from "react"
+
+// Types (Ideally imported, but keeping for now if used elsewhere locally, though strategy returns properly typed data)
+// We use the types from lib/data/types.ts now
+
+export default function Dashboard() {
+  const { strategy, isDemo, toggleDemo, refreshSignal } = useDashboard()
+
+  const [showMCPConfig, setShowMCPConfig] = useState(false)
+  const [showSettings, setShowSettings] = useState(false)
+  const [isAuthenticated, setIsAuthenticated] = useState(false)
+
+  // Data State
+  const [data, setData] = useState<DashboardData>({
+      stats: {
+        memoryRecords: 0,
+        totalClients: 0,
+        successRate: 0,
+        totalRequests: 0,
+        topWriter: { name: "N/A", count: 0 },
+        topReader: { name: "N/A", count: 0 },
+        lastWriter: { name: "N/A", timestamp: 0 },
+        lastReader: { name: "N/A", timestamp: 0 },
+      },
+      trends: {
+        memory: { change: "", trend: "neutral", hasData: false, data: [] },
+        clients: { change: "", trend: "neutral", hasData: false, data: [] },
+        success: { change: "", trend: "neutral", hasData: false, data: [] },
+        requests: { change: "", trend: "neutral", hasData: false, data: [] },
+      },
+      logs: []
+  })
+
+  // Check authentication on mount
+  useEffect(() => {
+    const auth = sessionStorage.getItem("authenticated")
+    if (auth === "true") {
+      setIsAuthenticated(true)
+    }
+  }, [])
+
+  const handleLogin = (password: string) => {
+    sessionStorage.setItem("authenticated", "true")
+    setIsAuthenticated(true)
+  }
+
+  // Fetch Data Effect - Reacts to strategy change or refresh signal
+  useEffect(() => {
+    async function updateData() {
+        try {
+            const potentialData = await strategy.fetchGlobalStats()
+            setData(potentialData)
+        } catch (e) {
+            console.error("Failed to fetch dashboard data:", e)
+        }
+    }
+    updateData()
+  }, [strategy, refreshSignal])
+
+
+  // Audit Log internal state for filtering/sorting (UI logic only)
+  const [searchTerm, setSearchTerm] = useState("")
+  const [currentPage, setCurrentPage] = useState(1)
+  const [sortField, setSortField] = useState<"date" | "client" | "operation" | "status">("date")
+  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("desc")
+  const itemsPerPage = 10
+
+  const filteredLog = (data.logs || []).filter(
+      (log) =>
+        log.client.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        log.operation.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        log.status.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        log.description.toLowerCase().includes(searchTerm.toLowerCase()),
+    )
+
+  const handleSort = (field: string) => {
+    if (field === sortField) {
+      setSortDirection(prev => prev === "asc" ? "desc" : "asc")
+    } else {
+      setSortField(field as any)
+      setSortDirection("asc")
+    }
+  }
+
+  const sortedLog = [...filteredLog].sort((a, b) => {
+    const modifier = sortDirection === "asc" ? 1 : -1
+    if (sortField === "date") {
+      return (new Date(a.date).getTime() - new Date(b.date).getTime()) * modifier
+    }
+    const aValue = (a as any)[sortField] || ""
+    const bValue = (b as any)[sortField] || ""
+    if (typeof aValue === "string" && typeof bValue === "string") {
+      return aValue.localeCompare(bValue) * modifier
+    }
+    return 0
+  })
+
+  const paginatedLog = sortedLog.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage)
+  const totalPages = Math.ceil(sortedLog.length / itemsPerPage)
+
+  // Show login modal if not authenticated
+  if (!isAuthenticated) {
+    return <LoginModal onLogin={handleLogin} />
+  }
+
+  return (
+    <div className="min-h-screen text-foreground">
+      <DashboardHeader
+        onShowMCPConfig={() => setShowMCPConfig(true)}
+        onShowSettings={() => setShowSettings(true)}
+      />
+
+      <main className="px-6 py-8 max-w-7xl mx-auto space-y-8">
+        <MetricsGrid stats={data.stats} trends={data.trends} />
+        <ChartsSection period="" />
+        <AuditLogTable
+            logs={(paginatedLog || []).map(log => ({
+                id: log.id,
+                date: log.date.toLocaleString(),
+                client: log.client,
+                operation: log.operation,
+                status: log.status,
+                description: log.description
+            }))}
+            loading={false}
+            currentPage={currentPage}
+            totalPages={totalPages}
+            onPageChange={setCurrentPage}
+            sortField={sortField}
+            sortDirection={sortDirection}
+            onSort={handleSort}
+        />
+      </main>
+
+      {showMCPConfig && <MCPConfigModal onClose={() => setShowMCPConfig(false)} />}
+      {showSettings && <SettingsModal onClose={() => { setShowSettings(false); }} />}
+    </div>
+  )
+}

package/components/dashboard/audit-log-table.tsx

@@ -0,0 +1,195 @@
+"use client"
+
+import { ArrowDown, ArrowUp, ArrowUpDown, ChevronDown, ChevronLeft, ChevronRight, RefreshCw } from "lucide-react"
+import { useState } from "react"
+
+interface AuditLogTableProps {
+  logs: any[]
+  loading: boolean
+  currentPage: number
+  totalPages: number
+  onPageChange: (page: number) => void
+  sortField: string
+  sortDirection: 'asc' | 'desc'
+  onSort: (field: string) => void
+}
+
+const statusConfig: Record<string, { bg: string; text: string; border: string }> = {
+  Success: { bg: "bg-emerald-500/10", text: "text-emerald-400", border: "border-emerald-500/30" },
+  Warning: { bg: "bg-amber-500/10", text: "text-amber-400", border: "border-amber-500/30" },
+  Error: { bg: "bg-red-500/10", text: "text-red-400", border: "border-red-500/30" },
+  Canceled: { bg: "bg-slate-500/10", text: "text-slate-400", border: "border-slate-500/30" },
+}
+
+const periods = [
+  { label: "1 Hour", value: "1h" },
+  { label: "24 Hours", value: "24h" },
+  { label: "7 Days", value: "7d" },
+  { label: "30 Days", value: "30d" },
+  { label: "All Time", value: "all" },
+]
+
+export default function AuditLogTable({
+  logs,
+  loading,
+  currentPage,
+  totalPages,
+  onPageChange,
+  sortField,
+  sortDirection,
+  onSort
+}: AuditLogTableProps) {
+  const [period, setPeriod] = useState("all")
+
+  return (
+    <div className="group relative overflow-hidden rounded-2xl bg-white/5 border border-white/10 backdrop-blur-md shadow-lg p-6 transition-all duration-300">
+      {/* Neomorphism glow */}
+      <div className="absolute inset-0 bg-gradient-to-br from-white/5 via-transparent to-emerald-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none" />
+
+      {/* Period Selector - Badge Style - Absolute positioned in top-right (ignoring padding) */}
+      <div className="absolute top-0 right-0 z-20 group/period">
+        <button className="h-8 px-3 rounded-tl-none rounded-tr-2xl rounded-bl-2xl rounded-br-none bg-white/5 border-b border-l border-white/10 hover:bg-white/10 text-white text-xs font-medium flex items-center gap-2 transition-all">
+          <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+            />
+          </svg>
+          {periods.find((p) => p.value === period)?.label}
+          <ChevronDown className="w-3 h-3" />
+        </button>
+
+        {/* Dropdown Menu */}
+        <div className="absolute right-0 mt-2 w-40 bg-[#0B1116]/95 border border-white/10 rounded-lg shadow-xl opacity-0 invisible group-hover/period:opacity-100 group-hover/period:visible transition-all duration-200 z-30 backdrop-blur-xl overflow-hidden">
+          {periods.map((p) => (
+            <button
+              key={p.value}
+              onClick={() => setPeriod(p.value)}
+              className={`w-full text-left px-3 py-2 text-xs transition-colors ${
+                period === p.value
+                  ? "bg-emerald-500/20 text-emerald-400 font-medium"
+                  : "text-neutral-300 hover:bg-white/5 hover:text-white"
+              }`}
+            >
+              {p.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div className="relative z-10">
+        <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center gap-3">
+            <h3 className="text-lg font-semibold text-white">Audit Log</h3>
+            {loading && <RefreshCw className="w-4 h-4 text-emerald-500 animate-spin" />}
+          </div>
+        </div>
+
+
+
+
+        <div className="overflow-x-auto min-h-[400px]">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-white/10">
+                {[
+                  { label: "Timestamp", key: "date", width: "w-[200px]" },
+                  { label: "Client", key: "client", width: "w-[260px]" },
+                  { label: "Operation", key: "operation", width: "w-[120px]" },
+                  { label: "Status", key: "status", width: "w-[120px]" },
+                  { label: "Description", key: "description", width: "" },
+                ].map((header) => (
+                  <th
+                    key={header.key}
+                    onClick={() => onSort(header.key)}
+                    className={`text-left py-4 px-4 font-medium text-neutral-400 cursor-pointer hover:text-white transition-colors select-none group/th ${header.width}`}
+                  >
+                    <div className="flex items-center gap-2">
+                       {header.label}
+                       <div className="flex flex-col">
+                         {sortField === header.key ? (
+                            sortDirection === 'asc' ?
+                              <ArrowUp className="w-3 h-3 text-emerald-400" /> :
+                              <ArrowDown className="w-3 h-3 text-emerald-400" />
+                         ) : (
+                            <ArrowUpDown className="w-3 h-3 text-neutral-700 group-hover/th:text-neutral-500 transition-colors" />
+                         )}
+                       </div>
+                    </div>
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {loading && logs.length === 0 ? (
+                  // Loading skeleton
+                  Array.from({ length: 5 }).map((_, i) => (
+                      <tr key={i} className="border-b border-white/5">
+                          <td className="py-4 px-4"><div className="h-4 w-32 bg-white/5 rounded animate-pulse" /></td>
+                          <td className="py-4 px-4"><div className="h-4 w-24 bg-white/5 rounded animate-pulse" /></td>
+                          <td className="py-4 px-4"><div className="h-4 w-16 bg-white/5 rounded animate-pulse" /></td>
+                          <td className="py-4 px-4"><div className="h-6 w-20 bg-white/5 rounded-full animate-pulse" /></td>
+                          <td className="py-4 px-4"><div className="h-4 w-40 bg-white/5 rounded animate-pulse" /></td>
+                      </tr>
+                  ))
+              ) : (
+                logs.map((log) => {
+                    const config = statusConfig[log.status] || statusConfig.Success
+                    return (
+                        <tr key={log.id} className="border-b border-white/5 hover:bg-white/10 transition-colors even:bg-white/[0.02] group/row">
+                            <td className="py-4 px-4 text-neutral-300 group-hover/row:text-white transition-colors">{log.date}</td>
+                            <td className="py-4 px-4 text-white font-medium">{log.client}</td>
+                            <td className="py-4 px-4 text-neutral-300">{log.operation}</td>
+                            <td className="py-4 px-4">
+                            <span
+                                className={`px-3 py-1 rounded-full text-xs font-medium border ${config.bg} ${config.text} ${config.border}`}
+                            >
+                                {log.status}
+                            </span>
+                            </td>
+                            <td className="py-4 px-4 text-neutral-400">{log.description}</td>
+                        </tr>
+                    )
+                })
+              )}
+
+              {!loading && logs.length === 0 && (
+                <tr>
+                  <td colSpan={5} className="py-12 text-center text-neutral-500">
+                    No logs found for this period
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+
+        <div className="mt-6 flex items-center justify-between">
+          <p className="text-sm text-neutral-500">
+            Page {currentPage} of {Math.max(1, totalPages)}
+          </p>
+          <div className="flex gap-2">
+            <button
+                onClick={() => onPageChange(Math.max(1, currentPage - 1))}
+                disabled={currentPage === 1}
+                className="px-3 py-2 rounded-lg bg-white/5 hover:bg-white/10 border border-white/10 text-neutral-300 text-sm transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1"
+            >
+              <ChevronLeft className="w-4 h-4" />
+              Previous
+            </button>
+            <button
+                onClick={() => onPageChange(Math.min(totalPages, currentPage + 1))}
+                disabled={currentPage === totalPages || totalPages === 0}
+                className="px-3 py-2 rounded-lg bg-emerald-500/20 hover:bg-emerald-500/30 border border-emerald-500/20 text-emerald-400 text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1"
+            >
+              Next
+              <ChevronRight className="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/components/dashboard/chart-card.tsx

@@ -0,0 +1,196 @@
+"use client"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { useDashboard } from "@/lib/data/dashboard-context";
+import { ChevronDown } from "lucide-react";
+import dynamic from "next/dynamic";
+import { useEffect, useState } from "react";
+
+// Dynamic import with SSR disabled
+const MetricsChart = dynamic(() => import("./metrics-chart"), { ssr: false });
+
+interface ChartCardProps {
+  service: string
+}
+
+// Fallback color generator
+function stringToColor(str: string): string {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  let color = '#';
+  for (let i = 0; i < 3; i++) {
+    const value = (hash >> (i * 8)) & 0xFF;
+    color += ('00' + value.toString(16)).substr(-2);
+  }
+  return color;
+}
+
+const periods = [
+  { value: "1h", label: "1 Hour" },
+  { value: "24h", label: "24 Hours" },
+  { value: "7d", label: "7 Days" },
+  { value: "30d", label: "30 Days" },
+  { value: "90d", label: "90 Days" },
+]
+
+export default function ChartCard({ service }: ChartCardProps) {
+  const { strategy, refreshSignal, clientConfigs } = useDashboard()
+  const [period, setPeriod] = useState("24h")
+  const [hovered, setHovered] = useState<string | null>(null)
+  const [data, setData] = useState<any[]>([])
+  const [clientNames, setClientNames] = useState<string[]>([])
+  const [clientMetadata, setClientMetadata] = useState<Record<string, any>>({})
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    async function fetchData() {
+      // Only show loading state on initial load or period change, not background refresh
+      // We check if data is empty to determine initial load
+      if (data.length === 0) setLoading(true)
+
+      try {
+        const timeSeriesData = await strategy.getChartData(period)
+
+        // Update client metadata if provided in response
+        if (timeSeriesData.metadata) {
+            setClientMetadata(prev => ({ ...prev, ...timeSeriesData.metadata }))
+        }
+
+        // Helper to format time based on period
+        const formatSeries = (series: any[]) => {
+            if (!series) return []
+            return series.map(point => {
+            const date = new Date((point.time as number) * 1000)
+            let timeStr = ""
+            // Show date if period is longer than 24h
+            if (["7d", "30d", "90d", "all"].includes(period)) {
+                timeStr = date.toLocaleDateString([], { month: '2-digit', day: '2-digit' }) + " " + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+            } else {
+                timeStr = date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+            }
+            return {
+                ...point,
+                time: timeStr
+            }
+            })
+        }
+
+        // Extract client names from series and sort by total value (Ascending)
+        const getClients = (series: any[]) => {
+            if (!series || series.length === 0) return []
+            const keys = new Set<string>()
+            const totals: Record<string, number> = {}
+
+            series.forEach(point => {
+                Object.keys(point).forEach(k => {
+                    if (k !== 'time') {
+                        keys.add(k)
+                        totals[k] = (totals[k] || 0) + (point[k] as number)
+                    }
+                })
+            })
+
+            return Array.from(keys).sort((a, b) => (totals[a] || 0) - (totals[b] || 0))
+        }
+
+        // Get data based on service type
+        let seriesData: any[] = []
+        let clients: string[] = []
+
+        if (service.includes("Creates")) {
+            seriesData = formatSeries(timeSeriesData.creates)
+            clients = getClients(timeSeriesData.creates)
+        } else if (service.includes("Reads")) {
+            seriesData = formatSeries(timeSeriesData.reads)
+            clients = getClients(timeSeriesData.reads)
+        } else if (service.includes("Updates")) {
+            seriesData = formatSeries(timeSeriesData.updates)
+            clients = getClients(timeSeriesData.updates)
+        } else if (service.includes("Deletes")) {
+            seriesData = formatSeries(timeSeriesData.deletes)
+            clients = getClients(timeSeriesData.deletes)
+        }
+
+        setData(seriesData)
+        setClientNames(clients)
+
+      } catch (e) {
+        console.error("Failed to fetch chart data:", e)
+      } finally {
+        setLoading(false)
+      }
+    }
+    fetchData()
+  }, [period, service, strategy, refreshSignal])
+
+  const isMultiSeries = clientNames.length > 0
+
+  return (
+    <Card className="bg-white/5 border-white/10 backdrop-blur-md relative overflow-visible pt-6 pb-2">
+      <button
+        className="absolute top-0 right-0 z-20 h-8 px-3 rounded-tl-none rounded-tr-xl rounded-bl-2xl rounded-br-none bg-white/5 border-b border-l border-white/10 hover:bg-white/10 text-white text-xs font-medium flex items-center gap-2 transition-all group"
+        onClick={() => document.getElementById(`dropdown-${service}`)?.classList.toggle('hidden')}
+      >
+        <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+          />
+        </svg>
+        {periods.find((p) => p.value === period)?.label}
+        <ChevronDown className="w-3 h-3" />
+      </button>
+
+      {/* Dropdown Menu - Positioned relative to the button or card */}
+      <div id={`dropdown-${service}`} className="hidden absolute top-8 right-0 w-40 bg-[#0B1116]/95 border border-white/10 rounded-lg shadow-xl z-30 backdrop-blur-xl overflow-hidden">
+        {periods.map((p) => (
+          <button
+            key={p.value}
+            onClick={() => {
+              setPeriod(p.value);
+              document.getElementById(`dropdown-${service}`)?.classList.add('hidden');
+            }}
+            className={`w-full text-left px-3 py-2 text-xs transition-colors ${
+              period === p.value
+                ? "bg-emerald-500/20 text-emerald-400 font-medium"
+                : "text-neutral-300 hover:bg-white/5 hover:text-white"
+            }`}
+          >
+            {p.label}
+          </button>
+        ))}
+      </div>
+
+      <CardHeader className="relative">
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle className="text-sm font-medium text-slate-400">Time Series</CardTitle>
+            <div className="text-2xl font-bold text-white">{service}</div>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        {loading ? (
+          <div className="h-[200px] w-full flex items-center justify-center">
+            <div className="text-neutral-500 text-sm">Loading...</div>
+          </div>
+        ) : (
+          <div className="h-[200px] w-full">
+            <MetricsChart
+                data={data}
+                isMultiSeries={isMultiSeries}
+                clientNames={clientNames}
+                clientConfigs={clientConfigs}
+                hovered={hovered}
+                setHovered={setHovered}
+            />
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

package/components/dashboard/charts-section.tsx

@@ -0,0 +1,16 @@
+"use client"
+
+import ChartCard from "./chart-card";
+
+export default function ChartsSection({ period }: { period: string }) {
+  // Remove the period prop since each chart will have its own selector
+  // Just render the charts, they'll manage their own data
+  return (
+    <div className="grid grid-cols-2 gap-6">
+      <ChartCard service="Creates by Client" />
+      <ChartCard service="Reads by Client" />
+      <ChartCard service="Updates by Client" />
+      <ChartCard service="Deletes by Client" />
+    </div>
+  )
+}

package/components/dashboard/header.tsx

@@ -0,0 +1,82 @@
+"use client"
+
+import { Button } from "@/components/ui/button";
+import { Book, Settings } from "lucide-react";
+import { useEffect, useState } from "react";
+
+export default function DashboardHeader({
+  onShowMCPConfig,
+  onShowSettings,
+}: {
+  onShowMCPConfig: () => void;
+  onShowSettings: () => void;
+}) {
+  const [isScrolled, setIsScrolled] = useState(false)
+
+  useEffect(() => {
+    // Check initial scroll position on mount
+    setIsScrolled(window.scrollY > 10)
+
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 10)
+    }
+    window.addEventListener("scroll", handleScroll)
+    return () => window.removeEventListener("scroll", handleScroll)
+  }, [])
+
+  return (
+    <header className={`sticky top-0 z-50 transition-all duration-300 ${
+      isScrolled
+        ? "border-b border-white/10 backdrop-blur-xl bg-neutral-900/30"
+        : "border-b border-transparent bg-transparent"
+    }`}>
+      <div className="px-6 py-5 max-w-7xl mx-auto">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <div className="relative w-10 h-10 flex-shrink-0">
+              <img src="/logo.svg" alt="CyberMem Logo" className="w-full h-full object-contain" />
+            </div>
+            <div>
+              <h1 className="text-3xl font-bold tracking-tight text-white leading-none font-exo">CyberMem</h1>
+              <p className="text-sm text-neutral-400 mt-1">Memory MCP Server</p>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-3">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onShowMCPConfig}
+              className="hidden md:flex h-10 px-4 text-sm font-medium bg-emerald-500/10 text-emerald-400 hover:text-emerald-300 hover:bg-emerald-500/20 border border-emerald-500/20 hover:border-emerald-500/40 rounded-lg"
+            >
+              <img src="/icons/mcp.png" alt="MCP" className="w-4 h-4 mr-2" />
+              Connect MCP
+            </Button>
+
+            <Button
+              variant="ghost"
+              size="sm"
+              asChild
+              className="hidden md:flex h-10 px-4 text-sm font-medium text-neutral-400 hover:text-white bg-white/5 border border-white/10 hover:bg-white/10 rounded-lg"
+            >
+              <a href="https://cybermem.dev/docs" target="_blank">
+                <Book className="w-4 h-4 mr-2" />
+                Docs
+              </a>
+            </Button>
+
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={onShowSettings}
+              className="h-10 w-10 text-neutral-400 hover:text-white bg-white/5 border border-white/10 hover:bg-white/10 rounded-lg"
+            >
+              <Settings className="w-5 h-5" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </header>
+  )
+}
+