slackhive 0.1.37 → 0.1.39

package/apps/web/src/app/api/mcps/route.ts

@@ -0,0 +1,72 @@
+/**
+ * @fileoverview REST API route for the global MCP server catalog.
+ *
+ * GET  /api/mcps — List all MCP servers in the catalog
+ * POST /api/mcps — Add a new MCP server to the catalog
+ *
+ * The MCP catalog is a platform-level resource. Any agent can use
+ * any enabled MCP server. Managed via Settings → MCP Servers in the UI.
+ *
+ * @module web/api/mcps
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { getAllMcpServers, createMcpServer } from '@/lib/db';
+import type { UpsertMcpServerRequest } from '@slackhive/shared';
+import { guardAdmin } from '@/lib/api-guard';
+import { maskMcpServer } from '@/lib/mcp-mask';
+
+/**
+ * GET /api/mcps
+ * Returns all MCP servers in the global catalog, ordered by name.
+ *
+ * @returns {Promise<NextResponse>} JSON array of McpServer objects.
+ */
+export async function GET(): Promise<NextResponse> {
+  try {
+    const servers = await getAllMcpServers();
+    return NextResponse.json(servers.map(maskMcpServer));
+  } catch (err) {
+    return NextResponse.json({ error: (err as Error).message }, { status: 500 });
+  }
+}
+
+/**
+ * POST /api/mcps
+ * Adds a new MCP server to the global platform catalog.
+ *
+ * @param {NextRequest} request - Request body matching UpsertMcpServerRequest.
+ * @returns {Promise<NextResponse>} The created McpServer (201), or error.
+ *
+ * @example
+ * POST /api/mcps
+ * {
+ *   "name": "redshift-mcp",
+ *   "type": "stdio",
+ *   "config": { "command": "node", "args": ["/path/to/server.js"], "env": { "DATABASE_URL": "..." } },
+ *   "description": "Redshift read-only query access"
+ * }
+ */
+export async function POST(request: NextRequest): Promise<NextResponse> {
+  const denied = guardAdmin(request);
+  if (denied) return denied;
+  try {
+    const body = (await request.json()) as UpsertMcpServerRequest;
+
+    if (!body.name || !body.type || !body.config) {
+      return NextResponse.json(
+        { error: 'name, type, and config are required' },
+        { status: 400 }
+      );
+    }
+
+    const server = await createMcpServer(body);
+    return NextResponse.json(server, { status: 201 });
+  } catch (err) {
+    const message = (err as Error).message;
+    if (message.includes('unique')) {
+      return NextResponse.json({ error: 'An MCP server with this name already exists' }, { status: 409 });
+    }
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
+}

package/apps/web/src/app/api/settings/route.ts

@@ -0,0 +1,42 @@
+/**
+ * @fileoverview API route for platform settings (key-value store).
+ *
+ * GET  /api/settings — returns all settings as a JSON object.
+ * PUT  /api/settings — upserts a single setting `{ key, value }`.
+ *
+ * @module web/api/settings
+ */
+
+import { NextResponse } from 'next/server';
+import { getAllSettings, setSetting } from '@/lib/db';
+import { guardAdmin } from '@/lib/api-guard';
+
+/**
+ * Returns every stored setting as a flat `{ key: value }` JSON object.
+ *
+ * @returns {Promise<NextResponse>} JSON response with all settings.
+ */
+export async function GET(): Promise<NextResponse> {
+  const settings = await getAllSettings();
+  return NextResponse.json(settings);
+}
+
+/**
+ * Upserts a single setting. Expects JSON body `{ key: string, value: string }`.
+ *
+ * @param {Request} req - Incoming request with JSON body.
+ * @returns {Promise<NextResponse>} JSON response confirming the upsert.
+ */
+export async function PUT(req: Request): Promise<NextResponse> {
+  const denied = guardAdmin(req);
+  if (denied) return denied;
+  const body = await req.json();
+  const { key, value } = body as { key: string; value: string };
+
+  if (!key || typeof key !== 'string' || typeof value !== 'string') {
+    return NextResponse.json({ error: 'key and value are required strings' }, { status: 400 });
+  }
+
+  await setSetting(key, value);
+  return NextResponse.json({ ok: true, key, value });
+}

package/apps/web/src/app/globals.css

@@ -0,0 +1,124 @@
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=JetBrains+Mono:wght@400;500&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ─── Design Tokens — Light only ─────────────────────────────────────────────── */
+:root {
+  --bg:        #fafafa;
+  --surface:   #ffffff;
+  --surface-2: #f5f5f5;
+  --surface-3: #ebebeb;
+  --border:    #e5e5e5;
+  --border-2:  #d4d4d4;
+  --accent:    #171717;
+  --accent-2:  #404040;
+  --blue:      #2563eb;
+  --green:     #059669;
+  --red:       #dc2626;
+  --amber:     #d97706;
+  --text:      #0a0a0a;
+  --text-2:    #262626;
+  --muted:     #737373;
+  --subtle:    #a3a3a3;
+  --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+  --shadow-sm:    0 1px 2px rgba(0,0,0,0.04);
+  --shadow-md:    0 4px 12px rgba(0,0,0,0.06);
+  --shadow-lg:    0 12px 40px rgba(0,0,0,0.08);
+  --shadow-card:  rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.08) 0px 4px 12px;
+  --shadow-hover: rgba(0,0,0,0.10) 0px 8px 24px;
+  --shadow-modal: 0 20px 60px rgba(0,0,0,0.15);
+  --radius:       10px;
+  --radius-sm:    6px;
+  --radius-md:    14px;
+  --radius-lg:    20px;
+  --radius-xl:    28px;
+}
+
+/* ─── Reset ──────────────────────────────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; }
+html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font-sans);
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+::selection { background: rgba(23,23,23,0.12); }
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; }
+::-webkit-scrollbar-thumb:hover { background: var(--muted); }
+
+/* ─── Status pulse ───────────────────────────────────────────────────────────── */
+@keyframes pulse-ring {
+  0%   { box-shadow: 0 0 0 0 rgba(5,150,105,0.45); }
+  70%  { box-shadow: 0 0 0 6px rgba(5,150,105,0); }
+  100% { box-shadow: 0 0 0 0 rgba(5,150,105,0); }
+}
+.status-running { animation: pulse-ring 2s ease-in-out infinite; }
+
+/* ─── Entrance ───────────────────────────────────────────────────────────────── */
+@keyframes fade-up {
+  from { opacity: 0; transform: translateY(10px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.fade-up { animation: fade-up 0.35s cubic-bezier(0.16,1,0.3,1) both; }
+
+.stagger > * { animation: fade-up 0.35s cubic-bezier(0.16,1,0.3,1) both; }
+.stagger > *:nth-child(1) { animation-delay: 0ms;  }
+.stagger > *:nth-child(2) { animation-delay: 60ms; }
+.stagger > *:nth-child(3) { animation-delay: 120ms;}
+.stagger > *:nth-child(4) { animation-delay: 180ms;}
+.stagger > *:nth-child(5) { animation-delay: 240ms;}
+.stagger > *:nth-child(6) { animation-delay: 300ms;}
+
+/* ─── Tab bar ────────────────────────────────────────────────────────────────── */
+.tab-active {
+  color: var(--text) !important;
+  position: relative;
+}
+.tab-active::after {
+  content: '';
+  position: absolute;
+  bottom: -1px; left: 8px; right: 8px;
+  height: 2px;
+  background: var(--accent);
+  border-radius: 99px;
+}
+
+/* ─── Log colors ─────────────────────────────────────────────────────────────── */
+.log-info  { color: #2563eb; }
+.log-debug { color: #737373; }
+.log-warn  { color: #d97706; }
+.log-error { color: #dc2626; }
+
+/* ─── Mobile overlay backdrop ───────────────────────────────────────────────── */
+.sidebar-overlay {
+  display: none;
+  position: fixed; inset: 0;
+  background: rgba(0,0,0,0.3);
+  z-index: 49;
+  backdrop-filter: blur(2px);
+}
+.sidebar-overlay.open { display: block; }
+
+/* ─── Responsive ─────────────────────────────────────────────────────────────── */
+@media (max-width: 768px) {
+  .hide-mobile { display: none !important; }
+  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
+  .agent-grid { grid-template-columns: 1fr !important; }
+  .tab-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
+  .responsive-pad { padding: 20px 16px !important; padding-top: 56px !important; }
+}
+
+@media (max-width: 480px) {
+  .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
+  .agent-grid { grid-template-columns: 1fr !important; }
+}

package/apps/web/src/app/icon.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <defs>
+    <style>
+      .bg { fill: #1A1918; }
+      .line { fill: none; stroke: #EBE6E0; stroke-width: 32; stroke-linecap: round; stroke-linejoin: round; }
+      .prompt-accent { fill: none; stroke: #D97757; stroke-width: 32; stroke-linecap: round; stroke-linejoin: round; }
+      .cursor { fill: #D97757; }
+    </style>
+  </defs>
+  <rect class="bg" width="512" height="512" rx="112" />
+  <path class="line" d="M 200 140 L 200 372" />
+  <path class="line" d="M 312 140 L 312 372" />
+  <path class="line" d="M 140 200 L 372 200" />
+  <path class="prompt-accent" d="M 100 280 L 140 312 L 100 344" />
+  <path class="line" d="M 180 312 L 280 312" />
+  <rect class="cursor" x="312" y="296" width="40" height="32" rx="6" />
+</svg>