Merge pull request #5238 from menloresearch/fix/hyper-link-playground

feat(local-api-server): add button to open API documentation and improve layout

src-tauri/capabilities/default.json

@@ -2,9 +2,13 @@
   "$schema": "../gen/schemas/desktop-schema.json",
   "identifier": "default",
   "description": "enables the default permissions",
-  "windows": ["main"],
+  "windows": [
+    "main"
+  ],
   "remote": {
-    "urls": ["http://*"]
+    "urls": [
+      "http://*"
+    ]
   },
   "permissions": [
     "core:default",
@@ -21,6 +25,7 @@
     "dialog:default",
     "deep-link:default",
     "core:webview:allow-create-webview-window",
+    "opener:allow-open-url",
     {
       "identifier": "http:default",
       "allow": [
@@ -73,6 +78,24 @@
         }
       ]
     },
+    {
+      "identifier": "opener:allow-open-url",
+      "description": "opens the default permissions for the core module",
+      "windows": [
+        "*"
+      ],
+      "allow": [
+        {
+          "url": "https://*"
+        },
+        {
+          "url": "http://127.0.0.1:*"
+        },
+        {
+          "url": "http://0.0.0.0:*"
+        }
+      ]
+    },
     "store:default"
   ]
-}
+}

web-app/src/routes/settings/local-api-server.tsx

@@ -14,10 +14,11 @@ import { useLocalApiServer } from '@/hooks/useLocalApiServer'
 import { WebviewWindow } from '@tauri-apps/api/webviewWindow'
 import { useAppState } from '@/hooks/useAppState'
 import { windowKey } from '@/constants/windows'
-import { IconLogs } from '@tabler/icons-react'
+import { IconLogs, IconBook } from '@tabler/icons-react'
 import { cn } from '@/lib/utils'
 import { ApiKeyInput } from '@/containers/ApiKeyInput'
 import { useState } from 'react'
+import { openUrl } from '@tauri-apps/plugin-opener'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const Route = createFileRoute(route.settings.local_api_server as any)({
@@ -130,6 +131,16 @@ function LocalAPIServer() {
     }
   }
 
+  const handleOpenAPIDocs = async () => {
+    const docsUrl = `http://${serverHost}:${serverPort}`
+    try {
+      console.log('Opening API documentation at:', docsUrl)
+      await openUrl(docsUrl)
+    } catch (error) {
+      console.error('Failed to open API documentation:', error)
+    }
+  }
+
   const isServerRunning = serverStatus === 'running'
 
   return (
@@ -151,13 +162,26 @@ function LocalAPIServer() {
                       Start an OpenAI-compatible local HTTP server.
                     </p>
                   </div>
-                  <Button
+                  <div className="flex items-center gap-2">
-                    onClick={toggleAPIServer}
+                    {isServerRunning && (
-                    variant={isServerRunning ? 'destructive' : 'default'}
+                      <Button
-                    size="sm"
+                        onClick={handleOpenAPIDocs}
-                  >
+                        variant="default"
-                    {`${isServerRunning ? 'Stop' : 'Start'}`} Server
+                        size="sm"
-                  </Button>
+                        title="API Documentation"
+                      >
+                        <IconBook size={18} className="text-main-view-fg/50" />
+                        <span>Open Docs</span>
+                      </Button>
+                    )}
+                    <Button
+                      onClick={toggleAPIServer}
+                      variant={isServerRunning ? 'destructive' : 'default'}
+                      size="sm"
+                    >
+                      {`${isServerRunning ? 'Stop' : 'Start'}`} Server
+                    </Button>
+                  </div>
                 </div>
               }
             >