LLM-powered Weather Dashboard

client-app/src/Bootstrap.ts

@@ -16,14 +16,20 @@ import {ContactService} from './examples/contact/svc/ContactService';
 import {GitHubService} from './core/svc/GitHubService';
 import {PortfolioService} from './core/svc/PortfolioService';
 import {TaskService} from './examples/todo/TaskService';
+import {LlmChatService} from './examples/weatherv2/svc/LlmChatService';
+import {LlmToolService} from './examples/weatherv2/svc/LlmToolService';
+import {WeatherDataService} from './examples/weatherv2/svc/WeatherDataService';
 
 declare module '@xh/hoist/core' {
     // Merge interface with XHApi class to include injected services.
     export interface XHApi {
         contactService: ContactService;
         gitHubService: GitHubService;
+        llmChatService: LlmChatService;
+        llmToolService: LlmToolService;
         portfolioService: PortfolioService;
         taskService: TaskService;
+        weatherDataService: WeatherDataService;
     }
 
     export interface HoistUser {

client-app/src/apps/weatherv2.ts

@@ -0,0 +1,20 @@
+import '../Bootstrap';
+
+import {XH} from '@xh/hoist/core';
+import {AppContainer} from '@xh/hoist/desktop/appcontainer';
+import {AppComponent} from '../examples/weatherv2/AppComponent';
+import {AppModel} from '../examples/weatherv2/AppModel';
+import {AuthModel} from '../core/AuthModel';
+
+XH.renderApp({
+    clientAppCode: 'weatherv2',
+    clientAppName: 'XH Weather V2',
+    componentClass: AppComponent,
+    modelClass: AppModel,
+    containerClass: AppContainer,
+    authModelClass: AuthModel,
+    isMobileApp: false,
+    enableLogout: true,
+    showBrowserContextMenu: true,
+    checkAccess: () => true
+});

client-app/src/desktop/tabs/examples/ExamplesTabModel.ts

@@ -47,6 +47,20 @@ export class ExamplesTabModel extends HoistModel {
                 )
             ]
         },
