Working intent resolver

Author: robmoffat

package-lock.json

@@ -18,9 +18,9 @@
     "vite": "^5.0.2"
   },
   "dependencies": {
-    "@kite9/client": "2.2.0-beta.3",
-    "@kite9/da-server": "2.2.0-beta.3",
-    "@kite9/fdc3": "2.2.0-beta.3",
+    "@kite9/client": "2.2.0-beta.6",
+    "@kite9/da-server": "2.2.0-beta.6",
+    "@kite9/fdc3": "2.2.0-beta.6",
     "@types/react-dom": "^18.2.25",
     "@types/uuid": "^9.0.8",
     "@types/ws": "^8.5.10",

package.json

@@ -1,7 +1,7 @@
 import { io } from "socket.io-client"
 import { link } from "./util";
-import { APP_HELLO } from "../server/da/message-types";
-import { getClientState } from "../client/state/client";
+import { APP_HELLO, AppHelloArgs } from "../server/da/message-types";
+import { getClientState } from "../client/state/clientState";
 
 const appWindow = window.parent;
 
@@ -46,7 +46,11 @@ window.addEventListener("load", () => {
 
         link(socket, channel, instanceId)
 
-        socket.emit(APP_HELLO, clientState.getUserSessionID(), instanceId, appId)
+        socket.emit(APP_HELLO, {
+            userSessionId: clientState.getUserSessionID(),
+            instanceId,
+            appId
+        } as AppHelloArgs)
 
         // sned the other end of the channel to the app
         appWindow.postMessage({

src/app/embed.ts

@@ -1,8 +1,7 @@
 import { Component } from "react";
 import { Icon } from "../icon/icon";
-import { getServerState } from "../state/server";
+import { getServerState } from "../state/serverConnectivity";
 import * as styles from "./styles.module.css";
-import { ClientState } from "../state/client";
 import { Popup, PopupButton } from "../popups/popup";
 import { DirectoryApp } from "@kite9/da-server";
 
@@ -17,7 +16,7 @@ function getIcon(a: DirectoryApp) {
   }
 }
 
-type AppPanelProps = { closeAction: () => void; cs: ClientState };
+type AppPanelProps = { closeAction: () => void };
 
 type AppPanelState = {
   chosen: DirectoryApp | null;
@@ -96,12 +95,8 @@ export class AppDPanel extends Component<AppPanelProps, AppPanelState> {
             disabled={this.state.chosen == null}
             onClick={async () => {
               if (this.state.chosen) {
-                const ap = await this.props.cs.open(this.state.chosen);
-                if (ap) {
-                  this.props.closeAction();
-                } else {
-                  alert("Not a web app");
-                }
+                getServerState().registerAppLaunch(this.state.chosen.appId);
+                this.props.closeAction();
               }
             }}
           />,

src/client/appd/appd.tsx

@@ -1,6 +1,6 @@
 import { Component } from "react";
 import * as styles from "./styles.module.css";
-import { ClientState, Directory, getClientState } from "../state/client";
+import { ClientState, Directory, getClientState } from "../state/clientState";
 import { Popup } from "../popups/popup";
 
 const CONFIG_ITENS = ["Directories", "Something else", "Thing 3", "Thing 4"];

src/client/config/config.tsx

@@ -2,7 +2,7 @@ import { Bin, Controls, NewPanel, Resolver } from "../controls/controls";
 import { Logo, Settings } from "../top/top";
 import { Tabs } from "../tabs/tabs";
 import * as styles from "./styles.module.css";
-import { ClientState, getClientState } from "../state/client";
+import { ClientState, getClientState } from "../state/clientState";
 import { Component } from "react";
 import { AppDPanel } from "../appd/appd";
 import { Content, Grids } from "../grid/grid";
@@ -64,7 +64,6 @@ export class Frame extends Component<FrameProps, FrameState> {
                   context: EXAMPLE_CONTEXT,
                   requestId: "123",
                 });
-                this.setState(this.state);
               }}
             />
             <NewPanel onClick={() => this.setState({ popup: Popup.APPD })} />
@@ -80,7 +79,6 @@ export class Frame extends Component<FrameProps, FrameState> {
         {this.state?.popup == Popup.APPD ? (
           <AppDPanel
             key="appd"
-            cs={this.props.cs}
             closeAction={() =>
               this.setState({
                 popup: Popup.NONE,
@@ -105,7 +103,6 @@ export class Frame extends Component<FrameProps, FrameState> {
             context={this.props.cs.getIntentResolution()!!.context}
             closeAction={() => {
               this.props.cs.setIntentResolution(null);
-              this.setState(this.state);
             }}
           />
         ) : null}

src/client/frame/frame.tsx

@@ -1,5 +1,5 @@
 import { Component } from "react";
-import { AppPanel, ClientState } from "../state/client";
+import { AppPanel, ClientState } from "../state/clientState";
 import * as styles from "./styles.module.css";
 import "gridstack/dist/gridstack.css";
 import { GridsState } from "./gridstate";

src/client/grid/grid.tsx

@@ -1,7 +1,7 @@
 import { GridItemHTMLElement, GridStack, GridStackElement, GridStackWidget } from "gridstack"
 import { ReactElement } from "react"
 import ReactDOM from 'react-dom';
-import { AppPanel, ClientState } from "../state/client"
+import { AppPanel, ClientState } from "../state/clientState"
 
 const TRASH_DROP = "trash";
 

src/client/grid/gridstate.ts

@@ -1,6 +1,6 @@
 import { Frame } from "./frame/frame";
 import { createRoot } from "react-dom/client";
-import { getClientState } from "./state/client";
+import { getClientState } from "./state/clientState";
 import { setupPostMessage } from "./state/postMessage";
 import "../../static/fonts/DM_Sans/DM_Sans.css";
 

src/client/index.tsx

@@ -23,6 +23,7 @@
     margin-top: 1rem;
     margin: auto;
     max-width: 50rem;
+    max-height: 80%;
     background-color: white;
     border-radius: .5rem;
     padding: 1rem;
@@ -36,6 +37,7 @@
 .popupArea {
     display: flex;
     flex-direction: row;
+    overflow: scroll;
 }
 
 .popupTitle {