gloomberb 0.16.3 → 0.16.4

package/src/components/chart/composite/composite-chart.tsx

@@ -10,7 +10,9 @@ import { CompositeLegend } from "./legend";
 import { ChartToolbar, CHART_TOOLBAR_WIDTH } from "./toolbar";
 import { AsciiText, Box, ChartSurface, Text, useUiCapabilities } from "../../../ui";
 import { useOptionalPaneInstanceId } from "../../../state/app/context";
-import { useThemeColors } from "../../../theme/theme-context";
+import { useThemeColors, useThemeId } from "../../../theme/theme-context";
+import { themedSeriesColor, themeSeriesColors } from "../../../theme/series-colors";
+import { assignSeriesLineCues } from "./series-cues";
 import { chartSurfaceBackground, usePaneSurface } from "../../layout/pane/surface";
 import { CHART_WATERMARK_ROLE } from "../../../utils/screenshot-watermark";
 import type { ResolvedSeries } from "../../../time-series/types";
@@ -56,7 +58,28 @@ function chartWatermarkScale(plotWidthPx: number, plotHeightPx: number): number
 }
 
 const NO_X_MARKERS: readonly CompositeChartXMarker[] = [];
-export function CompositeChart({
+
+/** Default-palette series in the theme's own palette, where it has one; the same list otherwise. */
+function useThemedSeriesList(list: ResolvedSeries[], themeId: string): ResolvedSeries[];
+function useThemedSeriesList(list: ResolvedSeries[] | undefined, themeId: string): ResolvedSeries[] | undefined;
+function useThemedSeriesList(list: ResolvedSeries[] | undefined, themeId: string): ResolvedSeries[] | undefined {
+  return useMemo(() => {
+    if (!list || !themeSeriesColors(themeId)) return list;
+    return list.map((entry) => {
+      const color = themedSeriesColor(entry.color, themeId);
+      return color === entry.color ? entry : { ...entry, color };
+    });
+  }, [list, themeId]);
+}
+
+export function CompositeChart(props: CompositeChartProps) {
+  const themeId = useThemeId();
+  const series = useThemedSeriesList(props.series, themeId);
+  const legendSeries = useThemedSeriesList(props.legendSeries, themeId);
+  return <ThemedCompositeChart {...props} series={series} legendSeries={legendSeries} />;
+}
+
+function ThemedCompositeChart({
   series,
   legendSeries,
   timelineSeries,
@@ -155,6 +178,17 @@ export function CompositeChart({
     () => new Set(visibleSeries.map((entry) => entry.id)),
     [visibleSeries],
   );
+  // Assigned over the legend's list, hidden lines included, so toggling one
+  // never restyles the rest.
+  const cueSource = legendSeries ?? stableSeries;
+  const cueKey = cueSource.map((entry) => `${entry.id}\u0000${entry.style}\u0000${entry.profile ? 1 : 0}`).join("\u0001");
+  const cueSourceRef = useRef(cueSource);
+  cueSourceRef.current = cueSource;
+  // Keyed by ids and styles: a live tick hands over new series objects.
+  const lineCues = useMemo(() => {
+    void cueKey;
+    return assignSeriesLineCues(cueSourceRef.current);
+  }, [cueKey]);
   const {
     navigationFrame, activeUserViewport, effectiveViewport,
     panViewport, panViewportByRatio, zoomViewport, setViewportRange, resetViewport,
@@ -239,8 +273,11 @@ export function CompositeChart({
       plotHeight,
     );
     // Terminal labels snap to rows; a fractional viewport places them exactly.
-    return projectedScene.panels.map((panel) => resizeCompositePanel(panel, panelHeights.get(panel.id) ?? 1, !fractionalViewport));
-  }, [fractionalViewport, panels, plotHeight, projectedScene]);
+    return projectedScene.panels.map((panel) => {
+      const resized = resizeCompositePanel(panel, panelHeights.get(panel.id) ?? 1, !fractionalViewport);
+      return lineCues.size > 0 ? { ...resized, lineCues } : resized;
+    });
+  }, [fractionalViewport, lineCues, panels, plotHeight, projectedScene]);
   // Static overview charts also pin the latest price with cursor precision.
   const includeCursorLabels = interactive || cursorDate !== undefined || !!scenePanels?.some((panel) => panel.lastPrice);
   const resolvedAxisWidth = useMemo(() => maximumAxisWidth === 0 ? 0 : Math.min(
@@ -479,6 +516,8 @@ export function CompositeChart({
           scene={scene}
           series={visibleLegendSeries}
           visibleSeriesIds={visibleSeriesIds}
+          lineCues={lineCues}
+          cellPlot={showTextFallback && !isDesktopWeb}
           width={totalWidth}
           accessory={legendAccessory}
           accessoryWidth={legendAccessoryWidth}

package/src/components/chart/composite/legend.tsx

@@ -7,8 +7,15 @@ import type { ResolvedSeries } from "../../../time-series/types";
 import { consumeChartMouseEvent, type ChartMouseEvent } from "../core/pointer";
 import { formatCompositePointDetails, formatCompositeSeriesValue, seriesPriceReference } from "./format";
 import type { CompositeChartProps, CompositeChartScene } from "./types";
+import { seriesCueCssBackground, type SeriesLineCue } from "./series-cues";
 
 const LEGEND_WHEEL_DELTA_PER_CELL = 8;
+const NO_LINE_CUES: ReadonlyMap<string, SeriesLineCue> = new Map();
+/** The dot every legend entry had before lines carried cues, and still has where they do not. */
+const DOT_MARKER = "● ";
+/** Cells the desktop and web marker takes: an 8px dot, or a 16px line sample, plus its margin. */
+const DOM_DOT_CELLS = 2;
+const DOM_LINE_CELLS = 3;
 
 function legendValue(
   series: ResolvedSeries,
@@ -50,6 +57,8 @@ export function CompositeLegend({
   scene,
   series,
   visibleSeriesIds,
+  lineCues = NO_LINE_CUES,
+  cellPlot = false,
   width,
   accessory,
   accessoryWidth,
@@ -63,6 +72,10 @@ export function CompositeLegend({
   scene: CompositeChartScene | null;
   series: ResolvedSeries[];
   visibleSeriesIds: ReadonlySet<string>;
+  /** Each line's cue on a chart that draws several; a chart with one keeps its dot. */
+  lineCues?: ReadonlyMap<string, SeriesLineCue>;
+  /** The plot is cell text, so a line's cue is its mark rather than its dash. */
+  cellPlot?: boolean;
   width: number;
   accessory: CompositeChartProps["legendAccessory"];
   accessoryWidth: CompositeChartProps["legendAccessoryWidth"];
@@ -79,6 +92,9 @@ export function CompositeLegend({
     scene?.cursorValues.map((entry) => [entry.seriesId, entry] as const) ?? [],
   );
   const entries = series.map((entry) => {
+    const cue = lineCues.get(entry.id) ?? null;
+    const marker = cue ? `${cellPlot ? cue.glyph : cue.sample} ` : DOT_MARKER;
+    const markerWidth = isDesktopWeb ? cue ? DOM_LINE_CELLS : DOM_DOT_CELLS : displayWidth(marker);
     const toggleable = !!onToggleSeries && (isSeriesToggleable?.(entry) ?? true);
     const cursorValue = cursorValueById.get(entry.id);
     const changeText = showLatestChangePercent
@@ -107,10 +123,13 @@ export function CompositeLegend({
     const text = [label, valueText].filter(Boolean).join(" ");
     return {
       entry,
+      cue,
+      marker,
+      markerWidth,
       label,
       compactLabel,
       text,
-      width: Math.max(1, displayWidth(text)) + 2,
+      width: Math.max(1, displayWidth(text)) + markerWidth,
       labelWidth,
       valueText,
       toggleable,
@@ -122,7 +141,7 @@ export function CompositeLegend({
     target.label = label;
     target.labelWidth = labelWidth;
     target.text = [truncateToDisplayWidth(label, labelWidth), target.valueText].filter(Boolean).join(" ");
-    target.width = Math.max(1, displayWidth(target.text)) + 2;
+    target.width = Math.max(1, displayWidth(target.text)) + target.markerWidth;
   };
   const measureSeriesWidth = () => entries.reduce(
     (total, entry, index) => total + entry.width + (index > 0 ? 1 : 0),
@@ -146,7 +165,7 @@ export function CompositeLegend({
   const minimumSeriesWidth = entries.reduce((total, entry, index) => {
     const text = [truncateToDisplayWidth(entry.compactLabel, Math.min(8, displayWidth(entry.compactLabel))), entry.valueText]
       .filter(Boolean).join(" ");
-    return total + Math.max(1, displayWidth(text)) + 2 + (index > 0 ? 1 : 0);
+    return total + Math.max(1, displayWidth(text)) + entry.markerWidth + (index > 0 ? 1 : 0);
   }, 0);
   if (minimumSeriesWidth <= widthBeforeAccessory) {
     while (measureSeriesWidth() > widthBeforeAccessory) {
@@ -247,7 +266,7 @@ export function CompositeLegend({
           data-gloom-role="composite-chart-legend-scroll"
         >
           <Box flexDirection="row" width={desiredSeriesWidth} height={1} gap={1}>
-            {entries.map(({ entry, text, toggleable, tooltip, width: entryWidth }, index) => {
+            {entries.map(({ entry, cue, marker, text, toggleable, tooltip, width: entryWidth }, index) => {
               const entryVisible = visibleSeriesIds.has(entry.id);
               return (
               <Box
@@ -274,7 +293,21 @@ export function CompositeLegend({
                 data-visible={entryVisible ? "true" : "false"}
                 title={isDesktopWeb ? tooltip : undefined}
               >
-                {isDesktopWeb ? (
+                {isDesktopWeb && cue ? (
+                  // The line as the plot strokes it: solid, dashed, dotted or heavy.
+                  <Box
+                    flexShrink={0}
+                    style={{
+                      width: 16,
+                      height: Math.max(2, Math.round(cue.thickness)),
+                      marginInlineEnd: 6,
+                      background: seriesCueCssBackground(cue, entry.color),
+                      opacity: entryVisible ? 1 : 0.35,
+                    }}
+                    data-gloom-role="composite-chart-legend-marker"
+                    data-gloom-cue={cue.id}
+                  />
+                ) : isDesktopWeb ? (
                   <Box
                     flexShrink={0}
                     style={{
@@ -288,7 +321,7 @@ export function CompositeLegend({
                     data-gloom-role="composite-chart-legend-marker"
                   />
                 ) : (
-                  <Text fg={entryVisible ? entry.color : themeColors.textMuted}>● </Text>
+                  <Text fg={entryVisible ? entry.color : themeColors.textMuted}>{marker}</Text>
                 )}
                 {/* The filled/hollow marker already says whether a series is
                     shown; the word only repeated it in every legend slot. */}

package/src/components/chart/composite/rasterizer.ts

@@ -17,6 +17,7 @@ import { compositeGridRatios } from "./format";
 import { projectCompositeValue } from "./scene";
 import { paintVolumeProfile } from "./volume-profile-paint";
 import { paintExtendedHours } from "./session-shading";
+import type { SeriesLineCue } from "./series-cues";
 import type {
   CompositeAxisDomain,
   CompositeChartColors,
@@ -168,6 +169,55 @@ function fillBand(
   }
 }
 
+/**
+ * Strokes a line's segments with a dash pattern that runs on along the whole
+ * line, so a dense series with segments shorter than one dash still shows the
+ * pattern rather than restarting it at every point.
+ */
+class DashedStroke {
+  private index = 0;
+  private remaining: number;
+
+  constructor(
+    private readonly data: Uint8Array,
+    private readonly width: number,
+    private readonly height: number,
+    private readonly color: RgbaColor,
+    private readonly cue: SeriesLineCue,
+  ) {
+    this.remaining = cue.dash[0] ?? 0;
+  }
+
+  segment(x0: number, y0: number, x1: number, y1: number): void {
+    const { dash, thickness } = this.cue;
+    const length = Math.hypot(x1 - x0, y1 - y0);
+    if (dash.length === 0 || length === 0) {
+      drawLine(this.data, this.width, this.height, x0, y0, x1, y1, this.color, thickness);
+      return;
+    }
+    let travelled = 0;
+    while (travelled < length) {
+      const run = Math.min(this.remaining, length - travelled);
+      if (this.index % 2 === 0) {
+        const from = travelled / length;
+        const to = (travelled + run) / length;
+        drawLine(
+          this.data, this.width, this.height,
+          x0 + (x1 - x0) * from, y0 + (y1 - y0) * from,
+          x0 + (x1 - x0) * to, y0 + (y1 - y0) * to,
+          this.color, thickness,
+        );
+      }
+      travelled += run;
+      this.remaining -= run;
+      if (this.remaining <= 0) {
+        this.index = (this.index + 1) % dash.length;
+        this.remaining = dash[this.index]!;
+      }
+    }
+  }
+}
+
 function drawConnectedSeries(
   data: Uint8Array,
   width: number,
@@ -176,6 +226,7 @@ function drawConnectedSeries(
   domain: CompositeAxisDomain,
   color: RgbaColor,
   area: boolean,
+  cue?: SeriesLineCue,
 ): void {
   const points = series.points.map((point) => pixelPoint(point, width, height));
   if (points.length === 0) return;
@@ -184,11 +235,19 @@ function drawConnectedSeries(
 
   if (area) fillAreaGradient(data, width, height, series, points, baseline, step, color);
 
+  const stroke = cue ? new DashedStroke(data, width, height, color, cue) : null;
   for (let index = 1; index < points.length; index += 1) {
     const previous = points[index - 1]!;
     const current = points[index]!;
     if (series.points[index]?.breakBefore) continue;
-    if (step) {
+    if (stroke) {
+      if (step) {
+        stroke.segment(previous.x, previous.y, current.x, previous.y);
+        stroke.segment(current.x, previous.y, current.x, current.y);
+      } else {
+        stroke.segment(previous.x, previous.y, current.x, current.y);
+      }
+    } else if (step) {
       drawLine(data, width, height, previous.x, previous.y, current.x, previous.y, color, 1.4);
       drawLine(data, width, height, current.x, previous.y, current.x, current.y, color, 1.4);
     } else {
@@ -459,6 +518,7 @@ export function renderCompositePanelBitmap(
     if (!domain) continue;
     const color = parseHex(series.source.color);
     const negativeColor = series.source.negativeColor ? parseHex(series.source.negativeColor) : color;
+    const cue = panel.lineCues?.get(series.source.id);
     switch (series.source.style) {
       case "columns":
         drawColumns(
@@ -475,11 +535,11 @@ export function renderCompositePanelBitmap(
         );
         break;
       case "area":
-        drawConnectedSeries(data, width, height, series, domain, color, true);
+        drawConnectedSeries(data, width, height, series, domain, color, true, cue);
         break;
       case "band":
         fillBand(data, width, height, series, domain, color);
-        drawConnectedSeries(data, width, height, series, domain, color, false);
+        drawConnectedSeries(data, width, height, series, domain, color, false, cue);
         break;
       case "points":
         for (const point of series.points) {
@@ -494,7 +554,7 @@ export function renderCompositePanelBitmap(
         break;
       case "line":
       case "step":
-        drawConnectedSeries(data, width, height, series, domain, color, false);
+        drawConnectedSeries(data, width, height, series, domain, color, false, cue);
         break;
     }
   }

package/src/components/chart/composite/series-cues.ts

@@ -0,0 +1,71 @@
+import type { ResolvedSeries, SeriesStyle } from "../../../time-series/types";
+
+/**
+ * What tells one line from another besides its colour, so a chart still reads
+ * in greyscale and for colour-blind eyes. Each renderer draws its own form of
+ * the same cue: the bitmap (kitty, desktop, web, `shot`) a dash pattern or a
+ * heavier stroke, the cell fallback a different mark along the line, and the
+ * legend a sample of whichever the plot shows next to the series name.
+ */
+export interface SeriesLineCue {
+  id: "solid" | "dashed" | "dotted" | "dash-dot" | "heavy";
+  /** On and off lengths along the line in bitmap pixels; empty is a solid line. */
+  dash: readonly number[];
+  /** Stroke width in bitmap pixels. */
+  thickness: number;
+  /** The mark the cell renderer draws the line with. */
+  glyph: string;
+  /** Two terminal cells of the line, for the legend beside a bitmap plot. */
+  sample: string;
+}
+
+/** The plain line every single-line chart keeps. */
+const SOLID_LINE_THICKNESS = 1.5;
+
+/**
+ * Dash lengths allow for the stroke's round ends, which eat about its width
+ * out of every gap: a 6 on, 5 off pattern reads as even dashes.
+ */
+const LINE_CUES: readonly SeriesLineCue[] = [
+  { id: "solid", dash: [], thickness: SOLID_LINE_THICKNESS, glyph: "•", sample: "──" },
+  { id: "dashed", dash: [7, 6], thickness: SOLID_LINE_THICKNESS, glyph: "+", sample: "╌╌" },
+  { id: "dotted", dash: [1, 4.5], thickness: 2, glyph: "×", sample: "┈┈" },
+  { id: "dash-dot", dash: [9, 4.5, 1, 4.5], thickness: SOLID_LINE_THICKNESS, glyph: "o", sample: "─·" },
+  { id: "heavy", dash: [], thickness: 3, glyph: "*", sample: "━━" },
+];
+
+const LINE_STYLES = new Set<SeriesStyle>(["line", "step", "area", "band"]);
+
+function isLineCueStyle(style: SeriesStyle): boolean {
+  return LINE_STYLES.has(style);
+}
+
+/**
+ * A cue for each line of a chart that draws two or more. Lines are counted in
+ * legend order, hidden ones included, so hiding one does not restyle the
+ * others; the first keeps the plain solid line. A chart with one line gets
+ * none and looks as it always has.
+ */
+export function assignSeriesLineCues(series: readonly ResolvedSeries[]): ReadonlyMap<string, SeriesLineCue> {
+  const lines = series.filter((entry) => isLineCueStyle(entry.style) && !entry.profile);
+  const cues = new Map<string, SeriesLineCue>();
+  if (lines.length < 2) return cues;
+  for (const entry of lines) {
+    if (!cues.has(entry.id)) cues.set(entry.id, LINE_CUES[cues.size % LINE_CUES.length]!);
+  }
+  return cues;
+}
+
+/** A repeating CSS gradient that draws the cue's dashes, for the desktop and web legend. */
+export function seriesCueCssBackground(cue: SeriesLineCue, color: string): string {
+  if (cue.dash.length === 0) return color;
+  // Half the bitmap lengths: the legend sample is drawn in CSS pixels at its own size.
+  const stops: string[] = [];
+  let at = 0;
+  cue.dash.forEach((length, index) => {
+    const end = at + Math.max(1, length / 2 + (index % 2 === 0 ? 0.5 : -0.5));
+    stops.push(`${index % 2 === 0 ? color : "transparent"} ${at}px ${end}px`);
+    at = end;
+  });
+  return `repeating-linear-gradient(to right, ${stops.join(", ")})`;
+}

package/src/components/chart/composite/text-renderer.ts

@@ -5,6 +5,7 @@ import { buildCompositeColumnLayout, type CompositeColumnLayout } from "./column
 import { projectCompositeValue } from "./scene";
 import { writeVolumeProfileText } from "./volume-profile-paint";
 import { writeSessionBreaksText } from "./session-shading";
+import type { SeriesLineCue } from "./series-cues";
 import type {
   CompositeAxisDomain,
   CompositePanelScene,
@@ -59,19 +60,23 @@ function renderLineLike(
   series: CompositeProjectedSeries,
   width: number,
   height: number,
+  cue?: SeriesLineCue,
 ): void {
   const points = series.points.map((point) => ({ ...cellPoint(point, width, height), point }));
   if (points.length === 0) return;
   const step = series.source.style === "step" || series.source.interpolation === "step-after";
+  // Beside other lines, each line keeps its own mark the whole way, steps
+  // included, since cell text has no colour of its own here.
+  const mark = cue && cue.id !== "solid" ? cue.glyph : null;
   for (let index = 1; index < points.length; index += 1) {
     const previous = points[index - 1]!;
     const current = points[index]!;
     if (current.point.breakBefore) continue;
     if (step) {
-      drawLine(rows, previous.x, previous.y, current.x, previous.y, "─");
-      drawLine(rows, current.x, previous.y, current.x, current.y, "│");
+      drawLine(rows, previous.x, previous.y, current.x, previous.y, mark ?? "─");
+      drawLine(rows, current.x, previous.y, current.x, current.y, mark ?? "│");
     } else {
-      drawLine(rows, previous.x, previous.y, current.x, current.y, "•");
+      drawLine(rows, previous.x, previous.y, current.x, current.y, mark ?? "•");
     }
   }
   for (let index = 0; index < points.length; index += 1) {
@@ -102,6 +107,7 @@ function renderArea(
   domain: CompositeAxisDomain,
   width: number,
   height: number,
+  cue?: SeriesLineCue,
 ): void {
   const baseline = valueRow(0, domain, height) ?? height - 1;
   const points = series.points.map((point) => cellPoint(point, width, height));
@@ -110,7 +116,7 @@ function renderArea(
     const bottom = Math.max(point.y, baseline);
     for (let row = top; row <= bottom; row += 1) setCell(rows, point.x, row, "░");
   }
-  renderLineLike(rows, series, width, height);
+  renderLineLike(rows, series, width, height, cue);
 }
 
 /** A band's range as shade between its points' low and high rows, under its line. */
@@ -120,6 +126,7 @@ function renderBand(
   domain: CompositeAxisDomain,
   width: number,
   height: number,
+  cue?: SeriesLineCue,
 ): void {
   const edges = series.points.map((projected) => {
     const { high, low } = projected.point;
@@ -150,7 +157,7 @@ function renderBand(
       shade(x, previous.top + (current.top - previous.top) * t, previous.bottom + (current.bottom - previous.bottom) * t);
     }
   }
-  renderLineLike(rows, series, width, height);
+  renderLineLike(rows, series, width, height, cue);
 }
 
 function renderColumns(
@@ -267,15 +274,16 @@ export function renderCompositePanelText(
   for (const series of orderedSeries) {
     const domain = panel.axes[series.source.axis];
     if (!domain) continue;
+    const cue = panel.lineCues?.get(series.source.id);
     switch (series.source.style) {
       case "columns":
         renderColumns(rows, series, domain, plotWidth, height, columnLayout);
         break;
       case "area":
-        renderArea(rows, series, domain, plotWidth, height);
+        renderArea(rows, series, domain, plotWidth, height, cue);
         break;
       case "band":
-        renderBand(rows, series, domain, plotWidth, height);
+        renderBand(rows, series, domain, plotWidth, height, cue);
         break;
       case "candles":
       case "ohlc":
@@ -284,7 +292,7 @@ export function renderCompositePanelText(
         break;
       case "line":
       case "step":
-        renderLineLike(rows, series, plotWidth, height);
+        renderLineLike(rows, series, plotWidth, height, cue);
         break;
       case "points":
         renderPoints(rows, series, plotWidth, height);

package/src/components/chart/composite/types.ts

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 import type { CompositeChartLevels } from "./levels";
+import type { SeriesLineCue } from "./series-cues";
 import type {
   ChartPanelSpec,
   PanelScale,
@@ -134,6 +135,8 @@ export interface CompositePanelScene {
   extendedHours?: readonly CompositeExtendedHoursSpan[];
   /** The previous session's close on a one-day chart, drawn as a dotted reference line. */
   priorClose?: { axis: CompositeAxisSide; value: number; yRatio: number };
+  /** How each line tells itself apart besides colour, by series id; absent on a chart with one line. */
+  lineCues?: ReadonlyMap<string, SeriesLineCue>;
 }
 
 export interface CompositeCursorValue {

package/src/components/command-bar/commands/direct/index.ts

@@ -17,7 +17,7 @@ import { openBrokerAddFlow } from "../../../../plugins/builtin/broker-manager/ad
 import { isManualPortfolio } from "../../../../plugins/builtin/portfolio-list/mutations";
 import { CHART_RENDERER_PREFERENCES } from "../../../chart/core/types";
 import type { Command } from "../registry";
-import type { BrokerInstanceConfig } from "../../../../types/config";
+import type { AppConfig, BrokerInstanceConfig } from "../../../../types/config";
 import { requestFeedbackDialog } from "../../../feedback-dialog";
 import type { OpenInlineConfirm } from "../../routing/confirm";
 import {
@@ -288,6 +288,14 @@ export function runDirectCommandAction(options: {
       closeAll({ revertThemePreview: false });
       return;
     }
+    case "toggle-presentation-mode": {
+      const { presentationMode, ...rest } = state.config;
+      const nextConfig: AppConfig = presentationMode ? rest : { ...rest, presentationMode: true };
+      dispatch({ type: "SET_CONFIG", config: nextConfig });
+      persistConfig(nextConfig);
+      closeAll({ revertThemePreview: false });
+      return;
+    }
     case "toggle-value-flashing": {
       const nextConfig = {
         ...state.config,

package/src/components/command-bar/commands/plugin/items.ts

@@ -156,8 +156,10 @@ export function buildPluginCommandResultItem(options: {
     detail: options.result.detail ?? options.command.description ?? "",
     category,
     kind: "command",
+    badge: options.result.badge,
+    name: options.result.name,
     right: (options.result.right ?? options.command.shortcut?.trim()) || undefined,
-    searchText: `${options.result.label} ${options.result.detail || ""} ${(options.result.keywords ?? []).join(" ")} ${options.command.label} ${options.command.description || ""} ${(options.command.keywords ?? []).join(" ")}`,
+    searchText: `${options.result.label} ${options.result.detail || ""} ${options.result.name || ""} ${(options.result.keywords ?? []).join(" ")} ${options.command.label} ${options.command.description || ""} ${(options.command.keywords ?? []).join(" ")}`,
     disabled: options.result.disabled,
     current: options.result.current,
     action: async () => {

package/src/components/command-bar/commands/registry.ts

@@ -207,6 +207,13 @@ export const commands: Command[] = [
       dispatch({ type: "TOGGLE_STATUS_BAR" });
     },
   },
+  {
+    id: "toggle-presentation-mode",
+    prefix: "",
+    label: "Toggle Presentation Mode",
+    description: "Let the panes fill the window, without the header or the status bar",
+    category: "Config",
+  },
   {
     id: "toggle-value-flashing",
     prefix: "VF",

package/src/components/command-bar/layout-items/focused-pane.ts

@@ -4,7 +4,10 @@ import {
   getDockedPaneIds,
   removePane,
 } from "../../../layout/pane-manager";
+import { paneMoveBackTarget, paneNewLayoutBlock } from "../../../layout/pane-layout-move";
+import { resolveTickerForPane } from "../../../state/app/context";
 import { findPaneInstance } from "../../../types/config";
+import { tf } from "../../../i18n";
 import type { ResultItem } from "../list/model";
 import type { LayoutItemsContext } from "./types";
 import { WINDOW_MODE_COMMAND_OPTIONS } from "./window-mode";
@@ -20,6 +23,7 @@ export function buildFocusedPaneLayoutItems({
   persistLayoutChange,
   pluginRegistry,
   pushRoute,
+  state,
 }: LayoutItemsContext): ResultItem[] {
   const focusedPane = focusedPaneId ? findPaneInstance(currentLayout, focusedPaneId) : null;
   const focusedPaneDef = focusedPane ? pluginRegistry.panes.get(focusedPane.paneId) : null;
@@ -37,6 +41,12 @@ export function buildFocusedPaneLayoutItems({
 
   const dockedPaneIds = getDockedPaneIds(currentLayout);
   const focusedFloating = currentLayout.floating.find((entry) => entry.instanceId === focusedPane.instanceId);
+  const newLayoutBlock = paneNewLayoutBlock(
+    currentLayout,
+    focusedPane.instanceId,
+    (instanceId) => resolveTickerForPane(state, instanceId),
+  );
+  const moveBack = paneMoveBackTarget(state.config, focusedPane.instanceId);
 
   return [
     {
@@ -65,6 +75,34 @@ export function buildFocusedPaneLayoutItems({
         pluginRegistry.togglePaneFullscreen(focusedPane.instanceId);
       },
     },
+    {
+      id: "layout-move-to-new-layout",
+      label: "Move to New Layout",
+      detail: newLayoutBlock === "only-pane"
+        ? "Already the only pane in this layout"
+        : "Give the focused pane a layout of its own that it fills",
+      searchText: "own layout tab fullscreen",
+      category: "Focused Pane",
+      kind: "action",
+      disabled: newLayoutBlock === "only-pane" || newLayoutBlock === "detached",
+      action: () => {
+        closeAll({ revertThemePreview: false });
+        pluginRegistry.movePaneToNewLayout(focusedPane.instanceId);
+      },
+    },
+    ...(moveBack ? [{
+      id: "layout-move-back",
+      label: tf("Move Back to {layout}", { layout: moveBack.name }),
+      detail: moveBack.original
+        ? "Return the focused pane to the layout it came from"
+        : "The layout it came from is gone, so it docks in this one instead",
+      category: "Focused Pane",
+      kind: "action" as const,
+      action: () => {
+        closeAll({ revertThemePreview: false });
+        pluginRegistry.movePaneBack(focusedPane.instanceId);
+      },
+    }] : []),
     ...WINDOW_MODE_COMMAND_OPTIONS.map((option) => ({
       id: `layout-window-mode:${option.mode}`,
       label: option.label,

package/src/components/command-bar/pane-templates/workflow.ts

@@ -29,6 +29,7 @@ import {
   type SharedWorkflowDeps,
 } from "../workflow/ops";
 import type { PluginRegistry } from "../../../plugins/registry";
+import { PluginOffError, notifyPluginOff } from "../../../plugins/plugin-off";
 import { shouldOpenPaneTemplateConfig } from "./workflow-route";
 
 type CloseAllFn = (options?: { revertThemePreview?: boolean }) => void;
@@ -107,6 +108,10 @@ export function useCommandBarPaneTemplateActions({
       await pluginRegistry.createPaneFromTemplateAsync(template.id, createOptions);
       closeAll({ revertThemePreview: false });
     } catch (error) {
+      if (error instanceof PluginOffError) {
+        notifyPluginOff(pluginRegistry, error, () => { void openPaneTemplateDirect(template, createOptions); });
+        return;
+      }
       const displayLabel = getPaneTemplateDisplayLabel(template);
       notify(
         error instanceof Error ? error.message : `Could not create ${displayLabel.toLowerCase()}.`,

package/src/components/command-bar/routes/root/command-items.ts

@@ -147,6 +147,8 @@ export function createRootCommandItemBuilder({
         return command.description;
       case "toggle-value-flashing":
         return state.config.valueFlashingEnabled ? "Currently on" : "Currently off";
+      case "toggle-presentation-mode":
+        return state.config.presentationMode ? "Currently on" : "Currently off";
       case "toggle-crash-reports":
         return state.config.telemetry?.crashReports === false ? "Currently off" : "Currently on";
       case "toggle-usage-counts":