Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Add Terminal in-app and themed; a tabbed pane with Session#890

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Open
brucestarlove wants to merge6 commits intohumanlayer:main
base:main
Choose a base branch
Loading
frombrucestarlove:feat/terminal

Conversation

@brucestarlove
Copy link

@brucestarlovebrucestarlove commentedDec 4, 2025
edited
Loading

Summary

Adds a built-in, session-scoped terminal pane that uses xterm.js to connect to the active workspace via WebSocket, keeping shell context aligned with the agent session. Includes reconnect/status feedback so developers can run quick commands without leaving the IDE. Same theme as user's preferred app theme. Shortcut cmd/ctrl+\ (backslash).

What problem(s) was I solving?

Alt-tabbing into a terminal app for simple commands, like git.

What user-facing changes did I ship?

  • Tabs above main session window to switch between Session pane and Terminal.
  • Terminal theme matches app theme.
  • Shortcut cmd/ctrl + \ (backslash).
Screenshot 2025-12-04 at 1 47 04 AM

How I implemented it

  • CodeLayer Opus 4.5 research -> create plan -> implement.

How to verify it

Do the thing

  • I have ensuredmake check test passes
    ^ just a bunch ofbuildtag: +build line is no longer needed (govet) // +build integration from main repo

Description for the changelog

Adds a built-in, session-scoped terminal pane that uses xterm.js to connect to the active workspace via WebSocket, keeping shell context aligned with the agent session. Includes reconnect/status feedback so developers can run quick commands without leaving the IDE. Same theme as user's preferred app theme. Shortcut cmd/ctrl+\ (backslash).

A picture of a cute animal (not mandatory but encouraged)

image

Important

Adds a terminal pane using xterm.js with WebSocket integration for real-time terminal interaction in the session UI.

  • Behavior:
    • Adds a terminal pane usingxterm.js inTerminalPane.tsx, connecting via WebSocket to the active workspace.
    • Terminal supports resize, reconnect, and status feedback.
    • Integrated with session management inActiveSession.tsx with tabs for switching between conversation and terminal.
  • UI:
    • Adds hotkeycmd/ctrl+\ to toggle terminal inHotkeyPanel.tsx.
    • UpdatesActiveSession.tsx to include terminal tab and lazy-loadTerminalPane.
  • Dependencies:
    • Addsxterm,@xterm/addon-fit, and@xterm/addon-web-links topackage.json.
  • Backend:
    • Implements WebSocket handler interminal.go for terminal sessions.
    • Registers terminal WebSocket endpoint inhttp_server.go.

This description was created byEllipsis for253ef6b. You cancustomize this summary. It will automatically update as commits are pushed.

ellipsis-dev[bot] reacted with rocket emoji
Copy link
Contributor

@ellipsis-devellipsis-devbot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Caution

Changes requested ❌

Reviewed everything up to253ef6b in 2 minutes and 26 seconds. Click for details.
  • Reviewed1199 lines of code in9 files
  • Skipped0 files when reviewing.
  • Skipped posting2 draft comments. View those below.
  • Modify yoursettings andrules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.
1.humanlayer-wui/src/components/TerminalPane.tsx:165
  • Draft comment:
    The WebSocket onmessage handler writes a Uint8Array directly to the terminal using terminal.write. Since xterm.js expects a string in its write() method, consider decoding the binary data (e.g. via TextDecoder) before writing it.
  • Reason this comment was not posted:
    Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 10% vs. threshold = 50% The comment suggests that xterm.js write() only accepts strings, but this is likely incorrect. Modern versions of xterm.js (especially v4+) support both string and Uint8Array/Uint8ClampedArray for the write() method. The code is handling binary data from a PTY (pseudo-terminal), which is typically binary data that should be written directly without decoding. The author has set ws.binaryType = 'arraybuffer' on line 154 and 271, indicating intentional binary handling. If the code were incorrect, it would fail at runtime, which would be caught during testing. The comment appears to be based on outdated or incorrect understanding of the xterm.js API. I might be wrong about xterm.js supporting Uint8Array - perhaps older versions only supported strings. However, the code is new (entire file is new), so it's likely using a modern version. Also, if this were a real bug, it would be immediately obvious when testing the terminal. Even if older versions of xterm.js only supported strings, this is a new file being added, so the author would be using a current version. More importantly, if terminal.write() didn't accept Uint8Array, this would cause an immediate runtime error that would be caught during basic testing. The fact that the author explicitly handles binary data suggests this is intentional and working. This comment should be deleted. The xterm.js write() method does accept Uint8Array in modern versions, and the code's intentional binary handling (setting binaryType to 'arraybuffer') indicates this is the correct approach. If this were wrong, it would fail immediately during testing.
