feat(editor): F4.6b the command line on a computer's desktop

A new oracle, TerminalWindowRun, types into Java's own command line
window: the window writes each line after its prompt, takes a blank
line, cls, reset and exit itself, keeps the lines for the arrow keys,
and keeps its text, history and working directory over a stop and a
start.

The room now holds a command line window per computer for everyone
(TerminalWindow), kept over stops; the protocol carries its lines and
the one way to read them (terminalScreen); the core goes on in the
working directory of the run before (continueIn). The desktop opens
programs in Java's frame, and the command line works with keyboard and
finger: grey on black, the prompt hidden while a command runs, history,
chips for the commands, Ctrl+C. The room's failure is now tested in the
browser.

Fixed: the room handed the engine the wall clock with fractions of a
millisecond, and a ping hung after its first timeout. The engine and
the room count whole milliseconds, as Java's clock does.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

packages/editor/src/desktop/DesktopWindow.tsx

@@ -9,26 +9,29 @@
 // show; it is left out.
 //
 // On a wide screen the window lies over the surface and moves by its title
-// bar, as Java's windows do; on a phone it fills the surface. The programs'
-// windows follow (F4.6b on).
+// bar, as Java's windows do; on a phone it fills the surface. A program's
+// icon opens its window over the desktop (ProgramFrame), the home button
+// leaves it; so far the command line has one (F4.6b), the others follow.
 
-import { useEffect, useState, type PointerEvent as ReactPointerEvent } from 'react';
+import { useCallback, useEffect, useState, type PointerEvent as ReactPointerEvent } from 'react';
 import type * as Y from 'yjs';
 import { desktopView } from '@mdg-filius/doc';
-import type { NodeSettings } from '@mdg-filius/protocol';
 import background from '../assets/desktop/hintergrundbild.png';
 import networkOff from '../assets/desktop/netzwek_aus.png';
 import networkOn from '../assets/desktop/netzwek_c.png';
 import { ICON_URLS } from '../canvas/icons.js';
 import { useLanguage, useTranslate } from '../i18n/i18n.js';
-import { desktopPrograms, INSTALLATION_ICON, JAVA_PROGRAMS } from './programs.js';
+import type { Simulation } from '../simulation/useSimulation.js';
+import { ProgramFrame } from './ProgramFrame.js';
+import { desktopPrograms, INSTALLATION_ICON, JAVA_PROGRAMS, type DesktopProgram } from './programs.js';
+import { TerminalPanel } from './TerminalPanel.js';
 import './desktop.css';
 
 export interface DesktopWindowProps {
   readonly doc: Y.Doc;
   readonly id: string;
-  /** The computer's network as the simulation runs it; undefined until the room has sent it. */
-  readonly settings: NodeSettings | undefined;
+  /** The room: the computer's network as it runs, its programs' windows. */
+  readonly simulation: Simulation;
   /** Whether its cable carried a frame at the last tick. */
   readonly active: boolean;
   /** The window's top left corner on the surface. */
@@ -36,11 +39,17 @@ export interface DesktopWindowProps {
   readonly y: number;
   /** Its place in the stack of desktops. */
   readonly z: number;
+  /** The program whose window is open on it, kept by the editor over a return to the design (Java's desktop keeps it). */
+  readonly program: DesktopProgram | null;
+  readonly onProgram: (program: DesktopProgram | null) => void;
   readonly onMove: (x: number, y: number) => void;
   readonly onFront: () => void;
   readonly onClose: () => void;
 }
 
+/** The programs whose windows are built so far. */
+const WITH_WINDOW: ReadonlySet<DesktopProgram> = new Set(['commandPrompt']);
+
 /** The document's desktop of a computer, read anew after every change (a program installed, the label changed). */
 function useDesktopView(doc: Y.Doc, id: string) {
   const [view, setView] = useState(() => desktopView(doc, id));
@@ -53,13 +62,20 @@ function useDesktopView(doc: Y.Doc, id: string) {
   return view;
 }
 
-export function DesktopWindow({ doc, id, settings, active, x, y, z, onMove, onFront, onClose }: DesktopWindowProps) {
+export function DesktopWindow({ doc, id, simulation, active, x, y, z, program: open, onProgram: setOpen, onMove, onFront, onClose }: DesktopWindowProps) {
   const t = useTranslate();
   const language = useLanguage();
   const view = useDesktopView(doc, id);
+  const { watch } = simulation;
+  useEffect(() => watch([`node:${id}`]), [watch, id]);
+  const settings = simulation.nodes.get(id);
   const [info, setInfo] = useState(false);
+  const home = useCallback(() => setOpen(null), [setOpen]);
   const [drag, setDrag] = useState<{ readonly pointer: number; readonly dx: number; readonly dy: number; moved: boolean } | null>(null);
   if (view === undefined) return null;
+  const programs = desktopPrograms(view.programs, language);
+  // A program removed while its window was open: the desktop shows.
+  const shown = open !== null && programs.includes(open) ? open : null;
   const address = settings?.ipAddress ?? '';
   const title = view.addressAsName ? view.label : `${view.label} - ${address}`;
 
@@ -98,21 +114,33 @@ export function DesktopWindow({ doc, id, settings, active, x, y, z, onMove, onFr
       <div className="desktop-screen" style={{ backgroundImage: `url(${background})` }}>
         <ul className="desktop-icons">
           <li>
-            {/* The programs' windows come with the next steps. */}
+            {/* The installation's window comes with F4.6c. */}
             <button type="button" className="desktop-icon" aria-disabled="true" title={t('desktop.installation')}>
               <img src={INSTALLATION_ICON} alt="" />
               <span>{t('desktop.installation')}</span>
             </button>
           </li>
-          {desktopPrograms(view.programs, language).map((program) => (
+          {programs.map((program) => (
             <li key={program}>
-              <button type="button" className="desktop-icon" data-program={program} aria-disabled="true" title={t(`program.${program}`)}>
+              <button
+                type="button"
+                className="desktop-icon"
+                data-program={program}
+                aria-disabled={WITH_WINDOW.has(program) ? undefined : 'true'}
+                title={t(`program.${program}`)}
+                onClick={() => WITH_WINDOW.has(program) && setOpen(program)}
+              >
                 <img src={JAVA_PROGRAMS[program].icon} alt="" />
                 <span>{t(`program.${program}`)}</span>
               </button>
             </li>
           ))}
         </ul>
+        {shown === null ? null : (
+          <ProgramFrame icon={JAVA_PROGRAMS[shown].icon} title={t(`program.${shown}`)} program={shown}>
+            {shown === 'commandPrompt' ? <TerminalPanel node={id} simulation={simulation} onExit={home} /> : null}
+          </ProgramFrame>
+        )}
         {info ? (
           // A press beside the panel closes it, as in Java.
           <div className="desktop-info-layer" onPointerDown={(event) => event.target === event.currentTarget && setInfo(false)}>
@@ -129,7 +157,14 @@ export function DesktopWindow({ doc, id, settings, active, x, y, z, onMove, onFr
       </div>
       <footer className="desktop-taskbar">
         <span />
-        <button type="button" className="desktop-home" onClick={() => setInfo(false)}>
+        <button
+          type="button"
+          className="desktop-home"
+          onClick={() => {
+            setInfo(false);
+            setOpen(null);
+          }}
+        >
           {t('desktop.home')}
         </button>
         <button type="button" className="desktop-network-icon" data-active={active ? 'true' : undefined} aria-label={t('desktop.network')} aria-expanded={info} title={address} onClick={() => setInfo(!info)}>