sjs/vibetunnel
1
0
Fork 0
mirror of https://github.com/samsonjs/vibetunnel.git synced 2026-04-27 15:17:38 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix Create Session button visibility by removing duplicate form

Browse source 
Removed the duplicate session-create-form component from the main app since
the session list now manages its own modal. Added session-created event
handler to the session-list component.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Mario Zechner 2025-06-16 04:21:16 +02:00
parent 77706ab1f5
commit a868752e40
18 changed files with 175 additions and 119 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
web/public/app-new.js
View file

@ -117,15 +117,12 @@ let VibeTunnelAppNew = class VibeTunnelAppNew extends LitElement {
return html `
<div class="max-w-4xl mx-auto">
<app-header></app-header>
<session-create-form
@session-created=${this.handleSessionCreated}
@error=${this.handleError}
></session-create-form>
<session-list
.sessions=${this.sessions}
.loading=${this.loading}
@session-select=${this.handleSessionSelect}
@session-killed=${this.handleSessionKilled}
@session-created=${this.handleSessionCreated}
@refresh=${this.handleRefresh}
@error=${this.handleError}
></session-list>

2
web/public/app-new.js.map
View file

File diff suppressed because one or more lines are too long

48
web/public/components/session-create-form.js
View file

@ -13,6 +13,7 @@ let SessionCreateForm = class SessionCreateForm extends LitElement {
this.workingDir = '~/';
this.command = '';
this.disabled = false;
this.visible = false;
this.isCreating = false;
this.showFileBrowser = false;
}
@ -114,10 +115,25 @@ let SessionCreateForm = class SessionCreateForm extends LitElement {
}
return args;
}
handleCancel() {
this.dispatchEvent(new CustomEvent('cancel'));
}
render() {
if (!this.visible) {
return html ``;
}
return html `
<div class="border border-vs-accent font-mono text-sm p-4 m-4 rounded">
<div class="text-vs-assistant text-sm mb-4">Create New Session</div>
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center" style="z-index: 9999;">
<div class="bg-vs-bg-secondary border border-vs-border font-mono text-sm w-96 max-w-full mx-4">
<div class="p-4 border-b border-vs-border flex justify-between items-center">
<div class="text-vs-assistant text-sm">Create New Session</div>
<button
class="text-vs-muted hover:text-vs-text text-lg leading-none border-none bg-transparent cursor-pointer"
@click=${this.handleCancel}
>×</button>
</div>
<div class="p-4">
<div class="mb-4">
<div class="text-vs-muted mb-2">Working Directory:</div>
@ -153,13 +169,24 @@ let SessionCreateForm = class SessionCreateForm extends LitElement {
/>
</div>
<button
class="bg-vs-user text-vs-text hover:bg-vs-accent font-mono px-4 py-2 border-none"
@click=${this.handleCreate}
?disabled=${this.disabled || this.isCreating || !this.workingDir.trim() || !this.command.trim()}
>
${this.isCreating ? 'creating...' : 'create'}
</button>
<div class="flex gap-4 justify-end">
<button
class="bg-vs-muted text-vs-bg hover:bg-vs-text font-mono px-4 py-2 border-none"
@click=${this.handleCancel}
?disabled=${this.isCreating}
>
cancel
</button>
<button
class="bg-vs-user text-vs-text hover:bg-vs-accent font-mono px-4 py-2 border-none"
@click=${this.handleCreate}
?disabled=${this.disabled || this.isCreating || !this.workingDir.trim() || !this.command.trim()}
>
${this.isCreating ? 'creating...' : 'create'}
</button>
</div>
</div>
</div>
</div>
<file-browser
@ -180,6 +207,9 @@ __decorate([
__decorate([
property({ type: Boolean })
], SessionCreateForm.prototype, "disabled", void 0);
__decorate([
property({ type: Boolean })
], SessionCreateForm.prototype, "visible", void 0);
__decorate([
state()
], SessionCreateForm.prototype, "isCreating", void 0);

2
web/public/components/session-create-form.js.map
View file

File diff suppressed because one or more lines are too long

5
web/src/client/app-new.ts
View file

@ -126,15 +126,12 @@ export class VibeTunnelAppNew extends LitElement {
return html`
<div class="max-w-4xl mx-auto">
<app-header></app-header>
<session-create-form
@session-created=${this.handleSessionCreated}
@error=${this.handleError}
></session-create-form>
<session-list
.sessions=${this.sessions}
.loading=${this.loading}
@session-select=${this.handleSessionSelect}
@session-killed=${this.handleSessionKilled}
@session-created=${this.handleSessionCreated}
@refresh=${this.handleRefresh}
@error=${this.handleError}
></session-list>

47
web/src/client/components/session-create-form.ts
View file

@ -17,6 +17,7 @@ export class SessionCreateForm extends LitElement {
@property({ type: String }) workingDir = '~/';
@property({ type: String }) command = '';
@property({ type: Boolean }) disabled = false;
@property({ type: Boolean }) visible = false;
@state() private isCreating = false;
@state() private showFileBrowser = false;
@ -124,10 +125,27 @@ export class SessionCreateForm extends LitElement {
return args;
}
private handleCancel() {
this.dispatchEvent(new CustomEvent('cancel'));
}
render() {
if (!this.visible) {
return html``;
}
return html`
<div class="border border-vs-accent font-mono text-sm p-4 m-4 rounded">
<div class="text-vs-assistant text-sm mb-4">Create New Session</div>
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center" style="z-index: 9999;">
<div class="bg-vs-bg-secondary border border-vs-border font-mono text-sm w-96 max-w-full mx-4">
<div class="p-4 border-b border-vs-border flex justify-between items-center">
<div class="text-vs-assistant text-sm">Create New Session</div>
<button
class="text-vs-muted hover:text-vs-text text-lg leading-none border-none bg-transparent cursor-pointer"
@click=${this.handleCancel}
>×</button>
</div>
<div class="p-4">
<div class="mb-4">
<div class="text-vs-muted mb-2">Working Directory:</div>
@ -163,13 +181,24 @@ export class SessionCreateForm extends LitElement {
/>
</div>
<button
class="bg-vs-user text-vs-text hover:bg-vs-accent font-mono px-4 py-2 border-none"
@click=${this.handleCreate}
?disabled=${this.disabled || this.isCreating || !this.workingDir.trim() || !this.command.trim()}
>
${this.isCreating ? 'creating...' : 'create'}
</button>
<div class="flex gap-4 justify-end">
<button
class="bg-vs-muted text-vs-bg hover:bg-vs-text font-mono px-4 py-2 border-none"
@click=${this.handleCancel}
?disabled=${this.isCreating}
>
cancel
</button>
<button
class="bg-vs-user text-vs-text hover:bg-vs-accent font-mono px-4 py-2 border-none"
@click=${this.handleCreate}
?disabled=${this.disabled || this.isCreating || !this.workingDir.trim() || !this.command.trim()}
>
${this.isCreating ? 'creating...' : 'create'}
</button>
</div>
</div>
</div>
</div>
<file-browser

35
web/src/client/components/session-list.ts
View file

@ -1,5 +1,6 @@
import { LitElement, html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import './session-create-form.js';
export interface Session {
id: string;
@ -25,7 +26,8 @@ export class SessionList extends LitElement {
@state() private killingSessionIds = new Set<string>();
@state() private loadedSnapshots = new Map<string, string>();
@state() private loadingSnapshots = new Set<string>();
@state() private hideExited = false;
@state() private hideExited = true;
@state() private showCreateModal = false;
private handleRefresh() {
this.dispatchEvent(new CustomEvent('refresh'));
@ -165,6 +167,19 @@ export class SessionList extends LitElement {
return id.length > 8 ? `${id.substring(0, 8)}...` : id;
}
private handleSessionCreated(e: CustomEvent) {
this.showCreateModal = false;
this.dispatchEvent(new CustomEvent('session-created', {
detail: e.detail
}));
}
private handleCreateError(e: CustomEvent) {
this.dispatchEvent(new CustomEvent('error', {
detail: e.detail
}));
}
private get filteredSessions() {
return this.hideExited
? this.sessions.filter(session => session.status === 'running')
@ -176,8 +191,15 @@ export class SessionList extends LitElement {
return html`
<div class="font-mono text-sm p-4">
<!-- Filter Controls -->
<div class="mb-4 flex items-center justify-end">
<!-- Controls -->
<div class="mb-4 flex items-center justify-between">
<button
class="bg-vs-user text-vs-text hover:bg-vs-accent font-mono px-4 py-2 border-none rounded"
@click=${() => this.showCreateModal = true}
>
Create Session
</button>
<label class="flex items-center gap-2 text-vs-text text-sm cursor-pointer hover:text-vs-accent transition-colors">
<div class="relative">
<input
@ -248,6 +270,13 @@ export class SessionList extends LitElement {
`)}
</div>
`}
<session-create-form
.visible=${this.showCreateModal}
@session-created=${this.handleSessionCreated}
@cancel=${() => this.showCreateModal = false}
@error=${this.handleCreateError}
></session-create-form>
</div>
`;
}

4
web/src/server-new.ts
View file

@ -386,9 +386,7 @@ app.get('/api/sessions/:sessionId/snapshot', (req, res) => {
if (startTime === null) {
startTime = parsed[0];
}
// Adjust timestamp to start from 0 and compress time
const adjustedTime = (parsed[0] - startTime) * 0.1; // 10x speed
events.push([adjustedTime, parsed[1], parsed[2]]);
events.push([0, parsed[1], parsed[2]]);
}
} catch (e) {
// Skip invalid lines

1
web/tty-fwd-control/6cfe50ad-1406-491f-8638-ee86e1e1142e/session.json
View file

@ -1 +0,0 @@
{"cmdline":["bash"],"name":"test-debug","cwd":"/Users/badlogic/workspaces/vibetunnel/web"}

6
web/tty-fwd-control/6cfe50ad-1406-491f-8638-ee86e1e1142e/stream-out
View file

@ -1,6 +0,0 @@
{"version":2,"width":80,"height":24}
[0.000356917,"o","^D\b\b"]
[0.00358725,"o","\r\nThe default interactive shell is now zsh.\r\nTo update your account to use zsh, please run `chsh -s /bin/zsh`.\r\nFor more details, please visit https://support.apple.com/kb/HT208050.\r\n"]
[0.003765042,"o","\u001b[?1034h"]
[0.003780584,"o","bash-3.2$ "]
[0.00379075,"o","exit\r\n"]

1
web/tty-fwd-control/7f454b4c-0943-4ed6-ac52-e7d36a7f2404/session.json
View file

@ -1 +0,0 @@
{"cmdline":["sleep","30"],"name":"session_test_manual","cwd":"/Users/badlogic/workspaces/vibetunnel/web"}

2
web/tty-fwd-control/7f454b4c-0943-4ed6-ac52-e7d36a7f2404/stream-out
View file

@ -1,2 +0,0 @@
{"version":2,"width":80,"height":24}
[0.000313666,"o","^D\b\b"]

1
web/tty-fwd-control/a5f7e68b-0d5c-4096-9b5b-f4cc9a93cd4a/session.json
View file

@ -1 +0,0 @@
{"cmdline":["sleep","10"],"name":"test-sleep","cwd":"/Users/badlogic/workspaces/vibetunnel/web"}

2
web/tty-fwd-control/a5f7e68b-0d5c-4096-9b5b-f4cc9a93cd4a/stream-out
View file

@ -1,2 +0,0 @@
{"version":2,"width":80,"height":24}
[0.000764375,"o","^D\b\b"]

1
web/tty-fwd-control/e78a2a02-7bea-458c-a53c-368c30a1f017/session.json
View file

@ -1 +0,0 @@
{"cmdline":["bash"],"name":"test-manual","cwd":"/Users/badlogic/workspaces/vibetunnel/web"}

6
web/tty-fwd-control/e78a2a02-7bea-458c-a53c-368c30a1f017/stream-out
View file

@ -1,6 +0,0 @@
{"version":2,"width":80,"height":24}
[0.000316791,"o","^D\b\b"]
[0.003504166,"o","\r\nThe default interactive shell is now zsh.\r\nTo update your account to use zsh, please run `chsh -s /bin/zsh`.\r\nFor more details, please visit https://support.apple.com/kb/HT208050.\r\n"]
[0.003675083,"o","\u001b[?1034h"]
[0.00369025,"o","bash-3.2$ "]
[0.003700875,"o","exit\r\n"]

1
web/tty-fwd-control/f3b46365-a14a-4f4f-b009-c48937a92cb6/session.json
View file

@ -1 +0,0 @@
{"cmdline":["echo","hello"],"name":"test-session","cwd":"/Users/badlogic/workspaces/vibetunnel/web"}

3
web/tty-fwd-control/f3b46365-a14a-4f4f-b009-c48937a92cb6/stream-out
View file

@ -1,3 +0,0 @@
{"version":2,"width":80,"height":24}
[0.000257042,"o","^D\b\b"]
[0.001932042,"o","hello\r\n"]