{#if !isRunning}
File browser unavailable
Start the capsule to browse its filesystem
{:else}
$
(pathInputFocused = true)} onblur={() => (pathInputFocused = false)} onkeydown={handleKeydown} placeholder="Enter path..." spellcheck="false" autocomplete="off" class="flex-1 bg-transparent font-mono text-meta text-[var(--color-text-primary)] outline-none placeholder:text-[var(--color-text-muted)]" />
Go
navigateTo(currentPath + '/..')} disabled={!canGoUp} title="Go to parent directory" class="shrink-0 flex items-center justify-center rounded-[3px] w-6 h-6 transition-colors {canGoUp ? 'text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-4)] hover:text-[var(--color-text-primary)]' : 'text-[var(--color-text-muted)] opacity-30 cursor-not-allowed'}" >
{#each breadcrumbs() as crumb, i} {#if i > 0}
{/if}
navigateTo(crumb.path)} class="shrink-0 rounded-[3px] px-1.5 py-0.5 font-mono text-label transition-colors hover:bg-[var(--color-bg-4)] hover:text-[var(--color-text-primary)] {i === breadcrumbs().length - 1 ? 'text-[var(--color-text-primary)]' : 'text-[var(--color-text-tertiary)]'}" > {#if i === 0}
{:else} {crumb.name} {/if}
{/each}
{#if dirLoading}
Loading...
{:else if dirError}
{dirError}
{:else if entries.length === 0}
Nothing here yet
{:else} {#each sortedEntries as entry, idx (entry.path)}
selectFile(entry)} class="file-row row-enter flex w-full items-center gap-3 px-4 py-[7px] text-left {selectedFile?.path === entry.path ? 'active' : ''}" style="animation-delay: {Math.min(idx * 12, 200)}ms" > {#if fileIcon(entry) === 'dir'}
{:else if fileIcon(entry) === 'link'}
{:else}
{/if}
{entry.name}
{#if entry.type === 'symlink' && entry.symlink_target}
→ {entry.symlink_target}
{/if}
{#if entry.type === 'file'}
{formatFileSize(entry.size)}
{/if}
{entry.permissions}
{/each} {/if}
{#if !dirLoading && !dirError && entries.length > 0}
{#if dirCount > 0}
{dirCount} dir{dirCount !== 1 ? 's' : ''}
{/if} {#if fileCount > 0}
{fileCount} file{fileCount !== 1 ? 's' : ''}
{/if}
{/if}
{#if !selectedFile}
No file selected
Choose a file from the tree, or enter a path directly
{:else}
{#if isBinaryFile(selectedFile.name) || isFileTooLarge(selectedFile.size)}
{:else}
{/if}
{selectedFile.path}
{#if fileExt(selectedFile.name)}
{fileExt(selectedFile.name)}
{/if}
{formatFileSize(selectedFile.size)}
{#if downloading}
{:else}
{/if} Download
{#if fileLoading}
Reading file...
{:else if fileError}
{fileError}
{:else if isBinaryFile(selectedFile.name) || isFileTooLarge(selectedFile.size) || (selectedFile && fileContent === null && !fileLoading)}
{#if isFileTooLarge(selectedFile.size)}
{:else}
{/if}
{#if isFileTooLarge(selectedFile.size)}
Too large to preview
{formatFileSize(selectedFile.size)} — preview limit is 10 MB
{:else}
Binary file
Cannot display as text — download to view
{/if}
Download file
{:else if fileContent !== null} {@const allLines = fileContent.split('\n')} {@const lines = allLines.length > MAX_PREVIEW_LINES ? allLines.slice(0, MAX_PREVIEW_LINES) : allLines} {@const truncated = allLines.length > MAX_PREVIEW_LINES}
{#each lines as line, i}
{i + 1}
{line || ' '}
{/each}
{#if truncated}
Showing {MAX_PREVIEW_LINES.toLocaleString()} of {allLines.length.toLocaleString()} lines
Download full file
{/if} {/if}
{/if}
{/if}