+        {
+            title: 'Weather V2',
+            icon: Icon.sun(),
+            path: 'weatherv2',
+            srcPath: 'weatherv2',
+            text: [
+                p(
+                    'Weather Dashboard V2 — a declarative, wirable dashboard with inter-widget bindings and LLM-driven spec generation.'
+                ),
+                p(
+                    "Demonstrates dashboard-as-DSL: Hoist's native persisted state as a machine-readable spec that an LLM can generate and validate."
+                )
+            ]
+        },
         {
             title: 'Contact',
             icon: Icon.users(),

client-app/src/examples/weatherv2/AppComponent.ts

@@ -0,0 +1,113 @@
+import {hoistCmp, uses} from '@xh/hoist/core';
+import {frame, hframe} from '@xh/hoist/cmp/layout';
+import {appBar, appBarSeparator} from '@xh/hoist/desktop/cmp/appbar';
+import {button, dashCanvasAddViewButton} from '@xh/hoist/desktop/cmp/button';
+import {panel} from '@xh/hoist/desktop/cmp/panel';
+import {dashCanvas, dashCanvasWidgetChooser} from '@xh/hoist/desktop/cmp/dash';
+import {viewManager} from '@xh/hoist/desktop/cmp/viewmanager';
+import {Icon} from '@xh/hoist/icon';
+import {sparklesIcon} from './Icons';
+import {AppModel} from './AppModel';
+import {jsonHarnessPanel} from './harness/JsonHarnessPanel';
+import {chatHarnessPanel} from './harness/ChatHarnessPanel';
+import '../../core/Toolbox.scss';
+import './WeatherV2.scss';
+
+export const AppComponent = hoistCmp({
+    displayName: 'App',
+    model: uses(AppModel),
+
+    render({model}) {
+        const {
+                weatherViewManager,
+                weatherV2DashModel,
+                manualEditingEnabled,
+                showJsonHarness,
+                showChatHarness,
+                showWidgetChooser
+            } = model,
+            {dashCanvasModel} = weatherV2DashModel,
+            activeWidgetChooser = showWidgetChooser && manualEditingEnabled,
+            showHarness = showChatHarness || showJsonHarness || activeWidgetChooser;
+
+        return panel({
+            tbar: appBar({
+                icon: Icon.sun({size: '2x', prefix: 'fal'}),
+                title: 'Weather V2',
+                rightItems: [
+                    viewManager({model: weatherViewManager}),
+                    appBarSeparator(),
+                    button({
+                        testId: 'manual-editing-btn',
+                        icon: Icon.edit(),
+                        text: 'Manual Editing',
+                        active: manualEditingEnabled,
+                        outlined: true,
+                        intent: manualEditingEnabled ? 'primary' : undefined,
+                        onClick: () => (model.manualEditingEnabled = !manualEditingEnabled)
+                    }),
+                    dashCanvasAddViewButton({
+                        dashCanvasModel,
+                        rightIcon: Icon.chevronDown(),
+                        outlined: true,
+                        disabled: !manualEditingEnabled
+                    }),
+                    appBarSeparator(),
+                    button({
+                        testId: 'chat-btn',
+                        icon: sparklesIcon(),
+                        text: 'Dashboard Agent',
+                        active: showChatHarness,
+                        outlined: true,
+                        intent: showChatHarness ? 'primary' : undefined,
+                        onClick: () => (model.showChatHarness = !showChatHarness)
+                    }),
+                    button({
+                        testId: 'json-btn',
+                        icon: Icon.json(),
+                        text: 'JSON',
+                        active: showJsonHarness,
+                        outlined: true,
+                        intent: showJsonHarness ? 'primary' : undefined,
+                        onClick: () => (model.showJsonHarness = !showJsonHarness)
+                    }),
+                    button({
+                        testId: 'widget-chooser-btn',
+                        icon: Icon.boxFull(),
+                        text: 'Widgets',
+                        active: showWidgetChooser,
+                        outlined: true,
+                        intent: activeWidgetChooser ? 'primary' : undefined,
+                        disabled: !manualEditingEnabled,
+                        onClick: () => (model.showWidgetChooser = !showWidgetChooser)
+                    }),
+                    appBarSeparator()
+                ],
+                appMenuButtonProps: {hideLogoutItem: false}
+            }),
+            item: hframe(
+                frame(dashCanvas({model: dashCanvasModel})),
+                panel({
+                    model: model.harnessPanelModel,
+                    items: [
+                        showChatHarness ? chatHarnessPanel() : null,
+                        showJsonHarness ? jsonHarnessPanel() : null,
+                        activeWidgetChooser
+                            ? panel({
+                                  testId: 'widget-chooser-panel',
+                                  title: 'Widget Chooser',
+                                  icon: Icon.boxFull(),
+                                  compactHeader: true,
+                                  flex: 1,
+                                  minHeight: 0,
+                                  item: dashCanvasWidgetChooser({dashCanvasModel})
+                              })
+                            : null
+                    ],
+                    omit: !showHarness
+                })
+            ),
+            className: 'weather-v2-app'
+        });
+    }
+});

client-app/src/examples/weatherv2/AppModel.ts

@@ -0,0 +1,72 @@
+import {InitContext, managed, persist, XH} from '@xh/hoist/core';
+import {ViewManagerModel} from '@xh/hoist/cmp/viewmanager';
+import {PanelModel} from '@xh/hoist/desktop/cmp/panel';
+import {bindable, makeObservable} from '@xh/hoist/mobx';
+import {
+    autoRefreshAppOption,
+    themeAppOption,
+    sizingModeAppOption
+} from '@xh/hoist/desktop/cmp/appOption';
+import {BaseAppModel} from '../../BaseAppModel';
+import {WeatherV2DashModel} from './dash/WeatherV2DashModel';
+import {LlmChatService} from './svc/LlmChatService';
+import {LlmToolService} from './svc/LlmToolService';
+import {WeatherDataService} from './svc/WeatherDataService';
+
+export class AppModel extends BaseAppModel {
+    static instance: AppModel;
+    override persistWith = {localStorageKey: 'weatherV2App'};
+
+    @managed weatherV2DashModel: WeatherV2DashModel;
+    @managed weatherViewManager: ViewManagerModel;
+    @managed harnessPanelModel: PanelModel;
+    @persist @bindable manualEditingEnabled: boolean = true;
+    @persist @bindable showJsonHarness: boolean = false;
+    @persist @bindable showChatHarness: boolean = true;
+    @persist @bindable showWidgetChooser: boolean = false;
+
+    constructor() {
+        super();
+        makeObservable(this);
+    }
+
+    override async initAsync(ctx: InitContext) {
+        await super.initAsync(ctx);
+        await XH.installServicesAsync([LlmChatService, LlmToolService, WeatherDataService], ctx);
+
+        this.harnessPanelModel = new PanelModel({
+            side: 'right',
+            defaultSize: 500,
+            minSize: 300,
+            resizable: true,
+            collapsible: false,
+            persistWith: {...this.persistWith, path: 'harnessPanel'}
+        });
+
+        await this.newSpan({name: 'toolbox.weatherv2.loadViews', parent: ctx.span}).run(
+            async () => {
+                this.weatherViewManager = await ViewManagerModel.createAsync({
+                    type: 'weatherDashboardV2',
+                    typeDisplayName: 'Layout',
+                    enableDefault: true,
+                    enableAutoSave: false,
+                    manageGlobal: XH.getUser().isHoistAdmin
+                });
+            }
+        );
+
+        this.weatherV2DashModel = new WeatherV2DashModel(this.weatherViewManager);
+
+        this.addReaction({
+            track: () => this.manualEditingEnabled,
+            run: editing => {
+                this.weatherV2DashModel.dashCanvasModel.showGridBackground = editing;
+            },
+            fireImmediately: true
+        });
+    }
+
+    override getAppOptions() {
+        return [themeAppOption(), sizingModeAppOption(), autoRefreshAppOption()];
+    }
+}

client-app/src/examples/weatherv2/Icons.ts

@@ -0,0 +1,19 @@
+import {library} from '@fortawesome/fontawesome-svg-core';
+import {
+    faCloudRain,
+    faDropletPercent,
+    faCalendarDays,
+    faSparkles,
+    faTemperatureHalf,
+    faWind
+} from '@fortawesome/pro-regular-svg-icons';
+import {Icon} from '@xh/hoist/icon';
+
+library.add(faCloudRain, faDropletPercent, faCalendarDays, faSparkles, faTemperatureHalf, faWind);
+
+export const temperatureIcon = (opts = {}) => Icon.icon({iconName: 'temperature-half', ...opts});
+export const cloudRainIcon = (opts = {}) => Icon.icon({iconName: 'cloud-rain', ...opts});
+export const windIcon = (opts = {}) => Icon.icon({iconName: 'wind', ...opts});
+export const dropletPercentIcon = (opts = {}) => Icon.icon({iconName: 'droplet-percent', ...opts});
+export const calendarDaysIcon = (opts = {}) => Icon.icon({iconName: 'calendar-days', ...opts});
+export const sparklesIcon = (opts = {}) => Icon.icon({iconName: 'sparkles', ...opts});