Spaces:

abcd118q
/

Compost

Paused

App Files Files Community

abc1181 commited on May 21

Commit

de886f2

1 Parent(s): 74bcc24

Fix health endpoint routing order

Browse files

Files changed (14) hide show

backend/main.py +7 -7
backend/static/index.html +0 -1
frontend/_src/app/analytics/page.tsx +59 -0
frontend/_src/app/api-keys/page.tsx +26 -0
frontend/_src/app/apps/page.tsx +94 -0
frontend/_src/app/globals.css +22 -0
frontend/_src/app/layout.tsx +20 -0
frontend/_src/app/login/page.tsx +61 -0
frontend/_src/app/page.tsx +90 -0
frontend/_src/app/settings/page.tsx +40 -0
frontend/_src/app/tools/page.tsx +64 -0
frontend/_src/components/sidebar.tsx +93 -0
frontend/_src/lib/api.ts +55 -0
frontend/_src/lib/utils.ts +6 -0

backend/main.py CHANGED Viewed

@@ -46,6 +46,11 @@ app.include_router(settings.router, prefix="/api/settings", tags=["settings"])
 app.include_router(mcp.router, prefix="/mcp", tags=["mcp"])
 app.include_router(auth_configs.router, prefix="/api/auth-configs", tags=["auth-configs"])
 STATIC_DIR = os.path.join(os.path.dirname(__file__), "static")
 if os.path.exists(STATIC_DIR):
@@ -53,7 +58,7 @@ if os.path.exists(STATIC_DIR):
     @app.get("/{full_path:path}")
     async def serve_spa(full_path: str):
-        if full_path.startswith("api/") or full_path.startswith("mcp/"):
             return JSONResponse({"detail": "Not found"}, status_code=404)
         static_file = os.path.join(STATIC_DIR, full_path)
         if os.path.isfile(static_file):
@@ -62,9 +67,4 @@ if os.path.exists(STATIC_DIR):
     @app.get("/")
     async def root():
-        return FileResponse(os.path.join(STATIC_DIR, "index.html"))
-@app.get("/health")
-async def health():
-    return {"status": "healthy", "version": "1.0.0"}

 app.include_router(mcp.router, prefix="/mcp", tags=["mcp"])
 app.include_router(auth_configs.router, prefix="/api/auth-configs", tags=["auth-configs"])
+@app.get("/health")
+async def health():
+    return {"status": "healthy", "version": "1.0.0"}
 STATIC_DIR = os.path.join(os.path.dirname(__file__), "static")
 if os.path.exists(STATIC_DIR):
     @app.get("/{full_path:path}")
     async def serve_spa(full_path: str):
+        if full_path.startswith("api/") or full_path.startswith("mcp/") or full_path == "health":
             return JSONResponse({"detail": "Not found"}, status_code=404)
         static_file = os.path.join(STATIC_DIR, full_path)
         if os.path.isfile(static_file):
     @app.get("/")
     async def root():
+        return FileResponse(os.path.join(STATIC_DIR, "index.html"))

backend/static/index.html DELETED Viewed

@@ -1 +0,0 @@

