Service config. Service logs. Service status.

package.json

@@ -20,6 +20,7 @@
     "@radix-ui/react-collapsible": "^1.1.11",
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tooltip": "^1.2.7",

pnpm-lock.yaml

@@ -20,6 +20,9 @@ importers:
       '@radix-ui/react-label':
         specifier: ^2.1.7
         version: 2.1.7(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-select':
+        specifier: ^2.2.6
+        version: 2.2.6(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@radix-ui/react-separator':
         specifier: ^1.1.7
         version: 1.1.7(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -522,9 +525,15 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
+  '@radix-ui/number@1.1.1':
+    resolution: {integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==}
+
   '@radix-ui/primitive@1.1.2':
     resolution: {integrity: sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==}
 
+  '@radix-ui/primitive@1.1.3':
+    resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==}
+
   '@radix-ui/react-arrow@1.1.7':
     resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==}
     peerDependencies:
@@ -551,6 +560,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-collection@1.1.7':
+    resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-compose-refs@1.1.2':
     resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
     peerDependencies:
@@ -582,6 +604,15 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-direction@1.1.1':
+    resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-dismissable-layer@1.1.10':
     resolution: {integrity: sha512-IM1zzRV4W3HtVgftdQiiOmA0AdJlCtMLe00FXaHwgt3rAnNsIyDqshvkIW3hj/iu5hu8ERP7KIYki6NkqDxAwQ==}
     peerDependencies:
@@ -595,6 +626,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-dismissable-layer@1.1.11':
+    resolution: {integrity: sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-focus-guards@1.1.2':
     resolution: {integrity: sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA==}
     peerDependencies:
@@ -604,6 +648,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-focus-guards@1.1.3':
+    resolution: {integrity: sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-focus-scope@1.1.7':
     resolution: {integrity: sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==}
     peerDependencies:
@@ -652,6 +705,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-popper@1.2.8':
+    resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-portal@1.1.9':
     resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==}
     peerDependencies:
@@ -691,6 +757,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-select@2.2.6':
+    resolution: {integrity: sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-separator@1.1.7':
     resolution: {integrity: sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==}
     peerDependencies:
@@ -771,6 +850,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-previous@1.1.1':
+    resolution: {integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-rect@1.1.1':
     resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
     peerDependencies:
@@ -2592,8 +2680,12 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.19.1
 
+  '@radix-ui/number@1.1.1': {}
+
   '@radix-ui/primitive@1.1.2': {}
 
+  '@radix-ui/primitive@1.1.3': {}
+
   '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -2619,6 +2711,18 @@ snapshots:
       '@types/react': 19.1.8
       '@types/react-dom': 19.1.6(@types/react@19.1.8)
 
+  '@radix-ui/react-collection@1.1.7(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.8)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.8)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.8)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.8
+      '@types/react-dom': 19.1.6(@types/react@19.1.8)
+
   '@radix-ui/react-compose-refs@1.1.2(@types/react@19.1.8)(react@19.1.0)':
     dependencies:
       react: 19.1.0
@@ -2653,6 +2757,12 @@ snapshots:
       '@types/react': 19.1.8
       '@types/react-dom': 19.1.6(@types/react@19.1.8)
 
+  '@radix-ui/react-direction@1.1.1(@types/react@19.1.8)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.8
+
   '@radix-ui/react-dismissable-layer@1.1.10(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.2
@@ -2666,12 +2776,31 @@ snapshots:
       '@types/react': 19.1.8
       '@types/react-dom': 19.1.6(@types/react@19.1.8)
 
+  '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.8)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.8)(react@19.1.0)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.1.8)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.8
+      '@types/react-dom': 19.1.6(@types/react@19.1.8)
+
   '@radix-ui/react-focus-guards@1.1.2(@types/react@19.1.8)(react@19.1.0)':
     dependencies:
       react: 19.1.0
     optionalDependencies:
       '@types/react': 19.1.8
 
+  '@radix-ui/react-focus-guards@1.1.3(@types/react@19.1.8)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.8
+
   '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.8)(react@19.1.0)
@@ -2717,6 +2846,24 @@ snapshots:
       '@types/react': 19.1.8
       '@types/react-dom': 19.1.6(@types/react@19.1.8)
 
+  '@radix-ui/react-popper@1.2.8(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.8)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.8)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.8)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.8)(react@19.1.0)
+      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.1.8)(react@19.1.0)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.8)(react@19.1.0)
+      '@radix-ui/rect': 1.1.1
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.8
+      '@types/react-dom': 19.1.6(@types/react@19.1.8)
+
   '@radix-ui/react-portal@1.1.9(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -2746,6 +2893,35 @@ snapshots:
       '@types/react': 19.1.8
       '@types/react-dom': 19.1.6(@types/react@19.1.8)
 
+  '@radix-ui/react-select@2.2.6(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.8)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.8)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.8)(react@19.1.0)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.1.8)(react@19.1.0)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.8)(react@19.1.0)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.8)(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.8)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.8)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.8)(react@19.1.0)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.8)(react@19.1.0)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      aria-hidden: 1.2.6
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+      react-remove-scroll: 2.7.1(@types/react@19.1.8)(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.8
+      '@types/react-dom': 19.1.6(@types/react@19.1.8)
+
   '@radix-ui/react-separator@1.1.7(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -2816,6 +2992,12 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.1.8
 
+  '@radix-ui/react-use-previous@1.1.1(@types/react@19.1.8)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.8
+
   '@radix-ui/react-use-rect@1.1.1(@types/react@19.1.8)(react@19.1.0)':
     dependencies:
       '@radix-ui/rect': 1.1.1

src/components/AppSidebar.tsx

@@ -1,5 +1,5 @@
 import { NavLink, useParams } from 'react-router';
-import { Server, Play, Container, AppWindow, Settings, CloudLightning, Sun, Moon, Monitor, ChevronDown, Globe, Wifi, HardDrive, Usb } from 'lucide-react';
+import { Server, Play, Container, AppWindow, Settings, CloudLightning, Sun, Moon, Monitor, ChevronDown, Globe, Usb } from 'lucide-react';
 import { cn } from '../lib/utils';
 import {
   Sidebar,

src/components/ClusterServicesComponent.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Card } from './ui/card';
 import { Button } from './ui/button';
 import { Badge } from './ui/badge';
@@ -5,6 +6,9 @@ import { Container, Shield, Network, Database, CheckCircle, AlertCircle, Termina
 import { useInstanceContext } from '../hooks/useInstanceContext';
 import { useServices } from '../hooks/useServices';
 import type { Service } from '../services/api';
+import { ServiceDetailModal } from './services/ServiceDetailModal';
+import { ServiceConfigEditor } from './services/ServiceConfigEditor';
+import { Dialog, DialogContent } from './ui/dialog';
 
 export function ClusterServicesComponent() {
   const { currentInstance } = useInstanceContext();
@@ -20,10 +24,14 @@ export function ClusterServicesComponent() {
     isDeleting
   } = useServices(currentInstance);
 
+  const [selectedService, setSelectedService] = useState<string | null>(null);
+  const [configService, setConfigService] = useState<string | null>(null);
+
   const getStatusIcon = (status?: string) => {
     switch (status) {
       case 'running':
       case 'ready':
+      case 'deployed':
         return <CheckCircle className="h-5 w-5 text-green-500" />;
       case 'error':
         return <AlertCircle className="h-5 w-5 text-red-500" />;
@@ -36,19 +44,23 @@ export function ClusterServicesComponent() {
   };
 
   const getStatusBadge = (service: Service) => {
-    const status = service.status?.status || (service.deployed ? 'deployed' : 'available');
+    // Handle both old format (status as string) and new format (status as object)
+    const status = typeof service.status === 'string' ? service.status :
+                   service.status?.status || (service.deployed ? 'deployed' : 'available');
 
     const variants: Record<string, 'secondary' | 'default' | 'success' | 'destructive' | 'outline'> = {
+      'not-deployed': 'secondary',
       available: 'secondary',
       deploying: 'default',
       installing: 'default',
       running: 'success',
       ready: 'success',
+      deployed: 'success',
       error: 'destructive',
-      deployed: 'outline',
     };
 
     const labels: Record<string, string> = {
+      'not-deployed': 'Not Deployed',
       available: 'Available',
       deploying: 'Deploying',
       installing: 'Installing',
@@ -59,7 +71,7 @@ export function ClusterServicesComponent() {
     };
 
     return (
-      <Badge variant={variants[status]}>
+      <Badge variant={variants[status] || 'secondary'}>
         {labels[status] || status}
       </Badge>
     );
@@ -210,16 +222,18 @@ export function ClusterServicesComponent() {
                           {service.version}
                         </Badge>
                       )}
-                      {getStatusIcon(service.status?.status)}
+                      {getStatusIcon(typeof service.status === 'string' ? service.status : service.status?.status)}
                     </div>
                     <p className="text-sm text-muted-foreground">{service.description}</p>
-                    {service.status?.message && (
+                    {typeof service.status === 'object' && service.status?.message && (
                       <p className="text-xs text-muted-foreground mt-1">{service.status.message}</p>
                     )}
                   </div>
                   <div className="flex items-center gap-3">
                     {getStatusBadge(service)}
-                    {!service.deployed && (
+                    {((typeof service.status === 'string' && service.status === 'not-deployed') ||
+                      (!service.status || service.status === 'not-deployed') ||
+                      (typeof service.status === 'object' && service.status?.status === 'not-deployed')) && (
                       <Button
                         size="sm"
                         onClick={() => handleInstallService(service.name)}
@@ -228,15 +242,34 @@ export function ClusterServicesComponent() {
                         {isInstalling ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Install'}
                       </Button>
                     )}
-                    {service.deployed && (
-                      <Button
-                        size="sm"
-                        variant="destructive"
-                        onClick={() => handleDeleteService(service.name)}
-                        disabled={isDeleting}
-                      >
-                        {isDeleting ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Remove'}
-                      </Button>
+                    {((typeof service.status === 'string' && service.status === 'deployed') ||
+                      (typeof service.status === 'object' && service.status?.status === 'deployed')) && (
+                      <>
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          onClick={() => setSelectedService(service.name)}
+                        >
+                          View
+                        </Button>
+                        {service.hasConfig && (
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            onClick={() => setConfigService(service.name)}
+                          >
+                            Configure
+                          </Button>
+                        )}
+                        <Button
+                          size="sm"
+                          variant="destructive"
+                          onClick={() => handleDeleteService(service.name)}
+                          disabled={isDeleting}
+                        >
+                          {isDeleting ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Remove'}
+                        </Button>
+                      </>
                     )}
                   </div>
                 </div>
@@ -277,6 +310,31 @@ export function ClusterServicesComponent() {
           </div>
         </div>
       </Card>
+
+      {selectedService && (
+        <ServiceDetailModal
+          instanceName={currentInstance}
+          serviceName={selectedService}
+          open={!!selectedService}
+          onClose={() => setSelectedService(null)}
+        />
+      )}
+
+      {configService && (
+        <Dialog open={!!configService} onOpenChange={(open) => !open && setConfigService(null)}>
+          <DialogContent className="sm:max-w-4xl max-w-[95vw] max-h-[90vh] overflow-y-auto w-full">
+            <ServiceConfigEditor
+              instanceName={currentInstance}
+              serviceName={configService}
+              manifest={services.find(s => s.name === configService)}
+              onClose={() => setConfigService(null)}
+              onSuccess={() => {
+                setConfigService(null);
+              }}
+            />
+          </DialogContent>
+        </Dialog>
+      )}
     </div>
   );
 }

src/components/services/ServiceConfigEditor.tsx

@@ -0,0 +1,213 @@
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Loader2, Save } from 'lucide-react';
+import { useServiceConfig, useServiceStatus } from '@/hooks/useServices';
+import type { ServiceManifest } from '@/services/api/types';
+
+interface ServiceConfigEditorProps {
+  instanceName: string;
+  serviceName: string;
+  manifest?: ServiceManifest;
+  onClose: () => void;
+  onSuccess?: () => void;
+}
+
+export function ServiceConfigEditor({
+  instanceName,
+  serviceName,
+  manifest: _manifestProp, // Ignore the prop, fetch from status instead
+  onClose,
+  onSuccess,
+}: ServiceConfigEditorProps) {
+  const { config, isLoading: configLoading, updateConfig, isUpdating } = useServiceConfig(instanceName, serviceName);
+  const { data: statusData, isLoading: statusLoading } = useServiceStatus(instanceName, serviceName);
+
+  // Use manifest from status endpoint which includes full serviceConfig
+  const manifest = statusData?.manifest;
+  const [formData, setFormData] = useState<Record<string, unknown>>({});
+  const [redeploy, setRedeploy] = useState(true);
+  const [fetch, setFetch] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  // Initialize form data when config loads
+  useEffect(() => {
+    if (config) {
+      setFormData(config);
+    }
+  }, [config]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setSuccess(false);
+
+    try {
+      await updateConfig({ config: formData, redeploy, fetch });
+      setSuccess(true);
+      if (onSuccess) {
+        setTimeout(() => {
+          onSuccess();
+        }, 1500);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to update configuration');
+    }
+  };
+
+  const handleInputChange = (key: string, value: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      [key]: value,
+    }));
+  };
+
+  const getDisplayValue = (value: unknown): string => {
+    if (value === null || value === undefined) return '';
+    if (typeof value === 'object') {
+      return JSON.stringify(value, null, 4);
+    }
+    return String(value);
+  };
+
+  const isObjectValue = (value: unknown): boolean => {
+    return value !== null && value !== undefined && typeof value === 'object';
+  };
+
+  const isLoading = configLoading || statusLoading;
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  // Get configurable keys from serviceConfig definitions
+  const configKeys = manifest?.serviceConfig
+    ? Object.keys(manifest.serviceConfig).map(key => manifest.serviceConfig![key].path)
+    : [];
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <h2 className="text-lg font-semibold">Edit Service Configuration</h2>
+        <p className="text-sm text-muted-foreground">{serviceName}</p>
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="space-y-4 max-h-[60vh] overflow-y-auto pr-2">
+          {configKeys.length === 0 ? (
+            <p className="text-sm text-muted-foreground text-center py-8">
+              No configuration options available for this service.
+            </p>
+          ) : (
+            configKeys.map((key) => {
+              const value = formData[key];
+              const isObject = isObjectValue(value);
+
+              // Find the config definition for this path
+              const configDef = manifest?.serviceConfig
+                ? Object.values(manifest.serviceConfig).find(def => def.path === key)
+                : undefined;
+
+              return (
+                <div key={key} className="space-y-2">
+                  <Label htmlFor={key}>
+                    {configDef?.prompt || key}
+                    {configDef?.default && (
+                      <span className="text-xs text-muted-foreground ml-2">
+                        (default: {configDef.default})
+                      </span>
+                    )}
+                  </Label>
+                  {isObject ? (
+                    <Textarea
+                      id={key}
+                      value={getDisplayValue(value)}
+                      onChange={(e) => handleInputChange(key, e.target.value)}
+                      placeholder={configDef?.default || ''}
+                      rows={5}
+                      className="font-mono text-sm"
+                    />
+                  ) : (
+                    <Input
+                      id={key}
+                      value={getDisplayValue(value)}
+                      onChange={(e) => handleInputChange(key, e.target.value)}
+                      placeholder={configDef?.default || ''}
+                    />
+                  )}
+                </div>
+              );
+            })
+          )}
+
+          <div className="space-y-2 pt-4 border-t">
+            <div className="flex items-center space-x-2">
+              <input
+                type="checkbox"
+                id="redeploy-checkbox"
+                checked={redeploy}
+                onChange={(e) => setRedeploy(e.target.checked)}
+                className="rounded"
+              />
+              <Label htmlFor="redeploy-checkbox" className="cursor-pointer">
+                Redeploy service after updating configuration
+              </Label>
+            </div>
+            {redeploy && (
+              <div className="flex items-center space-x-2">
+                <input
+                  type="checkbox"
+                  id="fetch-checkbox"
+                  checked={fetch}
+                  onChange={(e) => setFetch(e.target.checked)}
+                  className="rounded"
+                />
+                <Label htmlFor="fetch-checkbox" className="cursor-pointer">
+                  Fetch fresh templates from directory before redeploying
+                </Label>
+              </div>
+            )}
+          </div>
+
+          {error && (
+            <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
+              {error}
+            </div>
+          )}
+
+          {success && (
+            <div className="rounded-md bg-green-500/10 p-3 text-sm text-green-600 dark:text-green-400">
+              Configuration updated successfully!
+            </div>
+          )}
+        </div>
+
+        <div className="flex justify-end gap-2 pt-4 border-t">
+          <Button type="button" variant="outline" onClick={onClose} disabled={isUpdating}>
+            Cancel
+          </Button>
+          <Button type="submit" disabled={isUpdating}>
+            {isUpdating ? (
+              <>
+                <Loader2 className="h-4 w-4 animate-spin mr-2" />
+                Saving...
+              </>
+            ) : (
+              <>
+                <Save className="h-4 w-4 mr-2" />
+                Save Changes
+              </>
+            )}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+}

src/components/services/ServiceDetailModal.tsx

@@ -0,0 +1,239 @@
+import { useState } from 'react';
+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 { ServiceStatusBadge } from './ServiceStatusBadge';
+import { ServiceLogViewer } from './ServiceLogViewer';
+import { useServiceStatus } from '@/hooks/useServices';
+import { RefreshCw, FileText, Eye } from 'lucide-react';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+
+interface ServiceDetailModalProps {
+  instanceName: string;
+  serviceName: string;
+  open: boolean;
+  onClose: () => void;
+}
+
+export function ServiceDetailModal({
+  instanceName,
+  serviceName,
+  open,
+  onClose,
+}: ServiceDetailModalProps) {
+  const { data: status, isLoading, refetch } = useServiceStatus(instanceName, serviceName);
+  const [viewMode, setViewMode] = useState<'details' | 'logs'>('details');
+
+  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 getContainerNames = () => {
+    // Return empty array - let the backend auto-detect the container
+    // This avoids passing invalid container names like 'main' which don't exist
+    return [];
+  };
+
+  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">
+            {serviceName}
+            {status && <ServiceStatusBadge status={status.deploymentStatus} />}
+          </DialogTitle>
+          <DialogDescription>Service details and configuration</DialogDescription>
+        </DialogHeader>
+
+        {/* View Mode Selector */}
+        <div className="flex gap-2 border-b pb-4">
+          <Button
+            variant={viewMode === 'details' ? 'default' : 'outline'}
+            size="sm"
+            onClick={() => setViewMode('details')}
+          >
+            <Eye className="h-4 w-4 mr-2" />
+            Details
+          </Button>
+          <Button
+            variant={viewMode === 'logs' ? 'default' : 'outline'}
+            size="sm"
+            onClick={() => setViewMode('logs')}
+          >
+            <FileText className="h-4 w-4 mr-2" />
+            Logs
+          </Button>
+        </div>
+
+        {/* Details View */}
+        {viewMode === 'details' && (
+          <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>
+            ) : status ? (
+              <>
+                {/* Status Section */}
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="text-lg">Status 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">Service Name</p>
+                        <p className="text-sm">{status.name}</p>
+                      </div>
+                      <div>
+                        <p className="text-sm font-medium text-muted-foreground">Namespace</p>
+                        <p className="text-sm">{status.namespace}</p>
+                      </div>
+                    </div>
+
+                    {status.replicas && (
+                      <div>
+                        <p className="text-sm font-medium text-muted-foreground mb-2">Replicas</p>
+                        <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">{status.replicas.desired}</p>
+                          </div>
+                          <div className="bg-muted rounded p-2">
+                            <p className="text-xs text-muted-foreground">Current</p>
+                            <p className="font-semibold">{status.replicas.current}</p>
+                          </div>
+                          <div className="bg-muted rounded p-2">
+                            <p className="text-xs text-muted-foreground">Ready</p>
+                            <p className="font-semibold">{status.replicas.ready}</p>
+                          </div>
+                          <div className="bg-muted rounded p-2">
+                            <p className="text-xs text-muted-foreground">Available</p>
+                            <p className="font-semibold">{status.replicas.available}</p>
+                          </div>
+                        </div>
+                      </div>
+                    )}
+                  </CardContent>
+                </Card>
+
+                {/* Pods Section */}
+                {status.pods && status.pods.length > 0 && (
+                  <Card>
+                    <CardHeader>
+                      <CardTitle className="text-lg">Pods</CardTitle>
+                      <CardDescription>{status.pods.length} pod(s)</CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                      <div className="space-y-2">
+                        {status.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>
+                )}
+
+                {/* Configuration Preview */}
+                {status.config && Object.keys(status.config).length > 0 && (
+                  <Card>
+                    <CardHeader>
+                      <CardTitle className="text-lg">Current Configuration</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      <div className="space-y-2">
+                        {Object.entries(status.config).map(([key, value]) => (
+                          <div key={key} className="flex justify-between text-sm">
+                            <span className="font-medium text-muted-foreground">{key}:</span>
+                            <span className="font-mono text-xs">
+                              {typeof value === 'object' && value !== null
+                                ? JSON.stringify(value, null, 2)
+                                : String(value)}
+                            </span>
+                          </div>
+                        ))}
+                      </div>
+                    </CardContent>
+                  </Card>
+                )}
+              </>
+            ) : (
+              <p className="text-center text-muted-foreground py-8">No status information available</p>
+            )}
+          </div>
+        )}
+
+        {/* Logs View */}
+        {viewMode === 'logs' && (
+          <ServiceLogViewer
+            instanceName={instanceName}
+            serviceName={serviceName}
+            containers={getContainerNames()}
+            onClose={() => setViewMode('details')}
+          />
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/services/ServiceLogViewer.tsx

@@ -0,0 +1,236 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { servicesApi } from '@/services/api';
+import { Copy, Download, RefreshCw, X } from 'lucide-react';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+
+interface ServiceLogViewerProps {
+  instanceName: string;
+  serviceName: string;
+  containers?: string[];
+  onClose: () => void;
+}
+
+export function ServiceLogViewer({
+  instanceName,
+  serviceName,
+  containers = [],
+  onClose,
+}: ServiceLogViewerProps) {
+  const [logs, setLogs] = useState<string[]>([]);
+  const [follow, setFollow] = useState(false);
+  const [tail, setTail] = useState(100);
+  const [container, setContainer] = useState<string | undefined>(containers[0]);
+  const [autoScroll, setAutoScroll] = useState(true);
+  const logsEndRef = useRef<HTMLDivElement>(null);
+  const logsContainerRef = useRef<HTMLDivElement>(null);
+  const eventSourceRef = useRef<EventSource | null>(null);
+
+  // Scroll to bottom when logs change and autoScroll is enabled
+  useEffect(() => {
+    if (autoScroll && logsEndRef.current) {
+      logsEndRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [logs, autoScroll]);
+
+  // Fetch initial buffered logs
+  const fetchLogs = useCallback(async () => {
+    try {
+      const url = servicesApi.getLogsUrl(instanceName, serviceName, tail, false, container);
+      const response = await fetch(url);
+      if (!response.ok) {
+        throw new Error(`Failed to fetch logs: ${response.statusText}`);
+      }
+      const data = await response.json();
+      // API returns { lines: string[] }
+      if (data.lines && Array.isArray(data.lines)) {
+        setLogs(data.lines);
+      } else {
+        setLogs([]);
+      }
+    } catch (error) {
+      console.error('Error fetching logs:', error);
+      setLogs([`Error: ${error instanceof Error ? error.message : 'Failed to fetch logs'}`]);
+    }
+  }, [instanceName, serviceName, tail, container]);
+
+  // Set up SSE streaming when follow is enabled
+  useEffect(() => {
+    if (follow) {
+      const url = servicesApi.getLogsUrl(instanceName, serviceName, tail, true, container);
+      const eventSource = new EventSource(url);
+      eventSourceRef.current = eventSource;
+
+      eventSource.onmessage = (event) => {
+        const line = event.data;
+        if (line && line.trim() !== '') {
+          setLogs((prev) => [...prev, line]);
+        }
+      };
+
+      eventSource.onerror = (error) => {
+        console.error('SSE error:', error);
+        eventSource.close();
+        setFollow(false);
+      };
+
+      return () => {
+        eventSource.close();
+      };
+    } else {
+      if (eventSourceRef.current) {
+        eventSourceRef.current.close();
+        eventSourceRef.current = null;
+      }
+    }
+  }, [follow, instanceName, serviceName, tail, container]);
+
+  // Fetch initial logs on mount and when parameters change
+  useEffect(() => {
+    if (!follow) {
+      fetchLogs();
+    }
+  }, [fetchLogs, follow]);
+
+  const handleCopyLogs = () => {
+    const text = logs.join('\n');
+    navigator.clipboard.writeText(text);
+  };
+
+  const handleDownloadLogs = () => {
+    const text = logs.join('\n');
+    const blob = new Blob([text], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${serviceName}-logs.txt`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  const handleClearLogs = () => {
+    setLogs([]);
+  };
+
+  const handleRefresh = () => {
+    setLogs([]);
+    fetchLogs();
+  };
+
+  return (
+    <Card className="flex flex-col h-full max-h-[80vh]">
+      <CardHeader className="flex-shrink-0">
+        <div className="flex items-center justify-between">
+          <CardTitle>Service Logs: {serviceName}</CardTitle>
+          <Button variant="ghost" size="sm" onClick={onClose}>
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+
+        <div className="flex flex-wrap gap-4 mt-4">
+          <div className="flex items-center gap-2">
+            <Label htmlFor="tail-select">Lines:</Label>
+            <Select value={tail.toString()} onValueChange={(v) => setTail(Number(v))}>
+              <SelectTrigger id="tail-select" className="w-24">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="50">50</SelectItem>
+                <SelectItem value="100">100</SelectItem>
+                <SelectItem value="200">200</SelectItem>
+                <SelectItem value="500">500</SelectItem>
+                <SelectItem value="1000">1000</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          {containers.length > 1 && (
+            <div className="flex items-center gap-2">
+              <Label htmlFor="container-select">Container:</Label>
+              <Select value={container} onValueChange={setContainer}>
+                <SelectTrigger id="container-select" className="w-40">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {containers.map((c) => (
+                    <SelectItem key={c} value={c}>
+                      {c}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          )}
+
+          <div className="flex items-center gap-2">
+            <input
+              type="checkbox"
+              id="follow-checkbox"
+              checked={follow}
+              onChange={(e) => setFollow(e.target.checked)}
+              className="rounded"
+            />
+            <Label htmlFor="follow-checkbox">Follow</Label>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <input
+              type="checkbox"
+              id="autoscroll-checkbox"
+              checked={autoScroll}
+              onChange={(e) => setAutoScroll(e.target.checked)}
+              className="rounded"
+            />
+            <Label htmlFor="autoscroll-checkbox">Auto-scroll</Label>
+          </div>
+
+          <div className="flex gap-2 ml-auto">
+            <Button variant="outline" size="sm" onClick={handleRefresh} disabled={follow}>
+              <RefreshCw className="h-4 w-4" />
+              Refresh
+            </Button>
+            <Button variant="outline" size="sm" onClick={handleCopyLogs}>
+              <Copy className="h-4 w-4" />
+              Copy
+            </Button>
+            <Button variant="outline" size="sm" onClick={handleDownloadLogs}>
+              <Download className="h-4 w-4" />
+              Download
+            </Button>
+            <Button variant="outline" size="sm" onClick={handleClearLogs}>
+              Clear
+            </Button>
+          </div>
+        </div>
+      </CardHeader>
+
+      <CardContent className="flex-1 overflow-hidden p-0">
+        <div
+          ref={logsContainerRef}
+          className="h-full overflow-y-auto bg-slate-950 dark:bg-slate-900 p-4 font-mono text-xs text-green-400"
+        >
+          {logs.length === 0 ? (
+            <div className="text-slate-500">No logs available</div>
+          ) : (
+            logs.map((line, index) => (
+              <div key={index} className="whitespace-pre-wrap break-all">
+                {line}
+              </div>
+            ))
+          )}
+          <div ref={logsEndRef} />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

src/components/services/ServiceStatusBadge.tsx

@@ -0,0 +1,42 @@
+import { Badge } from '@/components/ui/badge';
+import { CheckCircle, AlertCircle, Loader2, XCircle } from 'lucide-react';
+
+interface ServiceStatusBadgeProps {
+  status: 'Ready' | 'Progressing' | 'Degraded' | 'NotFound';
+  className?: string;
+}
+
+export function ServiceStatusBadge({ status, className }: ServiceStatusBadgeProps) {
+  const statusConfig = {
+    Ready: {
+      variant: 'success' as const,
+      icon: CheckCircle,
+      label: 'Ready',
+    },
+    Progressing: {
+      variant: 'warning' as const,
+      icon: Loader2,
+      label: 'Progressing',
+    },
+    Degraded: {
+      variant: 'destructive' as const,
+      icon: AlertCircle,
+      label: 'Degraded',
+    },
+    NotFound: {
+      variant: 'secondary' as const,
+      icon: XCircle,
+      label: 'Not Found',
+    },
+  };
+
+  const config = statusConfig[status];
+  const Icon = config.icon;
+
+  return (
+    <Badge variant={config.variant} className={className}>
+      <Icon className={status === 'Progressing' ? 'animate-spin' : ''} />
+      {config.label}
+    </Badge>
+  );
+}

src/components/services/index.ts

@@ -0,0 +1,4 @@
+export { ServiceStatusBadge } from './ServiceStatusBadge';
+export { ServiceLogViewer } from './ServiceLogViewer';
+export { ServiceConfigEditor } from './ServiceConfigEditor';
+export { ServiceDetailModal } from './ServiceDetailModal';

src/components/ui/select.tsx

@@ -0,0 +1,158 @@
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}

src/hooks/useServices.ts

@@ -74,6 +74,34 @@ export function useServiceStatus(instanceName: string | null | undefined, servic
   });
 }
 
+export function useServiceConfig(instanceName: string | null | undefined, serviceName: string | null | undefined) {
+  const queryClient = useQueryClient();
+
+  const configQuery = useQuery({
+    queryKey: ['instances', instanceName, 'services', serviceName, 'config'],
+    queryFn: () => servicesApi.getConfig(instanceName!, serviceName!),
+    enabled: !!instanceName && !!serviceName,
+  });
+
+  const updateConfigMutation = useMutation({
+    mutationFn: (request: { config: Record<string, any>; redeploy?: boolean }) =>
+      servicesApi.updateConfig(instanceName!, serviceName!, request),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['instances', instanceName, 'services', serviceName, 'config'] });
+      queryClient.invalidateQueries({ queryKey: ['instances', instanceName, 'services', serviceName, 'status'] });
+      queryClient.invalidateQueries({ queryKey: ['instances', instanceName, 'services'] });
+    },
+  });
+
+  return {
+    config: configQuery.data,
+    isLoading: configQuery.isLoading,
+    error: configQuery.error,
+    updateConfig: updateConfigMutation.mutateAsync,
+    isUpdating: updateConfigMutation.isPending,
+  };
+}
+
 export function useServiceManifest(serviceName: string | null | undefined) {
   return useQuery({
     queryKey: ['services', serviceName, 'manifest'],

src/router/pages/BaseServicesPage.tsx

@@ -1,116 +0,0 @@
-import { useParams } from 'react-router-dom';
-import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '../../components/ui/card';
-import { Button } from '../../components/ui/button';
-import { Skeleton } from '../../components/ui/skeleton';
-import { ServiceCard } from '../../components/ServiceCard';
-import { Package, AlertTriangle, RefreshCw } from 'lucide-react';
-import { useBaseServices, useInstallService } from '../../hooks/useBaseServices';
-
-export function BaseServicesPage() {
-  const { instanceId } = useParams<{ instanceId: string }>();
-  const { data: servicesData, isLoading, refetch } = useBaseServices(instanceId);
-  const installMutation = useInstallService(instanceId);
-
-  const handleInstall = async (serviceName: string) => {
-    await installMutation.mutateAsync({ name: serviceName });
-  };
-
-  if (!instanceId) {
-    return (
-      <div className="flex items-center justify-center h-96">
-        <Card className="p-6">
-          <div className="flex items-center gap-3 text-muted-foreground">
-            <AlertTriangle className="h-5 w-5" />
-            <p>No instance selected</p>
-          </div>
-        </Card>
-      </div>
-    );
-  }
-
-  const services = servicesData?.services || [];
-
-  return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-3xl font-bold tracking-tight">Base Services</h2>
-          <p className="text-muted-foreground">
-            Manage essential cluster infrastructure services
-          </p>
-        </div>
-        <Button onClick={() => refetch()} variant="outline" size="sm" disabled={isLoading}>
-          <RefreshCw className="h-4 w-4" />
-          Refresh
-        </Button>
-      </div>
-
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <Package className="h-5 w-5" />
-            Available Services
-          </CardTitle>
-          <CardDescription>
-            Core infrastructure services for your Wild Cloud cluster
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          {isLoading ? (
-            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-              <Skeleton className="h-48 w-full" />
-              <Skeleton className="h-48 w-full" />
-              <Skeleton className="h-48 w-full" />
-              <Skeleton className="h-48 w-full" />
-              <Skeleton className="h-48 w-full" />
-              <Skeleton className="h-48 w-full" />
-            </div>
-          ) : services.length === 0 ? (
-            <div className="text-center py-8 text-muted-foreground">
-              <Package className="h-12 w-12 mx-auto mb-3 opacity-50" />
-              <p className="text-sm">No services available</p>
-              <p className="text-xs mt-1">Base services will appear here once configured</p>
-            </div>
-          ) : (
-            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-              {services.map((service) => (
-                <ServiceCard
-                  key={service.name}
-                  service={service}
-                  onInstall={() => handleInstall(service.name)}
-                  isInstalling={installMutation.isPending}
-                />
-              ))}
-            </div>
-          )}
-        </CardContent>
-      </Card>
-
-      <Card className="border-blue-200 bg-blue-50 dark:bg-blue-950/20 dark:border-blue-900">
-        <CardContent className="pt-6">
-          <div className="flex gap-3">
-            <Package className="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" />
-            <div>
-              <p className="font-medium text-blue-900 dark:text-blue-200">
-                About Base Services
-              </p>
-              <p className="text-sm text-blue-800 dark:text-blue-300 mt-1">
-                Base services provide essential infrastructure components for your cluster:
-              </p>
-              <ul className="text-sm text-blue-800 dark:text-blue-300 mt-2 space-y-1 list-disc list-inside">
-                <li><strong>Cilium</strong> - Network connectivity and security</li>
-                <li><strong>MetalLB</strong> - Load balancer for bare metal clusters</li>
-                <li><strong>Traefik</strong> - Ingress controller and reverse proxy</li>
-                <li><strong>Cert-Manager</strong> - Automatic TLS certificate management</li>
-                <li><strong>External-DNS</strong> - Automatic DNS record management</li>
-              </ul>
-              <p className="text-sm text-blue-800 dark:text-blue-300 mt-2">
-                Install these services to enable full cluster functionality.
-              </p>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}

src/router/routes.tsx

@@ -8,7 +8,6 @@ import { OperationsPage } from './pages/OperationsPage';
 import { ClusterHealthPage } from './pages/ClusterHealthPage';
 import { ClusterAccessPage } from './pages/ClusterAccessPage';
 import { SecretsPage } from './pages/SecretsPage';
-import { BaseServicesPage } from './pages/BaseServicesPage';
 import { UtilitiesPage } from './pages/UtilitiesPage';
 import { CloudPage } from './pages/CloudPage';
 import { CentralPage } from './pages/CentralPage';
@@ -28,7 +27,6 @@ export const routes: RouteObject[] = [
     path: '/',
     element: <LandingPage />,
   },
-  // Centralized asset routes (not under instance context)
   {
     path: '/iso',
     element: <AssetsIsoPage />,
@@ -65,10 +63,6 @@ export const routes: RouteObject[] = [
         path: 'secrets',
         element: <SecretsPage />,
       },
-      {
-        path: 'services',
-        element: <BaseServicesPage />,
-      },
       {
         path: 'utilities',
         element: <UtilitiesPage />,

src/services/api/services.ts

@@ -3,8 +3,10 @@ import type {
   ServiceListResponse,
   Service,
   ServiceStatus,
+  DetailedServiceStatus,
   ServiceManifest,
   ServiceInstallRequest,
+  ServiceConfigUpdateRequest,
   OperationResponse,
 } from './types';
 
@@ -30,12 +32,30 @@ export const servicesApi = {
     return apiClient.delete(`/api/v1/instances/${instanceName}/services/${serviceName}`);
   },
 
-  async getStatus(instanceName: string, serviceName: string): Promise<ServiceStatus> {
+  async getStatus(instanceName: string, serviceName: string): Promise<DetailedServiceStatus> {
     return apiClient.get(`/api/v1/instances/${instanceName}/services/${serviceName}/status`);
   },
 
   async getConfig(instanceName: string, serviceName: string): Promise<Record<string, unknown>> {
-    return apiClient.get(`/api/v1/instances/${instanceName}/services/${serviceName}/config`);
+    const response = await apiClient.get<{ config: Record<string, unknown> }>(
+      `/api/v1/instances/${instanceName}/services/${serviceName}/config`
+    );
+    return response.config;
+  },
+
+  async updateConfig(instanceName: string, serviceName: string, request: ServiceConfigUpdateRequest): Promise<OperationResponse> {
+    return apiClient.patch(`/api/v1/instances/${instanceName}/services/${serviceName}/config`, request);
+  },
+
+  // Service logs
+  getLogsUrl(instanceName: string, serviceName: string, tail?: number, follow?: boolean, container?: string): string {
+    const baseUrl = import.meta.env.VITE_API_BASE_URL || 'http://localhost:5055';
+    const params = new URLSearchParams();
+    if (tail) params.append('tail', tail.toString());
+    if (follow) params.append('follow', 'true');
+    if (container) params.append('container', container);
+    const queryString = params.toString();
+    return `${baseUrl}/api/v1/instances/${instanceName}/services/${serviceName}/logs${queryString ? '?' + queryString : ''}`;
   },
 
   // Service lifecycle

src/services/api/types/service.ts

@@ -2,8 +2,10 @@ export interface Service {
   name: string;
   description: string;
   version?: string;
-  status?: ServiceStatus;
+  status?: ServiceStatus | string; // Can be either an object or a string like 'deployed', 'not-deployed'
   deployed?: boolean;
+  namespace?: string;
+  hasConfig?: boolean; // Whether service has configurable fields
 }
 
 export interface ServiceStatus {
@@ -13,17 +15,58 @@ export interface ServiceStatus {
   ready?: boolean;
 }
 
+export interface PodStatus {
+  name: string;
+  status: string;
+  ready: string;
+  restarts: number;
+  age: string;
+  node?: string;
+  ip?: string;
+}
+
+export interface ReplicaStatus {
+  desired: number;
+  current: number;
+  ready: number;
+  available: number;
+}
+
+export interface DetailedServiceStatus {
+  name: string;
+  namespace: string;
+  deploymentStatus: 'Ready' | 'Progressing' | 'Degraded' | 'NotFound';
+  replicas?: ReplicaStatus;
+  pods?: PodStatus[];
+  config?: Record<string, any>;
+  manifest?: ServiceManifest;
+}
+
 export interface ServiceListResponse {
   services: Service[];
 }
 
+export interface ConfigDefinition {
+  path: string;
+  prompt: string;
+  default: string;
+  type?: string;
+}
+
 export interface ServiceManifest {
   name: string;
-  version: string;
   description: string;
-  config: Record<string, unknown>;
+  namespace?: string;
+  configReferences?: string[];
+  serviceConfig?: Record<string, ConfigDefinition>;
 }
 
 export interface ServiceInstallRequest {
   name: string;
 }
+
+export interface ServiceConfigUpdateRequest {
+  config: Record<string, any>;
+  redeploy?: boolean;
+  fetch?: boolean;
+}