tmux-ide 2.9.0-beta.19 → 2.9.0-beta.21

package/packages/daemon/src/tui/mirror/runtime/application-reference-sheet.tsx

@@ -0,0 +1,125 @@
+/* @jsxImportSource @opentui/solid */
+import { createSignal, For } from "solid-js";
+import type { SemanticThemeSnapshot } from "../theme.ts";
+import { Dialog } from "../ui/dialog.tsx";
+import { TuiButton } from "../ui/button.tsx";
+import { useKeyboardRoute } from "../ui/keyboard-router.tsx";
+import { clipTerminal } from "../terminal-text.ts";
+
+const shortcuts = [
+  "APPLICATION",
+  "F1  Home  ·  F2  Terminals",
+  "F5  Commands  ·  F6  Sessions across machines",
+  "F7  Agent attention  ·  Ctrl+G  Machine sidebar",
+  "IN THE COMMAND / SESSION MENU",
+  "Type to search  ·  ↑/↓ choose  ·  Enter activate",
+  "Ctrl+Space  Toggle search / navigation mode",
+  "Navigation mode: j/k move · g/G first/last · i search",
+  "PageUp/PageDown page  ·  Ctrl+U/D half page",
+  "Ctrl+H  Local / all hosts  ·  Ctrl+F  Favorite session",
+  "Ctrl+←/→  Browse windows without activating them",
+  "Ctrl+P  Show / hide preview  ·  Ctrl+E  Expand / restore",
+  "Ctrl+N  New session  ·  Ctrl+X  Confirm close session",
+  "Ctrl+R  Retry selected host",
+  "Ctrl+K  Shortcuts  ·  Ctrl+B  What's new",
+  "Esc  Close sheet / menu and return to your terminal",
+];
+const changes = [
+  "LATEST CHANGES",
+  "Agent previews follow the highlighted pane in the session.",
+  "Pane identity isolates cached previews and late responses.",
+  "Shortcuts and release history are available offline here.",
+  "",
+  "2.9.0-beta.18",
+  "Shared F5/F6 switcher with side-by-side previews in wide terminals.",
+  "Cached previews appear immediately while a fresh snapshot loads.",
+  "Fuzzy search, match highlighting, favorites and recent sessions.",
+  "Window browsing, expanded previews and bounded background work.",
+  "Create / confirm close on the selected host without leaving the menu.",
+  "",
+  "2.9.0-beta.17",
+  "Fleet navigation, passive window previews and activity summaries.",
+  "Adaptive refresh and exact-host actions across machines.",
+  "",
+  "Full release history: github.com/wavyrai/tmux-ide/releases",
+];
+
+export function ApplicationReferenceSheet(props: {
+  page: "shortcuts" | "changes";
+  width: number;
+  height: number;
+  theme: SemanticThemeSnapshot;
+  onClose: () => void;
+}) {
+  const [page, setPage] = createSignal(props.page);
+  const [offset, setOffset] = createSignal(0);
+  const rows = () => (page() === "shortcuts" ? shortcuts : changes);
+  const capacity = () => Math.max(1, Math.min(24, props.height - 8));
+  const move = (delta: number) =>
+    setOffset((v) => Math.max(0, Math.min(rows().length - capacity(), v + delta)));
+  const change = (next: "shortcuts" | "changes") => {
+    setPage(next);
+    setOffset(0);
+  };
+  useKeyboardRoute((event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (event.eventType !== "press") return true;
+    const key = event.name.toLowerCase();
+    if (key === "escape") props.onClose();
+    else if (key === "tab") change(page() === "shortcuts" ? "changes" : "shortcuts");
+    else if (key === "down" || key === "j") move(1);
+    else if (key === "up" || key === "k") move(-1);
+    else if (key === "pagedown") move(capacity());
+    else if (key === "pageup") move(-capacity());
+    return true;
+  });
+  return (
+    <Dialog
+      theme={props.theme}
+      viewportWidth={props.width}
+      viewportHeight={props.height}
+      width={Math.min(88, Math.max(1, props.width - 4))}
+      height={Math.min(props.height, capacity() + 6)}
+      title={page() === "shortcuts" ? "Keyboard shortcuts" : "What's new"}
+      footer="Tab switch sheet · ↑↓ scroll · Esc back"
+      zIndex={100}
+      onDismiss={props.onClose}
+    >
+      <box height={1} flexDirection="row" gap={1}>
+        <TuiButton
+          theme={props.theme}
+          label="Shortcuts"
+          size="compact"
+          onPress={() => change("shortcuts")}
+        />
+        <TuiButton
+          theme={props.theme}
+          label="What's new"
+          size="compact"
+          onPress={() => change("changes")}
+        />
+        <TuiButton theme={props.theme} label="Back" size="compact" onPress={props.onClose} />
+      </box>
+      <box
+        flexDirection="column"
+        height={capacity()}
+        overflow="hidden"
+        onMouseScroll={(event) => {
+          event.preventDefault();
+          move(event.scroll.direction === "up" ? -3 : 3);
+        }}
+      >
+        <For each={rows().slice(offset(), offset() + capacity())}>
+          {(line) => (
+            <text
+              height={1}
+              fg={props.theme.roles.text.primary}
+              content={clipTerminal(line, Math.max(1, Math.min(88, props.width - 4) - 4))}
+            />
+          )}
+        </For>
+      </box>
+    </Dialog>
+  );
+}

