Fix folder explorer error reporting and add logging

- Show actual server error message when project creation fails
- Add console logging to debug project creation

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
uroma
2026-01-21 14:40:14 +00:00
Unverified
parent 7ffb8a8492
commit b830e1187e
9 changed files with 3212 additions and 141 deletions

View File

@@ -5,173 +5,68 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Claude Code</title>
<link rel="stylesheet" href="/claude/css/style.css">
<link rel="stylesheet" href="/claude/claude-ide/sessions-landing.css">
<style>
/* Navigation Header Styles */
.nav-header {
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(13, 13, 13, 0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid #333;
padding: 16px 24px;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 1000;
}
.nav-logo {
font-size: 20px;
font-weight: 700;
background: linear-gradient(135deg, #4a9eff 0%, #a78bfa 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.nav-links {
display: flex;
align-items: center;
gap: 8px;
}
.nav-link {
padding: 8px 16px;
background: transparent;
border: 1px solid #333;
border-radius: 8px;
color: #e0e0e0;
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: all 0.2s ease;
cursor: pointer;
}
.nav-link:hover {
background: #252525;
border-color: #4a9eff;
color: #4a9eff;
}
.nav-link.active {
background: rgba(74, 158, 255, 0.15);
border-color: #4a9eff;
color: #4a9eff;
}
.nav-logout {
padding: 8px 16px;
background: transparent;
border: none;
color: #888;
font-size: 14px;
cursor: pointer;
transition: color 0.2s ease;
}
.nav-logout:hover {
color: #e0e0e0;
}
/* Adjust hero section for fixed header */
.hero-section {
padding-top: 100px;
}
@media (max-width: 768px) {
.nav-header {
padding: 12px 16px;
}
.nav-logo {
font-size: 18px;
}
.nav-link {
padding: 6px 12px;
font-size: 13px;
}
.hero-section {
padding-top: 80px;
}
}
</style>
<link rel="stylesheet" href="/claude/claude-ide/projects-landing.css">
</head>
<body class="sessions-page">
<!-- Navigation Header -->
<nav class="nav-header">
<div class="nav-logo">Claude Code</div>
<div class="nav-links">
<a href="/claude/" class="nav-link active">Sessions</a>
<a href="/claude/ide?view=projects" class="nav-link">Projects</a>
<a href="/claude/" class="nav-link active">Projects</a>
<button class="nav-logout" onclick="logout()">Logout</button>
</div>
</nav>
<!-- Hero Section -->
<section class="hero-section">
<h1 class="hero-title">Claude Code</h1>
<p class="hero-subtitle">Start coding</p>
<input
type="text"
id="project-input"
class="project-input"
placeholder="What project are you working on?"
maxlength="50"
autocomplete="off"
/>
<div id="input-status" class="input-status"></div>
<h1 class="hero-logo">Claude Code</h1>
<p class="hero-subtitle">Start coding with AI</p>
<button id="select-folder-btn" class="btn-select-folder">
<span class="icon">📁</span>
Select Folder
</button>
<p class="keyboard-hint">
Keyboard shortcut: <kbd></kbd><kbd>N</kbd>
</p>
<p class="example-hint">Browse folders or create a new project</p>
</section>
<!-- Projects Section -->
<section class="projects-section">
<div class="projects-header">
<h2 class="projects-title">Projects</h2>
<button class="btn-refresh" onclick="refreshSessions()">
<span>🔄</span> Refresh
</button>
<div class="projects-section-header">
<h2 class="projects-section-title">Recent Projects</h2>
</div>
<!-- Loading State -->
<div id="projects-loading" class="projects-loading">
<div class="loading-spinner"></div>
<p>Loading projects...</p>
</div>
<!-- Error State -->
<div id="projects-error" class="projects-error" style="display: none;">
<p>Failed to load projects. Please try again.</p>
<button class="btn-secondary" onclick="refreshProjects()" style="margin-top: 16px;">Retry</button>
</div>
<!-- Empty State -->
<div id="projects-empty" class="projects-empty" style="display: none;">
No projects yet. Type above to create your first one.
<div class="empty-icon">📁</div>
<h3 class="empty-title">No projects yet</h3>
<p class="empty-subtitle">Select a folder to start coding with AI</p>
</div>
<!-- Projects Table -->
<div class="projects-table-wrapper">
<table id="projects-table" class="projects-table">
<thead>
<tr>
<th class="col-name">Project Name</th>
<th class="col-activity">Last Activity</th>
<th class="col-status">Status</th>
<th class="col-actions">Actions</th>
</tr>
</thead>
<tbody id="projects-tbody">
<!-- Rows rendered dynamically -->
</tbody>
</table>
<!-- Projects Grid -->
<div id="projects-grid" class="projects-grid" style="display: none;">
<!-- Project cards rendered dynamically -->
</div>
</section>
<script src="/claude/claude-ide/error-monitor.js"></script>
<script src="/claude/js/app.js"></script>
<script src="/claude/claude-ide/sessions-landing.js"></script>
<script>
async function logout() {
try {
await fetch('/claude/api/logout', { method: 'POST' });
window.location.href = '/claude/';
} catch (error) {
console.error('Logout failed:', error);
}
}
</script>
<script src="/claude/claude-ide/projects-landing.js"></script>
</body>
</html>