@inkeep/agents-manage-ui 0.37.1 → 0.37.2

package/.next/standalone/agents-manage-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkeep/agents-manage-ui",
-  "version": "0.37.1",
+  "version": "0.37.2",
   "license": "SEE LICENSE IN LICENSE.md",
   "main": "index.js",
   "types": "index.d.ts",

package/.next/standalone/package.json

@@ -61,7 +61,8 @@
   "dependencies": {
     "npm-run-all": "^4.1.5",
     "tsup": "^8.5.0",
-    "zod": "^4.1.12"
+    "zod": "^4.1.12",
+    "@hono/zod-openapi": "^1.1.5"
   },
   "devDependencies": {
     "@biomejs/biome": "2.2.4",

package/.next/standalone/packages/agents-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkeep/agents-core",
-  "version": "0.37.1",
+  "version": "0.37.2",
   "description": "Agents Core contains the database schema, types, and validation schemas for Inkeep Agent Framework, along with core components.",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -89,9 +89,7 @@
     "pg": "^8.16.3",
     "pino": "^9.11.0",
     "pino-pretty": "^13.1.1",
-    "ts-pattern": "^5.7.1",
-    "@hono/zod-openapi": "^1.1.5",
-    "zod": "^4.1.11"
+    "ts-pattern": "^5.7.1"
   },
   "peerDependencies": {
     "@hono/zod-openapi": "^1.1.5",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkeep/agents-manage-ui",
-  "version": "0.37.1",
+  "version": "0.37.2",
   "license": "SEE LICENSE IN LICENSE.md",
   "main": "index.js",
   "types": "index.d.ts",
@@ -95,9 +95,9 @@
     "use-stick-to-bottom": "^1.1.1",
     "zod": "^4.1.11",
     "zustand": "^5.0.7",
-    "@inkeep/agents-core": "^0.37.1",
-    "@inkeep/agents-manage-api": "^0.37.1",
-    "@inkeep/agents-run-api": "^0.37.1"
+    "@inkeep/agents-core": "^0.37.2",
+    "@inkeep/agents-manage-api": "^0.37.2",
+    "@inkeep/agents-run-api": "^0.37.2"
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",

package/src/app/[tenantId]/settings/error.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import FullPageError from '@/components/errors/full-page-error';
+
+export default function SettingsErrorBoundary({
+  error,
+  reset,
+}: {
+  error: Error & { cause?: { code: string; status: number; message: string } };
+  reset: () => void;
+}) {
+  if (process.env.NEXT_PUBLIC_CI === 'true') {
+    throw error;
+  }
+  return (
+    <FullPageError
+      error={error}
+      title="Something went wrong."
+      description="An unexpected error occurred. Please try again."
+      reset={reset}
+    />
+  );
+}
+

package/src/app/[tenantId]/settings/loading.tsx

@@ -0,0 +1,20 @@
+import { BodyTemplate } from '@/components/layout/body-template';
+import { MainContent } from '@/components/layout/main-content';
+import { PageHeader } from '@/components/layout/page-header';
+import { Skeleton } from '@/components/ui/skeleton';
+
+export default function Loading() {
+  return (
+    <BodyTemplate>
+      <MainContent>
+        <PageHeader title="Organization Settings" description="Manage your organization settings" />
+        <div className="space-y-6">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <Skeleton key={`loading-skeleton-${i}`} className="h-24 w-full rounded-lg" />
+          ))}
+        </div>
+      </MainContent>
+    </BodyTemplate>
+  );
+}
+

package/src/app/[tenantId]/settings/page.tsx

@@ -0,0 +1,21 @@
+import { BodyTemplate } from '@/components/layout/body-template';
+import { MainContent } from '@/components/layout/main-content';
+import { PageHeader } from '@/components/layout/page-header';
+import { SettingsContent } from '@/components/settings/settings-content';
+
+function SettingsPage() {
+  return (
+    <BodyTemplate>
+      <MainContent>
+        <PageHeader
+          title="Organization Settings"
+          description="Manage your organization settings"
+        />
+        <SettingsContent />
+      </MainContent>
+    </BodyTemplate>
+  );
+}
+
+export default SettingsPage;
+

package/src/app/layout.tsx

