feat: add feedback button to sidebar (#746)

* fix: self-host Boxicons to comply with strict CSP

Replace the external CDN link to pro.boxicons.com with locally hosted
font files, avoiding Content Security Policy violations from Helmet.

* feat: add feedback button to sidebar

Add a clickable feedback card pinned to the bottom of the sidebar
that links to GitHub Discussions for feature requests.

Author: SebConejo

CLAUDE.md

@@ -272,6 +272,21 @@ See `packages/backend/.env.example` for all variables. Key ones:
 - **Tenant**: A user's data boundary. Created from `user.id` on first agent creation.
 - **Agent**: An AI agent owned by a tenant. Has a unique OTLP ingest key.
 
+## Content Security Policy (CSP)
+
+Helmet enforces a strict CSP in `main.ts`. The policy only allows `'self'` origins — **no external CDNs are permitted**.
+
+**Rule: Never load external resources from CDNs.** All assets (fonts, icons, stylesheets) must be self-hosted under `packages/frontend/public/`. This keeps the CSP strict and avoids third-party dependencies at runtime.
+
+Current self-hosted assets:
+- **Boxicons Duotone** — `public/fonts/boxicons/` (CSS + woff/ttf font files)
+
+To add a new font or icon library:
+1. Download the CSS and font files into `packages/frontend/public/`
+2. Rewrite any CDN URLs inside the CSS to use relative paths (`./filename.woff`)
+3. Reference the local CSS in `index.html` (e.g. `<link href="/fonts/..." />`)
+4. Do **not** add external domains to the CSP directives
+
 ## Architecture Notes
 
 - **Single-service**: In production, `@nestjs/serve-static` serves `frontend/dist/` with SPA fallback. API routes (`/api/*`, `/otlp/*`) are excluded.

packages/frontend/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" href="/favicon.ico" />
-    <link href="https://pro.boxicons.com/fonts/3.0.8/duotone/regular/200/boxicons-duotone.min.css?sig=ccbb17a30bbd11285764bc03d85132b669dfe25ae1c170743de4040a31577782" rel="stylesheet" />
+    <link href="/fonts/boxicons/boxicons-duotone.min.css" rel="stylesheet" />
     <title>Manifest</title>
     <meta name="description" content="AI agent observability platform — monitor costs, tokens, and performance." />
     <meta property="og:title" content="Manifest" />

packages/frontend/public/fonts/boxicons/boxicons-duotone.min.css

@@ -79,6 +79,23 @@ const Sidebar: Component = () => {
           Help
         </A>
       </Show>
+
+      <div class="sidebar__spacer" />
+
+      <a
+        href="https://github.com/mnfst/manifest/discussions/new?category=feature-request"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="sidebar__feedback"
+      >
+        <span class="sidebar__feedback-title">
+          <i class="bxd bx-message-bubble-detail" />
+          Feedback
+        </span>
+        <p class="sidebar__feedback-hint">
+          Help us improve Manifest by sharing your ideas and feature requests.
+        </p>
+      </a>
     </nav>
   );
 };

packages/frontend/public/fonts/boxicons/boxicons-duotone.ttf

@@ -713,7 +713,7 @@ h1, h2, h3, h4, h5, h6 {
   left: 0;
   background: hsl(var(--sidebar-background));
   border-right: 1px solid hsl(var(--sidebar-border));
-  padding: var(--gap-lg) 0;
+  padding: var(--gap-lg) 0 0 0;
   display: flex;
   flex-direction: column;
   z-index: 10;
@@ -772,6 +772,39 @@ h1, h2, h3, h4, h5, h6 {
   font-weight: 500;
 }
 
+.sidebar__spacer {
+  flex: 1;
+}
+
+.sidebar__feedback {
+  display: block;
+  padding: var(--gap-md) var(--gap-lg);
+  border-top: 1px solid hsl(var(--sidebar-border));
+  text-decoration: none;
+  color: hsl(var(--sidebar-foreground));
+  transition: background var(--transition-fast);
+  cursor: pointer;
+}
+
+.sidebar__feedback:hover {
+  background: hsl(var(--sidebar-accent));
+}
+
+.sidebar__feedback-title {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+}
+
+.sidebar__feedback-hint {
+  margin-top: var(--gap-xs);
+  font-size: var(--font-size-xs);
+  color: hsl(var(--muted-foreground));
+  line-height: 1.4;
+}
+
 .sidebar__footer {
   margin-top: auto;
   padding: var(--gap-md) var(--gap-lg);