Clean up file naming by removing -new suffixes

- Renamed server-new.ts → server.ts
- Renamed app-new.ts → app.ts
- Renamed app-new-entry.ts → app-entry.ts
- Updated package.json scripts to remove all -new references
- Updated custom element name from vibetunnel-app-new to vibetunnel-app
- Updated index.html to reference cleaned up files
- Added CLAUDE.md with development notes

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

Co-Authored-By: Claude <noreply@anthropic.com>

web/CLAUDE.md

@@ -0,0 +1,11 @@
+# Claude Development Notes
+
+## Build Process
+- **Never run build commands** - the user has `npm run dev` running which handles automatic rebuilds
+- Changes to TypeScript files are automatically compiled and watched
+- Do not run `npm run build:client` or similar build commands
+
+## Development Workflow
+- Make changes to source files in `src/`
+- The dev server automatically rebuilds and reloads
+- Focus on editing source files, not built artifacts

web/package.json

@@ -4,20 +4,15 @@
   "description": "Web frontend for terminal multiplexer",
   "main": "dist/server.js",
   "scripts": {
-    "dev": "npm run build:css && concurrently --kill-others-on-fail \"npm run watch:css\" \"npm run watch:client\" \"npm run watch:server-new\"",
-    "dev:new": "npm run build:css && concurrently --kill-others-on-fail \"npm run watch:css\" \"npm run watch:client\" \"npm run watch:server-new\"",
-    "watch:server": "tsx watch src/server-new.ts",
-    "watch:server-new": "tsx watch src/server-new.ts",
+    "dev": "npm run build:css && concurrently --kill-others-on-fail \"npm run watch:css\" \"npm run watch:client\" \"npm run watch:server\"",
+    "watch:server": "tsx watch src/server.ts",
     "watch:client": "tsc -p tsconfig.client.json --watch --preserveWatchOutput",
     "watch:css": "tailwindcss -i ./src/input.css -o ./public/output.css --watch",
     "build": "npm run build:css && npm run build:client && npm run build:server",
-    "build:new": "npm run build:css && npm run build:client && npm run build:server-new",
     "build:server": "tsc",
-    "build:server-new": "tsc src/server-new.ts --outDir dist --target ES2020 --module commonjs --moduleResolution node --esModuleInterop --allowSyntheticDefaultImports --strict --skipLibCheck",
     "build:client": "tsc -p tsconfig.client.json",
     "build:css": "tailwindcss -i ./src/input.css -o ./public/output.css --minify",
     "start": "node dist/server.js",
-    "start:new": "node dist/server-new.js",
     "test": "jest",
     "test:watch": "jest --watch"
   },

web/public/app-entry.js

@@ -0,0 +1,3 @@
+// Entry point for the app
+import './app.js';
+//# sourceMappingURL=app-entry.js.map

web/public/app-entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-entry.js","sourceRoot":"","sources":["../src/client/app-entry.ts"],"names":[],"mappings":"AAAA,0BAA0B;AAC1B,OAAO,UAAU,CAAC","sourcesContent":["// Entry point for the app\nimport './app.js';"]}

web/public/components/session-list.js

@@ -18,6 +18,7 @@ let SessionList = class SessionList extends LitElement {
         this.hideExited = true;
         this.showCreateModal = false;
         this.cleaningExited = false;
+        this.newSessionIds = new Set();
     }
     // Disable shadow DOM to use Tailwind
     createRenderRoot() {
@@ -57,17 +58,23 @@ let SessionList = class SessionList extends LitElement {
         if (changedProperties.has('sessions')) {
             // Auto-load snapshots for existing sessions immediately, but delay for new ones
             const prevSessions = changedProperties.get('sessions') || [];
-            const newSessionIds = this.sessions
+            const newSessionIdsList = this.sessions
                 .filter(session => !prevSessions.find((prev) => prev.id === session.id))
                 .map(session => session.id);
+            // Track new sessions
+            newSessionIdsList.forEach(id => this.newSessionIds.add(id));
             // Load existing sessions immediately
-            const existingSessions = this.sessions.filter(session => !newSessionIds.includes(session.id));
+            const existingSessions = this.sessions.filter(session => !newSessionIdsList.includes(session.id));
             existingSessions.forEach(session => this.loadSnapshot(session.id));
             // Load new sessions after a delay to let them generate some output
-            if (newSessionIds.length > 0) {
+            if (newSessionIdsList.length > 0) {
                 setTimeout(() => {
-                    newSessionIds.forEach(sessionId => this.loadSnapshot(sessionId));
-                }, 3000); // Wait 3 seconds for new sessions
+                    newSessionIdsList.forEach(sessionId => {
+                        this.newSessionIds.delete(sessionId); // Remove from new sessions set
+                        this.loadSnapshot(sessionId);
+                    });
+                    this.requestUpdate(); // Update UI to show the players
+                }, 500); // Wait 500ms for new sessions
             }
         }
     }
