status line!

src/css/terminal.css

@@ -161,3 +161,18 @@
 #scrollback .output {
     white-space: pre-wrap;
 }
+
+#statusline {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: 2px 8px;
+
+    background: var(--c64-light-gray);
+    color: var(--c64-dark-blue);
+
+    font-size: 14px;
+    display: flex;
+    justify-content: space-between;
+}

src/html/terminal.tsx

@@ -34,5 +34,7 @@ export const Terminal: FC = async () => (
       <li class="center">**** NOSE PLUTO V{new Date().getMonth() + 1}.{new Date().getDate()} ****</li>
       <li class="center">VRAM <span id="vram-size">000KB</span></li>
     </ul>
+
+    <div id="statusline"><div><span id="project-name">root</span>: <span id="project-cwd">/</span></div></div>
   </>
 )

src/js/commands.ts

@@ -38,5 +38,4 @@ export function cacheCommands(cmds: string[]) {
   commands.push(...cmds)
   commands.push(...Object.keys(browserCommands))
   commands.sort()
-  console.log("CMDS", commands)
 }

src/js/dispatch.ts

@@ -4,6 +4,7 @@ import { handleOutput } from "./scrollback"
 import { handleStreamStart, handleStreamAppend, handleStreamReplace, handleStreamEnd } from "./stream"
 import { handleGameStart } from "./game"
 import { browserCommands } from "./commands"
+import { handleSessionUpdate } from "./session"
 
 // message received from server
 export async function dispatchMessage(msg: Message) {
@@ -26,6 +27,8 @@ export async function dispatchMessage(msg: Message) {
       await handleGameStart(msg); break
     case "ui:mode":
       browserCommands.mode?.(msg.data as string); break
+    case "session:update":
+      handleSessionUpdate(msg); break
     default:
       console.error("unknown message type", msg)
   }

src/js/session.ts

@@ -2,6 +2,22 @@
 // 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 { 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 function handleSessionUpdate(msg: Message) {
+    const data = msg.data as Record<string, string>
+
+    if (data.project) {
+        projectName.textContent = data.project
+    }
+
+    if (data.cwd) {
+        projectCwd.textContent = data.cwd
+    }
+}

src/session.ts

@@ -2,6 +2,7 @@
 // Session storage. 1 browser tab = 1 session
 
 import { AsyncLocalStorage } from "async_hooks"
+import { send } from "./websocket"
 
 export type Session = {
     taskId?: string
@@ -35,6 +36,12 @@ export function sessionSet(key: keyof Session, value: any) {
     const store = ALS.getStore()
     if (!store) throw "sessionSet() called outside of ALS.run"
     store[key] = value
+    
+    if (!store.ws) return
+    send(store.ws, {
+        type: "session:update",
+        data: { [key]: value }
+    })
 }
 
 export function sessionStore(sessionId: string, taskId?: string, ws?: any): Session {

src/shared/types.ts

@@ -3,7 +3,7 @@ export type Message = {
     id?: string
     type: MessageType
     data?: CommandResult | CommandOutput
-}
+} | SessionUpdateMessage
 
 export type MessageType = "error" | "input" | "output" | "commands" | "save-file"
     | "game:start"
@@ -20,3 +20,8 @@ export type CommandResult = {
     status: "ok" | "error"
     output: CommandOutput
 }
+
+type SessionUpdateMessage = {
+    type: "session:update",
+    data: Record<string, string>
+}