…3028)

Large PR that extends WaveEnv mocking to fully cover the (complicated) TabBar implementation.  Also includes a full preview of the tab bar in the preview server with lots of controls to simulate different scenarios.

As a result of this mocking, also fixed a bunch of dependencies, and layout errors, random bugs, and visual UX bugs in the tab bar, making it more robust.

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: sawka <2722291+sawka@users.noreply.github.com>
Co-authored-by: sawka <mike@commandline.dev>

Vertical tabs were still using the older single-badge path and did not
honor the newer `tab:flagcolor` metadata. This updates `vtab` to use the
same badge rendering model as `tab`, including validated flag-color
badges.

- **Shared badge renderer**
- Extract `TabBadges` from `tab.tsx` into a shared
`frontend/app/tab/tabbadges.tsx` component.
- Keep the existing horizontal tab behavior unchanged while making the
badge stack reusable by `vtab`.

- **Vertical tab badge parity**
- Replace the legacy `badge` icon rendering in `vtab.tsx` with
`TabBadges`.
- Support both existing `badge` callers and the newer `badges` array
shape.
- Add `flagColor` support in `vtab` using the same
`validateCssColor(...)` guard as `tab.tsx`, so invalid colors are
ignored rather than rendered.

- **Preview / regression coverage**
  - Update the `vtabbar` preview to show:
    - multiple badges
    - flag-only tabs
    - mixed badge + flag tabs
- Add focused `vtab` coverage for valid and invalid `flagColor`
handling.

- **Example**
  ```tsx
  const rawFlagColor = tab.flagColor;
  let flagColor: string | null = null;
  if (rawFlagColor) {
      try {
          validateCssColor(rawFlagColor);
          flagColor = rawFlagColor;
      } catch {
          flagColor = null;
      }
  }

  <TabBadges badges={badges} flagColor={flagColor} />
  ```

- **Screenshot**
- Updated vertical tab preview:
https://github.com/user-attachments/assets/7d79930f-00cc-49a7-a0ec-d5554fb9e166

<!-- START COPILOT CODING AGENT TIPS -->
---

🔒 GitHub Advanced Security automatically protects Copilot coding agent
pull requests. You can protect all pull requests by enabling Advanced
Security for your repositories. [Learn more about Advanced
Security.](https://gh.io/cca-advanced-security)

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: sawka <2722291+sawka@users.noreply.github.com>

This adds a standalone preview for `sysinfo` using the newer WaveEnv
mock pattern, but renders the full block instead of the bare view. The
preview seeds a mock block in WOS (`meta.view = "sysinfo"`), provides
history via mock RPC, and drives live updates through frontend-only WPS
event dispatch.

- **What changed**
- Added `frontend/preview/previews/sysinfo.preview.tsx` to render a full
`Block` with sysinfo block chrome, tab/workspace context, and mock WOS
objects.
- Added `frontend/preview/previews/sysinfo.preview-util.ts` to generate
deterministic sysinfo history + live events for preview use.
- Added `frontend/preview/previews/sysinfo.preview.test.ts` to lock down
the mock event/history shape used by the preview.

- **Preview wiring**
- Seeds mock `workspace`, `tab`, and `block` objects so the preview
exercises the real block path rather than a component-only render.
  - Configures the mock block metadata with:
    - `view: "sysinfo"`
    - `connection: "local"`
    - `sysinfo:type: "CPU + Mem"`
    - `graph:numpoints`
- Overrides `EventReadHistoryCommand` in the preview env so
`SysinfoViewModel` can load initial history normally.

- **Live FE-only event flow**
- Uses `handleWaveEvent()` directly in the preview to simulate incoming
`sysinfo` events without touching backend transport.
- Keeps the preview aligned with the real WPS subscription path already
used by `sysinfo.tsx`.

```tsx
const env = applyMockEnvOverrides(baseEnv, {
    mockWaveObjs: {
        [`block:${PreviewBlockId}`]: {
            otype: "block",
            oid: PreviewBlockId,
            version: 1,
            meta: {
                view: "sysinfo",
                connection: "local",
                "sysinfo:type": "CPU + Mem",
                "graph:numpoints": 90,
            },
        } as Block,
    },
    rpc: {
        EventReadHistoryCommand: async (_client, data) => {
            if (data.event !== "sysinfo" || data.scope !== "local") {
                return [];
            }
            return historyRef.current.slice(-(data.maxitems ?? historyRef.current.length));
        },
    },
});
```

- **Result**
- The preview now exercises the real sysinfo block path: block
frame/header, model initialization, history load, and ongoing chart
updates.

- **Screenshot**
-
<screenshot>https://github.com/user-attachments/assets/dc2ed145-9ec8-4fde-adb0-79adc62c3071</screenshot>

<!-- START COPILOT CODING AGENT TIPS -->
---

🔒 GitHub Advanced Security automatically protects Copilot coding agent
pull requests. You can protect all pull requests by enabling Advanced
Security for your repositories. [Learn more about Advanced
Security.](https://gh.io/cca-advanced-security)

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: sawka <2722291+sawka@users.noreply.github.com>

…context-menu) (#3038)

Lots of small updates:
* Fix modtime format to show time not just "today". Make fixed font.
* Zebra stripe rows
* Fix .yml files to be detected as yaml
* Add a new config option for changing the default sort (Name vs Mod
Time)
* Add ability to change the defaults using the context menu
* Make Size column fixed font
* Add vertical bars between header columns (more visual resize handles)

…nd/preview` (#3035)

`frontend/preview` was still routing context menus through the
Electron-backed production path, so preview menus did not behave
correctly. This change adds a preview-native menu renderer, then
tightens its sizing and fixes submenu clipping so nested menus are fully
visible and usable.

- **Preview-native context menu host**
  - Adds `frontend/preview/preview-contextmenu.tsx`
- Renders context menus directly in the preview app via
`@floating-ui/react`
- Supports existing `ContextMenuItem` features already used by previews:
    - nested submenus
    - checkbox/radio states
    - separators / headers
    - click handlers
    - outside-click / escape dismissal

- **Mock env integration**
- Wires the mock `WaveEnv.showContextMenu` path to the preview renderer
- Keeps existing preview callers unchanged (`env.showContextMenu(menu,
e)`)

- **Preview root mounting**
- Mounts a single shared context menu host in
`frontend/preview/preview.tsx`
  - Makes tabbar/widgets previews work without any Electron dependency

- **Menu sizing + submenu visibility**
  - Reduces menu width, font size, and row padding for a denser menu
- Switches the menu panel to `overflow-visible` so submenu panels are
not clipped by the parent container

```tsx
// frontend/preview/mock/mockwaveenv.ts
showContextMenu: overrides.showContextMenu ?? showPreviewContextMenu,
```

<screenshot>

![Preview context menu with visible
submenu](https://github.com/user-attachments/assets/18501804-c01b-4c33-a1ff-800854f25489)

</screenshot>

<!-- START COPILOT CODING AGENT TIPS -->
---

✨ Let Copilot coding agent [set things up for
you](https://github.com/wavetermdev/waveterm/issues/new?title=✨+Set+up+Copilot+instructions&body=Configure%20instructions%20for%20this%20repository%20as%20documented%20in%20%5BBest%20practices%20for%20Copilot%20coding%20agent%20in%20your%20repository%5D%28https://gh.io/copilot-coding-agent-tips%29%2E%0A%0A%3COnboard%20this%20repo%3E&assignees=copilot)
— coding agent works faster and does higher quality work when set up for
your repo.

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: sawka <2722291+sawka@users.noreply.github.com>