- <!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/e4af272ccee01ff0-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="stylesheet" href="/_next/static/css/b8fe60b397de5bf4.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-16fd57b891a459c7.js"/><script src="/_next/static/chunks/fd9d1056-9e075b64004453d8.js" async=""></script><script src="/_next/static/chunks/117-4e7593576fd7f596.js" async=""></script><script src="/_next/static/chunks/main-app-c4d682a1ca6a9af7.js" async=""></script><script src="/_next/static/chunks/876-6377c47dc51ad221.js" async=""></script><script src="/_next/static/chunks/app/page-b6939147ba61bda4.js" async=""></script><title>Compost - AI Tool Platform</title><meta name="description" content="Unified AI tool integration platform"/><meta name="next-size-adjust"/><script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script></head><body class="__variable_f367f3 font-sans bg-bg-primary text-text-primary"><div class="flex min-h-screen"><aside class="w-60 bg-bg-secondary border-r border-border flex flex-col shrink-0"><div class="px-5 py-4 border-b border-border"><div class="flex items-center gap-3"><div class="w-8 h-8 bg-accent-cyan rounded-lg flex items-center justify-center font-bold text-bg-primary text-sm">C</div><span class="text-base font-semibold tracking-tight">Compost</span></div></div><nav class="flex-1 px-3 py-4 space-y-1"><div class="px-3 mb-2 text-[11px] font-semibold uppercase tracking-wider text-text-dim">Main</div><a class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors bg-accent-cyan/10 text-accent-cyanLight font-medium" href="/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layout-dashboard w-4 h-4"><rect width="7" height="9" x="3" y="3" rx="1"></rect><rect width="7" height="5" x="14" y="3" rx="1"></rect><rect width="7" height="9" x="14" y="12" rx="1"></rect><rect width="7" height="5" x="3" y="16" rx="1"></rect></svg>Dashboard</a><a class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors text-text-secondary hover:bg-bg-hover hover:text-text-primary" href="/apps/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plug w-4 h-4"><path d="M12 22v-5"></path><path d="M9 8V2"></path><path d="M15 8V2"></path><path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z"></path></svg>Apps</a><a class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors text-text-secondary hover:bg-bg-hover hover:text-text-primary" href="/tools/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wrench w-4 h-4"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg>Tools</a><div class="px-3 mt-6 mb-2 text-[11px] font-semibold uppercase tracking-wider text-text-dim">Configuration</div><a class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors text-text-secondary hover:bg-bg-hover hover:text-text-primary" href="/api-keys/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-key w-4 h-4"><circle cx="7.5" cy="15.5" r="5.5"></circle><path d="m21 2-9.6 9.6"></path><path d="m15.5 7.5 3 3L22 7l-3-3"></path></svg>API Keys</a><a class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors text-text-secondary hover:bg-bg-hover hover:text-text-primary" href="/analytics/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bar-chart3 w-4 h-4"><path d="M3 3v18h18"></path><path d="M18 17V9"></path><path d="M13 17V5"></path><path d="M8 17v-3"></path></svg>Analytics</a><a class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors text-text-secondary hover:bg-bg-hover hover:text-text-primary" href="/settings/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-settings w-4 h-4"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"></path><circle cx="12" cy="12" r="3"></circle></svg>Settings</a><a href="/api/docs" target="_blank" rel="noopener noreferrer" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-text-secondary hover:bg-bg-hover hover:text-text-primary transition-colors"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link w-4 h-4"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg>API Docs</a></nav><div class="px-3 py-4 border-t border-border"><div class="flex items-center justify-between"><div class="flex items-center gap-2 min-w-0"><div class="w-7 h-7 bg-bg-tertiary rounded-full flex items-center justify-center text-xs font-semibold shrink-0">U</div><span class="text-xs text-text-secondary truncate">User</span></div><button class="p-1.5 text-text-muted hover:text-accent-red hover:bg-accent-red/10 rounded-lg transition-colors"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-log-out w-3.5 h-3.5"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" x2="9" y1="12" y2="12"></line></svg></button></div></div></aside><main class="flex-1 flex flex-col"><header class="h-14 bg-bg-secondary border-b border-border flex items-center px-6"><h1 class="text-base font-medium">Dashboard</h1></header><div class="flex-1 p-6 space-y-6 overflow-auto"><div class="grid grid-cols-4 gap-4"><div class="bg-bg-tertiary border border-border rounded-xl p-5"><div class="flex items-center justify-between"><div><p class="text-sm text-text-muted">Total Executions</p><p class="text-2xl font-bold mt-1">...</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-activity w-5 h-5 text-accent-cyan"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"></path></svg></div></div><div class="bg-bg-tertiary border border-border rounded-xl p-5"><div class="flex items-center justify-between"><div><p class="text-sm text-text-muted">Integrations</p><p class="text-2xl font-bold mt-1">...</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plug w-5 h-5 text-accent-green"><path d="M12 22v-5"></path><path d="M9 8V2"></path><path d="M15 8V2"></path><path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z"></path></svg></div></div><div class="bg-bg-tertiary border border-border rounded-xl p-5"><div class="flex items-center justify-between"><div><p class="text-sm text-text-muted">Success Rate</p><p class="text-2xl font-bold mt-1">...</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check-big w-5 h-5 text-accent-blue"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><path d="m9 11 3 3L22 4"></path></svg></div></div><div class="bg-bg-tertiary border border-border rounded-xl p-5"><div class="flex items-center justify-between"><div><p class="text-sm text-text-muted">Avg Latency</p><p class="text-2xl font-bold mt-1">...</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock w-5 h-5 text-accent-amber"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg></div></div></div><div class="bg-bg-tertiary border border-border rounded-xl p-6"><h3 class="text-sm font-medium mb-4">Quick Connect</h3><p class="text-text-muted text-sm">Loading...</p></div></div></main></div><script src="/_next/static/chunks/webpack-16fd57b891a459c7.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/_next/static/media/e4af272ccee01ff0-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n2:HL[\"/_next/static/css/b8fe60b397de5bf4.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"3:I[2846,[],\"\"]\n5:I[9107,[],\"ClientPageRoot\"]\n6:I[7340,[\"876\",\"static/chunks/876-6377c47dc51ad221.js\",\"931\",\"static/chunks/app/page-b6939147ba61bda4.js\"],\"default\",1]\n7:I[4707,[],\"\"]\n8:I[6423,[],\"\"]\na:I[1060,[],\"\"]\nb:[]\n"])</script><script>self.__next_f.push([1,"0:[\"$\",\"$L3\",null,{\"buildId\":\"Kf4VGOEAsTnd5eMvxpmU3\",\"assetPrefix\":\"\",\"urlParts\":[\"\",\"\"],\"initialTree\":[\"\",{\"children\":[\"__PAGE__\",{}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[\"__PAGE__\",{},[[\"$L4\",[\"$\",\"$L5\",null,{\"props\":{\"params\":{},\"searchParams\":{}},\"Component\":\"$6\"}],null],null],null]},[[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/b8fe60b397de5bf4.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"__variable_f367f3 font-sans bg-bg-primary text-text-primary\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L8\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[]}]}]}]],null],null],\"couldBeIntercepted\":false,\"initialHead\":[null,\"$L9\"],\"globalErrorComponent\":\"$a\",\"missingSlots\":\"$Wb\"}]\n"])</script><script>self.__next_f.push([1,"9:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Compost - AI Tool Platform\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"Unified AI tool integration platform\"}],[\"$\",\"meta\",\"4\",{\"name\":\"next-size-adjust\"}]]\n4:null\n"])</script></body></html>

