Implement auto-switch to session view after creation and clean startup

- Add automatic session view switching after creating new sessions
- Poll for session to appear in list and switch immediately when found
- Handle tty-fwd ID mismatch by falling back to newest session
- Add comprehensive debugging for session creation flow
- Clean control directory contents on server startup for fresh state
- Improve session creation UX with seamless transition to interactive view

🤖 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 07:19:24 +02:00
parent 060f25dbe7
commit a77b1dbe26
2 changed files with 75 additions and 6 deletions

View file

@ -87,11 +87,63 @@ export class VibeTunnelApp extends LitElement {
}, 3000);
}
private handleSessionCreated(e: CustomEvent) {
console.log('Session created:', e.detail);
this.showError('Session created successfully!');
private async handleSessionCreated(e: CustomEvent) {
console.log('Session created event detail:', e.detail);
const sessionId = e.detail.sessionId;
console.log('Extracted sessionId:', sessionId);
if (!sessionId) {
this.showError('Session created but ID not found in response');
return;
}
this.showCreateModal = false;
this.loadSessions(); // Refresh the list
// Wait for session to appear in the list and then switch to it
await this.waitForSessionAndSwitch(sessionId);
}
private async waitForSessionAndSwitch(sessionId: string) {
const maxAttempts = 10;
const delay = 500; // 500ms between attempts
console.log(`Waiting for session ${sessionId} to appear...`);
for (let attempt = 0; attempt < maxAttempts; attempt++) {
console.log(`Attempt ${attempt + 1}/${maxAttempts} to find session ${sessionId}`);
await this.loadSessions();
console.log('Current sessions:', this.sessions.map(s => ({ id: s.id, command: s.command })));
// Try to find by exact ID match first
let session = this.sessions.find(s => s.id === sessionId);
// If not found by ID, find the most recently created session
// This works around tty-fwd potentially using different IDs internally
if (!session && this.sessions.length > 0) {
console.log('Session not found by ID, trying to find newest session...');
const sortedSessions = [...this.sessions].sort((a, b) =>
new Date(b.startedAt).getTime() - new Date(a.startedAt).getTime()
);
session = sortedSessions[0];
console.log('Using newest session:', session.id);
}
if (session) {
// Session found, switch to session view
console.log('Session found, switching to session view');
this.selectedSession = session;
this.currentView = 'session';
this.showError('Session created successfully!');
return;
}
// Wait before next attempt
await new Promise(resolve => setTimeout(resolve, delay));
}
// If we get here, session creation might have failed
console.log('Session not found after all attempts');
this.showError('Session created but could not be found. Please refresh.');
}
private handleSessionSelect(e: CustomEvent) {

View file

@ -34,8 +34,25 @@ if (!TTY_FWD_PATH) {
const TTY_FWD_CONTROL_DIR = process.env.TTY_FWD_CONTROL_DIR || path.join(os.homedir(), '.vibetunnel');
// Ensure control directory exists
if (!fs.existsSync(TTY_FWD_CONTROL_DIR)) {
// Ensure control directory exists and is clean
if (fs.existsSync(TTY_FWD_CONTROL_DIR)) {
// Clean existing directory contents
try {
const files = fs.readdirSync(TTY_FWD_CONTROL_DIR);
for (const file of files) {
const filePath = path.join(TTY_FWD_CONTROL_DIR, file);
const stat = fs.statSync(filePath);
if (stat.isDirectory()) {
fs.rmSync(filePath, { recursive: true, force: true });
} else {
fs.unlinkSync(filePath);
}
}
console.log(`Cleaned control directory: ${TTY_FWD_CONTROL_DIR}`);
} catch (error) {
console.error('Error cleaning control directory:', error);
}
} else {
fs.mkdirSync(TTY_FWD_CONTROL_DIR, { recursive: true });
console.log(`Created control directory: ${TTY_FWD_CONTROL_DIR}`);
}