package/packages/daemon/src/tui/mirror/runtime/application-root-v2.tsx

@@ -441,7 +441,7 @@ export async function startApplicationRoot(options: StartApplicationRootOptions
           if (
             (shell().semantic?.focus.palette.open || shell().localPaletteOpen) &&
             event.ctrl &&
-            ["left", "right", "p", "e", "n", "x", "f", "r"].includes(name) &&
+            ["left", "right", "p", "e", "n", "x", "f", "r", "k", "b"].includes(name) &&
             componentKeyboardRoutes.route(event)
           )
             return;
@@ -622,6 +622,7 @@ export async function startApplicationRoot(options: StartApplicationRootOptions
               })}
               onResizePreview={recoverHostFocus(interaction.previewPaneResize)}
               onResizePane={recoverHostFocus(interaction.resizePane)}
+              onCancelResize={interaction.cancelPaneResize}
               onResizePointerIngress={recoverHostFocus.optional(resizeIngress)}
               onWheelObservation={tuiPerfWheelObservation}
               onTerminalInput={recoverHostFocus((paneId, input) =>

package/packages/daemon/src/tui/mirror/runtime/application-shell-overlays.tsx

@@ -1,3 +1,4 @@
+import { ApplicationReferenceSheet } from "./application-reference-sheet.tsx";
 import { ApplicationFleetSessionActions } from "./application-fleet-session-actions.tsx";
 import { ApplicationPalettePreview } from "./application-palette-preview.tsx";
 /* @jsxImportSource @opentui/solid */
@@ -106,6 +107,12 @@ export function MinimalPalette(props: {
 }): JSX.Element {
   const [expanded, setExpanded] = createSignal(false);
   const [modal, setModal] = createSignal(false);
+  const [sheet, setSheet] = createSignal<"shortcuts" | "changes">();
+  const openSheet = (page: "shortcuts" | "changes" | undefined) => {
+    setSheet(page);
+    setModal(!!page);
+    props.onModalChange?.(!!page);
+  };
   const [lastHost, setLastHost] = createSignal<ApplicationPaletteCommand>();
   createEffect(() => {
     const c = props.commands[props.selected];
@@ -181,10 +188,11 @@ export function MinimalPalette(props: {
     )
       return false;
     const key = event.name.toLowerCase();
-    if (!["f", "r"].includes(key)) return false;
+    if (!["f", "r", "k", "b"].includes(key)) return false;
     event.preventDefault();
     event.stopPropagation();
     if (event.eventType !== "press") return true;
+    if (key === "k" || key === "b") openSheet(key === "k" ? "shortcuts" : "changes");
     const c = selectedCommand();
     if (c && key === "f") props.onFavorite?.(c);
     if (typeof c === "object" && c.fleet && key === "r")
@@ -212,176 +220,203 @@ export function MinimalPalette(props: {
         };
       });
   return (
-    <Dialog
-      theme={props.theme}
-      viewportWidth={props.width}
-      viewportHeight={props.height}
-      width={width()}
-      height={height()}
-      title={props.title ?? (innerWidth() >= 15 ? "Command palette" : "Commands")}
-      {...(height() >= 9
-        ? { footer: props.keyboardHint ?? "↑↓ choose · Enter run · Esc close" }
-        : {})}
-      active={props.active}
-      zIndex={props.zIndex}
-      onDismiss={props.onClose}
-    >
-      <text
-        height={1}
-        width={innerWidth()}
-        fg={props.theme.roles.text.link}
-        content={clipTerminal(
-          props.query
-            ? `/ ${clipTerminalEnd(`${props.query}▏`, innerWidth() - 2)}`
-            : "/ Search commands…",
-          innerWidth(),
-        )}
-      />
-      <Show when={height() >= 12}>
-        <box height={1} flexDirection="row" gap={1} overflow="hidden">
-          <Badge theme={props.theme} label={`${props.commands.length} matches`} />
-          <Show when={hasPreview()}>
-            <Badge theme={props.theme} label="PASSIVE PREVIEW" tone="neutral" />
-          </Show>
-        </box>
-      </Show>
-      <box
-        height={bodyHeight()}
-        flexDirection={sideBySide() ? "row" : "column"}
-        gap={sideBySide() ? 1 : 0}
-        overflow="hidden"
+    <>
+      <Dialog
+        theme={props.theme}
+        viewportWidth={props.width}
+        viewportHeight={props.height}
+        width={width()}
+        height={height()}
+        title={props.title ?? (innerWidth() >= 15 ? "Command palette" : "Commands")}
+        {...(height() >= 9
+          ? { footer: props.keyboardHint ?? "↑↓ choose · Enter run · Esc close" }
+          : {})}
+        active={props.active !== false && !sheet()}
+        zIndex={props.zIndex}
+        onDismiss={props.onClose}
       >
-        <Show when={!expanded()}>
-          <box
-            width={listWidth()}
-            height={visibleCapacity()}
-            flexDirection="column"
-            overflow="hidden"
-            onMouseScroll={(event) => {
-              if (props.active === false || !props.commands.length) return;
-              event.preventDefault();
-              event.stopPropagation();
-              props.onSelect?.(
-                Math.max(
-                  0,
-                  Math.min(
-                    props.commands.length - 1,
-                    props.selected + (event.scroll?.direction === "up" ? -1 : 1),
+        <text
+          height={1}
+          width={innerWidth()}
+          fg={props.theme.roles.text.link}
+          content={clipTerminal(
+            props.query
+              ? `/ ${clipTerminalEnd(`${props.query}▏`, innerWidth() - 2)}`
+              : "/ Search commands…",
+            innerWidth(),
+          )}
+        />
+        <Show when={height() >= 12}>
+          <box height={1} flexDirection="row" gap={1} overflow="hidden">
+            <TuiButton
+              theme={props.theme}
+              label="Shortcuts ^K"
+              size="compact"
+              onPress={() => openSheet("shortcuts")}
+            />
+            <TuiButton
+              theme={props.theme}
+              label="What's new ^B"
+              size="compact"
+              onPress={() => openSheet("changes")}
+            />
+            <Badge theme={props.theme} label={`${props.commands.length} matches`} />
+            <Show when={hasPreview()}>
+              <Badge theme={props.theme} label="PASSIVE PREVIEW" tone="neutral" />
+            </Show>
+          </box>
+        </Show>
+        <box
+          height={bodyHeight()}
+          flexDirection={sideBySide() ? "row" : "column"}
+          gap={sideBySide() ? 1 : 0}
+          overflow="hidden"
+        >
+          <Show when={!expanded()}>
+            <box
+              width={listWidth()}
+              height={visibleCapacity()}
+              flexDirection="column"
+              overflow="hidden"
+              onMouseScroll={(event) => {
+                if (props.active === false || !props.commands.length) return;
+                event.preventDefault();
+                event.stopPropagation();
+                props.onSelect?.(
+                  Math.max(
+                    0,
+                    Math.min(
+                      props.commands.length - 1,
+                      props.selected + (event.scroll?.direction === "up" ? -1 : 1),
+                    ),
                   ),
-                ),
-              );
-            }}
-          >
-            <Show
-              when={props.commands.length > 0}
-              fallback={
-                <text
-                  height={1}
-                  width={innerWidth()}
-                  fg={props.theme.roles.text.muted}
-                  content={clipTerminal("No matches · Ctrl+U clear", innerWidth())}
-                />
-              }
+                );
+              }}
             >
-              <For each={commandRows().map((row) => applicationCommandDescription(row.command).id)}>
-                {(id) => {
-                  const row = () =>
-                    commandRows().find(
-                      (row) => applicationCommandDescription(row.command).id === id,
-                    )!;
-                  return (
-                    <OverlayListRow
-                      theme={props.theme}
-                      id={id}
-                      label={`${typeof row().command === "object" && (row().command as { fleet?: { favorite?: boolean } }).fleet?.favorite ? "★ " : ""}${commandLabel(row().command)}`}
-                      query={props.query}
-                      width={listWidth()}
-                      selected={props.selected === row().index}
-                      reserveMarker={innerWidth() >= 16}
-                      disabled={
-                        props.active === false || Boolean(props.disabledReason?.(row().command))
-                      }
-                      danger={props.closeArmed && row().command === "close-pane"}
-                      onHighlight={() => props.onSelect?.(row().index)}
-                      onPress={() => {
-                        props.onSelect?.(row().index);
-                        props.onActivate(row().command);
-                      }}
-                    />
-                  );
+              <Show
+                when={props.commands.length > 0}
+                fallback={
+                  <text
+                    height={1}
+                    width={innerWidth()}
+                    fg={props.theme.roles.text.muted}
+                    content={clipTerminal("No matches · Ctrl+U clear", innerWidth())}
+                  />
+                }
+              >
+                <For
+                  each={commandRows().map((row) => applicationCommandDescription(row.command).id)}
+                >
+                  {(id) => {
+                    const row = () =>
+                      commandRows().find(
+                        (row) => applicationCommandDescription(row.command).id === id,
+                      )!;
+                    return (
+                      <OverlayListRow
+                        theme={props.theme}
+                        id={id}
+                        label={`${typeof row().command === "object" && (row().command as { fleet?: { favorite?: boolean } }).fleet?.favorite ? "★ " : ""}${commandLabel(row().command)}`}
+                        query={props.query}
+                        width={listWidth()}
+                        selected={props.selected === row().index}
+                        reserveMarker={innerWidth() >= 16}
+                        disabled={
+                          props.active === false || Boolean(props.disabledReason?.(row().command))
+                        }
+                        danger={props.closeArmed && row().command === "close-pane"}
+                        onHighlight={() => props.onSelect?.(row().index)}
+                        onPress={() => {
+                          props.onSelect?.(row().index);
+                          props.onActivate(row().command);
+                        }}
+                      />
+                    );
+                  }}
+                </For>
+              </Show>
+            </box>
+          </Show>
+          <Show when={sideBySide()}>
+            <text
+              width={1}
+              height={bodyHeight()}
+              fg={props.theme.roles.text.muted}
+              content={Array(bodyHeight()).fill("│").join("\n")}
+            />
+          </Show>
+          <Show when={hasPreview()}>
+            <ApplicationPalettePreview
+              command={selectedCommand()}
+              width={previewWidth()}
+              height={previewHeight()}
+              theme={props.theme}
+              active={!modal() && props.active !== false && props.previewActive !== false}
+              onExpandedChange={setExpanded}
+            />
+          </Show>
+        </box>
+        <Show when={hasPreview()}>
+          <box height={2} flexDirection="row" gap={1} overflow="hidden">
+            <ApplicationFleetSessionActions
+              command={selectedCommand()}
+              width={props.width}
+              height={props.height}
+              theme={props.theme}
+              initialName={props.commands.length === 0 ? props.query : undefined}
+              active={props.active !== false && props.previewActive !== false}
+              onModalChange={(open) => {
+                setModal(open);
+                props.onModalChange?.(open);
+              }}
+            />
+            <Show when={favorite() !== undefined && props.onFavorite}>
+              <KeyHint
+                theme={props.theme}
+                keys="^F"
+                label={favorite() ? "Unfavorite" : "Favorite"}
+                disabled={props.active === false || props.previewActive === false}
+                onPress={() => {
+                  const c = selectedCommand();
+                  if (c) props.onFavorite?.(c);
                 }}
-              </For>
+              />
             </Show>
           </box>
         </Show>
-        <Show when={sideBySide()}>
+        <Show when={height() >= 9}>
           <text
-            width={1}
-            height={bodyHeight()}
+            height={1}
+            width={innerWidth()}
             fg={props.theme.roles.text.muted}
-            content={Array(bodyHeight()).fill("│").join("\n")}
-          />
-        </Show>
-        <Show when={hasPreview()}>
-          <ApplicationPalettePreview
-            command={selectedCommand()}
-            width={previewWidth()}
-            height={previewHeight()}
-            theme={props.theme}
-            active={!modal() && props.active !== false && props.previewActive !== false}
-            onExpandedChange={setExpanded}
+            content={clipTerminal(
+              (() => {
+                const command = props.commands[props.selected];
+                if (!command) return "Try an action, agent or session name";
+                return (
+                  props.disabledReason?.(command) ??
+                  (props.closeArmed
+                    ? "Closes the pane and its running process"
+                    : `${props.selected + 1}/${props.commands.length} · ${applicationCommandDescription(command).detail}`)
+                );
+              })(),
+              innerWidth(),
+            )}
           />
         </Show>
-      </box>
-      <Show when={hasPreview()}>
-        <box height={2} flexDirection="row" gap={1} overflow="hidden">
-          <ApplicationFleetSessionActions
-            command={selectedCommand()}
+      </Dialog>
+      <Show when={sheet()}>
+        {(page) => (
+          <ApplicationReferenceSheet
+            page={page()}
             width={props.width}
             height={props.height}
             theme={props.theme}
-            initialName={props.commands.length === 0 ? props.query : undefined}
-            active={props.active !== false && props.previewActive !== false}
-            onModalChange={(open) => {
-              setModal(open);
-              props.onModalChange?.(open);
-            }}
+            onClose={() => openSheet(undefined)}
           />
-          <Show when={favorite() !== undefined && props.onFavorite}>
-            <KeyHint
-              theme={props.theme}
-              keys="^F"
-              label={favorite() ? "Unfavorite" : "Favorite"}
-              disabled={props.active === false || props.previewActive === false}
-              onPress={() => {
-                const c = selectedCommand();
-                if (c) props.onFavorite?.(c);
-              }}
-            />
-          </Show>
-        </box>
-      </Show>
-      <Show when={height() >= 9}>
-        <text
-          height={1}
-          width={innerWidth()}
-          fg={props.theme.roles.text.muted}
-          content={clipTerminal(
-            (() => {
-              const command = props.commands[props.selected];
-              if (!command) return "Try an action, agent or session name";
-              return (
-                props.disabledReason?.(command) ??
-                (props.closeArmed
-                  ? "Closes the pane and its running process"
-                  : `${props.selected + 1}/${props.commands.length} · ${applicationCommandDescription(command).detail}`)
-              );
-            })(),
-            innerWidth(),
-          )}
-        />
+        )}
       </Show>
-    </Dialog>
+    </>
   );
 }
 
@@ -458,7 +493,7 @@ export function AppearanceDialog(props: {
       viewportWidth={props.width}
       viewportHeight={props.height}
       width={width()}
-      height={Math.min(18, props.height)}
+      height={Math.min(19, props.height)}
       title="Appearance"
       footer={width() < 40 ? "Enter save · Esc back" : "↑↓ preview · Enter save · Esc cancel"}
       active={props.active}
@@ -470,10 +505,17 @@ export function AppearanceDialog(props: {
         fg={props.owner.theme().roles.text.primary}
         content={`Search: ${props.owner.pickerQuery() || "type to filter"}`}
       />
+      <TuiButton
+        theme={props.owner.theme()}
+        label={`^A Contrast: ${props.owner.automaticContrast() ? "On" : "Off"}`}
+        size="compact"
+        disabled={props.active === false}
+        onPress={props.owner.toggleAutomaticContrast}
+      />
       <For
         each={(() => {
           const options = props.owner.pickerOptions();
-          const count = Math.max(1, Math.min(10, props.height - 8));
+          const count = Math.max(1, Math.min(10, props.height - 9));
           const index = options.findIndex((p) => p.id === props.owner.pickerSelection());
           const start = Math.max(
             0,

package/packages/daemon/src/tui/mirror/runtime/application-shell-view.tsx

@@ -125,6 +125,7 @@ export interface ApplicationShellViewProps {
   readonly onSelectPane: TerminalWorkspaceProps["onSelectPane"];
   readonly onResizePreview: TerminalWorkspaceProps["onResizePreview"];
   readonly onResizePane: TerminalWorkspaceProps["onResizePane"];
+  readonly onCancelResize?: TerminalWorkspaceProps["onCancelResize"];
   readonly onResizePointerIngress?: TerminalWorkspaceProps["onResizePointerIngress"];
   readonly onWheelObservation?: TerminalWorkspaceProps["onWheelObservation"];
   readonly onTerminalInput?: TerminalWorkspaceProps["onTerminalInput"];
@@ -517,6 +518,7 @@ export function ApplicationShellView(props: ApplicationShellViewProps): JSX.Elem
                       }}
                       onResizePreview={props.onResizePreview}
                       onResizePane={props.onResizePane}
+                      onCancelResize={props.onCancelResize}
                       onResizePointerIngress={props.onResizePointerIngress}
                       onWheelObservation={props.onWheelObservation}
                       onTerminalInput={props.onTerminalInput}