Stacked serials option

Author: microbit-robert

src/App.tsx

@@ -41,6 +41,14 @@ const logging = deployment.logging;
 const device = isMockDeviceMode()
   ? new MockDeviceConnection()
   : createUSBConnection({ logging });
+// The connection library starts/stops its serial read loop as "serialdata"
+// listeners are added/removed. A remove-all-then-re-add cycle (which React
+// StrictMode does on every component mount in dev) races in the library:
+// the queued restart sees stale serialState and is silently dropped, leaving
+// serial off until a flash restarts it. Keep a permanent no-op listener so
+// the count never crosses zero; serial then runs exactly while connected,
+// which matches how the serial UI is shown anyway.
+device.addEventListener("serialdata", () => {});
 
 const host = createHost(logging);
 const fs = new FileSystem(logging, host, fetchMicroPython);

src/messages/ui.en.json

@@ -1562,7 +1562,7 @@
   "serial-flashed": [
     {
       "type": 0,
-      "value": "micro:bit flashed"
+      "value": "flashed"
     }
   ],
   "serial-help-ctrl-c": [
@@ -1639,6 +1639,12 @@
       "value": "The serial terminal shows errors and other output from the program running on your micro:bit. By default, it shows the most recent error from the program. Expand it to see all the output."
     }
   ],
