@flisk-sh/flisk 0.0.0-stage → 1.3.190

package/ext/ui-enhancements/extension.yaml

@@ -0,0 +1,36 @@
+# UI Enhancements Extension for Flisk Landscape Tilt IDE
+# Provides tooltips, icons, help panels, and cron jobs monitoring
+
+name: ui-enhancements
+version: 1.0.0
+author: Flisk Landscape Platform Team
+description: |
+  Enhances the Tilt web UI with:
+  - Contextual tooltips for all resources
+  - Visual icons for resource type identification
+  - Help panels for developer onboarding
+  - Cron Jobs monitoring tab
+
+tags:
+  - ui
+  - developer-experience
+  - monitoring
+
+dependencies: []
+
+config:
+  # Feature flags - can be overridden in Tiltfile
+  enable_tooltips: true
+  enable_icons: true
+  enable_help_panel: true
+  enable_cron_jobs_tab: true
+
+  # Polling interval for cron jobs status (seconds)
+  cron_status_poll_interval: 5
+
+  # Status endpoint URL
+  cron_status_endpoint: http://localhost:10350/api/cron-jobs-status
+
+entrypoint:
+  # The main script that injects CSS and JS into Tilt UI
+  script: tiltfile.py

package/ext/ui-enhancements/tiltfile.py

@@ -0,0 +1,101 @@
+# Copyright (c) 2026 Flisk Landscape contributors
+# SPDX-License-Identifier: MIT
+# Tilt UI Enhancements Extension
+# Injects CSS and JavaScript into the Tilt web UI for improved UX.
+#
+# Usage:
+#   load('./ext/ui-enhancements/tiltfile.py', 'load_ui_enhancements')
+#   load_ui_enhancements({'enable_tooltips': True, 'enable_icons': True})
+
+def load_ui_enhancements(ctx):
+    """
+    Load all UI enhancement features.
+
+    Args:
+        ctx: Extension context with configuration
+    """
+    enable_tooltips = ctx.get('enable_tooltips', True)
+    enable_icons = ctx.get('enable_icons', True)
+    enable_help_panel = ctx.get('enable_help_panel', True)
+    enable_cron_jobs_tab = ctx.get('enable_cron_jobs_tab', True)
+
+    # Read CSS and JS files
+    css_files = []
+    js_files = []
+
+    if enable_tooltips:
+        css_files.append(read_file('./ext/ui-enhancements/ui/tooltips.css'))
+        js_files.append(read_file('./ext/ui-enhancements/ui/tooltips.js'))
+
+    if enable_icons:
+        css_files.append(read_file('./ext/ui-enhancements/ui/icons.css'))
+        js_files.append(read_file('./ext/ui-enhancements/ui/icons.js'))
+
+    if enable_help_panel:
+        css_files.append(read_file('./ext/ui-enhancements/ui/help-panel.css'))
+        js_files.append(read_file('./ext/ui-enhancements/ui/help-panel.js'))
+
+    if enable_cron_jobs_tab:
+        css_files.append(read_file('./ext/ui-enhancements/ui/cron-jobs-tab.css'))
+        js_files.append(read_file('./ext/ui-enhancements/ui/cron-jobs-tab.js'))
+
+    # Combine all CSS and JS
+    # Convert blobs to strings using str()
+    css_strings = [str(f) for f in css_files]
+    js_strings = [str(f) for f in js_files]
+    combined_css = '\n'.join(css_strings)
+    combined_js = '\n'.join(js_strings)
+
+    # Encode to base64 to safely pass through shell without variable expansion issues
+    import base64
+    css_b64 = base64.b64encode(combined_css.encode('utf-8')).decode('ascii')
+    js_b64 = base64.b64encode(combined_js.encode('utf-8')).decode('ascii')
+
+    # Create local resource that serves the UI enhancements
+    local_resource(
+        'ui-enhancements-server',
+        serve_cmd='''
+            echo "UI Enhancements Server starting on port 10351..."
+            python3 -c "
+import http.server
+import socketserver
+import base64
+
+CSS_B64 = ''' + repr(css_b64) + '''
+JS_B64 = ''' + repr(js_b64) + '''
+
+CSS = base64.b64decode(CSS_B64).decode('utf-8')
+JS = base64.b64decode(JS_B64).decode('utf-8')
+
+class Handler(http.server.SimpleHTTPRequestHandler):
+    def do_GET(self):
+        if self.path == '/ui-enhancements.css':
+            self.send_response(200)
+            self.send_header('Content-Type', 'text/css')
+            self.send_header('Access-Control-Allow-Origin', '*')
+            self.end_headers()
+            self.wfile.write(CSS.encode())
+        elif self.path == '/ui-enhancements.js':
+            self.send_response(200)
+            self.send_header('Content-Type', 'application/javascript')
+            self.send_header('Access-Control-Allow-Origin', '*')
+            self.end_headers()
+            self.wfile.write(JS.encode())
+        else:
+            self.send_response(404)
+            self.end_headers()
+
+with socketserver.TCPServer(('', 10351), Handler) as httpd:
+    print('UI Enhancements Server running on port 10351')
+    httpd.serve_forever()
+"
+        ''',
+        labels=['dev.tools', 'ui-enhancements'],
+        auto_init=True,
+    )
+
+    print("✨ UI Enhancements Extension loaded")
+    print("   - Tooltips: " + ("enabled" if enable_tooltips else "disabled"))
+    print("   - Icons: " + ("enabled" if enable_icons else "disabled"))
+    print("   - Help Panel: " + ("enabled" if enable_help_panel else "disabled"))
+    print("   - Cron Jobs Tab: " + ("enabled" if enable_cron_jobs_tab else "disabled"))

