{
  "widgettype": "VBox",
  "options": {
    "width": "100%",
    "height": "100%",
    "backgroundColor": "#020617",
    "color": "#F8FAFC"
  },
  "subwidgets": [
    {
      "widgettype": "HBox",
      "options": {
        "width": "100%",
        "height": "60px",
        "backgroundColor": "#0F172A",
        "borderBottom": "1px solid #334155",
        "padding": "0 20px",
        "alignItems": "center"
      },
      "subwidgets": [
        {
          "widgettype": "Text",
          "options": {
            "text": "Hermes Web CLI",
            "fontSize": "24px",
            "fontWeight": "bold",
            "color": "#F8FAFC"
          }
        },
        {
          "widgettype": "Filler"
        },
        {
          "widgettype": "Button",
          "options": {
            "icon": "fa fa-plus",
            "label": "New Session",
            "backgroundColor": "#22C55E",
            "color": "#FFFFFF",
            "border": "none",
            "borderRadius": "6px",
            "padding": "8px 16px"
          },
          "binds": [
            {
              "wid": "self",
              "event": "click",
              "actiontype": "urlwidget",
              "target": "main-content",
              "options": {
                "url": "{{entire_url('new_session.ui')}}"
              },
              "mode": "replace"
            }
          ]
        }
      ]
    },
    {
      "widgettype": "HBox",
      "options": {
        "width": "100%",
        "height": "calc(100% - 60px)"
      },
      "subwidgets": [
        {
          "widgettype": "VBox",
          "options": {
            "width": "250px",
            "height": "100%",
            "backgroundColor": "#1A1E2F",
            "borderRight": "1px solid #334155"
          },
          "subwidgets": [
            {
              "widgettype": "Button",
              "options": {
                "icon": "fa fa-comments",
                "label": "Active Sessions",
                "width": "100%",
                "textAlign": "left",
                "padding": "12px 20px",
                "border": "none",
                "backgroundColor": "transparent",
                "color": "#F8FAFC",
                "fontSize": "14px"
              },
              "binds": [
                {
                  "wid": "self",
                  "event": "click",
                  "actiontype": "urlwidget",
                  "target": "main-content",
                  "options": {
                    "url": "{{entire_url('sessions.ui')}}"
                  },
                  "mode": "replace"
                }
              ]
            },
            {
              "widgettype": "Button",
              "options": {
                "icon": "fa fa-server",
                "label": "Services",
                "width": "100%",
                "textAlign": "left",
                "padding": "12px 20px",
                "border": "none",
                "backgroundColor": "transparent",
                "color": "#F8FAFC",
                "fontSize": "14px"
              },
              "binds": [
                {
                  "wid": "self",
                  "event": "click",
                  "actiontype": "urlwidget",
                  "target": "main-content",
                  "options": {
                    "url": "{{entire_url('services.ui')}}"
                  },
                  "mode": "replace"
                }
              ]
            },
            {
              "widgettype": "Button",
              "options": {
                "icon": "fa fa-cog",
                "label": "Settings",
                "width": "100%",
                "textAlign": "left",
                "padding": "12px 20px",
                "border": "none",
                "backgroundColor": "transparent",
                "color": "#F8FAFC",
                "fontSize": "14px"
              },
              "binds": [
                {
                  "wid": "self",
                  "event": "click",
                  "actiontype": "urlwidget",
                  "target": "main-content",
                  "options": {
                    "url": "{{entire_url('settings.ui')}}"
                  },
                  "mode": "replace"
                }
              ]
            }
          ]
        },
        {
          "widgettype": "VBox",
          "id": "main-content",
          "options": {
            "width": "calc(100% - 250px)",
            "height": "100%",
            "padding": "20px"
          },
          "subwidgets": [
            {
              "widgettype": "Text",
              "options": {
                "text": "Welcome to Hermes Web CLI",
                "fontSize": "28px",
                "fontWeight": "bold",
                "marginBottom": "16px",
                "color": "#F8FAFC"
              }
            },
            {
              "widgettype": "Text",
              "options": {
                "text": "Interact with your AI agents through natural language conversations. Create new sessions, manage connected services, and configure your workspace.",
                "fontSize": "16px",
                "marginBottom": "24px",
                "color": "#CBD5E1"
              }
            },
            {
              "widgettype": "HBox",
              "options": {
                "width": "100%",
                "height": "auto",
                "gap": "20px"
              },
              "subwidgets": [
                {
                  "widgettype": "VBox",
                  "options": {
                    "width": "33%",
                    "height": "120px",
                    "backgroundColor": "#1E293B",
                    "borderRadius": "8px",
                    "padding": "20px",
                    "border": "1px solid #334155"
                  },
                  "subwidgets": [
                    {
                      "widgettype": "Text",
                      "options": {
                        "text": "Quick Start",
                        "fontSize": "18px",
                        "fontWeight": "600",
                        "color": "#F8FAFC",
                        "marginBottom": "8px"
                      }
                    },
                    {
                      "widgettype": "Text",
                      "options": {
                        "text": "Create your first session and start chatting with your AI agent.",
                        "fontSize": "14px",
                        "color": "#94A3B8"
                      }
                    }
                  ]
                },
                {
                  "widgettype": "VBox",
                  "options": {
                    "width": "33%",
                    "height": "120px",
                    "backgroundColor": "#1E293B",
                    "borderRadius": "8px",
                    "padding": "20px",
                    "border": "1px solid #334155"
                  },
                  "subwidgets": [
                    {
                      "widgettype": "Text",
                      "options": {
                        "text": "Service Management",
                        "fontSize": "18px",
                        "fontWeight": "600",
                        "color": "#F8FAFC",
                        "marginBottom": "8px"
                      }
                    },
                    {
                      "widgettype": "Text",
                      "options": {
                        "text": "Connect and manage multiple Hermes services for distributed AI processing.",
                        "fontSize": "14px",
                        "color": "#94A3B8"
                      }
                    }
                  ]
                },
                {
                  "widgettype": "VBox",
                  "options": {
                    "width": "33%",
                    "height": "120px",
                    "backgroundColor": "#1E293B",
                    "borderRadius": "8px",
                    "padding": "20px",
                    "border": "1px solid #334155"
                  },
                  "subwidgets": [
                    {
                      "widgettype": "Text",
                      "options": {
                        "text": "Session History",
                        "fontSize": "18px",
                        "fontWeight": "600",
                        "color": "#F8FAFC",
                        "marginBottom": "8px"
                      }
                    },
                    {
                      "widgettype": "Text",
                      "options": {
                        "text": "Access your conversation history and continue previous sessions.",
                        "fontSize": "14px",
                        "color": "#94A3B8"
                      }
                    }
                  ]
                }
              ]
            },
            {
              "widgettype": "Text",
              "options": {
                "text": "Recent Sessions",
                "fontSize": "20px",
                "fontWeight": "600",
                "marginTop": "32px",
                "marginBottom": "16px",
                "color": "#F8FAFC"
              }
            },
            {
              "widgettype": "DataViewer",
              "options": {
                "data_url": "/hermes-web-cli/sessions/recent",
                "page_rows": 5,
                "row_options": {
                  "fields": [
                    {
                      "name": "session_id",
                      "label": "Session ID",
                      "uitype": "str"
                    },
                    {
                      "name": "service_name",
                      "label": "Service",
                      "uitype": "str"
                    },
                    {
                      "name": "last_message",
                      "label": "Last Message",
                      "uitype": "str"
                    },
                    {
                      "name": "updated_at",
                      "label": "Last Active",
                      "uitype": "date"
                    }
                  ]
                },
                "toolbar": {
                  "tools": [
                    {
                      "name": "open_session",
                      "text": "Open",
                      "icon": "fa fa-folder-open"
                    },
                    {
                      "name": "delete_session",
                      "text": "Delete",
                      "icon": "fa fa-trash"
                    }
                  ]
                }
              },
              "binds": [
                {
                  "wid": "self",
                  "event": "open_session",
                  "actiontype": "script",
                  "script": "const selectedRow = event.params; if (selectedRow) { const url = `{{entire_url('session_detail.ui')}}?session_id=${selectedRow.session_id}`; bricks.app.load_widget(url, 'main-content', 'replace'); }"
                },
                {
                  "wid": "self",
                  "event": "delete_session",
                  "actiontype": "script",
                  "script": "const selectedRow = event.params; if (selectedRow) { fetch(`/hermes-web-cli/sessions/${selectedRow.session_id}`, { method: 'DELETE' }).then(() => { this.refresh(); }); }"
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}