feat: adjust chunking

src/lib/chord-editor/action-plugin.ts

@@ -10,19 +10,15 @@ import Action from "$lib/components/Action.svelte";
 import type { Range } from "@codemirror/state";
 import { parsedChordsField } from "./parsed-chords-plugin";
 import { iterActions } from "./parse-meta";
+import type { KeyInfo } from "$lib/serial/keymap-codes";
 
 export class ActionWidget extends WidgetType {
   component?: {};
 
-  constructor(readonly id: string | number) {
+  constructor(readonly info: KeyInfo) {
     super();
-    this.id = id;
   }
 
-  /*override eq(other: ActionWidget) {
-    return this.id == other.id;
-  }*/
-
   toDOM() {
     if (this.component) {
       unmount(this.component);
@@ -32,15 +28,16 @@ export class ActionWidget extends WidgetType {
 
     this.component = mount(Action, {
       target: element,
-      props: { action: this.id, display: "keys", inText: true },
+      props: {
+        action: this.info,
+        display: "keys",
+        inText: true,
+        withPopover: false,
+      },
     });
     return element;
   }
 
-  override ignoreEvent() {
-    return true;
-  }
-
   override destroy() {
     if (this.component) {
       unmount(this.component);
@@ -63,7 +60,7 @@ function actionWidgets(view: EditorView) {
         }
         if (action.info && action.explicit) {
           const deco = Decoration.replace({
-            widget: new ActionWidget(action.code),
+            widget: new ActionWidget(action.info),
           });
           widgets.push(deco.range(action.range[0], action.range[1]));
         }

src/lib/chord-editor/action-tooltip.ts

@@ -0,0 +1,41 @@
+import { hoverTooltip } from "@codemirror/view";
+import { parsedChordsField } from "./parsed-chords-plugin";
+import { type ActionMeta, iterActions } from "./parse-meta";
+import { mount, unmount } from "svelte";
+import ActionTooltip from "$lib/components/action/ActionTooltip.svelte";
+
+function inRange(pos: number, side: 1 | -1, range: [number, number]) {
+  if (side < 0) {
+    return pos > range[0] && pos <= range[1];
+  } else {
+    return pos >= range[0] && pos < range[1];
+  }
+}
+
+export const actionHover = hoverTooltip((view, pos, side) => {
+  const chord = view.state
+    .field(parsedChordsField)
+    .chords.find((chord) => inRange(pos, side, chord.range));
+  if (!chord) return null;
+  let action = iterActions<ActionMeta>(chord, (action) =>
+    inRange(pos, side, action.range) ? action : undefined,
+  );
+  if (!action?.info) return null;
+  return {
+    pos: action.range[0],
+    end: action.range[1],
+    create() {
+      const dom = document.createElement("div");
+      const element = mount(ActionTooltip, {
+        target: dom,
+        props: { info: action.info, valid: true },
+      });
+      return {
+        dom,
+        destroy() {
+          unmount(element);
+        },
+      };
+    },
+  };
+});

src/lib/chord-editor/parse-meta.ts

@@ -152,25 +152,35 @@ export function mapParseResult(
   };
 }
 
-export function iterActions(
+export function iterActions<T = void>(
   chord: ChordMeta,
-  callback: (action: ActionMeta) => void,
-) {
+  callback: (action: ActionMeta) => T | void,
+): T | undefined {
   if (chord.input) {
     for (const action of chord.input.actions) {
-      callback(action);
+      const result = callback(action);
+      if (result !== undefined) {
+        return result;
+      }
     }
   }
   if (chord.compounds) {
     for (const compound of chord.compounds) {
       for (const action of compound.actions) {
-        callback(action);
+        const result = callback(action);
+        if (result !== undefined) {
+          return result;
+        }
       }
     }
   }
   if (chord.phrase) {
     for (const action of chord.phrase.actions) {
-      callback(action);
+      const result = callback(action);
+      if (result !== undefined) {
+        return result;
+      }
     }
   }
+  return undefined;
 }

src/lib/chord-editor/persistent-state-plugin.ts

@@ -29,6 +29,7 @@ import { actionMetaPlugin } from "./action-meta-plugin";
 import { parsedChordsField } from "./parsed-chords-plugin";
 import { changesPanel } from "./changes-panel.svelte";
 import { searchKeymap } from "@codemirror/search";
+import { actionHover } from "./action-tooltip";
 
 const serializedFields = {
   history: historyField,
@@ -47,6 +48,7 @@ export function createConfig(params: EditorConfig) {
       actionMetaPlugin.plugin,
       deviceChordField,
       parsedChordsField,
+      actionHover,
       changesPanel(),
       lintGutter(),
       params.rawCode ? [lineNumbers()] : [delimPlugin, actionPlugin],

src/lib/components/Action.svelte

@@ -4,17 +4,20 @@
   import { osLayout } from "$lib/os-layout";
   import { isVerbose } from "./verbose-action";
   import { actionTooltip } from "$lib/title";
+  import ActionTooltip from "./action/ActionTooltip.svelte";
 
   let {
     action,
     display,
     ignoreIcon = false,
     inText = false,
+    withPopover = true,
   }: {
     action: string | number | KeyInfo;
     display: "inline-keys" | "keys" | "verbose";
     ignoreIcon?: boolean;
     inText?: boolean;
+    withPopover?: boolean;
   } = $props();
 
   let retrievedInfo = $derived(
@@ -35,39 +38,13 @@
   let icon = $derived(ignoreIcon ? undefined : info.icon);
   let dynamicMapping = $derived(info.keyCode && $osLayout.get(info.keyCode));
   let hasPopover = $derived(
-    !retrievedInfo || !info.id || info.title || info.description,
+    withPopover &&
+      (!retrievedInfo || !info.id || info.title || info.description),
   );
 </script>
 
 {#snippet popover()}
-  {#if retrievedInfo}
-    {#if info.icon || info.display || !info.id}
-      &lt;<b>{info.id ?? `0x${info.code.toString(16)}`}</b>&gt;
-    {/if}
-    {#if info.title}
-      {info.title}
-    {/if}
-    {#if info.variant === "left"}
-      (Left)
-    {:else if info.variant === "right"}
-      (Right)
-    {/if}
-    {#if info.description}
-      <br />
-      <small>{info.description}</small>
-    {/if}
-    {#if info.breaking}
-      <br />&nbsp;<i>Prevents prepended autospaces</i>
-    {/if}
-    {#if info.separator || info.breaking}
-      <br />&nbsp;<i>Stops autocorrect</i>
-    {/if}
-  {:else}
-    <b>Unknown Action</b><br />
-    {#if info.code > 1023}
-      This action cannot be translated and will be ingored.
-    {/if}
-  {/if}
+  <ActionTooltip valid={!!retrievedInfo} {info} />
 {/snippet}
 
 {#snippet kbdText()}

src/lib/components/action/ActionTooltip.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import type { KeyInfo } from "$lib/serial/keymap-codes";
+
+  let { valid, info }: { valid: boolean; info: KeyInfo } = $props();
+</script>
+
+{#if valid}
+  {#if info.icon || info.display || !info.id}
+    &lt;<b>{info.id ?? `0x${info.code.toString(16)}`}</b>&gt;
+  {/if}
+  {#if info.title}
+    {info.title}
+  {/if}
+  {#if info.variant === "left"}
+    (Left)
+  {:else if info.variant === "right"}
+    (Right)
+  {/if}
+  {#if info.description}
+    <br />
+    <small>{info.description}</small>
+  {/if}
+  {#if info.breaking}
+    <br />&nbsp;<i>Prevents prepended autospaces</i>
+  {/if}
+  {#if info.separator || info.breaking}
+    <br />&nbsp;<i>Stops autocorrect</i>
+  {/if}
+{:else}
+  <b>Unknown Action</b><br />
+  {#if info.code > 1023}
+    This action cannot be translated and will be ingored.
+  {/if}
+{/if}

src/lib/serial/device.ts

@@ -1,5 +1,5 @@
 import { LineBreakTransformer } from "$lib/serial/line-break-transformer";
-import { serialLog } from "$lib/serial/connection";
+import { serialLog, type SerialLogEntry } from "$lib/serial/connection";
 import type { Chord } from "$lib/serial/chord";
 import {
   parseChordActions,
@@ -158,7 +158,7 @@ export class CharaDevice {
 
   constructor(
     readonly port: SerialPortLike,
-    public baudRate = 115200,
+    public baudRate = navigator.userAgent.includes("Mac") ? 38400 : 115200,
   ) {}
 
   async init() {
@@ -564,37 +564,48 @@ export class CharaDevice {
 
       const writer = this.port.writable!.getWriter();
       try {
-        await writer.write(new TextEncoder().encode(`RST OTA\r\n`));
-        serialLog.update((it) => {
-          it.push({
-            type: "input",
-            value: "RST OTA",
-          });
-          return it;
-        });
+        const start = performance.now();
+        writer.write(new TextEncoder().encode(`RST OTA\r\n`));
 
         // Wait for the device to be ready
         const signal = await this.reader.read();
-        serialLog.update((it) => {
-          it.push({
-            type: "output",
-            value: signal.value!.trim(),
-          });
-          return it;
-        });
+        const signalTime = performance.now();
 
         const chunkSize = 128;
+        const chunks: Promise<void>[] = [];
         for (let i = 0; i < file.byteLength; i += chunkSize) {
-          const chunk = file.slice(i, i + chunkSize);
-          await writer.write(new Uint8Array(chunk));
-          progress(i + chunk.byteLength, file.byteLength);
+          const size = Math.min(chunkSize, file.byteLength - i);
+          chunks.push(
+            writer
+              .write(new Uint8Array(file, i, size))
+              .then(() => progress(i + size, file.byteLength)),
+          );
         }
+        await Promise.all(chunks);
 
         serialLog.update((it) => {
-          it.push({
-            type: "input",
-            value: `...${file.byteLength} bytes`,
-          });
+          it.push(
+            {
+              type: "input",
+              value: "RST OTA",
+            },
+            {
+              type: "system",
+              value: `+${(signalTime - start).toFixed(0)} ms`,
+            },
+            {
+              type: "output",
+              value: signal.value!.trim(),
+            },
+            {
+              type: "system",
+              value: `+${(performance.now() - signalTime).toFixed(0)} ms`,
+            },
+            {
+              type: "input",
+              value: `...${file.byteLength} bytes`,
+            },
+          );
           return it;
         });
 
@@ -621,9 +632,8 @@ export class CharaDevice {
         });
       } finally {
         writer.releaseLock();
+        await this.suspend();
       }
-
-      await this.suspend();
     } finally {
       delete this.lock;
       resolveLock!(true);

src/routes/(app)/ConnectPopup.svelte

@@ -10,6 +10,7 @@
   import { showConnectionFailedDialog } from "$lib/dialogs/connection-failed-dialog";
   import { onMount } from "svelte";
   import { persistentWritable } from "$lib/storage";
+  import { goto } from "$app/navigation";
 
   let ports = $state<SerialPort[]>([]);
   let element: HTMLDivElement | undefined = $state();
@@ -47,6 +48,10 @@
   }
 
   async function connectDevice(event: MouseEvent) {
+    if (event.altKey) {
+      goto("/terminal/");
+      return;
+    }
     const port = await navigator.serial.requestPort({
       filters: event.shiftKey ? [] : [...PORT_FILTERS.values()],
     });

src/routes/(app)/Footer.svelte

@@ -15,6 +15,7 @@
   } from "$lib/serial/connection";
   import { fade, slide } from "svelte/transition";
   import ConnectPopup from "./ConnectPopup.svelte";
+  import { goto } from "$app/navigation";
 
   let locale = $state(
     (browser && (localStorage.getItem("locale") as Locales)) || detectLocale(),
@@ -49,6 +50,8 @@
   function disconnect(event: MouseEvent) {
     if (event.shiftKey) {
       sync();
+    } else if (event.altKey) {
+      goto("/terminal/");
     } else {
       $serialPort?.close();
       $serialPort = undefined;