Skip to content

补齐 Tau Web 的常用 TUI 能力 #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
aa2246740 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

补齐 Tau Web 的常用 TUI 能力 #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 36 additions & 3 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,12 +116,13 @@
<button type="button" class="input-icon-btn" id="command-btn" title="Commands" aria-label="Open commands" tabindex="-1">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22v-5"/><path d="M9 8V2"/><path d="M15 8V2"/><path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z"/></svg>
</button>
<button type="button" class="input-icon-btn" id="attach-btn" title="Attach image — images are uploaded as binary data. Only image files are supported. To reference local files, use the file browser sidebar." aria-label="Attach image" tabindex="-1">
<button type="button" class="input-icon-btn" id="attach-btn" title="Attach files" aria-label="Attach files" tabindex="-1">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg>
</button>

<input type="file" id="image-input" accept="image/*" multiple style="display:none" />
<input type="file" id="image-input" multiple style="display:none" />
</div>
<div class="slash-command-suggestions hidden" id="slash-command-suggestions"></div>
<div class="input-bubble">
<textarea
id="message-input"
Expand Down Expand Up @@ -181,6 +182,24 @@ <h3>Settings</h3>
<span class="settings-label">Auto-compaction</span>
<button class="settings-toggle" id="toggle-auto-compact"></button>
</div>
<div class="settings-row" id="setting-auto-retry">
<span class="settings-label">Auto retry</span>
<button class="settings-toggle" id="toggle-auto-retry"></button>
</div>
<div class="settings-row" id="setting-steering-mode">
<span class="settings-label">Steering mode</span>
<select class="settings-select" id="select-steering-mode">
<option value="all">All</option>
<option value="one-at-a-time">One at a time</option>
</select>
</div>
<div class="settings-row" id="setting-follow-up-mode">
<span class="settings-label">Follow-up mode</span>
<select class="settings-select" id="select-follow-up-mode">
<option value="all">All</option>
<option value="one-at-a-time">One at a time</option>
</select>
</div>
<div class="settings-row" id="setting-thinking">
<span class="settings-label">Thinking level</span>
<button class="settings-value-btn" id="btn-thinking-level"></button>
Expand Down Expand Up @@ -237,7 +256,21 @@ <h3>New Tau Tab</h3>
</div>
<form class="new-live-session-body" id="new-live-session-form">
<label class="new-live-session-label" for="new-live-session-cwd">Project directory</label>
<input class="new-live-session-input" id="new-live-session-cwd" type="text" placeholder="/path/to/project" autocomplete="off" required>
<div class="new-live-session-input-row">
<input class="new-live-session-input" id="new-live-session-cwd" type="text" placeholder="/path/to/project" autocomplete="off" required>
<button type="button" class="secondary-btn new-live-session-browse-btn" id="new-live-session-browse">Browse</button>
</div>
<div class="directory-picker hidden" id="new-live-session-directory-picker">
<div class="directory-picker-toolbar">
<button type="button" class="icon-btn" id="directory-picker-up" title="Parent directory" aria-label="Parent directory">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
</button>
<div class="directory-picker-path" id="directory-picker-path"></div>
<button type="button" class="secondary-btn directory-picker-use" id="directory-picker-use">Use</button>
</div>
<div class="directory-picker-roots" id="directory-picker-roots"></div>
<div class="directory-picker-list" id="directory-picker-list"></div>
</div>
<div class="project-chips" id="new-live-session-projects"></div>
<label class="new-live-session-label" for="new-live-session-model">Model</label>
<input class="new-live-session-input" id="new-live-session-model" type="text" placeholder="openai/gpt-5.5:high" autocomplete="off">
Expand Down
182 changes: 181 additions & 1 deletion public/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1278,6 +1278,7 @@ body {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 6px 0;
}

Expand All @@ -1286,6 +1287,17 @@ body {
color: var(--text-secondary);
}

.settings-select {
min-width: 132px;
height: 30px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg-glass);
color: var(--text-primary);
padding: 0 8px;
font: inherit;
}

.settings-toggle {
width: 40px;
height: 22px;
Expand Down Expand Up @@ -2213,7 +2225,7 @@ body.hide-thinking .thinking-block { display: none !important; }
left: 0;
right: 0;
z-index: 10;
overflow-x: hidden;
overflow: visible;
}

/* Image previews */
Expand All @@ -2227,6 +2239,59 @@ body.hide-thinking .thinking-block { display: none !important; }

.image-previews.hidden { display: none; }

.slash-command-suggestions {
position: absolute;
left: 58px;
right: 62px;
bottom: calc(100% + 8px);
max-height: 260px;
overflow-y: auto;
padding: 6px;
border: 1px solid var(--border-hover);
border-radius: var(--radius-md);
background: var(--bg-solid);
background: color-mix(in srgb, var(--bg-solid) 96%, transparent);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
z-index: 50;
}

.slash-command-suggestions.hidden { display: none; }

.slash-command-item {
width: 100%;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-primary);
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
font: inherit;
text-align: left;
}

.slash-command-item:hover {
background: var(--bg-glass-hover);
}

.slash-command-name {
flex: 0 0 auto;
font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
font-size: 12px;
color: var(--accent-text);
}

.slash-command-desc {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text-dim);
font-size: 12px;
}

.image-preview {
position: relative;
width: 64px;
Expand Down Expand Up @@ -3595,6 +3660,21 @@ body.hide-thinking .thinking-block { display: none !important; }
.new-live-session-header h3 { margin: 0; font-size: 16px; }
.new-live-session-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.new-live-session-label { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.new-live-session-input-row {
display: flex;
gap: 8px;
align-items: stretch;
}

.new-live-session-input-row .new-live-session-input {
min-width: 0;
flex: 1;
}

.new-live-session-browse-btn {
flex: 0 0 auto;
}

.new-live-session-input {
width: 100%;
box-sizing: border-box;
Expand All @@ -3611,6 +3691,106 @@ body.hide-thinking .thinking-block { display: none !important; }
box-shadow: 0 0 0 2px var(--accent-glow);
}
.new-live-session-input::placeholder { color: var(--text-dim); }
.directory-picker {
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--bg-glass);
overflow: hidden;
}

.directory-picker.hidden { display: none; }

.directory-picker-toolbar {
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
border-bottom: 1px solid var(--border);
}

.directory-picker-path {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text-secondary);
font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
font-size: 11px;
}

.directory-picker-use {
padding: 6px 10px;
}

.directory-picker-roots {
display: flex;
gap: 6px;
padding: 8px;
overflow-x: auto;
border-bottom: 1px solid var(--border);
}

.directory-root {
flex: 0 0 auto;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg-glass);
color: var(--text-secondary);
cursor: pointer;
padding: 5px 8px;
font: inherit;
font-size: 12px;
}

.directory-root:hover {
background: var(--bg-glass-hover);
color: var(--text-primary);
}

.directory-picker-list {
max-height: 220px;
overflow-y: auto;
padding: 6px;
}

.directory-item {
width: 100%;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-primary);
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
font: inherit;
text-align: left;
}

.directory-item:hover {
background: var(--bg-glass-hover);
}

.directory-item-icon {
color: var(--text-dim);
font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
}

.directory-item-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.directory-picker-empty {
padding: 18px 10px;
color: var(--text-dim);
font-size: 12px;
text-align: center;
}
.new-live-session-help { margin: -2px 0 8px; opacity: .65; font-size: 12px; }
.project-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 96px; overflow: auto; }
.project-chip {
Expand Down
Loading