Skip to content

feat(gastown): configurable terminal orientation with drag-to-resize#1299

Open
jrf0110 wants to merge 2 commits intomainfrom
1237-terminal-orientation-resize
Open

feat(gastown): configurable terminal orientation with drag-to-resize#1299
jrf0110 wants to merge 2 commits intomainfrom
1237-terminal-orientation-resize

Conversation

@jrf0110
Copy link
Contributor

@jrf0110 jrf0110 commented Mar 19, 2026

Summary

  • Terminal bar can now be positioned at bottom, top, left, or right via a position picker in the tab bar. Position and expanded size are persisted to localStorage.
  • Drag-to-resize handle on the inner edge of the terminal bar with min/max constraints (horizontal: 100px–70vh, vertical: 200px–50vw).
  • Replaced static pb-[340px] with a TerminalBarPadding client component that dynamically adjusts padding based on position, size, and collapsed state. Collapsed state only reserves the tab bar strip (38px).
  • Vertical orientation adapts the tab bar to a column layout with icon-only tabs, and the AlarmStatusPane switches to single-column stacked layout.
  • DrawerStack offsets its right position when the terminal is placed on the right side of the viewport.

Closes #1237

Verification

  • pnpm typecheck — passes across all workspace packages
  • pnpm run format:check (oxfmt) — passes
  • pnpm run lint (oxlint + eslint fallback) — passes across all packages
  • Pre-push hook (format + lint + typecheck) — passes

Visual Changes

N/A — no screenshots available from CLI. The changes add a position picker (4-option grid popup) and a resize handle to the terminal bar. Vertical orientation renders tabs as icon-only with tooltips.

Reviewer Notes

  • The TerminalBarPadding client component was extracted because the layout files are Server Components and can't consume React context directly.
  • The DrawerStackRendererWithContext wrapper reads useTerminalBar() to compute the drawer right offset. This is safe because DrawerStackProvider is always rendered inside TerminalBarProvider in both layout files.
  • xterm.js auto-refit on resize is already handled by the existing ResizeObserver + fitAddon.fit() in useXtermPty.ts. The MayorTerminalPane additionally re-fits on position/size changes.
  • The issue notes that MayorTerminalPane duplicates xterm setup (identified in Fix terminal stability — WebSocket reconnection, resize debounce, control frame filtering #1195) — deduplication is out of scope for this PR.

…1237)

Terminal bar can be positioned at bottom/top/left/right with drag-to-resize.
Position and size persisted to localStorage. Collapsed state only reserves
the tab bar strip. Dynamic page padding replaces static pb-[340px].
DrawerStack offsets when terminal is on the right.
@kilo-code-bot
Copy link
Contributor

kilo-code-bot bot commented Mar 19, 2026

Code Review Summary

Status: 1 Issues Found | Recommendation: Address before merge

Overview

Severity Count
CRITICAL 0
WARNING 1
SUGGESTION 0

Fix these issues in Kilo Cloud

Issue Details (click to expand)

N/A

Other Observations (not in diff)

Issues found in unchanged code that cannot receive inline comments:

File Line Issue
src/components/gastown/TerminalBarContext.tsx 93 Stored size is restored without clampSize, so reopening the terminal on a smaller viewport can exceed the intended min/max size constraints until the user resizes or changes orientation again.
Files Reviewed (2 files)
  • src/components/gastown/TerminalBar.tsx - 0 issues
  • src/components/gastown/TerminalBarContext.tsx - 1 issue

Reviewed by gpt-5.4-20260305 · 149,963 tokens

…tton

Re-clamp persisted size when switching position so horizontal minimum
(100px) doesn't persist as a too-small vertical width (min 200px).
Show close button on agent tabs in vertical mode via absolute positioning
on hover.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Configurable terminal orientation (top/bottom/left/right) with drag-to-resize

1 participant