{
  "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": "app.main-content",
              "options": {
                "url": "{{entire_url('new_session.ui')}}"
              },
              "mode": "replace"
            }
          ]
        }
      ]
    },
    {
      "widgettype": "HBox",
      "options": {
        "width": "100%",
        "height": "calc(100% - 60px)"
      },
      "subwidgets": [
        {
          "widgettype": "Menu",
          "options": {
            "width": "250px",
            "height": "100%",
            "bgcolor": "#1A1E2F",
            "items": [
              {
                "label": "Active Sessions",
                "icon": "fa fa-comments",
                "url": "{{entire_url('sessions.ui')}}",
                "target": "app.main-content"
              },
              {
                "label": "Services", 
                "icon": "fa fa-server",
                "url": "{{entire_url('services.ui')}}",
                "target": "app.main-content"
              },
              {
                "label": "Settings",
                "icon": "fa fa-cog", 
                "url": "{{entire_url('settings.ui')}}",
                "target": "app.main-content"
              }
            ],
            "item_cheight": 40,
            "menuitem_css": "menuitem"
          }
        },
        {
          "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"
                      }
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}