From 836db22a5e6675b78d69a52a05183459399d7259 Mon Sep 17 00:00:00 2001
From: Peter Steinberger <steipete@gmail.com>
Date: Sat, 28 Jun 2025 14:37:14 +0200
Subject: [PATCH] Apply path formatting to remaining frontend components

- Add formatPathForDisplay to session-create-form working directory input
- Add formatPathForDisplay to file-browser path display
- Users now see ~/Documents instead of /Users/username/Documents everywhere
- Maintains raw paths for editing and API calls, only formats for display
---
 web/src/client/components/file-browser.ts        | 4 ++--
 web/src/client/components/session-create-form.ts | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/web/src/client/components/file-browser.ts b/web/src/client/components/file-browser.ts
index 6a972329..ab3bec5d 100644
--- a/web/src/client/components/file-browser.ts
+++ b/web/src/client/components/file-browser.ts
@@ -20,7 +20,7 @@ import {
   UIIcons,
 } from '../utils/file-icons.js';
 import { createLogger } from '../utils/logger.js';
-import { copyToClipboard } from '../utils/path-utils.js';
+import { copyToClipboard, formatPathForDisplay } from '../utils/path-utils.js';
 import type { Session } from './session-list.js';
 import './monaco-editor.js';
 
@@ -562,7 +562,7 @@ export class FileBrowser extends LitElement {
                         } (click to edit)"
                         @click=${this.handlePathClick}
                       >
-                        ${this.currentFullPath || this.currentPath || 'File Browser'}
+                        ${formatPathForDisplay(this.currentFullPath || this.currentPath || 'File Browser')}
                       </div>
                     `
                 }
diff --git a/web/src/client/components/session-create-form.ts b/web/src/client/components/session-create-form.ts
index dfc2aa0e..abb67bec 100644
--- a/web/src/client/components/session-create-form.ts
+++ b/web/src/client/components/session-create-form.ts
@@ -16,6 +16,7 @@ import { customElement, property, state } from 'lit/decorators.js';
 import './file-browser.js';
 import type { AuthClient } from '../services/auth-client.js';
 import { createLogger } from '../utils/logger.js';
+import { formatPathForDisplay } from '../utils/path-utils.js';
 import type { Session } from './session-list.js';
 
 const logger = createLogger('session-create-form');
@@ -389,7 +390,7 @@ export class SessionCreateForm extends LitElement {
                 <input
                   type="text"
                   class="input-field"
-                  .value=${this.workingDir}
+                  .value=${formatPathForDisplay(this.workingDir)}
                   @input=${this.handleWorkingDirChange}
                   placeholder="~/"
                   ?disabled=${this.disabled || this.isCreating}