copilot-api-pro/src/admin/layout.tsx at master · HXYerror/copilot-api-pro · GitHub

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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
/** @jsxImportSource hono/jsx */
import type { FC } from "hono/jsx"

// ---------------------------------------------------------------------------
// Security headers applied to every /admin response
// ---------------------------------------------------------------------------

export const ADMIN_SECURITY_HEADERS = {
  "Content-Security-Policy":
    "default-src 'self'; frame-ancestors 'none'; form-action 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'",
  "X-Frame-Options": "DENY",
  "Referrer-Policy": "no-referrer",
  "X-Content-Type-Options": "nosniff",
} as const

// ---------------------------------------------------------------------------
// Layout component
// ---------------------------------------------------------------------------

interface LayoutProps {
  title?: string
  active?: "index" | "keys" | "usage" | "audit" | "traces" | "settings"
  /** CSRF token for the logout form (required for session-protected pages). */
  csrfToken?: string
  /** Number of keys with debug_enabled=1 — when > 0, a warning banner is shown */
  debugKeyCount?: number
  children?: unknown
}

export const Layout: FC<LayoutProps> = ({
  title = "Admin",
  active,
  csrfToken,
  debugKeyCount = 0,
  children,
}) => {
  const navItems: Array<{
    href: string
    label: string
    key: LayoutProps["active"]
  }> = [
    { href: "/admin", label: "Overview", key: "index" },
    { href: "/admin/keys", label: "Keys", key: "keys" },
    { href: "/admin/usage", label: "Usage", key: "usage" },
    { href: "/admin/audit", label: "Audit", key: "audit" },
    { href: "/admin/traces", label: "Traces", key: "traces" },
    { href: "/admin/settings", label: "Settings", key: "settings" },
  ]

  return (
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>{title} — Copilot API Admin</title>
        <link rel="stylesheet" href="/admin/assets/style.css" />
      </head>
      <body>
        <header class="admin-header">
          <div class="admin-header__brand">
            <a href="/admin">Copilot API</a>
          </div>
          <nav class="admin-nav">
            {navItems.map((item) => (
              <a
                key={item.key}
                href={item.href}
                class={`admin-nav__link${active === item.key ? " admin-nav__link--active" : ""}`}
              >
                {item.label}
              </a>
            ))}
          </nav>
          <form
            method="post"
            action="/admin/session/logout"
            class="admin-header__logout"
          >
            {/* CSRF hidden field: required because HTML forms cannot send custom headers.
                The session middleware also accepts the token from the form body. */}
            {csrfToken && (
              <input type="hidden" name="csrf_token" value={csrfToken} />
            )}
            <button type="submit">Logout</button>
          </form>
        </header>
        {debugKeyCount > 0 && (
          <div class="debug-banner" role="alert">
            ⚠️ <strong>Debug mode active</strong> on {debugKeyCount} key
            {debugKeyCount === 1 ? "" : "s"} — prompts &amp; responses are being
            persisted in plaintext. <a href="/admin/keys">Review →</a>
          </div>
        )}
        <main class="admin-main">{children}</main>
        <footer class="admin-footer">
          <span>Copilot API Admin</span>
        </footer>
      </body>
    </html>
  )
}

// ---------------------------------------------------------------------------
// Login layout (no nav)
// ---------------------------------------------------------------------------

interface LoginLayoutProps {
  children?: unknown
}

export const LoginLayout: FC<LoginLayoutProps> = ({ children }) => (
  <html lang="en">
    <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Login — Copilot API Admin</title>
      <link rel="stylesheet" href="/admin/assets/style.css" />
    </head>
    <body class="login-page">
      <main class="login-main">{children}</main>
    </body>
  </html>
)