@@ -34,39 +34,39 @@ export const metadata: Metadata = {
     "Inkeep's multi-agent framework enables multiple specialized AI agents to collaborate and solve complex problems through an agent-based architecture. You can define networks of agents, each with unique instructions, tools, and purposes.",
 };
 
-export default function RootLayout({ children }: LayoutProps<'/'>) {
-  const runtimeConfig: RuntimeConfig = {
-    PUBLIC_INKEEP_AGENTS_RUN_API_BYPASS_SECRET:
-      process.env.PUBLIC_INKEEP_AGENTS_RUN_API_BYPASS_SECRET ||
-      process.env.NEXT_PUBLIC_INKEEP_AGENTS_RUN_API_BYPASS_SECRET,
-    PUBLIC_INKEEP_AGENTS_MANAGE_API_URL:
-      process.env.PUBLIC_INKEEP_AGENTS_MANAGE_API_URL ||
-      process.env.NEXT_PUBLIC_INKEEP_AGENTS_MANAGE_API_URL ||
-      DEFAULT_INKEEP_AGENTS_MANAGE_API_URL,
-    PUBLIC_INKEEP_AGENTS_RUN_API_URL:
-      process.env.PUBLIC_INKEEP_AGENTS_RUN_API_URL ||
-      process.env.NEXT_PUBLIC_INKEEP_AGENTS_RUN_API_URL ||
-      DEFAULT_INKEEP_AGENTS_RUN_API_URL,
-    PUBLIC_SIGNOZ_URL:
-      process.env.PUBLIC_SIGNOZ_URL || process.env.NEXT_PUBLIC_SIGNOZ_URL || DEFAULT_SIGNOZ_URL,
-    PUBLIC_NANGO_SERVER_URL:
-      process.env.PUBLIC_NANGO_SERVER_URL ||
-      process.env.NEXT_PUBLIC_NANGO_SERVER_URL ||
-      DEFAULT_NANGO_SERVER_URL,
-    PUBLIC_NANGO_CONNECT_BASE_URL:
-      process.env.PUBLIC_NANGO_CONNECT_BASE_URL ||
-      process.env.NEXT_PUBLIC_NANGO_CONNECT_BASE_URL ||
-      DEFAULT_NANGO_CONNECT_BASE_URL,
-    PUBLIC_INKEEP_COPILOT_AGENT_ID: process.env.PUBLIC_INKEEP_COPILOT_AGENT_ID,
-    PUBLIC_INKEEP_COPILOT_PROJECT_ID: process.env.PUBLIC_INKEEP_COPILOT_PROJECT_ID,
-    PUBLIC_INKEEP_COPILOT_TENANT_ID: process.env.PUBLIC_INKEEP_COPILOT_TENANT_ID,
-    PUBLIC_AUTH0_DOMAIN: process.env.PUBLIC_AUTH0_DOMAIN || process.env.NEXT_PUBLIC_AUTH0_DOMAIN,
-    PUBLIC_GOOGLE_CLIENT_ID:
-      process.env.PUBLIC_GOOGLE_CLIENT_ID || process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID,
-    PUBLIC_DISABLE_AUTH:
-      process.env.PUBLIC_DISABLE_AUTH || process.env.NEXT_PUBLIC_DISABLE_AUTH || 'true',
-  };
+const runtimeConfig: RuntimeConfig = {
+  PUBLIC_INKEEP_AGENTS_RUN_API_BYPASS_SECRET:
+    process.env.PUBLIC_INKEEP_AGENTS_RUN_API_BYPASS_SECRET ||
+    process.env.NEXT_PUBLIC_INKEEP_AGENTS_RUN_API_BYPASS_SECRET,
+  PUBLIC_INKEEP_AGENTS_MANAGE_API_URL:
+    process.env.PUBLIC_INKEEP_AGENTS_MANAGE_API_URL ||
+    process.env.NEXT_PUBLIC_INKEEP_AGENTS_MANAGE_API_URL ||
+    DEFAULT_INKEEP_AGENTS_MANAGE_API_URL,
+  PUBLIC_INKEEP_AGENTS_RUN_API_URL:
+    process.env.PUBLIC_INKEEP_AGENTS_RUN_API_URL ||
+    process.env.NEXT_PUBLIC_INKEEP_AGENTS_RUN_API_URL ||
+    DEFAULT_INKEEP_AGENTS_RUN_API_URL,
+  PUBLIC_SIGNOZ_URL:
+    process.env.PUBLIC_SIGNOZ_URL || process.env.NEXT_PUBLIC_SIGNOZ_URL || DEFAULT_SIGNOZ_URL,
+  PUBLIC_NANGO_SERVER_URL:
+    process.env.PUBLIC_NANGO_SERVER_URL ||
+    process.env.NEXT_PUBLIC_NANGO_SERVER_URL ||
+    DEFAULT_NANGO_SERVER_URL,
+  PUBLIC_NANGO_CONNECT_BASE_URL:
+    process.env.PUBLIC_NANGO_CONNECT_BASE_URL ||
+    process.env.NEXT_PUBLIC_NANGO_CONNECT_BASE_URL ||
+    DEFAULT_NANGO_CONNECT_BASE_URL,
+  PUBLIC_INKEEP_COPILOT_AGENT_ID: process.env.PUBLIC_INKEEP_COPILOT_AGENT_ID,
+  PUBLIC_INKEEP_COPILOT_PROJECT_ID: process.env.PUBLIC_INKEEP_COPILOT_PROJECT_ID,
+  PUBLIC_INKEEP_COPILOT_TENANT_ID: process.env.PUBLIC_INKEEP_COPILOT_TENANT_ID,
+  PUBLIC_AUTH0_DOMAIN: process.env.PUBLIC_AUTH0_DOMAIN || process.env.NEXT_PUBLIC_AUTH0_DOMAIN,
+  PUBLIC_GOOGLE_CLIENT_ID:
+    process.env.PUBLIC_GOOGLE_CLIENT_ID || process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID,
+  PUBLIC_DISABLE_AUTH:
+    process.env.PUBLIC_DISABLE_AUTH || process.env.NEXT_PUBLIC_DISABLE_AUTH || 'true',
+};
 
+export default function RootLayout({ children }: LayoutProps<'/'>) {
   return (
     <html lang="en" suppressHydrationWarning>
       <body

package/src/components/agent/agent.tsx

@@ -133,7 +133,8 @@ export const Agent: FC<AgentProps> = ({
   credentialLookup = {},
 }) => {
   const [showPlayground, setShowPlayground] = useState(false);
-  const { isOpen: isCopilotChatOpen } = useCopilotContext();
+  const { isOpen: isCopilotChatOpen, isCopilotConfigured } = useCopilotContext();
+
   const router = useRouter();
 
   const { tenantId, projectId } = useParams<{
@@ -378,6 +379,11 @@ export const Agent: FC<AgentProps> = ({
       agentToolConfigLookup
     );
 
+    // After initialization, if there are no nodes and copilot is not configured, auto-add initial node
+    if (agentNodes.length === 0 && !isCopilotConfigured) {
+      onAddInitialNode();
+    }
+
     return () => {
       // we need to reset the agent store when the component unmounts otherwise the agent store will persist the changes from the previous agent
       reset();
@@ -670,6 +676,7 @@ export const Agent: FC<AgentProps> = ({
       selected: true,
     };
     clearSelection();
+    markUnsaved();
     commandManager.execute(new AddNodeCommand(newNode as Node));
     // Wait for sidebar to open (350ms for CSS transition) then center the node
     setTimeout(() => {
@@ -679,7 +686,7 @@ export const Agent: FC<AgentProps> = ({
         nodes: [newNode],
       });
     }, 350);
-  }, [clearSelection, initialNode, fitView]);
+  }, [clearSelection, initialNode, fitView, markUnsaved]);
 
   const onSelectionChange = useCallback(
     ({ nodes, edges }: { nodes: Node[]; edges: Edge[] }) => {
@@ -1015,7 +1022,10 @@ export const Agent: FC<AgentProps> = ({
   const [showTraces, setShowTraces] = useState(false);
   const isMounted = useIsMounted();
 
-  const showEmptyState = useMemo(() => nodes.length === 0, [nodes]);
+  const showEmptyState = useMemo(
+    () => nodes.length === 0 && isCopilotConfigured,
+    [nodes, isCopilotConfigured]
+  );
 
   return (
     <ResizablePanelGroup

package/src/components/agent/copilot/copilot-chat.tsx

@@ -2,8 +2,12 @@
 
 import { InkeepSidebarChat } from '@inkeep/agents-ui';
 import type { InkeepCallbackEvent } from '@inkeep/agents-ui/types';
+import { AlertCircle, Loader2, RefreshCw } from 'lucide-react';
 import { useEffect, useState } from 'react';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
 import { useRuntimeConfig } from '@/contexts/runtime-config-context';
+import { useCopilotToken } from '@/hooks/use-copilot-token';
 import { useOAuthLogin } from '@/hooks/use-oauth-login';
 import { generateId } from '@/lib/utils/id-utils';
 import { useCopilotContext } from './copilot-context';
@@ -57,12 +61,19 @@ export function CopilotChat({ agentId, tenantId, projectId, refreshAgentGraph }:
 
   const {
     PUBLIC_INKEEP_AGENTS_RUN_API_URL,
-    PUBLIC_INKEEP_AGENTS_RUN_API_BYPASS_SECRET,
     PUBLIC_INKEEP_COPILOT_AGENT_ID,
     PUBLIC_INKEEP_COPILOT_PROJECT_ID,
     PUBLIC_INKEEP_COPILOT_TENANT_ID,
   } = useRuntimeConfig();
 
+  const {
+    apiKey: copilotToken,
+    isLoading: isLoadingToken,
+    error: tokenError,
+    retryCount,
+    refresh: refreshToken,
+  } = useCopilotToken();
+
   if (
     !PUBLIC_INKEEP_COPILOT_AGENT_ID ||
     !PUBLIC_INKEEP_COPILOT_PROJECT_ID ||
@@ -74,6 +85,47 @@ export function CopilotChat({ agentId, tenantId, projectId, refreshAgentGraph }:
     return null;
   }
 
+  // Show error state when token fetch failed
+  if (tokenError && !isLoadingToken) {
+    const isConfigError = tokenError.message?.includes('not configured');
+    return (
+      <div className="p-4">
+        <Alert variant="destructive">
+          <AlertCircle className="h-4 w-4" />
+          <AlertTitle>Agent Editor Unavailable</AlertTitle>
+          <AlertDescription className="mt-2">
+            <p className="mb-3">
+              {isConfigError
+                ? tokenError.message
+                : 'Unable to connect to the Agent Editor. This may be due to a temporary network issue.'}
+            </p>
+            {!isConfigError && (
+              <Button variant="outline" size="sm" onClick={() => refreshToken()} className="gap-2">
+                <RefreshCw className="h-4 w-4" />
+                Try Again
+              </Button>
+            )}
+          </AlertDescription>
+        </Alert>
+      </div>
+    );
+  }
+
+  // Show loading state (including retries)
+  if (isLoadingToken) {
+    return (
+      <div className="flex items-center justify-center p-4 text-muted-foreground">
+        <Loader2 className="h-4 w-4 animate-spin mr-2" />
+        <span>{retryCount > 0 ? `Reconnecting (attempt ${retryCount}/3)...` : 'Loading...'}</span>
+      </div>
+    );
+  }
+
+  // Token not available (shouldn't happen if no error, but safety check)
+  if (!copilotToken) {
+    return null;
+  }
+
   return (
     <div className="h-full flex flex-row gap-4">
       <div className="flex-1 min-w-0 h-full">
@@ -165,7 +217,7 @@ export function CopilotChat({ agentId, tenantId, projectId, refreshAgentGraph }:
             agentUrl: `${PUBLIC_INKEEP_AGENTS_RUN_API_URL}/api/chat`,
             headers: {
               'x-emit-operations': 'true',
-              Authorization: `Bearer ${PUBLIC_INKEEP_AGENTS_RUN_API_BYPASS_SECRET}`,
+              Authorization: `Bearer ${copilotToken}`,
               'x-inkeep-tenant-id': PUBLIC_INKEEP_COPILOT_TENANT_ID,
               'x-inkeep-project-id': PUBLIC_INKEEP_COPILOT_PROJECT_ID,
               'x-inkeep-agent-id': PUBLIC_INKEEP_COPILOT_AGENT_ID,

package/src/components/agent/copilot/copilot-context.tsx

@@ -3,6 +3,8 @@
 import type { AIChatFunctions } from '@inkeep/agents-ui/types';
 import { createContext, type ReactNode, type RefObject, useContext, useRef, useState } from 'react';
 
+import { useRuntimeConfig } from '@/contexts/runtime-config-context';
+
 interface CopilotContextHeaders {
   messageId?: string;
   conversationId?: string;
@@ -17,6 +19,7 @@ interface CopilotContextValue {
   openCopilot: () => void;
   dynamicHeaders: CopilotContextHeaders;
   setDynamicHeaders: (headers: CopilotContextHeaders) => void;
+  isCopilotConfigured: boolean;
 }
 
 const CopilotContext = createContext<CopilotContextValue | null>(null);
@@ -27,6 +30,21 @@ export function CopilotProvider({ children }: { children: ReactNode }) {
   const chatFunctionsRef = useRef<AIChatFunctions | null>(null);
   const [dynamicHeaders, setDynamicHeaders] = useState<CopilotContextHeaders>({});
 
+  const {
+    PUBLIC_INKEEP_COPILOT_AGENT_ID,
+    PUBLIC_INKEEP_COPILOT_PROJECT_ID,
+    PUBLIC_INKEEP_COPILOT_TENANT_ID,
+  } = useRuntimeConfig();
+  const isCopilotConfigured = !!(
+    PUBLIC_INKEEP_COPILOT_AGENT_ID &&
+    PUBLIC_INKEEP_COPILOT_PROJECT_ID &&
+    PUBLIC_INKEEP_COPILOT_TENANT_ID
+  );
+
+  if (!isCopilotConfigured) {
+    console.warn('Copilot is not configured.');
+  }
+
   const openCopilot = () => setIsOpen(true);
 
   return (
@@ -40,6 +58,7 @@ export function CopilotProvider({ children }: { children: ReactNode }) {
         openCopilot,
         dynamicHeaders,
         setDynamicHeaders,
+        isCopilotConfigured,
       }}
     >
       {children}

package/src/components/agent/node-library/copilot-trigger.tsx

@@ -1,24 +1,16 @@
 import { SparklesIcon } from 'lucide-react';
 import { useParams } from 'next/navigation';
 import { Button } from '@/components/ui/button';
-import { useRuntimeConfig } from '@/contexts/runtime-config-context';
 import { useCopilotContext } from '../copilot/copilot-context';
 
 export function CopilotTrigger() {
-  const { openCopilot } = useCopilotContext();
+  const { openCopilot, isCopilotConfigured } = useCopilotContext();
   const { agentId } = useParams<{ agentId?: string }>();
-  const {
-    PUBLIC_INKEEP_COPILOT_AGENT_ID,
-    PUBLIC_INKEEP_COPILOT_PROJECT_ID,
-    PUBLIC_INKEEP_COPILOT_TENANT_ID,
-  } = useRuntimeConfig();
-  if (
-    !PUBLIC_INKEEP_COPILOT_AGENT_ID ||
-    !PUBLIC_INKEEP_COPILOT_PROJECT_ID ||
-    !PUBLIC_INKEEP_COPILOT_TENANT_ID
-  ) {
+
+  if (!isCopilotConfigured) {
     return null;
   }
+
   return (
     <Button
       className="normal-case justify-start font-sans dark:bg-input/30 dark:border-input dark:hover:bg-input/50 backdrop-blur-3xl"

package/src/components/auth/org-menu.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import { Building2, Settings } from 'lucide-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { useAuthSession } from '@/hooks/use-auth';
+import { useAuthClient } from '@/lib/auth-client';
+
+export function OrgMenu() {
+  const { user, isLoading } = useAuthSession();
+  const authClient = useAuthClient();
+  const router = useRouter();
+  const { tenantId } = useParams<{ tenantId: string }>();
+  const [organizationName, setOrganizationName] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function fetchOrganization() {
+      if (!tenantId) return;
+
+      try {
+        const result = await authClient.organization.getFullOrganization({
+          query: {
+            organizationId: tenantId,
+          },
+        });
+
+        if (result?.data?.name) {
+          setOrganizationName(result.data.name);
+        }
+      } catch (error) {
+        console.error('Failed to fetch organization:', error);
+      }
+    }
+
+    fetchOrganization();
+  }, [tenantId, authClient]);
+
+  if (isLoading || !user || !tenantId) {
+    return null;
+  }
+
+  const handleSettings = () => {
+    router.push(`/${tenantId}/settings`);
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-7 gap-2 px-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sidebar-foreground/80 dark:text-sidebar-foreground normal-case"
+        >
+          <Building2 className="h-4 w-4" />
+          <span className="text-xs font-medium normal-case">
+            {organizationName ?? ''}
+          </span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuLabel className="font-normal">
+          <div className="flex flex-col space-y-1">
+            <p className="text-xs text-muted-foreground">{organizationName || ''}</p>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={handleSettings} className="gap-2">
+          <Settings className="h-4 w-4" />
+          Settings
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+

package/src/components/layout/site-header.tsx

@@ -3,6 +3,7 @@ import type { BreadcrumbItem } from '@/components/ui/breadcrumbs';
 import { Breadcrumbs } from '@/components/ui/breadcrumbs';
 import { Separator } from '@/components/ui/separator';
 import { SidebarTrigger } from '@/components/ui/sidebar';
+import { OrgMenu } from '../auth/org-menu';
 import { UserMenu } from '../auth/user-menu';
 
 export function SiteHeader({ breadcrumbs }: { breadcrumbs?: BreadcrumbItem[] }) {
@@ -12,8 +13,9 @@ export function SiteHeader({ breadcrumbs }: { breadcrumbs?: BreadcrumbItem[] })
       <Separator orientation="vertical" className="mx-2 data-[orientation=vertical]:h-4" />
       <Breadcrumbs items={breadcrumbs} />
       <Separator orientation="vertical" className="mx-2 data-[orientation=vertical]:h-4 ml-auto" />
-      <ThemeToggle />
+      <OrgMenu />
       <UserMenu />
+      <ThemeToggle />
     </header>
   );
 }

package/src/components/settings/settings-content.tsx

@@ -0,0 +1,111 @@
+'use client';
+
+import { useParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useAuthClient } from '@/lib/auth-client';
+
+type FullOrganization = NonNullable<
+  Awaited<ReturnType<ReturnType<typeof useAuthClient>['organization']['getFullOrganization']>>['data']
+>;
+
+export function SettingsContent() {
+  const authClient = useAuthClient();
+  const { tenantId } = useParams<{ tenantId: string }>();
+  const [organization, setOrganization] = useState<FullOrganization | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function fetchOrganization() {
+      if (!tenantId) return;
+
+      try {
+        const { data, error } = await authClient.organization.getFullOrganization({
+          query: {
+            organizationId: tenantId,
+            membersLimit: 100,
+          },
+        });
+
+        if (error) {
+          setError(error.message || 'Failed to fetch organization');
+          return;
+        }
+
+        if (data) {
+          setOrganization(data);
+        }
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to fetch organization');
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchOrganization();
+  }, [tenantId, authClient]);
+
+  if (loading) {
+    return (
+      <div className="space-y-6">
+        <Skeleton className="h-32 w-full rounded-lg" />
+        <Skeleton className="h-64 w-full rounded-lg" />
+      </div>
+    );
+  }
+
+  if (error || !organization) {
+    return (
+      <Card className="border bg-background shadow-none rounded-lg">
+        <CardContent className="py-8">
+          <p className="text-sm text-destructive">{error || 'Failed to load organization'}</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <Card className="border bg-background shadow-none rounded-lg">
+        <CardHeader>
+          <CardTitle>Organization Details</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div>
+            <p className="text-sm font-medium">Name</p>
+            <p className="text-sm text-muted-foreground">{organization.name}</p>
+          </div>
+          <div>
+            <p className="text-sm font-medium">ID</p>
+            <p className="text-xs text-muted-foreground font-mono">{organization.id}</p>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className="border bg-background shadow-none rounded-lg">
+        <CardHeader>
+          <CardTitle>Members ({organization.members.length})</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-3">
+            {organization.members.map((member: FullOrganization['members'][number]) => (
+              <div
+                key={member.id}
+                className="flex items-center justify-between py-2 border-b last:border-0"
+              >
+                <div>
+                  <p className="text-sm font-medium">
+                    {member.user.name || member.user.email}
+                  </p>
+                  <p className="text-xs text-muted-foreground">{member.user.email}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}