feat: polish UI and document phase 3/4 plan

Co-authored-by: aider (openrouter/thinkingmachines/inkling-small:free) <aider@aider.chat>

README.md

@@ -29,11 +29,21 @@ This app provides a lightweight local interface to manage Kubernetes clusters vi
 - Improve error handling and feedback
 - Session persistence for context/namespace defaults
 
-### Phase 3: Polish & Safety
+### Phase 3: UI Polish & Documentation
-- Confirmation dialogs for destructive actions
 - Better UI/UX and responsive layout
-- Optional authentication or access controls
 - Documentation and setup instructions
+- Confirmation dialogs for destructive actions
+
+### Phase 4: Error Handling & Advanced Features
+- Improved error handling and feedback
+- Possible features:
+  - Authentication / access controls
+  - Real-time updates / watch mode
+  - Multi-cluster dashboard
+  - Advanced filtering and sorting
+  - Export reports (JSON/CSV)
+  - Resource metrics / status indicators
+  - Custom kubectl plugin integration
 
 ## Roadmap / Checklist
 
@@ -44,8 +54,8 @@ This app provides a lightweight local interface to manage Kubernetes clusters vi
 - [x] Phase 2: Search pods, nodes, PVCs, and others
 - [x] Phase 2: Describe, delete, and logs actions
 - [x] Phase 2: Session persistence for context/namespace
-- [ ] Phase 3: Safety confirmations and error handling
 - [ ] Phase 3: UI polish and documentation
+- [ ] Phase 4: Error handling and advanced features
 
 ## Suggestions
 - Use a lightweight Python framework (e.g., Flask or FastAPI) for the backend

frontend/style.css

@@ -1,42 +1,133 @@
+* {
+  box-sizing: border-box;
+}
+
 body {
-  font-family: system-ui, -apple-system, sans-serif;
+  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
   margin: 0;
-  padding: 2rem;
+  padding: 2rem 1rem;
-  background: #f5f5f5;
+  background: linear-gradient(135deg, #f0f4f8 0%, #d9e2ec 100%);
-  color: #222;
+  color: #1a202c;
+  line-height: 1.5;
 }
 
 header h1 {
-  margin-bottom: 1rem;
+  margin-bottom: 1.5rem;
+  font-size: 2rem;
+  letter-spacing: -0.02em;
+  color: #2d3748;
+}
+
+main {
+  max-width: 960px;
+  margin: 0 auto;
+}
+
+section {
+  background: #ffffff;
+  padding: 1.25rem;
+  border-radius: 12px;
+  margin-bottom: 1.25rem;
+  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
 }
 
 #selectors {
-  background: #fff;
-  padding: 1rem;
-  border-radius: 8px;
-  margin-bottom: 1rem;
   display: flex;
+  flex-wrap: wrap;
   gap: 1rem;
-  align-items: center;
+  align-items: flex-end;
 }
 
 #selectors label {
   font-weight: 600;
+  font-size: 0.875rem;
+  color: #4a5568;
+  display: block;
+  margin-bottom: 0.25rem;
 }
 
-select {
+select, input[type="text"] {
-  padding: 0.25rem 0.5rem;
+  padding: 0.5rem 0.75rem;
-  border-radius: 4px;
-  border: 1px solid #ccc;
-}
-
-#resources {
-  background: #fff;
-  padding: 1rem;
   border-radius: 8px;
+  border: 1px solid #cbd5e0;
+  background: #fff;
+  font-size: 0.95rem;
+  min-width: 160px;
 }
 
-#pod-list {
+button {
+  padding: 0.5rem 1rem;
+  border-radius: 8px;
+  border: none;
+  background: #3182ce;
+  color: #fff;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+button:hover {
+  background: #2b6cb0;
+}
+
+button.danger {
+  background: #e53e3e;
+}
+
+button.danger:hover {
+  background: #c53030;
+}
+
+#search {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+#search input {
+  flex: 1;
+  min-width: 200px;
+}
+
+#resource-title {
+  margin-top: 0;
+  font-size: 1.25rem;
+  color: #2d3748;
+}
+
+#resource-list {
   list-style: none;
   padding: 0;
+  margin: 0;
+}
+
+#resource-list li {
+  padding: 0.75rem 0.5rem;
+  border-bottom: 1px solid #edf2f7;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+#resource-list li:last-child {
+  border-bottom: none;
+}
+
+#actions pre {
+  background: #1a202c;
+  color: #e2e8f0;
+  padding: 1rem;
+  border-radius: 8px;
+  overflow-x: auto;
+  font-size: 0.85rem;
+}
+
+@media (max-width: 640px) {
+  #selectors {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  select, input[type="text"] {
+    width: 100%;
+  }
 }