master

Author: shmuel hizmi

packages/fullstack/src/server/App.tsx

@@ -28,7 +28,7 @@ type EventHandler = (...args: ReadonlyArray<SerializableValue>) => SerializableV
 
 interface RegisteredEvent {
   readonly handler: EventHandler;
-  readonly callbackDef?: CallbackDef;
+  readonly callbackDef?: CallbackDef | undefined;
 }
 
 interface AppProps {

packages/fullstack/src/shared/types.ts

@@ -15,10 +15,10 @@ export interface Transport<Events extends object> {
     event: T,
     handler: (data: Events[T]) => void
   ) => void;
-  readonly off?: <T extends keyof Events>(
+  readonly off?: (<T extends keyof Events>(
     event: T,
     handler: (data: Events[T]) => void
-  ) => void;
+  ) => void) | undefined;
 }
 
 export interface EventResponseData {

packages/wmux-client/src/components/Sidebar.tsx

@@ -111,16 +111,12 @@ function TabItem({
   return (
     <div
       onClick={onSelect}
-      className={`flex items-center gap-2.5 pl-5 pr-2 py-[7px] cursor-pointer transition-colors rounded-sm mx-1 relative group ${
+      className={`flex items-center gap-2.5 pl-5 pr-2 py-[7px] cursor-pointer transition-colors rounded-sm mx-1 group ${
         isActive
           ? "bg-border/20 text-foreground"
           : "text-muted-foreground/50 hover:bg-border/10 hover:text-foreground/70"
       }`}
     >
-      {isActive && (
-        <div className="absolute left-0.5 top-1.5 bottom-1.5 w-0.5 bg-foreground/20 rounded-r" />
-      )}
-
       {TabIcon
         ? <TabIcon size={14} className="shrink-0" />
         : <span className="w-[6px] h-[6px] rounded-full shrink-0" style={{ background: STATUS_COLORS[tab.status] ?? "#3f3f46" }} />
@@ -171,7 +167,10 @@ function CategorySection({
   const isFiles = category.type === "files";
 
   return (
-    <div className="border-b border-border/10 last:border-b-0">
+    <div
+      className="border-b border-border/10 last:border-b-0 border-l-2"
+      style={{ borderLeftColor: category.color }}
+    >
       <CategoryHeader
         category={category}
         isActive={isActive}

packages/wmux/src/components/FileViewerSession.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, useRef, useImperativeHandle, forwardRef } from "react";
+import { useState, useEffect, useCallback, useRef, useImperativeHandle, forwardRef } from "react";
 import { useViews } from "@playfast/echoform/server";
 import { views } from "../views";
 import { readdir } from "node:fs/promises";

packages/wmux/src/components/IframeSession.tsx

@@ -1,12 +1,12 @@
-import React from "react";
+import type { ReactElement } from "react";
 import { useViews } from "@playfast/echoform/server";
 import { views } from "../views";
 
 export function IframeSession({ id, name, url }: {
   readonly id: string;
   readonly name: string;
   readonly url: string;
-}): React.ReactElement | null {
+}): ReactElement | null {
   const View = useViews(views);
   if (!View) return null;
   return <View.WmuxIframe id={id} name={name} url={url} />;

packages/wmux/src/components/TerminalSession.tsx

@@ -1,10 +1,10 @@
-import React, { useEffect } from "react";
+import { useEffect, type ReactElement } from "react";
 import { useViews, useStream } from "@playfast/echoform/server";
 import { views, WmuxTerminal } from "../views";
 import type { ManagedProcess } from "../process";
 import { isCommandConfig } from "../types";
 
-export function TerminalSession({ proc }: { readonly proc: ManagedProcess }): React.ReactElement | null {
+export function TerminalSession({ proc }: { readonly proc: ManagedProcess }): ReactElement | null {
   const View = useViews(views);
   const output = useStream(WmuxTerminal, "output");
 
@@ -24,8 +24,8 @@ export function TerminalSession({ proc }: { readonly proc: ManagedProcess }): Re
       name={proc.name}
       status={proc.status}
       output={output}
-      onInput={(b64) => proc.write(b64)}
-      onResize={({ cols, rows }) => proc.resize(cols, rows)}
+      onInput={(b64: string) => proc.write(b64)}
+      onResize={({ cols, rows }: { cols: number; rows: number }) => proc.resize(cols, rows)}
     />
   );
 }

packages/wmux/src/components/WmuxRoot.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react";
+import { createRef, useState, useEffect, useRef, type RefObject, type ReactElement } from "react";
 import { useViews } from "@playfast/echoform/server";
 import { views } from "../views";
 import type { ManagedProcess } from "../process";
@@ -25,18 +25,18 @@ function categoryColor(name: string | undefined): string {
 
 interface TabDef {
   readonly id: string;
-  readonly description?: string;
-  readonly icon?: string;
+  readonly description?: string | undefined;
+  readonly icon?: string | undefined;
   readonly tabType: "process" | "iframe";
-  readonly url?: string;
+  readonly url?: string | undefined;
 }
 
 interface CategoryDef {
   readonly name: string;
-  readonly icon?: string;
+  readonly icon?: string | undefined;
   readonly type: "process" | "files";
   readonly tabs: readonly TabDef[];
-  readonly fileRoot?: string;
+  readonly fileRoot?: string | undefined;
 }
 
 interface WmuxRootProps {
@@ -46,18 +46,18 @@ interface WmuxRootProps {
 
 // ── Component ──
 
-export function WmuxRoot({ processes, categoryDefs }: WmuxRootProps): React.ReactElement | null {
+export function WmuxRoot({ processes, categoryDefs }: WmuxRootProps): ReactElement | null {
   const View = useViews(views);
   const [activeCategory, setActiveCategory] = useState(categoryDefs[0]?.name ?? "");
   const [activeTabId, setActiveTabId] = useState("");
   const [statuses, setStatuses] = useState<Record<string, ProcessStatus>>({});
   const [fileStates, setFileStates] = useState<Record<string, FileViewerState>>({});
 
   // File viewer action refs (one per file category)
-  const fileRefs = useRef<Record<string, React.RefObject<FileViewerActions | null>>>({});
+  const fileRefs = useRef<Record<string, RefObject<FileViewerActions | null>>>({});
   for (const def of categoryDefs) {
     if (def.type === "files" && !fileRefs.current[def.name]) {
-      fileRefs.current[def.name] = React.createRef<FileViewerActions | null>();
+      fileRefs.current[def.name] = createRef<FileViewerActions | null>();
     }
   }
 
@@ -118,7 +118,7 @@ export function WmuxRoot({ processes, categoryDefs }: WmuxRootProps): React.Reac
       categories={categories}
       activeCategory={activeCategory}
       activeTabId={activeTabId}
-      onSelectCategory={(cat) => {
+      onSelectCategory={(cat: string) => {
         setActiveCategory(cat);
         const def = categoryDefs.find((d) => d.name === cat);
         if (!def) return;
@@ -130,12 +130,12 @@ export function WmuxRoot({ processes, categoryDefs }: WmuxRootProps): React.Reac
         }
       }}
       onSelectTab={setActiveTabId}
-      onStartProcess={(id) => processes.get(id)?.start()}
-      onStopProcess={(id) => processes.get(id)?.stop()}
-      onRestartProcess={(id) => processes.get(id)?.restart()}
-      onToggleDir={(path) => fileRefs.current[activeCategory]?.current?.toggleDir(path)}
-      onOpenFile={(path) => fileRefs.current[activeCategory]?.current?.openFile(path)}
-      onCloseFile={(id) => fileRefs.current[activeCategory]?.current?.closeFile(id)}
+      onStartProcess={(id: string) => processes.get(id)?.start()}
+      onStopProcess={(id: string) => processes.get(id)?.stop()}
+      onRestartProcess={(id: string) => processes.get(id)?.restart()}
+      onToggleDir={(path: string) => fileRefs.current[activeCategory]?.current?.toggleDir(path)}
+      onOpenFile={(path: string) => fileRefs.current[activeCategory]?.current?.openFile(path)}
+      onCloseFile={(id: string) => fileRefs.current[activeCategory]?.current?.closeFile(id)}
     >
       {[...processes.keys()].map((id) => (
         <TerminalSession key={id} proc={processes.get(id)!} />

packages/wmux/src/process.ts

@@ -77,8 +77,8 @@ function createCommandProcess(
     const emitter = outputEmitter;
 
     const proc = Bun.spawn(argv, {
-      cwd: config.cwd,
-      env: config.env ? { ...process.env, ...config.env } : undefined,
+      ...(config.cwd != null && { cwd: config.cwd }),
+      ...(config.env != null && { env: { ...process.env, ...config.env } }),
       terminal: {
         cols,
         rows,

packages/wmux/src/wmux.tsx

@@ -1,11 +1,10 @@
-import React from "react";
 import { Render } from "@playfast/echoform-render";
 import { Server } from "@playfast/echoform/server";
 import { createManagedProcess, type ManagedProcess } from "./process";
 import { createWmuxServer } from "./server";
 import { generateToken } from "./token";
 import { WmuxRoot } from "./components/WmuxRoot";
-import type { WmuxConfig, WmuxHandle, TabConfig } from "./types";
+import type { WmuxConfig, WmuxHandle } from "./types";
 
 const BUILT_IN_CLIENT_URL = "https://wmux.play.fast";
 
@@ -26,26 +25,26 @@ function openBrowser(url: string): void {
 
 interface TabDef {
   readonly id: string;
-  readonly description?: string;
-  readonly icon?: string;
+  readonly description?: string | undefined;
+  readonly icon?: string | undefined;
   readonly tabType: "process" | "iframe";
-  readonly url?: string;
+  readonly url?: string | undefined;
 }
 
 interface CategoryDef {
   readonly name: string;
-  readonly icon?: string;
+  readonly icon?: string | undefined;
   readonly type: "process" | "files";
   readonly tabs: readonly TabDef[];
-  readonly fileRoot?: string;
+  readonly fileRoot?: string | undefined;
 }
 
 export async function wmux(config: WmuxConfig): Promise<WmuxHandle> {
   const port = config.port ?? 0;
   const hostname = config.hostname ?? "127.0.0.1";
   const token = config.token ?? generateToken();
   const clientUrl = config.clientUrl
-    ?? process.env.WMUX_CLIENT_URL
+    ?? process.env["WMUX_CLIENT_URL"]
     ?? (BUILT_IN_CLIENT_URL.startsWith("__") ? "http://localhost:5173" : BUILT_IN_CLIENT_URL);
 
   const processes = new Map<string, ManagedProcess>();

packages/wmux/tsconfig.json

@@ -9,6 +9,11 @@
     "esModuleInterop": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
+    "noUncheckedIndexedAccess": true,
+    "noFallthroughCasesInSwitch": true,
+    "exactOptionalPropertyTypes": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "verbatimModuleSyntax": true,
     "types": ["bun"]
   },
   "include": ["src"]