2.humanlayer-wui/src/components/internal/SessionDetail/components/ActiveSession.tsx:777
  • Draft comment:
    The terminal tab is lazily loaded and toggled via a hotkey and Tabs trigger which is a good optimization. Just ensure state consistency when switching between tabs, especially that terminalOpened is properly managed to avoid reinitializing the terminal unnecessarily.
  • Reason this comment was not posted:
    Confidence changes required:20% <= threshold50% None

Workflow ID:wflow_9Pa1IFqgCp6T5Im2

You can customizeEllipsis by changing yourverbosity settings, reacting with 👍 or 👎,replying to comments, or addingcode review rules.

@brucestarlove
Copy link
Author

Terminal Integration Plan

Summary

Implement an interactive terminal within the session detail view using Go PTY on the backend and xterm.js on the frontend. The terminal will be scoped to the session's working directory.

Backend Implementation (Go)

1. WebSocket Terminal Handler

Create a new handler inhld/api/handlers/terminal.go:

  • WebSocket upgrade: Use Gin'swebsocket capability (viagithub.com/gorilla/websocket) to upgrade HTTP connections
  • PTY management: Usegithub.com/creack/pty to spawn$SHELL with the session'sWorkingDir
  • Message protocol:
    • Binary messages: stdin/stdout data
    • JSON messages:{type: "resize", cols: number, rows: number} for terminal resize
  • Lifecycle: One WebSocket = one PTY; clean up on disconnect

2. Route Registration

Wire the handler inhld/daemon/http_server.go at line ~145:

// Register terminal WebSocket endpointterminalHandler:=handlers.NewTerminalHandler(sessionManager,conversationStore)v1.GET("/terminal",terminalHandler.HandleWebSocket)

3. Security Considerations

  • ValidatesessionId parameter and verify user owns the session
  • Validate workspace directory exists and is within allowed paths
  • Pass safe environment variables only (filter sensitive vars)
  • Add idle timeout (configurable, default 30 minutes)

Frontend Implementation (React/TypeScript)

1. Install Dependencies

Add tohumanlayer-wui/package.json:

  • xterm
  • @xterm/addon-fit
  • @xterm/addon-web-links

2. TerminalPane Component

Createhumanlayer-wui/src/components/TerminalPane.tsx:

  • Initialize xterm.js with fit and web-links addons
  • Connect via WebSocket tows://{daemonUrl}/api/v1/terminal?sessionId={id}
  • Forwardterm.onData to WebSocket as binary
  • Render WebSocket binary messages to terminal
  • Send resize events on mount, window resize, and panel resize
  • Clean up on unmount

3. UI Integration

Modifyhumanlayer-wui/src/components/internal/SessionDetail/components/ActiveSession.tsx:

  • Add ShadCN Tabs component wrapping the conversation Card
  • Tab 1: "Conversation" (existing ConversationStream)
  • Tab 2: "Terminal" (new TerminalPane, lazy-loaded)
  • Add hotkey `Cmd+`` to toggle between tabs

4. Styling

Use existing theme CSS variables for terminal colors:

  • --background for terminal background
  • --foreground for terminal text
  • --terminal-accent for cursor/selection

Key Files to Create/Modify

| File | Change |

|------|--------|

|hld/api/handlers/terminal.go | New: WebSocket handler with PTY |

|hld/daemon/http_server.go | Add terminal handler registration |

|hld/go.mod | Addgithub.com/creack/pty dependency |

|humanlayer-wui/package.json | Add xterm dependencies |

|humanlayer-wui/src/components/TerminalPane.tsx | New: xterm.js component |

|humanlayer-wui/src/components/internal/SessionDetail/components/ActiveSession.tsx | Add tabs UI |

Testing Steps

  1. Open a running session in the UI
  2. Switch to Terminal tab
  3. Verifypwd matches session's working directory
  4. Test commands:ls,echo $SHELL, resize window
  5. Disconnect and reconnect to verify cleanup
caseymanos reacted with heart emoji

@brucestarlovebrucestarlove changed the titleFeat/terminalAdd Terminal in-app and themed; a tabbed pane with SessionDec 4, 2025
Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment

Reviewers

@ellipsis-devellipsis-dev[bot]ellipsis-dev[bot] left review comments

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@brucestarlove

[8]ページ先頭

©2009-2025 Movatter.jp