frontend/_src/app/analytics/page.tsx ADDED Viewed

	@@ -0,0 +1,59 @@

+'use client'
+import { useEffect, useState } from 'react'
+import { Sidebar } from '@/components/sidebar'
+import { api, type Stats } from '@/lib/api'
+import { Activity, CheckCircle, XCircle, Clock } from 'lucide-react'
+export default function AnalyticsPage() {
+  const [stats, setStats] = useState<Stats | null>(null)
+  const [loading, setLoading] = useState(true)
+  useEffect(() => {
+    api.get<Stats>('/api/analytics/overview')
+      .then((data) => { setStats(data); setLoading(false) })
+      .catch(() => setLoading(false))
+  }, [])
+  const metrics = [
+    { label: 'Executions', value: stats?.total_executions ?? 0, icon: Activity, color: 'text-accent-cyan' },
+    { label: 'Successful', value: stats?.successful ?? 0, icon: CheckCircle, color: 'text-accent-green' },
+    { label: 'Failed', value: stats?.failed ?? 0, icon: XCircle, color: 'text-accent-red' },
+    { label: 'Avg Latency', value: `${stats?.avg_latency_ms ?? 0}ms`, icon: Clock, color: 'text-accent-amber' },
+  ]
+  return (
+    <div className="flex min-h-screen">
+      <Sidebar />
+      <main className="flex-1 flex flex-col">
+        <header className="h-14 bg-bg-secondary border-b border-border flex items-center px-6">
+          <h1 className="text-base font-medium">Analytics</h1>
+        </header>
+        <div className="flex-1 p-6 space-y-6 overflow-auto">
+          <div className="grid grid-cols-4 gap-4">
+            {metrics.map((m) => (
+              <div key={m.label} className="bg-bg-tertiary border border-border rounded-xl p-5">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <p className="text-sm text-text-muted">{m.label}</p>
+                    <p className={`text-2xl font-bold mt-1 ${m.color}`}>{loading ? '...' : m.value}</p>
+                  </div>
+                  <m.icon className={`w-5 h-5 ${m.color}`} />
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="bg-bg-tertiary border border-border rounded-xl p-6">
+            <h3 className="text-sm font-medium mb-4">Success Rate</h3>
+            <div className="flex items-center gap-4">
+              <div className="flex-1 h-3 bg-bg-secondary rounded-full overflow-hidden">
+                <div className="h-full bg-accent-green rounded-full transition-all" style={{ width: `${stats?.success_rate ?? 100}%` }} />
+              </div>
+              <span className="text-sm font-medium">{stats?.success_rate ?? 100}%</span>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  )
+}

frontend/_src/app/api-keys/page.tsx ADDED Viewed

	@@ -0,0 +1,26 @@

+'use client'
+import { Sidebar } from '@/components/sidebar'
+import { Key, Server } from 'lucide-react'
+export default function APIKeysPage() {
+  return (
+    <div className="flex min-h-screen">
+      <Sidebar />
+      <main className="flex-1 flex flex-col">
+        <header className="h-14 bg-bg-secondary border-b border-border flex items-center px-6 justify-between">
+          <h1 className="text-base font-medium">API Keys</h1>
+        </header>
+        <div className="flex-1 p-6">
+          <div className="bg-bg-tertiary border border-border rounded-xl p-6">
+            <div className="flex items-center gap-3 mb-4">
+              <Key className="w-5 h-5 text-accent-cyan" />
+              <h3 className="text-sm font-medium">Manage API Keys</h3>
+            </div>
+            <p className="text-sm text-text-muted">Generate API keys for programmatic access to the platform.</p>
+          </div>
+        </div>
+      </main>
+    </div>
+  )
+}

frontend/_src/app/apps/page.tsx ADDED Viewed

	@@ -0,0 +1,94 @@

+'use client'
+import { useEffect, useState } from 'react'
+import { Sidebar } from '@/components/sidebar'
+import { api, type Integration } from '@/lib/api'
+import { Search } from 'lucide-react'
+const categories = ['All', 'Developer Tools', 'Communication', 'Productivity', 'CRM', 'Finance', 'Social', 'Other']
+export default function AppsPage() {
+  const [integrations, setIntegrations] = useState<Integration[]>([])
+  const [loading, setLoading] = useState(true)
+  const [category, setCategory] = useState('All')
+  const [search, setSearch] = useState('')
+  useEffect(() => {
+    api.get<Integration[]>('/api/apps')
+      .then((data) => { setIntegrations(data); setLoading(false) })
+      .catch(() => setLoading(false))
+  }, [])
+  const filtered = integrations.filter((i) => {
+    const matchCat = category === 'All' || i.category === category
+    const matchSearch = !search || i.name.toLowerCase().includes(search.toLowerCase()) || i.description.toLowerCase().includes(search.toLowerCase())
+    return matchCat && matchSearch
+  })
+  return (
+    <div className="flex min-h-screen">
+      <Sidebar integrationCount={integrations.length} />
+      <main className="flex-1 flex flex-col">
+        <header className="h-14 bg-bg-secondary border-b border-border flex items-center px-6 justify-between">
+          <h1 className="text-base font-medium">Apps</h1>
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-dim" />
+            <input
+              className="pl-9 pr-4 py-1.5 bg-bg-tertiary border border-border rounded-lg text-sm text-text-primary placeholder:text-text-dim focus:outline-none focus:border-accent-cyan w-64"
+              placeholder="Search apps..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+            />
+          </div>
+        </header>
+        <div className="flex-1 p-6 overflow-auto">
+          <div className="flex gap-2 mb-6 flex-wrap">
+            {categories.map((c) => (
+              <button key={c} onClick={() => setCategory(c)}
+                className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${category === c ? 'bg-accent-cyan text-bg-primary' : 'bg-bg-tertiary border border-border text-text-secondary hover:text-text-primary'}`}
+              >{c}</button>
+            ))}
+          </div>
+          {loading ? (
+            <div className="grid grid-cols-4 gap-4">
+              {Array.from({ length: 8 }).map((_, i) => (
+                <div key={i} className="bg-bg-tertiary border border-border rounded-xl p-5 animate-pulse">
+                  <div className="flex items-center gap-3 mb-3">
+                    <div className="w-9 h-9 bg-bg-hover rounded-lg" />
+                    <div className="flex-1"><div className="h-3 bg-bg-hover rounded w-20 mb-1" /><div className="h-2 bg-bg-hover rounded w-14" /></div>
+                  </div>
+                  <div className="h-2 bg-bg-hover rounded w-full mb-2" /><div className="h-2 bg-bg-hover rounded w-3/4" />
+                </div>
+              ))}
+            </div>
+          ) : filtered.length === 0 ? (
+            <div className="text-center py-20"><p className="text-text-muted">No apps found</p></div>
+          ) : (
+            <div className="grid grid-cols-4 gap-4">
+              {filtered.map((i) => (
+                <div key={i.id} className="bg-bg-tertiary border border-border rounded-xl p-5 hover:border-accent-cyan/40 transition-colors group">
+                  <div className="flex items-center gap-3 mb-3">
+                    <div className="w-10 h-10 bg-bg-secondary rounded-lg flex items-center justify-center overflow-hidden border border-border">
+                      <img src={i.logo_url} alt={i.name} className="w-6 h-6" onError={(e) => (e.currentTarget.style.display = 'none')} />
+                    </div>
+                    <div>
+                      <p className="text-sm font-semibold">{i.name}</p>
+                      <p className="text-[11px] text-text-muted">{i.category}</p>
+                    </div>
+                  </div>
+                  <p className="text-xs text-text-secondary leading-relaxed line-clamp-2 mb-4">{i.description}</p>
+                  <div className="flex items-center justify-between pt-3 border-t border-border">
+                    <span className="text-[11px] text-text-muted">{i.tool_count} tools</span>
+                    <span className={`text-[11px] px-2 py-0.5 rounded font-medium ${i.auth_type === 'oauth2' ? 'bg-accent-cyan/10 text-accent-cyanLight' : 'bg-accent-green/10 text-accent-green'}`}>
+                      {i.auth_type}
+                    </span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </main>
+    </div>
+  )
+}

frontend/_src/app/globals.css ADDED Viewed

	@@ -0,0 +1,22 @@

+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+:root {
+  --background: #09090b;
+  --foreground: #fafafa;
+}
+* { box-sizing: border-box; }
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: 'Inter', system-ui, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: #111113; }
+::-webkit-scrollbar-thumb { background: #27272a; border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: #3f3f46; }

frontend/_src/app/layout.tsx ADDED Viewed

	@@ -0,0 +1,20 @@

+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import './globals.css'
+const inter = Inter({ subsets: ['latin'], variable: '--font-inter' })
+export const metadata: Metadata = {
+  title: 'Compost - AI Tool Platform',
+  description: 'Unified AI tool integration platform',
+}
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body className={`${inter.variable} font-sans bg-bg-primary text-text-primary`}>
+        {children}
+      </body>
+    </html>
+  )
+}

frontend/_src/app/login/page.tsx ADDED Viewed

	@@ -0,0 +1,61 @@

+'use client'
+import { useState } from 'react'
+export default function LoginPage() {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError('')
+    setLoading(true)
+    try {
+      const formData = new URLSearchParams()
+      formData.append('username', email)
+      formData.append('password', password)
+      const res = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+        body: formData,
+      })
+      const data = await res.json()
+      if (!res.ok) { setError(data.detail || 'Login failed'); return }
+      localStorage.setItem('token', data.access_token)
+      localStorage.setItem('email', data.user?.email || email)
+      window.location.href = '/'
+    } catch { setError('Network error') }
+    finally { setLoading(false) }
+  }
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-bg-primary">
+      <div className="w-full max-w-sm">
+        <div className="text-center mb-8">
+          <div className="w-14 h-14 bg-accent-cyan rounded-2xl flex items-center justify-center mx-auto mb-4 font-bold text-xl text-bg-primary">C</div>
+          <h1 className="text-xl font-semibold">Compost</h1>
+          <p className="text-sm text-text-muted mt-1">AI Tool Integration Platform</p>
+        </div>
+        <div className="bg-bg-tertiary border border-border rounded-2xl p-6">
+          {error && <div className="mb-4 p-3 bg-accent-red/10 border border-accent-red/30 rounded-lg text-accent-red text-sm">{error}</div>}
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label className="block text-xs text-text-muted mb-1.5">Email</label>
+              <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} className="w-full px-3 py-2 bg-bg-secondary border border-border rounded-lg text-sm text-text-primary placeholder:text-text-dim focus:outline-none focus:border-accent-cyan" placeholder="admin@platform.local" required />
+            </div>
+            <div>
+              <label className="block text-xs text-text-muted mb-1.5">Password</label>
+              <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} className="w-full px-3 py-2 bg-bg-secondary border border-border rounded-lg text-sm text-text-primary placeholder:text-text-dim focus:outline-none focus:border-accent-cyan" placeholder="••••••••" required />
+            </div>
+            <button type="submit" disabled={loading} className="w-full py-2.5 bg-accent-cyan hover:bg-accent-cyanLight text-bg-primary font-medium text-sm rounded-lg transition-colors disabled:opacity-50">
+              {loading ? 'Signing in...' : 'Sign In'}
+            </button>
+          </form>
+        </div>
+        <p className="text-center text-xs text-text-dim mt-4">Default: admin@platform.local / admin123</p>
+      </div>
+    </div>
+  )
+}

frontend/_src/app/page.tsx ADDED Viewed

	@@ -0,0 +1,90 @@

+'use client'
+import { useEffect, useState } from 'react'
+import { Sidebar } from '@/components/sidebar'
+import { api, type Integration, type Stats } from '@/lib/api'
+import { Activity, Plug, Zap, CheckCircle, Clock } from 'lucide-react'
+export default function DashboardPage() {
+  const [integrations, setIntegrations] = useState<Integration[]>([])
+  const [stats, setStats] = useState<Stats | null>(null)
+  const [loading, setLoading] = useState(true)
+  useEffect(() => {
+    Promise.all([
+      api.get<Integration[]>('/api/apps').catch(() => []),
+      api.get<Stats>('/api/analytics/overview').catch(() => null),
+    ]).then(([apps, s]) => {
+      setIntegrations(apps)
+      setStats(s)
+      setLoading(false)
+    })
+  }, [])
+  const metrics = [
+    { label: 'Total Executions', value: stats?.total_executions ?? 0, icon: Activity, color: 'text-accent-cyan' },
+    { label: 'Integrations', value: integrations.length, icon: Plug, color: 'text-accent-green' },
+    { label: 'Success Rate', value: `${stats?.success_rate ?? 100}%`, icon: CheckCircle, color: 'text-accent-blue' },
+    { label: 'Avg Latency', value: `${stats?.avg_latency_ms ?? 0}ms`, icon: Clock, color: 'text-accent-amber' },
+  ]
+  return (
+    <div className="flex min-h-screen">
+      <Sidebar integrationCount={integrations.length} />
+      <main className="flex-1 flex flex-col">
+        <header className="h-14 bg-bg-secondary border-b border-border flex items-center px-6">
+          <h1 className="text-base font-medium">Dashboard</h1>
+        </header>
+        <div className="flex-1 p-6 space-y-6 overflow-auto">
+          <div className="grid grid-cols-4 gap-4">
+            {metrics.map((m) => (
+              <div key={m.label} className="bg-bg-tertiary border border-border rounded-xl p-5">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <p className="text-sm text-text-muted">{m.label}</p>
+                    <p className="text-2xl font-bold mt-1">{loading ? '...' : m.value}</p>
+                  </div>
+                  <m.icon className={`w-5 h-5 ${m.color}`} />
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="bg-bg-tertiary border border-border rounded-xl p-6">
+            <h3 className="text-sm font-medium mb-4">Quick Connect</h3>
+            {loading ? (
+              <p className="text-text-muted text-sm">Loading...</p>
+            ) : integrations.length === 0 ? (
+              <div className="text-center py-12">
+                <p className="text-text-muted">No integrations yet</p>
+                <p className="text-text-dim text-sm mt-1">Set COMPOSIO_API_KEY to sync all 1000+ tools</p>
+              </div>
+            ) : (
+              <div className="grid grid-cols-4 gap-4">
+                {integrations.slice(0, 8).map((i) => (
+                  <div key={i.id} className="bg-bg-secondary border border-border rounded-lg p-4 hover:border-accent-cyan/40 transition-colors">
+                    <div className="flex items-center gap-3 mb-3">
+                      <div className="w-9 h-9 bg-bg-tertiary rounded-lg flex items-center justify-center overflow-hidden">
+                        <img src={i.logo_url} alt={i.name} className="w-5 h-5" onError={(e) => (e.currentTarget.style.display = 'none')} />
+                      </div>
+                      <div>
+                        <p className="text-sm font-medium">{i.name}</p>
+                        <p className="text-[11px] text-text-muted">{i.category}</p>
+                      </div>
+                    </div>
+                    <div className="flex items-center justify-between pt-3 border-t border-border">
+                      <span className="text-[11px] text-text-muted">{i.tool_count} tools</span>
+                      <span className={`text-[11px] px-2 py-0.5 rounded ${i.auth_type === 'oauth2' ? 'bg-accent-cyan/10 text-accent-cyanLight' : 'bg-accent-green/10 text-accent-green'}`}>
+                        {i.auth_type}
+                      </span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </main>
+    </div>
+  )
+}

frontend/_src/app/settings/page.tsx ADDED Viewed

	@@ -0,0 +1,40 @@

+'use client'
+import { Sidebar } from '@/components/sidebar'
+import { Server, Database, Shield } from 'lucide-react'
+export default function SettingsPage() {
+  return (
+    <div className="flex min-h-screen">
+      <Sidebar />
+      <main className="flex-1 flex flex-col">
+        <header className="h-14 bg-bg-secondary border-b border-border flex items-center px-6">
+          <h1 className="text-base font-medium">Settings</h1>
+        </header>
+        <div className="flex-1 p-6 space-y-4 overflow-auto">
+          <div className="bg-bg-tertiary border border-border rounded-xl p-5">
+            <div className="flex items-center gap-3 mb-4"><Server className="w-5 h-5 text-accent-cyan" /><h3 className="text-sm font-medium">System</h3></div>
+            <div className="space-y-3 text-sm">
+              <div className="flex justify-between"><span className="text-text-muted">Version</span><span>1.0.0</span></div>
+              <div className="flex justify-between"><span className="text-text-muted">Data Dir</span><span className="font-mono">/data</span></div>
+            </div>
+          </div>
+          <div className="bg-bg-tertiary border border-border rounded-xl p-5">
+            <div className="flex items-center gap-3 mb-4"><Database className="w-5 h-5 text-accent-green" /><h3 className="text-sm font-medium">Database</h3></div>
+            <div className="space-y-3 text-sm">
+              <div className="flex justify-between"><span className="text-text-muted">Engine</span><span>SQLite</span></div>
+              <div className="flex justify-between"><span className="text-text-muted">Path</span><span className="font-mono">/data/platform.db</span></div>
+            </div>
+          </div>
+          <div className="bg-bg-tertiary border border-border rounded-xl p-5">
+            <div className="flex items-center gap-3 mb-4"><Shield className="w-5 h-5 text-accent-amber" /><h3 className="text-sm font-medium">Security</h3></div>
+            <div className="space-y-3 text-sm">
+              <div className="flex justify-between"><span className="text-text-muted">Auth</span><span>JWT (HS256)</span></div>
+              <div className="flex justify-between"><span className="text-text-muted">Vault</span><span>AES-256-GCM</span></div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  )
+}

frontend/_src/app/tools/page.tsx ADDED Viewed

	@@ -0,0 +1,64 @@

+'use client'
+import { useEffect, useState } from 'react'
+import { Sidebar } from '@/components/sidebar'
+import { api, type Tool } from '@/lib/api'
+import { Search, Play } from 'lucide-react'
+export default function ToolsPage() {
+  const [tools, setTools] = useState<Tool[]>([])
+  const [loading, setLoading] = useState(true)
+  const [search, setSearch] = useState('')
+  useEffect(() => {
+    api.get<Tool[]>('/api/tools')
+      .then((data) => { setTools(data); setLoading(false) })
+      .catch(() => setLoading(false))
+  }, [])
+  const filtered = tools.filter((t) =>
+    !search || t.name.toLowerCase().includes(search.toLowerCase()) || t.description.toLowerCase().includes(search.toLowerCase())
+  )
+  return (
+    <div className="flex min-h-screen">
+      <Sidebar />
+      <main className="flex-1 flex flex-col">
+        <header className="h-14 bg-bg-secondary border-b border-border flex items-center px-6 justify-between">
+          <h1 className="text-base font-medium">Tools</h1>
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-dim" />
+            <input className="pl-9 pr-4 py-1.5 bg-bg-tertiary border border-border rounded-lg text-sm text-text-primary placeholder:text-text-dim focus:outline-none focus:border-accent-cyan w-64" placeholder="Search tools..." value={search} onChange={(e) => setSearch(e.target.value)} />
+          </div>
+        </header>
+        <div className="flex-1 p-6 overflow-auto">
+          {loading ? (
+            <div className="space-y-2">{Array.from({ length: 10 }).map((_, i) => <div key={i} className="bg-bg-tertiary border border-border rounded-lg p-4 animate-pulse"><div className="h-3 bg-bg-hover rounded w-32 mb-2" /><div className="h-2 bg-bg-hover rounded w-full" /></div>)}</div>
+          ) : filtered.length === 0 ? (
+            <div className="text-center py-20"><p className="text-text-muted">No tools found</p></div>
+          ) : (
+            <div className="space-y-2">
+              {filtered.map((t) => (
+                <div key={t.id} className="bg-bg-tertiary border border-border rounded-lg p-4 flex items-center justify-between hover:border-border-focus transition-colors">
+                  <div className="flex items-center gap-4">
+                    <div className="w-8 h-8 bg-bg-secondary border border-border rounded-lg flex items-center justify-center">
+                      <Play className="w-3.5 h-3.5 text-text-muted" />
+                    </div>
+                    <div>
+                      <p className="text-sm font-medium">{t.name}</p>
+                      <p className="text-xs text-text-muted">{t.description}</p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <span className="text-[11px] bg-bg-secondary border border-border px-2 py-0.5 rounded text-text-muted">{t.integration_id}</span>
+                    <span className="text-[11px] text-text-dim">{t.category}</span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </main>
+    </div>
+  )
+}

frontend/_src/components/sidebar.tsx ADDED Viewed

	@@ -0,0 +1,93 @@

+'use client'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { LayoutDashboard, Plug, Wrench, Key, BarChart3, Settings, LogOut, ExternalLink } from 'lucide-react'
+import { cn } from '@/lib/utils'
+const navItems = [
+  { href: '/', icon: LayoutDashboard, label: 'Dashboard' },
+  { href: '/apps', icon: Plug, label: 'Apps' },
+  { href: '/tools', icon: Wrench, label: 'Tools' },
+]
+const configItems = [
+  { href: '/api-keys', icon: Key, label: 'API Keys' },
+  { href: '/analytics', icon: BarChart3, label: 'Analytics' },
+  { href: '/settings', icon: Settings, label: 'Settings' },
+]
+export function Sidebar({ integrationCount = 0 }: { integrationCount?: number }) {
+  const pathname = usePathname()
+  return (
+    <aside className="w-60 bg-bg-secondary border-r border-border flex flex-col shrink-0">
+      <div className="px-5 py-4 border-b border-border">
+        <div className="flex items-center gap-3">
+          <div className="w-8 h-8 bg-accent-cyan rounded-lg flex items-center justify-center font-bold text-bg-primary text-sm">C</div>
+          <span className="text-base font-semibold tracking-tight">Compost</span>
+        </div>
+      </div>
+      <nav className="flex-1 px-3 py-4 space-y-1">
+        <div className="px-3 mb-2 text-[11px] font-semibold uppercase tracking-wider text-text-dim">Main</div>
+        {navItems.map((item) => (
+          <Link key={item.href} href={item.href}
+            className={cn(
+              'flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors',
+              pathname === item.href
+                ? 'bg-accent-cyan/10 text-accent-cyanLight font-medium'
+                : 'text-text-secondary hover:bg-bg-hover hover:text-text-primary'
+            )}
+          >
+            <item.icon className="w-4 h-4" />
+            {item.label}
+            {item.href === '/apps' && integrationCount > 0 && (
+              <span className="ml-auto text-[11px] bg-bg-tertiary text-text-muted px-1.5 py-0.5 rounded">{integrationCount}</span>
+            )}
+          </Link>
+        ))}
+        <div className="px-3 mt-6 mb-2 text-[11px] font-semibold uppercase tracking-wider text-text-dim">Configuration</div>
+        {configItems.map((item) => (
+          <Link key={item.href} href={item.href}
+            className={cn(
+              'flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors',
+              pathname === item.href
+                ? 'bg-accent-cyan/10 text-accent-cyanLight font-medium'
+                : 'text-text-secondary hover:bg-bg-hover hover:text-text-primary'
+            )}
+          >
+            <item.icon className="w-4 h-4" />
+            {item.label}
+          </Link>
+        ))}
+        <a href="/api/docs" target="_blank" rel="noopener noreferrer"
+          className="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-text-secondary hover:bg-bg-hover hover:text-text-primary transition-colors"
+        >
+          <ExternalLink className="w-4 h-4" />
+          API Docs
+        </a>
+      </nav>
+      <div className="px-3 py-4 border-t border-border">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2 min-w-0">
+            <div className="w-7 h-7 bg-bg-tertiary rounded-full flex items-center justify-center text-xs font-semibold shrink-0">
+              {typeof window !== 'undefined' ? (localStorage.getItem('email')?.[0]?.toUpperCase() || 'U') : 'U'}
+            </div>
+            <span className="text-xs text-text-secondary truncate">
+              {typeof window !== 'undefined' ? localStorage.getItem('email') || 'User' : 'User'}
+            </span>
+          </div>
+          <button onClick={() => { localStorage.removeItem('token'); localStorage.removeItem('email'); window.location.href = '/login' }}
+            className="p-1.5 text-text-muted hover:text-accent-red hover:bg-accent-red/10 rounded-lg transition-colors"
+          >
+            <LogOut className="w-3.5 h-3.5" />
+          </button>
+        </div>
+      </div>
+    </aside>
+  )
+}

frontend/_src/lib/api.ts ADDED Viewed

	@@ -0,0 +1,55 @@

+export interface Integration {
+  id: string
+  name: string
+  description: string
+  logo_url: string
+  category: string
+  auth_type: string
+  tool_count: number
+  trigger_count: number
+  is_active: boolean
+}
+export interface Tool {
+  id: string
+  integration_id: string
+  name: string
+  description: string
+  input_schema: Record<string, unknown>
+  output_schema?: Record<string, unknown>
+  category: string
+  is_active: boolean
+}
+export interface Stats {
+  total_executions: number
+  successful: number
+  failed: number
+  success_rate: number
+  avg_latency_ms: number
+}
+const API_BASE = typeof window !== 'undefined' ? '' : process.env.NEXT_PUBLIC_API_URL || ''
+async function fetchApi(path: string, opts: RequestInit = {}) {
+  const token = typeof window !== 'undefined' ? localStorage.getItem('token') : null
+  const headers: Record<string, string> = { 'Content-Type': 'application/json' }
+  if (token) headers['Authorization'] = `Bearer ${token}`
+  const res = await fetch(`${API_BASE}${path}`, { ...opts, headers })
+  if (res.status === 401) {
+    if (typeof window !== 'undefined') {
+      localStorage.removeItem('token')
+      window.location.href = '/login'
+    }
+    throw new Error('Unauthorized')
+  }
+  return res.json()
+}
+export const api = {
+  get: <T>(path: string) => fetchApi(path) as Promise<T>,
+  post: <T>(path: string, body?: unknown) =>
+    fetchApi(path, { method: 'POST', body: body ? JSON.stringify(body) : undefined }) as Promise<T>,
+  delete: <T>(path: string) => fetchApi(path, { method: 'DELETE' }) as Promise<T>,
+}

frontend/_src/lib/utils.ts ADDED Viewed

	@@ -0,0 +1,6 @@

+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}