Major update to Apps page. Add instance switcher.

package.json

@@ -32,6 +32,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-hook-form": "^7.58.1",
+    "react-markdown": "^10.1.0",
     "react-router": "^7.9.4",
     "react-router-dom": "^7.9.4",
     "tailwind-merge": "^3.3.1",
@@ -40,6 +41,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",
+    "@tailwindcss/typography": "^0.5.19",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@types/node": "^24.0.3",

src/components/AppSidebar.tsx

@@ -16,6 +16,7 @@ import {
 } from './ui/sidebar';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible';
 import { useTheme } from '../contexts/ThemeContext';
+import { InstanceSwitcher } from './InstanceSwitcher';
 
 export function AppSidebar() {
   const { theme, setTheme } = useTheme();
@@ -61,15 +62,17 @@ export function AppSidebar() {
   return (
     <Sidebar variant="sidebar" collapsible="icon">
       <SidebarHeader>
-        <div className="flex items-center gap-2 px-2">
+        <div className="flex items-center gap-2 px-2 pb-2">
           <div className="p-1 bg-primary/10 rounded-lg">
             <CloudLightning className="h-6 w-6 text-primary" />
           </div>
           <div className="group-data-[collapsible=icon]:hidden">
             <h2 className="text-lg font-bold text-foreground">Wild Cloud</h2>
-            <p className="text-sm text-muted-foreground">{instanceId}</p>
           </div>
         </div>
+        <div className="px-2 group-data-[collapsible=icon]:px-2">
+          <InstanceSwitcher />
+        </div>
       </SidebarHeader>
 
       <SidebarContent>

src/components/AppsComponent.tsx

@@ -20,17 +20,22 @@ import {
   Archive,
   RotateCcw,
   Settings,
+  Eye,
 } from 'lucide-react';
 import { useInstanceContext } from '../hooks/useInstanceContext';
 import { useAvailableApps, useDeployedApps, useAppBackups } from '../hooks/useApps';
 import { BackupRestoreModal } from './BackupRestoreModal';
 import { AppConfigDialog } from './apps/AppConfigDialog';
+import { AppDetailModal } from './apps/AppDetailModal';
 import type { App } from '../services/api';
 
 interface MergedApp extends App {
   deploymentStatus?: 'added' | 'deployed';
+  url?: string;
 }
 
+type TabView = 'available' | 'installed';
+
 export function AppsComponent() {
   const { currentInstance } = useInstanceContext();
   const { data: availableAppsData, isLoading: loadingAvailable, error: availableError } = useAvailableApps();
@@ -46,6 +51,7 @@ export function AppsComponent() {
     isDeleting
   } = useDeployedApps(currentInstance);
 
+  const [activeTab, setActiveTab] = useState<TabView>('available');
   const [searchTerm, setSearchTerm] = useState('');
   const [selectedCategory, setSelectedCategory] = useState<string>('all');
   const [configDialogOpen, setConfigDialogOpen] = useState(false);
@@ -53,6 +59,8 @@ export function AppsComponent() {
   const [backupModalOpen, setBackupModalOpen] = useState(false);
   const [restoreModalOpen, setRestoreModalOpen] = useState(false);
   const [selectedAppForBackup, setSelectedAppForBackup] = useState<string | null>(null);
+  const [detailModalOpen, setDetailModalOpen] = useState(false);
+  const [selectedAppForDetail, setSelectedAppForDetail] = useState<string | null>(null);
 
   // Fetch backups for the selected app
   const {
@@ -64,18 +72,27 @@ export function AppsComponent() {
     isRestoring,
   } = useAppBackups(currentInstance, selectedAppForBackup);
 
-  // Merge available and deployed apps
+  // Merge available and deployed apps with URL from deployment
-  // DeployedApps now includes status: 'added' | 'deployed'
   const applications: MergedApp[] = (availableAppsData?.apps || []).map(app => {
     const deployedApp = deployedApps.find(d => d.name === app.name);
     return {
       ...app,
-      deploymentStatus: deployedApp?.status as 'added' | 'deployed' | undefined, // 'added' or 'deployed' from API
+      deploymentStatus: deployedApp?.status as 'added' | 'deployed' | undefined,
+      url: deployedApp?.url,
     };
   });
 
   const isLoading = loadingAvailable || loadingDeployed;
 
+  // Filter for available apps (not added or deployed)
+  const availableApps = applications.filter(app => !app.deploymentStatus);
+
+  // Filter for installed apps (added or deployed)
+  const installedApps = applications.filter(app => app.deploymentStatus);
+
+  // Count running apps - apps that are deployed (not just added)
+  const runningApps = installedApps.filter(app => app.deploymentStatus === 'deployed').length;
+
   const getStatusIcon = (status?: string) => {
     switch (status) {
       case 'running':
@@ -88,6 +105,8 @@ export function AppsComponent() {
         return <AlertCircle className="h-5 w-5 text-yellow-500" />;
       case 'added':
         return <Settings className="h-5 w-5 text-blue-500" />;
+      case 'deployed':
+        return <CheckCircle className="h-5 w-5 text-green-500" />;
       case 'available':
         return <Download className="h-5 w-5 text-muted-foreground" />;
       default:
@@ -145,12 +164,37 @@ export function AppsComponent() {
     }
   };
 
-  const handleAppAction = (app: MergedApp, action: 'configure' | 'deploy' | 'delete' | 'backup' | 'restore') => {
+  // Separate component for app icon with error handling
+  const AppIcon = ({ app }: { app: MergedApp }) => {
+    const [imageError, setImageError] = useState(false);
+
+    return (
+      <div className="h-12 w-12 rounded-lg bg-muted flex items-center justify-center overflow-hidden">
+        {app.icon && !imageError ? (
+          <img
+            src={app.icon}
+            alt={app.name}
+            className="h-full w-full object-contain p-1"
+            onError={() => setImageError(true)}
+          />
+        ) : (
+          getCategoryIcon(app.category)
+        )}
+      </div>
+    );
+  };
+
+  const handleAppAction = (app: MergedApp, action: 'configure' | 'deploy' | 'delete' | 'backup' | 'restore' | 'view') => {
     if (!currentInstance) return;
 
     switch (action) {
       case 'configure':
-        // Open config dialog for adding or reconfiguring app
+        console.log('[AppsComponent] Configuring app:', {
+          name: app.name,
+          hasDefaultConfig: !!app.defaultConfig,
+          defaultConfigKeys: app.defaultConfig ? Object.keys(app.defaultConfig) : [],
+          fullApp: app,
+        });
         setSelectedAppForConfig(app);
         setConfigDialogOpen(true);
         break;
@@ -170,19 +214,21 @@ export function AppsComponent() {
         setSelectedAppForBackup(app.name);
         setRestoreModalOpen(true);
         break;
+      case 'view':
+        setSelectedAppForDetail(app.name);
+        setDetailModalOpen(true);
+        break;
     }
   };
 
   const handleConfigSave = (config: Record<string, string>) => {
     if (!selectedAppForConfig) return;
 
-    // Call addApp with the configuration
     addApp({
       name: selectedAppForConfig.name,
       config: config,
     });
 
-    // Close dialog
     setConfigDialogOpen(false);
     setSelectedAppForConfig(null);
   };
@@ -199,15 +245,15 @@ export function AppsComponent() {
 
   const categories = ['all', 'database', 'web', 'security', 'monitoring', 'communication', 'storage'];
 
-  const filteredApps = applications.filter(app => {
+  const appsToDisplay = activeTab === 'available' ? availableApps : installedApps;
+
+  const filteredApps = appsToDisplay.filter(app => {
     const matchesSearch = app.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
                          app.description.toLowerCase().includes(searchTerm.toLowerCase());
     const matchesCategory = selectedCategory === 'all' || app.category === selectedCategory;
     return matchesSearch && matchesCategory;
   });
 
-  const runningApps = applications.filter(app => app.status?.status === 'running').length;
-
   // Show message if no instance is selected
   if (!currentInstance) {
     return (
@@ -277,6 +323,22 @@ export function AppsComponent() {
           </div>
         </div>
 
+        {/* Tab Navigation */}
+        <div className="flex gap-2 mb-6 border-b pb-4">
+          <Button
+            variant={activeTab === 'available' ? 'default' : 'outline'}
+            onClick={() => setActiveTab('available')}
+          >
+            Available Apps ({availableApps.length})
+          </Button>
+          <Button
+            variant={activeTab === 'installed' ? 'default' : 'outline'}
+            onClick={() => setActiveTab('installed')}
+          >
+            Installed Apps ({installedApps.length})
+          </Button>
+        </div>
+
         <div className="flex flex-col sm:flex-row gap-4 mb-6">
           <div className="relative flex-1">
             <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
@@ -288,14 +350,14 @@ export function AppsComponent() {
               className="w-full pl-10 pr-4 py-2 border rounded-lg bg-background"
             />
           </div>
-          <div className="flex gap-2">
+          <div className="flex gap-2 overflow-x-auto">
             {categories.map(category => (
               <Button
                 key={category}
                 variant={selectedCategory === category ? 'default' : 'outline'}
                 size="sm"
                 onClick={() => setSelectedCategory(category)}
-                className="capitalize"
+                className="capitalize whitespace-nowrap"
               >
                 {category}
               </Button>
@@ -311,7 +373,7 @@ export function AppsComponent() {
                 Loading apps...
               </span>
             ) : (
-              `${runningApps} applications running • ${applications.length} total available`
+              `${runningApps} applications running • ${installedApps.length} installed • ${availableApps.length} available`
             )}
           </div>
         </div>
@@ -322,14 +384,45 @@ export function AppsComponent() {
           <Loader2 className="h-12 w-12 text-primary mx-auto mb-4 animate-spin" />
           <p className="text-muted-foreground">Loading applications...</p>
         </Card>
+      ) : activeTab === 'available' ? (
+        // Available Apps Grid
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          {filteredApps.map((app) => (
+            <Card key={app.name} className="p-4 hover:shadow-lg transition-shadow">
+              <div className="flex flex-col gap-3">
+                <div className="flex items-start gap-3">
+                  <AppIcon app={app} />
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2 mb-1">
+                      <h3 className="font-medium truncate">{app.name}</h3>
+                    </div>
+                    {app.version && (
+                      <Badge variant="outline" className="text-xs mb-2">
+                        {app.version}
+                      </Badge>
+                    )}
+                  </div>
+                </div>
+                <p className="text-sm text-muted-foreground line-clamp-2">{app.description}</p>
+                <Button
+                  size="sm"
+                  onClick={() => handleAppAction(app, 'configure')}
+                  disabled={isAdding}
+                  className="w-full"
+                >
+                  {isAdding ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Configure & Add'}
+                </Button>
+              </div>
+            </Card>
+          ))}
+        </div>
       ) : (
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+        // Installed Apps List
+        <div className="space-y-3">
           {filteredApps.map((app) => (
             <Card key={app.name} className="p-4">
               <div className="flex items-start gap-3">
-                <div className="p-2 bg-muted rounded-lg">
+                <AppIcon app={app} />
-                  {getCategoryIcon(app.category)}
-                </div>
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center gap-2 mb-1">
                     <h3 className="font-medium truncate">{app.name}</h3>
@@ -338,10 +431,23 @@ export function AppsComponent() {
                         {app.version}
                       </Badge>
                     )}
-                    {getStatusIcon(app.status?.status)}
+                    {getStatusIcon(app.status?.status || app.deploymentStatus)}
                   </div>
                   <p className="text-sm text-muted-foreground mb-2">{app.description}</p>
 
+                  {/* Show ingress URL if available */}
+                  {app.url && (
+                    <a
+                      href={app.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="inline-flex items-center gap-1 text-xs text-primary hover:underline mb-2"
+                    >
+                      <ExternalLink className="h-3 w-3" />
+                      {app.url}
+                    </a>
+                  )}
+
                   {app.status?.status === 'running' && (
                     <div className="space-y-1 text-xs text-muted-foreground">
                       {app.status.namespace && (
@@ -350,31 +456,14 @@ export function AppsComponent() {
                       {app.status.replicas && (
                         <div>Replicas: {app.status.replicas}</div>
                       )}
-                      {app.status.resources && (
-                        <div>
-                          Resources: {app.status.resources.cpu} CPU, {app.status.resources.memory} RAM
                     </div>
                   )}
                 </div>
-                  )}
-                  {app.status?.message && (
-                    <p className="text-xs text-muted-foreground mt-1">{app.status.message}</p>
-                  )}
-                </div>
 
                 <div className="flex flex-col gap-2">
                   {getStatusBadge(app)}
                   <div className="flex flex-col gap-1">
-                    {/* Available: not added yet */}
+                    {/* Available: not added yet - shouldn't show here */}
-                    {!app.deploymentStatus && (
-                      <Button
-                        size="sm"
-                        onClick={() => handleAppAction(app, 'configure')}
-                        disabled={isAdding}
-                      >
-                        {isAdding ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Configure & Add'}
-                      </Button>
-                    )}
 
                     {/* Added: in config but not deployed */}
                     {app.deploymentStatus === 'added' && (
@@ -408,6 +497,14 @@ export function AppsComponent() {
                     {/* Deployed: running in Kubernetes */}
                     {app.deploymentStatus === 'deployed' && (
                       <>
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          onClick={() => handleAppAction(app, 'view')}
+                          title="View details"
+                        >
+                          <Eye className="h-4 w-4" />
+                        </Button>
                         {app.status?.status === 'running' && (
                           <>
                             <Button
@@ -455,7 +552,9 @@ export function AppsComponent() {
           <p className="text-muted-foreground mb-4">
             {searchTerm || selectedCategory !== 'all'
               ? 'Try adjusting your search or category filter'
-              : 'No applications available to display'
+              : activeTab === 'available'
+              ? 'All available apps have been installed'
+              : 'No apps are currently installed'
             }
           </p>
         </Card>
@@ -498,6 +597,19 @@ export function AppsComponent() {
         onSave={handleConfigSave}
         isSaving={isAdding}
       />
+
+      {/* App Detail Modal */}
+      {selectedAppForDetail && currentInstance && (
+        <AppDetailModal
+          instanceName={currentInstance}
+          appName={selectedAppForDetail}
+          open={detailModalOpen}
+          onClose={() => {
+            setDetailModalOpen(false);
+            setSelectedAppForDetail(null);
+          }}
+        />
+      )}
     </div>
   );
 }

src/components/InstanceSwitcher.tsx

@@ -0,0 +1,216 @@
+import { useState } from 'react';
+import { useNavigate, useLocation, useParams } from 'react-router';
+import { Plus } from 'lucide-react';
+import { useInstances } from '../hooks/useInstances';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  SelectSeparator,
+} from './ui/select';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from './ui/dialog';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+
+const ADD_INSTANCE_VALUE = '__add_new__';
+
+export function InstanceSwitcher() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { instanceId } = useParams<{ instanceId: string }>();
+  const { instances, isLoading, error, createInstance, isCreating } = useInstances();
+
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [newInstanceName, setNewInstanceName] = useState('');
+
+  const handleInstanceChange = (value: string) => {
+    // Check if user selected "Add new instance"
+    if (value === ADD_INSTANCE_VALUE) {
+      setDialogOpen(true);
+      return;
+    }
+
+    if (!instanceId) return;
+
+    // Extract the page path after /instances/:instanceId
+    const instancePrefix = `/instances/${instanceId}`;
+    const pagePath = location.pathname.startsWith(instancePrefix)
+      ? location.pathname.slice(instancePrefix.length)
+      : '/dashboard';
+
+    // Navigate to the same page in the new instance
+    navigate(`/instances/${value}${pagePath || '/dashboard'}`);
+  };
+
+  const handleCreateInstance = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newInstanceName.trim()) return;
+
+    createInstance(
+      { name: newInstanceName.trim() },
+      {
+        onSuccess: () => {
+          setDialogOpen(false);
+          setNewInstanceName('');
+          // Navigate to the new instance's dashboard
+          navigate(`/instances/${newInstanceName.trim()}/dashboard`);
+        },
+      }
+    );
+  };
+
+  // Loading state
+  if (isLoading) {
+    return (
+      <Select disabled value="">
+        <SelectTrigger className="h-8 text-sm">
+          <SelectValue placeholder="Loading..." />
+        </SelectTrigger>
+      </Select>
+    );
+  }
+
+  // Error state
+  if (error) {
+    return (
+      <Select disabled value="">
+        <SelectTrigger className="h-8 text-sm">
+          <SelectValue placeholder="Error loading instances" />
+        </SelectTrigger>
+      </Select>
+    );
+  }
+
+  // No instances state - show dialog immediately
+  if (!instances || instances.length === 0) {
+    return (
+      <>
+        <Select disabled value="">
+          <SelectTrigger className="h-8 text-sm">
+            <SelectValue placeholder="No instances" />
+          </SelectTrigger>
+        </Select>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => setDialogOpen(true)}
+          className="mt-2 w-full h-8 text-sm"
+        >
+          <Plus className="h-4 w-4 mr-2" />
+          Add Instance
+        </Button>
+        <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+          <DialogContent>
+            <form onSubmit={handleCreateInstance}>
+              <DialogHeader>
+                <DialogTitle>Create New Instance</DialogTitle>
+                <DialogDescription>
+                  Enter a name for your new Wild Cloud instance.
+                </DialogDescription>
+              </DialogHeader>
+              <div className="grid gap-4 py-4">
+                <div className="grid gap-2">
+                  <Label htmlFor="name">Instance Name</Label>
+                  <Input
+                    id="name"
+                    placeholder="my-instance"
+                    value={newInstanceName}
+                    onChange={(e) => setNewInstanceName(e.target.value)}
+                    disabled={isCreating}
+                    autoFocus
+                  />
+                </div>
+              </div>
+              <DialogFooter>
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => setDialogOpen(false)}
+                  disabled={isCreating}
+                >
+                  Cancel
+                </Button>
+                <Button type="submit" disabled={isCreating || !newInstanceName.trim()}>
+                  {isCreating ? 'Creating...' : 'Create Instance'}
+                </Button>
+              </DialogFooter>
+            </form>
+          </DialogContent>
+        </Dialog>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Select value={instanceId || ''} onValueChange={handleInstanceChange}>
+        <SelectTrigger className="h-8 text-sm">
+          <SelectValue placeholder="Select instance" />
+        </SelectTrigger>
+        <SelectContent>
+          {instances.map((instance) => (
+            <SelectItem key={instance} value={instance}>
+              {instance}
+            </SelectItem>
+          ))}
+          <SelectSeparator />
+          <SelectItem value={ADD_INSTANCE_VALUE}>
+            <div className="flex items-center">
+              <Plus className="h-4 w-4 mr-2" />
+              Add new instance...
+            </div>
+          </SelectItem>
+        </SelectContent>
+      </Select>
+
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <DialogContent>
+          <form onSubmit={handleCreateInstance}>
+            <DialogHeader>
+              <DialogTitle>Create New Instance</DialogTitle>
+              <DialogDescription>
+                Enter a name for your new Wild Cloud instance.
+              </DialogDescription>
+            </DialogHeader>
+            <div className="grid gap-4 py-4">
+              <div className="grid gap-2">
+                <Label htmlFor="name">Instance Name</Label>
+                <Input
+                  id="name"
+                  placeholder="my-instance"
+                  value={newInstanceName}
+                  onChange={(e) => setNewInstanceName(e.target.value)}
+                  disabled={isCreating}
+                  autoFocus
+                />
+              </div>
+            </div>
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setDialogOpen(false)}
+                disabled={isCreating}
+              >
+                Cancel
+              </Button>
+              <Button type="submit" disabled={isCreating || !newInstanceName.trim()}>
+                {isCreating ? 'Creating...' : 'Create Instance'}
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

src/components/apps/AppConfigDialog.tsx

@@ -37,6 +37,15 @@ export function AppConfigDialog({
     if (app && open) {
       const initialConfig: Record<string, string> = {};
 
+      // Debug logging to diagnose the issue
+      console.log('[AppConfigDialog] App data:', {
+        name: app.name,
+        hasDefaultConfig: !!app.defaultConfig,
+        defaultConfigKeys: app.defaultConfig ? Object.keys(app.defaultConfig) : [],
+        hasExistingConfig: !!existingConfig,
+        existingConfigKeys: existingConfig ? Object.keys(existingConfig) : [],
+      });
+
       // Start with default config
       if (app.defaultConfig) {
         Object.entries(app.defaultConfig).forEach(([key, value]) => {

src/components/apps/AppDetailModal.tsx

@@ -0,0 +1,606 @@
+import { useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { useAppEnhanced, useAppLogs, useAppEvents, useAppReadme } from '@/hooks/useApps';
+import {
+  RefreshCw,
+  Eye,
+  Settings,
+  Activity,
+  FileText,
+  ExternalLink,
+  AlertCircle,
+  CheckCircle,
+} from 'lucide-react';
+
+interface AppDetailModalProps {
+  instanceName: string;
+  appName: string;
+  open: boolean;
+  onClose: () => void;
+}
+
+type ViewMode = 'overview' | 'configuration' | 'status' | 'logs';
+
+export function AppDetailModal({
+  instanceName,
+  appName,
+  open,
+  onClose,
+}: AppDetailModalProps) {
+  const [viewMode, setViewMode] = useState<ViewMode>('overview');
+  const [showSecrets, setShowSecrets] = useState(false);
+  const [logParams, setLogParams] = useState({ tail: 100, sinceSeconds: 3600 });
+
+  const { data: appDetails, isLoading, refetch } = useAppEnhanced(instanceName, appName);
+  const { data: logs, refetch: refetchLogs } = useAppLogs(
+    instanceName,
+    appName,
+    viewMode === 'logs' ? logParams : undefined
+  );
+  const { data: eventsData } = useAppEvents(instanceName, appName, 20);
+  const { data: readmeContent, isLoading: readmeLoading } = useAppReadme(instanceName, appName);
+
+  const getPodStatusColor = (status: string) => {
+    if (status.toLowerCase().includes('running')) return 'text-green-600 dark:text-green-400';
+    if (status.toLowerCase().includes('pending')) return 'text-yellow-600 dark:text-yellow-400';
+    if (status.toLowerCase().includes('failed')) return 'text-red-600 dark:text-red-400';
+    return 'text-muted-foreground';
+  };
+
+  const getStatusBadge = (status: string) => {
+    const variants: Record<string, 'success' | 'destructive' | 'warning' | 'outline'> = {
+      running: 'success',
+      error: 'destructive',
+      deploying: 'outline',
+      stopped: 'warning',
+      added: 'outline',
+      deployed: 'outline',
+    };
+
+    return (
+      <Badge variant={variants[status] || 'outline'}>
+        {status.charAt(0).toUpperCase() + status.slice(1)}
+      </Badge>
+    );
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="max-w-5xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-3">
+            {appName}
+            {appDetails && getStatusBadge(appDetails.status)}
+          </DialogTitle>
+          <DialogDescription>
+            {appDetails?.description || 'Application details and configuration'}
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* View Mode Selector */}
+        <div className="flex gap-2 border-b pb-4">
+          <Button
+            variant={viewMode === 'overview' ? 'default' : 'outline'}
+            size="sm"
+            onClick={() => setViewMode('overview')}
+          >
+            <Eye className="h-4 w-4 mr-2" />
+            Overview
+          </Button>
+          <Button
+            variant={viewMode === 'configuration' ? 'default' : 'outline'}
+            size="sm"
+            onClick={() => setViewMode('configuration')}
+          >
+            <Settings className="h-4 w-4 mr-2" />
+            Configuration
+          </Button>
+          <Button
+            variant={viewMode === 'status' ? 'default' : 'outline'}
+            size="sm"
+            onClick={() => setViewMode('status')}
+          >
+            <Activity className="h-4 w-4 mr-2" />
+            Status
+          </Button>
+          <Button
+            variant={viewMode === 'logs' ? 'default' : 'outline'}
+            size="sm"
+            onClick={() => setViewMode('logs')}
+          >
+            <FileText className="h-4 w-4 mr-2" />
+            Logs
+          </Button>
+        </div>
+
+        {/* Overview Tab */}
+        {viewMode === 'overview' && (
+          <div className="space-y-4">
+            <div className="flex justify-end">
+              <Button variant="outline" size="sm" onClick={() => refetch()}>
+                <RefreshCw className="h-4 w-4 mr-2" />
+                Refresh
+              </Button>
+            </div>
+
+            {isLoading ? (
+              <div className="space-y-4">
+                <Skeleton className="h-32 w-full" />
+                <Skeleton className="h-48 w-full" />
+              </div>
+            ) : appDetails ? (
+              <>
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="text-lg">Application Information</CardTitle>
+                  </CardHeader>
+                  <CardContent className="space-y-3">
+                    <div className="grid grid-cols-2 gap-4">
+                      <div>
+                        <p className="text-sm font-medium text-muted-foreground">Name</p>
+                        <p className="text-sm">{appDetails.name}</p>
+                      </div>
+                      <div>
+                        <p className="text-sm font-medium text-muted-foreground">Version</p>
+                        <p className="text-sm">{appDetails.version || 'N/A'}</p>
+                      </div>
+                      <div>
+                        <p className="text-sm font-medium text-muted-foreground">Namespace</p>
+                        <p className="text-sm">{appDetails.namespace}</p>
+                      </div>
+                      <div>
+                        <p className="text-sm font-medium text-muted-foreground">Status</p>
+                        <p className="text-sm">{appDetails.status}</p>
+                      </div>
+                    </div>
+
+                    {appDetails.url && (
+                      <div>
+                        <p className="text-sm font-medium text-muted-foreground mb-1">URL</p>
+                        <a
+                          href={appDetails.url}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="inline-flex items-center gap-1 text-sm text-primary hover:underline"
+                        >
+                          <ExternalLink className="h-3 w-3" />
+                          {appDetails.url}
+                        </a>
+                      </div>
+                    )}
+
+                    {appDetails.description && (
+                      <div>
+                        <p className="text-sm font-medium text-muted-foreground mb-1">Description</p>
+                        <p className="text-sm">{appDetails.description}</p>
+                      </div>
+                    )}
+
+                    {appDetails.manifest?.dependencies && appDetails.manifest.dependencies.length > 0 && (
+                      <div>
+                        <p className="text-sm font-medium text-muted-foreground mb-2">Dependencies</p>
+                        <div className="flex flex-wrap gap-2">
+                          {appDetails.manifest.dependencies.map((dep) => (
+                            <Badge key={dep} variant="outline">
+                              {dep}
+                            </Badge>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+                  </CardContent>
+                </Card>
+
+                {/* README Documentation */}
+                {readmeContent && (
+                  <Card>
+                    <CardHeader>
+                      <CardTitle className="text-lg flex items-center gap-2">
+                        <FileText className="h-5 w-5" />
+                        README
+                      </CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      {readmeLoading ? (
+                        <Skeleton className="h-40 w-full" />
+                      ) : (
+                        <div className="prose prose-sm max-w-none dark:prose-invert overflow-auto max-h-96 p-4 bg-muted/30 rounded-lg">
+                          <ReactMarkdown
+                            components={{
+                              // Style code blocks
+                              code: ({node, inline, className, children, ...props}) => {
+                                return inline ? (
+                                  <code className="bg-muted px-1 py-0.5 rounded text-sm" {...props}>
+                                    {children}
+                                  </code>
+                                ) : (
+                                  <code className="block bg-muted p-3 rounded text-sm overflow-x-auto" {...props}>
+                                    {children}
+                                  </code>
+                                );
+                              },
+                              // Make links open in new tab
+                              a: ({node, children, href, ...props}) => (
+                                <a href={href} target="_blank" rel="noopener noreferrer" className="text-primary hover:underline" {...props}>
+                                  {children}
+                                </a>
+                              ),
+                            }}
+                          >
+                            {readmeContent}
+                          </ReactMarkdown>
+                        </div>
+                      )}
+                    </CardContent>
+                  </Card>
+                )}
+              </>
+            ) : (
+              <p className="text-center text-muted-foreground py-8">No information available</p>
+            )}
+          </div>
+        )}
+
+        {/* Configuration Tab */}
+        {viewMode === 'configuration' && (
+          <div className="space-y-4">
+            <div className="flex justify-end">
+              <Button variant="outline" size="sm" onClick={() => refetch()}>
+                <RefreshCw className="h-4 w-4 mr-2" />
+                Refresh
+              </Button>
+            </div>
+
+            {isLoading ? (
+              <div className="space-y-4">
+                <Skeleton className="h-48 w-full" />
+                <Skeleton className="h-32 w-full" />
+              </div>
+            ) : appDetails ? (
+              <>
+                {/* Configuration Values */}
+                {((appDetails.config && Object.keys(appDetails.config).length > 0) ||
+                  (appDetails.manifest?.defaultConfig && Object.keys(appDetails.manifest.defaultConfig).length > 0)) && (
+                  <Card>
+                    <CardHeader>
+                      <CardTitle className="text-lg">Configuration</CardTitle>
+                      <CardDescription>Current configuration values</CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                      <div className="space-y-2">
+                        {Object.entries(appDetails.config || appDetails.manifest?.defaultConfig || {}).map(([key, value]) => (
+                          <div key={key} className="flex justify-between text-sm border-b pb-2">
+                            <span className="font-medium text-muted-foreground">{key}:</span>
+                            <span className="font-mono text-xs break-all">
+                              {typeof value === 'object' && value !== null
+                                ? JSON.stringify(value, null, 2)
+                                : String(value)}
+                            </span>
+                          </div>
+                        ))}
+                      </div>
+                    </CardContent>
+                  </Card>
+                )}
+
+                {/* Secrets */}
+                {appDetails.manifest?.requiredSecrets && appDetails.manifest.requiredSecrets.length > 0 && (
+                  <Card>
+                    <CardHeader>
+                      <CardTitle className="text-lg flex items-center justify-between">
+                        <span>Secrets</span>
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => setShowSecrets(!showSecrets)}
+                        >
+                          {showSecrets ? 'Hide' : 'Show'}
+                        </Button>
+                      </CardTitle>
+                      <CardDescription>Sensitive configuration values (redacted)</CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                      <div className="space-y-2">
+                        {appDetails.manifest.requiredSecrets.map((secret) => (
+                          <div key={secret} className="flex justify-between text-sm border-b pb-2">
+                            <span className="font-medium text-muted-foreground">{secret}:</span>
+                            <span className="font-mono text-xs">
+                              {showSecrets ? '**hidden**' : '••••••••'}
+                            </span>
+                          </div>
+                        ))}
+                      </div>
+                    </CardContent>
+                  </Card>
+                )}
+              </>
+            ) : (
+              <p className="text-center text-muted-foreground py-8">No configuration available</p>
+            )}
+          </div>
+        )}
+
+        {/* Status Tab */}
+        {viewMode === 'status' && (
+          <div className="space-y-4">
+            <div className="flex justify-end">
+              <Button variant="outline" size="sm" onClick={() => refetch()}>
+                <RefreshCw className="h-4 w-4 mr-2" />
+                Refresh
+              </Button>
+            </div>
+
+            {isLoading ? (
+              <div className="space-y-4">
+                <Skeleton className="h-32 w-full" />
+                <Skeleton className="h-48 w-full" />
+              </div>
+            ) : appDetails?.runtime ? (
+              <>
+                {/* Replicas */}
+                {appDetails.runtime.replicas && (
+                  <Card>
+                    <CardHeader>
+                      <CardTitle className="text-lg">Replicas</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      <div className="grid grid-cols-4 gap-2 text-sm">
+                        <div className="bg-muted rounded p-2">
+                          <p className="text-xs text-muted-foreground">Desired</p>
+                          <p className="font-semibold">{appDetails.runtime.replicas.desired}</p>
+                        </div>
+                        <div className="bg-muted rounded p-2">
+                          <p className="text-xs text-muted-foreground">Current</p>
+                          <p className="font-semibold">{appDetails.runtime.replicas.current}</p>
+                        </div>
+                        <div className="bg-muted rounded p-2">
+                          <p className="text-xs text-muted-foreground">Ready</p>
+                          <p className="font-semibold">{appDetails.runtime.replicas.ready}</p>
+                        </div>
+                        <div className="bg-muted rounded p-2">
+                          <p className="text-xs text-muted-foreground">Available</p>
+                          <p className="font-semibold">{appDetails.runtime.replicas.available}</p>
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
+                )}
+
+                {/* Pods */}
+                {appDetails.runtime.pods && appDetails.runtime.pods.length > 0 && (
+                  <Card>
+                    <CardHeader>
+                      <CardTitle className="text-lg">Pods</CardTitle>
+                      <CardDescription>{appDetails.runtime.pods.length} pod(s)</CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                      <div className="space-y-2">
+                        {appDetails.runtime.pods.map((pod) => (
+                          <div
+                            key={pod.name}
+                            className="border rounded-lg p-3 hover:bg-muted/50 transition-colors"
+                          >
+                            <div className="flex items-start justify-between mb-2">
+                              <div className="flex-1 min-w-0">
+                                <p className="text-sm font-medium truncate">{pod.name}</p>
+                                {pod.node && (
+                                  <p className="text-xs text-muted-foreground">Node: {pod.node}</p>
+                                )}
+                              </div>
+                              <div className="flex gap-2 ml-2">
+                                <Badge variant="outline" className={getPodStatusColor(pod.status)}>
+                                  {pod.status}
+                                </Badge>
+                              </div>
+                            </div>
+                            <div className="grid grid-cols-3 gap-2 text-xs">
+                              <div>
+                                <span className="text-muted-foreground">Ready:</span>{' '}
+                                <span className="font-medium">{pod.ready}</span>
+                              </div>
+                              <div>
+                                <span className="text-muted-foreground">Restarts:</span>{' '}
+                                <span className="font-medium">{pod.restarts}</span>
+                              </div>
+                              <div>
+                                <span className="text-muted-foreground">Age:</span>{' '}
+                                <span className="font-medium">{pod.age}</span>
+                              </div>
+                            </div>
+                            {pod.ip && (
+                              <div className="text-xs mt-1">
+                                <span className="text-muted-foreground">IP:</span>{' '}
+                                <span className="font-mono">{pod.ip}</span>
+                              </div>
+                            )}
+                          </div>
+                        ))}
+                      </div>
+                    </CardContent>
+                  </Card>
+                )}
+
+                {/* Resource Usage */}
+                {appDetails.runtime.resources && (
+                  <Card>
+                    <CardHeader>
+                      <CardTitle className="text-lg">Resource Usage</CardTitle>
+                    </CardHeader>
+                    <CardContent className="space-y-3">
+                      {appDetails.runtime.resources.cpu && (
+                        <div>
+                          <div className="flex justify-between text-sm mb-1">
+                            <span>CPU</span>
+                            <span className="font-mono text-xs">
+                              {appDetails.runtime.resources.cpu.used} / {appDetails.runtime.resources.cpu.limit}
+                            </span>
+                          </div>
+                          <div className="w-full bg-muted rounded-full h-2">
+                            <div
+                              className="bg-primary rounded-full h-2 transition-all"
+                              style={{ width: `${Math.min(appDetails.runtime.resources.cpu.percentage, 100)}%` }}
+                            />
+                          </div>
+                          <p className="text-xs text-muted-foreground mt-1">
+                            {appDetails.runtime.resources.cpu.percentage.toFixed(1)}% used
+                          </p>
+                        </div>
+                      )}
+
+                      {appDetails.runtime.resources.memory && (
+                        <div>
+                          <div className="flex justify-between text-sm mb-1">
+                            <span>Memory</span>
+                            <span className="font-mono text-xs">
+                              {appDetails.runtime.resources.memory.used} / {appDetails.runtime.resources.memory.limit}
+                            </span>
+                          </div>
+                          <div className="w-full bg-muted rounded-full h-2">
+                            <div
+                              className="bg-primary rounded-full h-2 transition-all"
+                              style={{ width: `${Math.min(appDetails.runtime.resources.memory.percentage, 100)}%` }}
+                            />
+                          </div>
+                          <p className="text-xs text-muted-foreground mt-1">
+                            {appDetails.runtime.resources.memory.percentage.toFixed(1)}% used
+                          </p>
+                        </div>
+                      )}
+
+                      {appDetails.runtime.resources.storage && (
+                        <div>
+                          <div className="flex justify-between text-sm mb-1">
+                            <span>Storage</span>
+                            <span className="font-mono text-xs">
+                              {appDetails.runtime.resources.storage.used} / {appDetails.runtime.resources.storage.limit}
+                            </span>
+                          </div>
+                          <div className="w-full bg-muted rounded-full h-2">
+                            <div
+                              className="bg-primary rounded-full h-2 transition-all"
+                              style={{ width: `${Math.min(appDetails.runtime.resources.storage.percentage, 100)}%` }}
+                            />
+                          </div>
+                          <p className="text-xs text-muted-foreground mt-1">
+                            {appDetails.runtime.resources.storage.percentage.toFixed(1)}% used
+                          </p>
+                        </div>
+                      )}
+                    </CardContent>
+                  </Card>
+                )}
+
+                {/* Recent Events */}
+                {eventsData?.events && eventsData.events.length > 0 && (
+                  <Card>
+                    <CardHeader>
+                      <CardTitle className="text-lg">Recent Events</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      <div className="space-y-2">
+                        {eventsData.events.map((event, idx) => (
+                          <div key={idx} className="flex items-start gap-2 text-sm border-b pb-2">
+                            {event.type === 'Warning' ? (
+                              <AlertCircle className="h-4 w-4 text-yellow-500 mt-0.5" />
+                            ) : (
+                              <CheckCircle className="h-4 w-4 text-green-500 mt-0.5" />
+                            )}
+                            <div className="flex-1 min-w-0">
+                              <p className="font-medium">{event.reason}</p>
+                              <p className="text-muted-foreground text-xs">{event.message}</p>
+                              <p className="text-muted-foreground text-xs mt-1">
+                                {event.timestamp} {event.count > 1 && `(${event.count}x)`}
+                              </p>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </CardContent>
+                  </Card>
+                )}
+              </>
+            ) : (
+              <p className="text-center text-muted-foreground py-8">No status information available</p>
+            )}
+          </div>
+        )}
+
+        {/* Logs Tab */}
+        {viewMode === 'logs' && (
+          <div className="space-y-4">
+            <div className="flex justify-between items-center">
+              <div className="flex gap-2">
+                <select
+                  value={logParams.tail}
+                  onChange={(e) => setLogParams({ ...logParams, tail: parseInt(e.target.value) })}
+                  className="px-3 py-1 border rounded text-sm"
+                >
+                  <option value={50}>Last 50 lines</option>
+                  <option value={100}>Last 100 lines</option>
+                  <option value={200}>Last 200 lines</option>
+                  <option value={500}>Last 500 lines</option>
+                </select>
+              </div>
+              <Button variant="outline" size="sm" onClick={() => refetchLogs()}>
+                <RefreshCw className="h-4 w-4 mr-2" />
+                Refresh
+              </Button>
+            </div>
+
+            <Card>
+              <CardContent className="p-4">
+                <div className="bg-black text-green-400 font-mono text-xs p-4 rounded-lg max-h-96 overflow-y-auto">
+                  {logs && logs.logs && Array.isArray(logs.logs) && logs.logs.length > 0 ? (
+                    logs.logs.map((line, idx) => {
+                      // Handle both string format and object format {timestamp, message, pod}
+                      if (typeof line === 'string') {
+                        return (
+                          <div key={idx} className="whitespace-pre-wrap break-all">
+                            {line}
+                          </div>
+                        );
+                      } else if (line && typeof line === 'object' && 'message' in line) {
+                        // Display timestamp and message nicely
+                        const timestamp = line.timestamp ? new Date(line.timestamp).toLocaleTimeString() : '';
+                        return (
+                          <div key={idx} className="whitespace-pre-wrap break-all">
+                            {timestamp && <span className="text-gray-500">[{timestamp}] </span>}
+                            {line.message}
+                          </div>
+                        );
+                      } else {
+                        return (
+                          <div key={idx} className="whitespace-pre-wrap break-all">
+                            {JSON.stringify(line)}
+                          </div>
+                        );
+                      }
+                    })
+                  ) : logs && typeof logs === 'object' && !Array.isArray(logs) ? (
+                    // Handle case where logs might be an object with different structure
+                    <div className="whitespace-pre-wrap break-all">
+                      {JSON.stringify(logs, null, 2)}
+                    </div>
+                  ) : (
+                    <p className="text-gray-500">No logs available</p>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

src/hooks/useApps.ts

@@ -108,3 +108,58 @@ export function useAppBackups(instanceName: string | null | undefined, appName:
     restoreResult: restoreMutation.data,
   };
 }
+
+// Enhanced hooks for app details and runtime status
+export function useAppEnhanced(instanceName: string | null | undefined, appName: string | null | undefined) {
+  return useQuery({
+    queryKey: ['instances', instanceName, 'apps', appName, 'enhanced'],
+    queryFn: () => appsApi.getEnhanced(instanceName!, appName!),
+    enabled: !!instanceName && !!appName,
+    refetchInterval: 10000, // Poll every 10 seconds
+  });
+}
+
+export function useAppRuntime(instanceName: string | null | undefined, appName: string | null | undefined) {
+  return useQuery({
+    queryKey: ['instances', instanceName, 'apps', appName, 'runtime'],
+    queryFn: () => appsApi.getRuntime(instanceName!, appName!),
+    enabled: !!instanceName && !!appName,
+    refetchInterval: 5000, // Poll every 5 seconds
+  });
+}
+
+export function useAppLogs(
+  instanceName: string | null | undefined,
+  appName: string | null | undefined,
+  params?: { tail?: number; sinceSeconds?: number; pod?: string }
+) {
+  return useQuery({
+    queryKey: ['instances', instanceName, 'apps', appName, 'logs', params],
+    queryFn: () => appsApi.getLogs(instanceName!, appName!, params),
+    enabled: !!instanceName && !!appName,
+    refetchInterval: false, // Manual refresh only
+  });
+}
+
+export function useAppEvents(
+  instanceName: string | null | undefined,
+  appName: string | null | undefined,
+  limit?: number
+) {
+  return useQuery({
+    queryKey: ['instances', instanceName, 'apps', appName, 'events', limit],
+    queryFn: () => appsApi.getEvents(instanceName!, appName!, limit),
+    enabled: !!instanceName && !!appName,
+    refetchInterval: 10000, // Poll every 10 seconds
+  });
+}
+
+export function useAppReadme(instanceName: string | null | undefined, appName: string | null | undefined) {
+  return useQuery({
+    queryKey: ['instances', instanceName, 'apps', appName, 'readme'],
+    queryFn: () => appsApi.getReadme(instanceName!, appName!),
+    enabled: !!instanceName && !!appName,
+    staleTime: 5 * 60 * 1000, // 5 minutes - READMEs don't change often
+    retry: false, // Don't retry if README not found (404)
+  });
+}

src/index.css

@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @import "tw-animate-css";
+@plugin "@tailwindcss/typography";
 
 @custom-variant dark (&:is(.dark *));
 

src/services/api/apps.ts

@@ -6,6 +6,10 @@ import type {
   AppAddResponse,
   AppStatus,
   OperationResponse,
+  EnhancedApp,
+  RuntimeStatus,
+  LogEntry,
+  KubernetesEvent,
 } from './types';
 
 export const appsApi = {
@@ -39,6 +43,33 @@ export const appsApi = {
     return apiClient.get(`/api/v1/instances/${instanceName}/apps/${appName}/status`);
   },
 
+  // Enhanced app details endpoints
+  async getEnhanced(instanceName: string, appName: string): Promise<EnhancedApp> {
+    return apiClient.get(`/api/v1/instances/${instanceName}/apps/${appName}/enhanced`);
+  },
+
+  async getRuntime(instanceName: string, appName: string): Promise<RuntimeStatus> {
+    return apiClient.get(`/api/v1/instances/${instanceName}/apps/${appName}/runtime`);
+  },
+
+  async getLogs(
+    instanceName: string,
+    appName: string,
+    params?: { tail?: number; sinceSeconds?: number; pod?: string }
+  ): Promise<LogEntry> {
+    const queryParams = new URLSearchParams();
+    if (params?.tail) queryParams.append('tail', params.tail.toString());
+    if (params?.sinceSeconds) queryParams.append('sinceSeconds', params.sinceSeconds.toString());
+    if (params?.pod) queryParams.append('pod', params.pod);
+
+    const query = queryParams.toString();
+    return apiClient.get(`/api/v1/instances/${instanceName}/apps/${appName}/logs${query ? `?${query}` : ''}`);
+  },
+
+  async getEvents(instanceName: string, appName: string, limit = 20): Promise<{ events: KubernetesEvent[] }> {
+    return apiClient.get(`/api/v1/instances/${instanceName}/apps/${appName}/events?limit=${limit}`);
+  },
+
   // Backup operations
   async backup(instanceName: string, appName: string): Promise<OperationResponse> {
     return apiClient.post(`/api/v1/instances/${instanceName}/apps/${appName}/backup`);
@@ -51,4 +82,16 @@ export const appsApi = {
   async restore(instanceName: string, appName: string, backupId: string): Promise<OperationResponse> {
     return apiClient.post(`/api/v1/instances/${instanceName}/apps/${appName}/restore`, { backup_id: backupId });
   },
+
+  // README content
+  async getReadme(instanceName: string, appName: string): Promise<string> {
+    const response = await fetch(`${import.meta.env.VITE_API_BASE_URL || 'http://localhost:5055'}/api/v1/instances/${instanceName}/apps/${appName}/readme`);
+    if (!response.ok) {
+      if (response.status === 404) {
+        return ''; // Return empty string if README not found
+      }
+      throw new Error(`Failed to fetch README: ${response.statusText}`);
+    }
+    return response.text();
+  },
 };

src/services/api/types/app.ts

@@ -10,6 +10,8 @@ export interface App {
   dependencies?: string[];
   config?: Record<string, string>;
   status?: AppStatus;
+  readme?: string;
+  documentation?: string;
 }
 
 export interface AppRequirement {
@@ -38,6 +40,92 @@ export interface AppResources {
   storage?: string;
 }
 
+// Enhanced types for app details with runtime status
+export interface ContainerInfo {
+  name: string;
+  image: string;
+  ready: boolean;
+  restartCount: number;
+  state: string; // "running", "waiting", "terminated"
+}
+
+export interface PodInfo {
+  name: string;
+  status: string;
+  ready: string; // "1/1"
+  restarts: number;
+  age: string;
+  node: string;
+  ip: string;
+  containers?: ContainerInfo[];
+}
+
+export interface ReplicaInfo {
+  desired: number;
+  current: number;
+  ready: number;
+  available: number;
+}
+
+export interface ResourceMetric {
+  used: string;
+  requested: string;
+  limit: string;
+  percentage: number;
+}
+
+export interface ResourceUsage {
+  cpu: ResourceMetric;
+  memory: ResourceMetric;
+  storage?: ResourceMetric;
+}
+
+export interface KubernetesEvent {
+  type: string;
+  reason: string;
+  message: string;
+  timestamp: string;
+  count: number;
+}
+
+export interface RuntimeStatus {
+  pods: PodInfo[];
+  replicas?: ReplicaInfo;
+  resources?: ResourceUsage;
+  recentEvents?: KubernetesEvent[];
+}
+
+export interface AppManifest {
+  name: string;
+  description: string;
+  version: string;
+  category?: string;
+  icon?: string;
+  dependencies?: string[];
+  defaultConfig?: Record<string, unknown>;
+  requiredSecrets?: string[];
+}
+
+export interface EnhancedApp {
+  name: string;
+  status: string;
+  version?: string;
+  namespace: string;
+  url?: string;
+  description?: string;
+  icon?: string;
+  manifest?: AppManifest;
+  config?: Record<string, string>;
+  runtime?: RuntimeStatus;
+  readme?: string;
+  documentation?: string;
+}
+
+export interface LogEntry {
+  pod: string;
+  logs: string[];
+}
+
 export interface AppListResponse {
   apps: App[];
 }