@@ -275,7 +282,9 @@ let SessionList = class SessionList extends LitElement {
                     <div id="player-${session.id}" class="w-full h-full" style="overflow: hidden;"></div>
                   ` : html `
                     <div class="text-vs-muted text-xs">
-                      ${this.loadingSnapshots.has(session.id) ? 'Loading...' : 'Loading...'}
+                      ${this.newSessionIds.has(session.id)
+            ? 'Starting session...'
+            : (this.loadingSnapshots.has(session.id) ? 'Loading...' : 'Loading...')}
                     </div>
                   `}
                 </div>
@@ -329,6 +338,9 @@ __decorate([
 __decorate([
     state()
 ], SessionList.prototype, "cleaningExited", void 0);
+__decorate([
+    state()
+], SessionList.prototype, "newSessionIds", void 0);
 SessionList = __decorate([
     customElement('session-list')
 ], SessionList);

web/public/index.html

@@ -16,8 +16,8 @@
     </script>
 </head>
 <body class="bg-vs-bg m-0 p-0">
-    <vibetunnel-app-new></vibetunnel-app-new>
+    <vibetunnel-app></vibetunnel-app>
     <script src="https://unpkg.com/asciinema-player@3.7.0/dist/bundle/asciinema-player.min.js"></script>
-    <script type="module" src="app-new-entry.js"></script>
+    <script type="module" src="app-entry.js"></script>
 </body>
 </html>

web/src/client/app-entry.ts

@@ -0,0 +1,2 @@
+// Entry point for the app
+import './app.js';

web/src/client/app-new-entry.ts

@@ -1,2 +0,0 @@
-// Entry point for the new app
-import './app-new.js';

web/src/client/app.ts

@@ -8,8 +8,8 @@ import './components/session-list.js';
 
 import type { Session } from './components/session-list.js';
 
-@customElement('vibetunnel-app-new')
-export class VibeTunnelAppNew extends LitElement {
+@customElement('vibetunnel-app')
+export class VibeTunnelApp extends LitElement {
   // Disable shadow DOM to use Tailwind
   createRenderRoot() {
     return this;

web/src/client/components/session-list.ts

@@ -29,6 +29,7 @@ export class SessionList extends LitElement {
   @state() private hideExited = true;
   @state() private showCreateModal = false;
   @state() private cleaningExited = false;
+  @state() private newSessionIds = new Set<string>();
 
   private handleRefresh() {
     this.dispatchEvent(new CustomEvent('refresh'));
@@ -68,21 +69,28 @@ export class SessionList extends LitElement {
     if (changedProperties.has('sessions')) {
       // Auto-load snapshots for existing sessions immediately, but delay for new ones
       const prevSessions = changedProperties.get('sessions') || [];
-      const newSessionIds = this.sessions
+      const newSessionIdsList = this.sessions
         .filter(session => !prevSessions.find((prev: Session) => prev.id === session.id))
         .map(session => session.id);
       
+      // Track new sessions
+      newSessionIdsList.forEach(id => this.newSessionIds.add(id));
+      
       // Load existing sessions immediately
       const existingSessions = this.sessions.filter(session => 
-        !newSessionIds.includes(session.id)
+        !newSessionIdsList.includes(session.id)
       );
       existingSessions.forEach(session => this.loadSnapshot(session.id));
       
       // Load new sessions after a delay to let them generate some output
-      if (newSessionIds.length > 0) {
+      if (newSessionIdsList.length > 0) {
         setTimeout(() => {
-          newSessionIds.forEach(sessionId => this.loadSnapshot(sessionId));
-        }, 3000); // Wait 3 seconds for new sessions
+          newSessionIdsList.forEach(sessionId => {
+            this.newSessionIds.delete(sessionId); // Remove from new sessions set
+            this.loadSnapshot(sessionId);
+          });
+          this.requestUpdate(); // Update UI to show the players
+        }, 500); // Wait 500ms for new sessions
       }
     }
   }
@@ -309,7 +317,10 @@ export class SessionList extends LitElement {
                     <div id="player-${session.id}" class="w-full h-full" style="overflow: hidden;"></div>
                   ` : html`
                     <div class="text-vs-muted text-xs">
-                      ${this.loadingSnapshots.has(session.id) ? 'Loading...' : 'Loading...'}
+                      ${this.newSessionIds.has(session.id) 
+                        ? 'Starting session...' 
+                        : (this.loadingSnapshots.has(session.id) ? 'Loading...' : 'Loading...')
+                      }
                     </div>
                   `}
                 </div>