glorious purpose

src/dispatch.ts

@@ -1,5 +1,5 @@
 ////
-// Dispatch Messages received via WebSocket
+// Dispatch client->server Messages received via WebSocket
 
 import { basename } from "path"
 import type { Message, InputMessage, SaveFileMessage } from "./shared/types"

src/js/dispatch.ts

@@ -1,10 +1,12 @@
+////
+// Dispatch server->client Messages received via WebSocket
+
 import type { Message } from "@/shared/types"
 import { cacheCommands } from "./commands"
 import { handleOutput } from "./scrollback"
 import { handleStreamStart, handleStreamAppend, handleStreamReplace, handleStreamEnd } from "./stream"
 import { handleGameStart } from "./game"
-import { browserCommands } from "./commands"
-import { handleSessionUpdate } from "./session"
+import { handleSessionStart, handleSessionUpdate } from "./session"
 
 // message received from server
 export async function dispatchMessage(msg: Message) {
@@ -25,8 +27,8 @@ export async function dispatchMessage(msg: Message) {
       handleStreamReplace(msg); break
     case "game:start":
       await handleGameStart(msg); break
-    case "ui:mode":
-      browserCommands.mode?.(msg.data as string); break
+    case "session:start":
+      handleSessionStart(msg); break
     case "session:update":
       handleSessionUpdate(msg); break
     default:

src/js/session.ts

@@ -2,26 +2,47 @@
 // Each browser tab is a shell session. This means you can run multiple sessions
 // in the same browser.
 
-import type { Message } from "@/shared/types"
+import type { SessionStartMessage, SessionUpdateMessage } from "@/shared/types"
+import { browserCommands } from "./commands"
 import { randomId } from "../shared/utils"
 import { $ } from "./dom"
 
 export const sessionId = randomId()
 export const projectName = $("project-name") as HTMLSpanElement
 export const projectCwd = $("project-cwd") as HTMLSpanElement
+export const sessionStore = new Map<string, string>()
 
-export function handleSessionUpdate(msg: Message) {
+export function handleSessionStart(msg: SessionStartMessage) {
+    sessionStore.set("NOSE_DIR", msg.data.NOSE_DIR)
+    updateProjectName(msg.data.project)
+    updateCwd(msg.data.cwd)
+    browserCommands.mode?.(msg.data.mode)
+}
+
+export function handleSessionUpdate(msg: SessionUpdateMessage) {
     const data = msg.data as Record<string, string>
 
-    if (data.project) {
-        projectName.textContent = data.project
-    }
+    if (data.project)
+        updateProjectName(data.project)
 
-    if (data.cwd) {
-        projectCwd.textContent = displayProjectPath(data.cwd)
-    }
+    if (data.cwd)
+        updateCwd(data.cwd)
+}
+
+function updateProjectName(project: string) {
+    sessionStore.set("project", project)
+    projectName.textContent = project
+}
+
+function updateCwd(cwd: string) {
+    cwd = displayProjectPath(cwd)
+    sessionStore.set("cwd", cwd)
+    projectCwd.textContent = cwd
 }
 
 function displayProjectPath(path: string): string {
-    return path
+    let prefix = sessionStore.get("NOSE_DIR") || ""
+    prefix += "/" + sessionStore.get("project")
+
+    return path.replace(prefix, "")
 }

src/server.tsx

@@ -7,7 +7,7 @@ import { prettyJSON } from "hono/pretty-json"
 import color from "kleur"
 
 import type { Message } from "./shared/types"
-import { NOSE_ICON, NOSE_BIN, NOSE_DATA, NOSE_DIR, NOSE_ROOT_BIN } from "./config"
+import { NOSE_ICON, NOSE_BIN, NOSE_DATA, NOSE_DIR, NOSE_ROOT_BIN, DEFAULT_PROJECT } from "./config"
 import { transpile, isFile, tilde, isDir } from "./utils"
 import { serveApp } from "./webapp"
 import { commands, commandPath, loadCommandModule } from "./commands"
@@ -137,8 +137,15 @@ app.get("/ws", c => {
             addWebsocket(ws)
             send(ws, { type: "commands", data: await commands() })
 
-            const mode = getState("ui:mode") || "tall"
-            send(ws, { type: "ui:mode", data: mode })
+            send(ws, {
+                type: "session:start",
+                data: {
+                    NOSE_DIR: NOSE_DIR,
+                    project: DEFAULT_PROJECT,
+                    cwd: "/",
+                    mode: getState("ui:mode") || "tall"
+                }
+            })
         },
         async onMessage(event, ws) {
             let data: Message | undefined

src/shared/types.ts

@@ -6,6 +6,7 @@ export type Message = {
 }
     | InputMessage
     | SaveFileMessage
+    | SessionStartMessage
     | SessionUpdateMessage
 
 export type MessageType = "error" | "input" | "output" | "commands" | "save-file"
@@ -38,7 +39,17 @@ export type SaveFileMessage = {
     data: CommandResult | CommandOutput
 }
 
+export type SessionStartMessage = {
+    type: "session:start"
+    data: {
+        NOSE_DIR: string
+        project: string
+        cwd: string
+        mode: string
+    }
+}
+
 export type SessionUpdateMessage = {
-    type: "session:update",
+    type: "session:update"
     data: Record<string, string>
 }