+  "serial-help-intro-simulator": [
+    {
+      "type": 0,
+      "value": "The serial terminal shows errors and other output from the program running in the micro:bit simulator. By default, it shows the most recent error from the program. Expand it to see all the output."
+    }
+  ],
   "serial-help-print": [
     {
       "type": 0,
@@ -1694,7 +1700,7 @@
   "serial-ready-to-flash": [
     {
       "type": 0,
-      "value": "micro:bit ready to flash"
+      "value": "ready to flash"
     }
   ],
   "serial-error": [

src/serial/SerialArea.tsx

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: MIT
  */
 import { Box, BoxProps, Flex } from "@chakra-ui/react";
+import { ComponentType } from "react";
 import { backgroundColorTerm } from "../deployment/misc";
 import { ConnectionStatus } from "@microbit/microbit-connection";
 import { useConnectionStatus } from "../device/device-hooks";
@@ -21,11 +22,13 @@ interface SerialAreaProps extends BoxProps {
   showHintsAndTips?: boolean;
   tabOutRef: HTMLElement;
   /**
-   * Whether this area is the visible one (shared device/simulator panel).
-   * When it becomes visible again its terminal is re-fitted so content shows
-   * without needing a scroll. Defaults to true for standalone use.
+   * Icon and label identifying which serial source this is, shown in the bar
+   * so stacked device/simulator areas can be told apart.
    */
-  active?: boolean;
+  sourceIcon?: ComponentType;
+  sourceLabel?: string;
+  /** When true, the hints and tips dialog refers to the simulator. */
+  simulator?: boolean;
 }
 
 /**
@@ -45,7 +48,9 @@ const SerialArea = ({
   hideExpandTextOnTraceback = false,
   showHintsAndTips = true,
   tabOutRef,
-  active = true,
+  sourceIcon,
+  sourceLabel,
+  simulator,
   ...props
 }: SerialAreaProps) => {
   const status = useConnectionStatus();
@@ -75,6 +80,9 @@ const SerialArea = ({
               expandDirection={expandDirection}
               hideExpandTextOnTraceback={hideExpandTextOnTraceback}
               showHintsAndTips={showHintsAndTips}
+              sourceIcon={sourceIcon}
+              sourceLabel={sourceLabel}
+              simulator={simulator}
             />
             <XTerm
               visibility={compact ? "hidden" : undefined}
@@ -83,7 +91,6 @@ const SerialArea = ({
               mr={1}
               fontSizePt={terminalFontSizePt}
               tabOutRef={tabOutRef}
-              active={active}
             />
           </Box>
         )}

src/serial/SerialBar.tsx

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: MIT
  */
 import { BoxProps, HStack, IconButton, useDisclosure } from "@chakra-ui/react";
-import { useCallback, useRef } from "react";
+import { ComponentType, useCallback, useRef } from "react";
 import { RiInformationLine } from "react-icons/ri";
 import { useIntl } from "react-intl";
 import CollapsibleButton from "../common/CollapsibleButton";
@@ -26,6 +26,10 @@ interface SerialBarProps extends BoxProps {
   expandDirection: "up" | "down";
   hideExpandTextOnTraceback: boolean;
   showHintsAndTips: boolean;
+  sourceIcon?: ComponentType;
+  sourceLabel?: string;
+  /** When true, the hints and tips dialog refers to the simulator. */
+  simulator?: boolean;
 }
 
 /**
@@ -39,6 +43,9 @@ const SerialBar = ({
   hideExpandTextOnTraceback,
   showHintsAndTips,
   expandDirection,
+  sourceIcon,
+  sourceLabel,
+  simulator,
   ...props
 }: SerialBarProps) => {
   const logging = useLogging();
@@ -63,6 +70,7 @@ const SerialBar = ({
         isOpen={helpDisclosure.isOpen}
         onClose={helpDisclosure.onClose}
         finalFocusRef={showHintsAndTips ? undefined : menuButtonRef}
+        introId={simulator ? "serial-help-intro-simulator" : "serial-help-intro"}
       />
       <HStack
         justifyContent="space-between"
@@ -81,6 +89,8 @@ const SerialBar = ({
           traceback={traceback}
           overflow="hidden"
           showSyncStatus={showSyncStatus}
+          sourceIcon={sourceIcon}
+          sourceLabel={sourceLabel}
         />
 
         <HStack>
@@ -123,10 +133,6 @@ const SerialBar = ({
               ref={menuButtonRef}
               compact={compact}
               onSizeChange={onSizeChange}
-              // Move it to the menu if not shown more visibly.
-              onShowHintsAndTips={
-                !showHintsAndTips ? handleShowHintsAndTips : undefined
-              }
             />
           </HStack>
         </HStack>

src/serial/SerialHelp.tsx

@@ -23,6 +23,11 @@ interface SerialHelpDialogProps {
   isOpen: boolean;
   onClose: () => void;
   finalFocusRef?: React.RefObject<HTMLButtonElement>;
+  /**
+   * The intro paragraph message id, so the help can refer to the micro:bit or
+   * the simulator depending on which serial area it was launched from.
+   */
+  introId?: string;
 }
 
 const formatValues = {
@@ -37,6 +42,7 @@ export const SerialHelpDialog = ({
   isOpen,
   onClose,
   finalFocusRef = undefined,
+  introId = "serial-help-intro",
 }: SerialHelpDialogProps) => {
   return (
     <Modal
@@ -54,7 +60,7 @@ export const SerialHelpDialog = ({
           <ModalBody>
             <VStack spacing={5} alignItems="stretch">
               <Text>
-                <FormattedMessage id="serial-help-intro" />
+                <FormattedMessage id={introId} />
               </Text>
               <Text>
                 <FormattedMessage

src/serial/SerialIndicators.tsx

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: MIT
  */
 import { BoxProps, HStack, Icon, Text } from "@chakra-ui/react";
+import { ComponentType } from "react";
 import { GoCheck } from "react-icons/go";
 import {
   RiErrorWarningLine,
@@ -18,6 +19,13 @@ interface SerialIndicatorsProps extends BoxProps {
   compact?: boolean;
   traceback?: Traceback | undefined;
   showSyncStatus: boolean;
+  /**
+   * Icon and label identifying which serial source this is (device or
+   * simulator). When given, replaces the generic terminal icon so the two
+   * stacked serial areas can be told apart.
+   */
+  sourceIcon?: ComponentType;
+  sourceLabel?: string;
 }
 
 const syncMessages = {
@@ -38,6 +46,8 @@ const SerialIndicators = ({
   compact,
   traceback,
   showSyncStatus,
+  sourceIcon,
+  sourceLabel,
   ...props
 }: SerialIndicatorsProps) => {
   const syncStatus = useSyncStatus();
@@ -47,7 +57,18 @@ const SerialIndicators = ({
     (!traceback || (traceback && syncStatus === SyncStatus.OUT_OF_SYNC));
   return (
     <HStack {...props}>
-      <Icon m={1} as={RiTerminalBoxLine} fill="white" boxSize={5} />
+      <Icon m={1} as={sourceIcon ?? RiTerminalBoxLine} fill="white" boxSize={5} />
+      {sourceLabel && (
+        <Text
+          color="white"
+          fontWeight="medium"
+          whiteSpace="nowrap"
+          mr={1}
+          data-testid="serial-source-label"
+        >
+          <FormattedMessage id={sourceLabel} />
+        </Text>
+      )}
       <HStack spacing={0}>
         {compact && traceback && syncStatus === SyncStatus.IN_SYNC && (
           <>