tell browser about hostname, link to project

src/css/terminal.css

@@ -181,7 +181,8 @@
     display: none;
 }
 
-#statusbar.showing-msg .line-cwd {
+#statusbar.showing-msg .line-cwd,
+#statusbar.showing-msg .line-www {
     display: none;
 }
 

src/html/terminal.tsx

@@ -41,6 +41,7 @@ export const Terminal: FC = async () => (
 
     <div id="statusbar">
       <div class="line-cwd"><a href="#projects" id="project-name">root</a>: <a href="#ls" id="project-cwd">/</a></div>
+      <div class="line-www"><a id="project-www" href="#">www</a></div>
       <div class="line-msg"><span id="statusbar-msg"></span></div>
     </div>
   </>

src/js/commands.ts

@@ -8,6 +8,7 @@ import { focusInput } from "./focus"
 import { resize } from "./resize"
 import { sessionId } from "./session"
 import { send } from "./websocket"
+import { status } from "./statusbar"
 
 export const commands: string[] = []
 
@@ -30,6 +31,7 @@ export const browserCommands: Record<string, (...args: string[]) => void | Promi
     resize()
     focusInput()
   },
+  status: (msg: string) => status(msg),
   reload: () => window.location.reload(),
 }
 

src/js/session.ts

@@ -10,10 +10,12 @@ import { $ } from "./dom"
 export const sessionId = randomId()
 export const projectName = $("project-name") as HTMLAnchorElement
 export const projectCwd = $("project-cwd") as HTMLAnchorElement
+export const projectWww = $("project-www") as HTMLAnchorElement
 export const sessionStore = new Map<string, string>()
 
 export function handleSessionStart(msg: SessionStartMessage) {
     sessionStore.set("NOSE_DIR", msg.data.NOSE_DIR)
+    sessionStore.set("hostname", msg.data.hostname)
     updateProjectName(msg.data.project)
     updateCwd(msg.data.cwd)
     browserCommands.mode?.(msg.data.mode)
@@ -32,6 +34,9 @@ export function handleSessionUpdate(msg: SessionUpdateMessage) {
 function updateProjectName(project: string) {
     sessionStore.set("project", project)
     projectName.textContent = project
+    const hostname = sessionStore.get("hostname") || "localhost"
+    const s = hostname.startsWith("localhost") ? "" : "s"
+    projectWww.href = `http${s}://${project}.${hostname}`
     updateCwd("/")
 }
 

src/server.tsx

@@ -164,6 +164,8 @@ app.get("/", c => c.html(<Layout><Terminal /></Layout>))
 
 app.get("/ws", c => {
     const _sessionId = c.req.query("session")
+    const url = new URL(c.req.url)
+    let hostname = url.hostname + (url.port === "80" ? "" : `:${url.port}`)
 
     return upgradeWebSocket(c, {
         async onOpen(_e, ws) {
@@ -176,7 +178,8 @@ app.get("/ws", c => {
                     NOSE_DIR: NOSE_DIR,
                     project: DEFAULT_PROJECT,
                     cwd: "/",
-                    mode: getState("ui:mode") || "tall"
+                    mode: getState("ui:mode") || "tall",
+                    hostname
                 }
             })
         },

src/shared/types.ts

@@ -57,6 +57,7 @@ export type SessionStartMessage = {
         project: string
         cwd: string
         mode: string
+        hostname: string
     }
 }