improve incidents ui. Add Mcp usage card to Credentials page.

Author: MaximBudnik

packages/dashboard/src/app/(layout)/credentials/components/ApiKeyDisplay.tsx

@@ -4,11 +4,13 @@ import { useState, useEffect } from "react"
 import { Button } from "@/components/ui/button"
 import { Copy, CopyCheck, RefreshCw } from "lucide-react"
 import { toast } from "sonner"
+import {useRouter} from "next/navigation";
 
 export const ApiKeyDisplay = () => {
     const [key, setKey] = useState<string | null>(null)
     const [isCopied, setIsCopied] = useState(false)
     const [isReissuing, setIsReissuing] = useState(false)
+    const router = useRouter()
 
     useEffect(() => {
         fetchApiKey()
@@ -48,6 +50,7 @@ export const ApiKeyDisplay = () => {
             const data = await response.json()
             setKey(data.apiKey)
             toast.success("API key reissued successfully")
+            router.refresh()
         } catch (err) {
             console.error("Failed to reissue API key:", err)
             toast.error("Failed to reissue API key")

packages/dashboard/src/app/(layout)/credentials/components/MCPConfig.tsx

@@ -0,0 +1,70 @@
+"use client"
+
+import {FC, useState} from "react"
+import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card"
+import {Button} from "@/components/ui/button"
+import {Copy, CopyCheck} from "lucide-react"
+import Link from "next/link";
+
+interface MCPConfigProps {
+    apiKey: string
+}
+
+
+export const MCPConfig: FC<MCPConfigProps> = ({apiKey}) => {
+    const [isCopied, setIsCopied] = useState(false)
+
+    const config = `{
+  "mcpServers": {
+    "api200": {
+      "command": "npx",
+      "args": [
+        "api200-mcp@latest"
+      ],
+      "env": {
+        "USER_KEY": "${apiKey}"
+      }
+    }
+  }
+}`
+
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(config)
+            setIsCopied(true)
+            setTimeout(() => setIsCopied(false), 2000)
+        } catch (err) {
+            console.error('Failed to copy MCP config:', err)
+        }
+    }
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle>MCP Usage</CardTitle>
+                <CardDescription>How to use MCP for API 200 </CardDescription>
+            </CardHeader>
+            <CardContent>
+                <p className="text-sm">
+                    To use API 200 MCP server with your LLM client, add following config (<Link target="_blank" className={"hover:underline text-blue-600"} href="https://modelcontextprotocol.io/quickstart/user">help</Link>):
+                </p>
+                <pre className="mt-2 flex-grow p-2 bg-gray-100 rounded-md font-mono text-sm relative">
+                     <div className="absolute right-2 top-2">
+                    <Button variant="outline" size="sm" onClick={handleCopy} className="h-8 w-8 p-0">
+                        {isCopied ? (
+                            <CopyCheck className="h-4 w-4 text-green-500"/>
+                        ) : (
+                            <Copy className="h-4 w-4"/>
+                        )}
+                    </Button>
+                </div>
+                            <code>
+                                {config}
+                            </code>
+                        </pre>
+            </CardContent>
+        </Card>
+    )
+}
+
+export default MCPConfig

packages/dashboard/src/app/(layout)/credentials/page.tsx

@@ -4,6 +4,7 @@ import { Separator } from "@/components/ui/separator";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { ApiKeyDisplay } from "./components/ApiKeyDisplay";
 import { env } from "next-runtime-env";
+import MCPConfig from "@/app/(layout)/credentials/components/MCPConfig";
 
 export default async function PrivatePage() {
     const supabase = await createClient()
@@ -61,6 +62,7 @@ export default async function PrivatePage() {
                         </pre>
                     </CardContent>
                 </Card>
+                <MCPConfig apiKey={apiKey?.key}/>
             </div>
         </div>
         <div>

packages/dashboard/src/app/(layout)/incidents/components/IncidentCard.tsx

@@ -1,16 +1,17 @@
-import { Button } from "@/components/ui/button"
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { ArrowRight, Check, X } from "lucide-react"
-import { redirect } from 'next/navigation'
-import { type EnhancedIncident } from '../types'
+import {Button} from "@/components/ui/button"
+import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card"
+import {ArrowRight, Check, CheckCheck, X} from "lucide-react"
+import {redirect} from 'next/navigation'
+import {type EnhancedIncident} from '../types'
+import {format} from "date-fns";
 
 type Props = {
     incident: EnhancedIncident
     onClose: () => void
     onResolve: () => void
 }
 
-export function IncidentCard({ incident, onClose, onResolve }: Props) {
+export function IncidentCard({incident, onClose, onResolve}: Props) {
     const goToEndpoint = () => {
         const endpoint = incident.endpoint as EnhancedIncident['endpoint'];
         const service = endpoint.service;
@@ -20,43 +21,46 @@ export function IncidentCard({ incident, onClose, onResolve }: Props) {
     return (
         <Card>
             <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                <CardTitle className="text-lg font-medium">
+                <CardTitle>
                     {incident.title}
                 </CardTitle>
-                <Button onClick={goToEndpoint}>Go To Endpoint <ArrowRight /></Button>
                 <Button variant="ghost" size="icon" onClick={onClose}>
-                    <X className="h-4 w-4" />
+                    <X className="h-4 w-4"/>
                 </Button>
             </CardHeader>
             <CardContent className="space-y-4">
                 <div>
                     <h3 className="text-sm font-medium text-muted-foreground">Type</h3>
-                    <div>{incident.type || "Unknown"}</div>
+                    <div className="text-sm">{incident.type || "Unknown"}</div>
                 </div>
 
                 <div>
                     <h3 className="text-sm font-medium text-muted-foreground">Status</h3>
-                    <div>{incident.resolved ? <div className="flex gap-1">Resolved <Check /></div> : "Active"}</div>
+                    <div className="text-sm">{incident.resolved ?
+                        <div className="flex gap-1 items-center">Resolved <Check className={"h-4 w-4"}/></div> : "Active"}</div>
                 </div>
 
                 <div>
                     <h3 className="text-sm font-medium text-muted-foreground">Details</h3>
-                    <pre className="mt-2 rounded-md bg-muted div-4 overflow-auto">
+                    <pre className="mt-2 p-4 rounded-md bg-muted div-4 overflow-auto text-xs">
                         {JSON.stringify(incident.details, null, 2)}
                     </pre>
                 </div>
 
                 <div>
-                    <h3 className="text-sm font-medium text-muted-foreground">Created</h3>
-                    <div>{new Date(incident.created_at!).toLocaleString()}</div>
+                    <h3 className="text-sm font-medium text-muted-foreground">Occured at</h3>
+                    <div className="text-sm">{format(new Date(incident.created_at!), "MMM dd HH:mm:ss")}</div>
+                </div>
+                <div className="flex gap-2">
+                    <Button className="w-full" variant={"outline"} onClick={goToEndpoint}>Go To Endpoint <ArrowRight/></Button>
+                    {!incident.resolved && (
+                        <Button className="w-full" onClick={onResolve}>
+                            Mark as Resolved <CheckCheck/>
+                        </Button>
+                    )}
                 </div>
 
-                {!incident.resolved && (
-                    <Button className="w-full" onClick={onResolve}>
-                        Mark as Resolved
-                    </Button>
-                )}
             </CardContent>
         </Card>
     )
-}
+}

packages/mcp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "api200-mcp",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "API200 MCP server for Claude and other model context protocol clients",
   "type": "module",
   "main": "./dist/index.js",