package/ext/ui-enhancements/ui/cron-jobs-tab.css

@@ -0,0 +1,396 @@
+/* ============================================================================
+   CRON JOBS TAB CSS - UI Enhancements Extension
+   Provides a dedicated tab for monitoring cron jobs
+   ============================================================================ */
+
+/* Tab button in header */
+.tilt-cron-tab-button {
+  position: fixed;
+  top: 12px;
+  right: 140px;
+  z-index: 1000;
+  background: #2d2d44;
+  color: #e0e0e0;
+  border: 1px solid #3d3d5c;
+  border-radius: 6px;
+  padding: 8px 16px;
+  font-size: 14px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  transition:
+    background 0.2s,
+    border-color 0.2s;
+}
+
+.tilt-cron-tab-button:hover {
+  background: #3d3d5c;
+  border-color: #4d4d6c;
+}
+
+.tilt-cron-tab-button.active {
+  background: #4d4d6c;
+  border-color: #64b5f6;
+}
+
+.tilt-cron-tab-button svg {
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+}
+
+.tilt-cron-tab-button .badge {
+  background: #f44336;
+  color: white;
+  font-size: 11px;
+  padding: 2px 6px;
+  border-radius: 10px;
+  min-width: 18px;
+  text-align: center;
+}
+
+.tilt-cron-tab-button .badge.success {
+  background: #4caf50;
+}
+
+/* Cron jobs panel */
+.tilt-cron-panel {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: #1a1a2e;
+  z-index: 999;
+  display: none;
+  flex-direction: column;
+}
+
+.tilt-cron-panel.open {
+  display: flex;
+}
+
+/* Cron panel header */
+.tilt-cron-header {
+  padding: 20px;
+  border-bottom: 1px solid #2d2d44;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #1e1e32;
+}
+
+.tilt-cron-header h2 {
+  margin: 0;
+  color: #fff;
+  font-size: 20px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.tilt-cron-header h2 svg {
+  width: 24px;
+  height: 24px;
+  fill: #4dd0e1;
+}
+
+.tilt-cron-close {
+  background: none;
+  border: none;
+  color: #808090;
+  font-size: 24px;
+  cursor: pointer;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition:
+    background 0.2s,
+    color 0.2s;
+}
+
+.tilt-cron-close:hover {
+  background: #2d2d44;
+  color: #fff;
+}
+
+/* Cron jobs content */
+.tilt-cron-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+}
+
+/* Jobs table */
+.tilt-cron-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.tilt-cron-table th {
+  text-align: left;
+  padding: 12px;
+  color: #808090;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  border-bottom: 1px solid #2d2d44;
+}
+
+.tilt-cron-table td {
+  padding: 16px 12px;
+  border-bottom: 1px solid #2d2d44;
+  vertical-align: middle;
+}
+
+/* Job row */
+.tilt-cron-job {
+  transition: background 0.2s;
+}
+
+.tilt-cron-job:hover {
+  background: rgba(45, 45, 68, 0.5);
+}
+
+/* Job name */
+.tilt-cron-job-name {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.tilt-cron-job-name .icon {
+  width: 20px;
+  height: 20px;
+  color: #4dd0e1;
+}
+
+.tilt-cron-job-name .name {
+  color: #e0e0e0;
+  font-weight: 500;
+  font-size: 14px;
+}
+
+/* Status badge */
+.tilt-cron-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.tilt-cron-status::before {
+  content: "";
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.tilt-cron-status.success {
+  background: rgba(76, 175, 80, 0.2);
+  color: #4caf50;
+}
+
+.tilt-cron-status.success::before {
+  background: #4caf50;
+}
+
+.tilt-cron-status.failure {
+  background: rgba(244, 67, 54, 0.2);
+  color: #f44336;
+}
+
+.tilt-cron-status.failure::before {
+  background: #f44336;
+}
+
+.tilt-cron-status.running {
+  background: rgba(33, 150, 243, 0.2);
+  color: #2196f3;
+}
+
+.tilt-cron-status.running::before {
+  background: #2196f3;
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+.tilt-cron-status.idle {
+  background: rgba(158, 158, 158, 0.2);
+  color: #9e9e9e;
+}
+
+.tilt-cron-status.idle::before {
+  background: #9e9e9e;
+}
+
+.tilt-cron-status.paused {
+  background: rgba(255, 152, 0, 0.2);
+  color: #ff9800;
+}
+
+.tilt-cron-status.paused::before {
+  background: #ff9800;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+
+/* Time columns */
+.tilt-cron-time {
+  color: #b0b0c0;
+  font-size: 13px;
+}
+
+.tilt-cron-time.never {
+  color: #808090;
+  font-style: italic;
+}
+
+/* Controls */
+.tilt-cron-controls {
+  display: flex;
+  gap: 8px;
+}
+
+.tilt-cron-btn {
+  padding: 6px 12px;
+  border: 1px solid #3d3d5c;
+  border-radius: 4px;
+  background: #2d2d44;
+  color: #e0e0e0;
+  font-size: 12px;
+  cursor: pointer;
+  transition:
+    background 0.2s,
+    border-color 0.2s;
+}
+
+.tilt-cron-btn:hover {
+  background: #3d3d5c;
+  border-color: #4d4d6c;
+}
+
+.tilt-cron-btn.primary {
+  background: #64b5f6;
+  border-color: #64b5f6;
+  color: #1a1a2e;
+}
+
+.tilt-cron-btn.primary:hover {
+  background: #90caf9;
+  border-color: #90caf9;
+}
+
+.tilt-cron-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* History section */
+.tilt-cron-history {
+  margin-top: 12px;
+  padding: 12px;
+  background: #2d2d44;
+  border-radius: 6px;
+  display: none;
+}
+
+.tilt-cron-history.open {
+  display: block;
+}
+
+.tilt-cron-history h4 {
+  margin: 0 0 10px 0;
+  color: #808090;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.tilt-cron-history-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+  border-bottom: 1px solid #3d3d5c;
+  font-size: 13px;
+}
+
+.tilt-cron-history-item:last-child {
+  border-bottom: none;
+}
+
+.tilt-cron-history-item .time {
+  color: #b0b0c0;
+}
+
+.tilt-cron-history-item .status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.tilt-cron-history-item .status.success {
+  color: #4caf50;
+}
+
+.tilt-cron-history-item .status.failure {
+  color: #f44336;
+}
+
+.tilt-cron-history-item .duration {
+  color: #808090;
+  font-size: 12px;
+}
+
+/* Expand button */
+.tilt-cron-expand {
+  background: none;
+  border: none;
+  color: #64b5f6;
+  font-size: 12px;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.tilt-cron-expand:hover {
+  color: #90caf9;
+}
+
+/* Loading state */
+.tilt-cron-loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 40px;
+  color: #808090;
+}
+
+.tilt-cron-error {
+  padding: 20px;
+  background: rgba(244, 67, 54, 0.1);
+  border: 1px solid rgba(244, 67, 54, 0.3);
+  border-radius: 6px;
+  color: #f44336;
+  margin: 20px;
+}