dave/storkit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

feat: ui polish (sticky header, dark mode, flat inputs)

Browse Source
This commit is contained in:
Dave
2025-12-25 12:58:37 +00:00
parent dfefa3a8bd
commit c3ff2bdebd
6 changed files with 407 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
.living_spec/specs/functional/UI_LAYOUT.md Normal file
View File

@@ -0,0 +1,33 @@
# Functional Spec: UI Layout
## 1. Global Structure
The application uses a **fixed-layout** strategy to maximize chat visibility.
```text
+-------------------------------------------------------+
| HEADER (Fixed Height, e.g., 50px) |
| [Project: ~/foo/bar] [Model: llama3] [x] Tools |
+-------------------------------------------------------+
| |
| CHAT AREA (Flex Grow, Scrollable) |
| |
| (User Message) |
| (Agent Message) |
| |
+-------------------------------------------------------+
| INPUT AREA (Fixed Height, Bottom) |
| [ Input Field ........................... ] [Send] |
+-------------------------------------------------------+
```
## 2. Components
* **Header:** Contains global context (Project) and session config (Model/Tools).
* *Constraint:* Must not scroll away.
* **ChatList:** The scrollable container for messages.
* **InputBar:** Pinned to the bottom.
## 3. Styling
* Use Flexbox (`flex-direction: column`) on the main container.
* Header: `flex-shrink: 0`.
* ChatList: `flex-grow: 1`, `overflow-y: auto`.
* InputBar: `flex-shrink: 0`.

19
.living_spec/stories/06_fix_ui_responsiveness.md
View File

@@ -1,19 +0,0 @@
# Story: Fix UI Responsiveness (Tech Debt)
## User Story
**As a** User
**I want** the UI to remain interactive and responsive while the Agent is thinking or executing tools
**So that** I don't feel like the application has crashed.
## Context
Currently, the UI locks up or becomes unresponsive during long LLM generations or tool executions. Even though the backend commands are async, the frontend experience degrades.
## Acceptance Criteria
* [ ] Investigate the root cause of the freezing (JS Main Thread blocking vs. Tauri IPC blocking).
* [ ] Implement a "Streaming" architecture for Chat if necessary (getting partial tokens instead of waiting for full response).
* *Note: This might overlap with future streaming stories, but basic responsiveness is the priority here.*
* [ ] Add visual indicators (Spinner/Progress Bar) that animate smoothly during the wait.
* [ ] Ensure the "Stop Generation" button (if added) can actually interrupt the backend task.
## Out of Scope
* Full streaming text (unless that is the only way to fix the freezing).

17
.living_spec/stories/07_ui_polish_sticky_header.md Normal file
View File

@@ -0,0 +1,17 @@
# Story: UI Polish - Sticky Header & Compact Layout
## User Story
**As a** User
**I want** key controls (Model Selection, Tool Toggle, Project Path) to be visible at all times
**So that** I don't have to scroll up to check my configuration or change settings.
## Acceptance Criteria
* [ ] Frontend: Create a fixed `<Header />` component at the top of the viewport.
* [ ] Frontend: Move "Active Project" display into this header (make it compact/truncated if long).
* [ ] Frontend: Move "Ollama Model" and "Enable Tools" controls into this header.
* [ ] Frontend: Ensure the Chat message list scrolls *under* the header (taking up remaining height).
* [ ] Frontend: Remove the redundant "Active Project" bar from the main workspace area.
## Out of Scope
* Full visual redesign (just layout fixing).
* Settings modal (keep controls inline for now).

124
src/App.css
View File

@@ -1,116 +1,116 @@
.logo.vite:hover { .logo.vite:hover {
filter: drop-shadow(0 0 2em #747bff); filter: drop-shadow(0 0 2em #747bff);
} }
.logo.react:hover { .logo.react:hover {
filter: drop-shadow(0 0 2em #61dafb); filter: drop-shadow(0 0 2em #61dafb);
} }
:root { :root {
font-family: Inter, Avenir, Helvetica, Arial, sans-serif; font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
font-weight: 400; font-weight: 400;
color: #0f0f0f; color: #0f0f0f;
background-color: #f6f6f6; background-color: #f6f6f6;
font-synthesis: none; font-synthesis: none;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
} }
.container { .container {
margin: 0; margin: 0;
padding-top: 10vh; padding-top: 10vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
} }
.logo { .logo {
height: 6em; height: 6em;
padding: 1.5em; padding: 1.5em;
will-change: filter; will-change: filter;
transition: 0.75s; transition: 0.75s;
} }
.logo.tauri:hover { .logo.tauri:hover {
filter: drop-shadow(0 0 2em #24c8db); filter: drop-shadow(0 0 2em #24c8db);
} }
.row { .row {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
a { a {
font-weight: 500; font-weight: 500;
color: #646cff; color: #646cff;
text-decoration: inherit; text-decoration: inherit;
} }
a:hover { a:hover {
color: #535bf2; color: #535bf2;
} }
h1 { h1 {
text-align: center; text-align: center;
} }
input, input,
button { button {
border-radius: 8px; border-radius: 8px;
border: 1px solid transparent; border: 1px solid transparent;
padding: 0.6em 1.2em; padding: 0.6em 1.2em;
font-size: 1em; font-size: 1em;
font-weight: 500; font-weight: 500;
font-family: inherit; font-family: inherit;
color: #0f0f0f; color: #0f0f0f;
background-color: #ffffff; background-color: #ffffff;
transition: border-color 0.25s; transition: border-color 0.25s;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
} }
button { button {
cursor: pointer; cursor: pointer;
} }
button:hover { button:hover {
border-color: #396cd8; border-color: #396cd8;
} }
button:active { button:active {
border-color: #396cd8; border-color: #396cd8;
background-color: #e8e8e8; background-color: #e8e8e8;
} }
input, input,
button { button {
outline: none; outline: none;
} }
#greet-input { #greet-input {
margin-right: 5px; margin-right: 5px;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
color: #f6f6f6; color: #f6f6f6;
background-color: #2f2f2f; background-color: #2f2f2f;
} }
a:hover { a:hover {
color: #24c8db; color: #24c8db;
} }
input, input,
button { button {
color: #ffffff; color: #ffffff;
background-color: #0f0f0f98; background-color: #0f0f0f98;
} }
button:active { button:active {
background-color: #0f0f0f69; background-color: #0f0f0f69;
} }
} }

40
src/App.tsx
View File

@@ -54,11 +54,16 @@ function App() {
} }
return ( return (
<main className="container"> <main
<h1>AI Code Assistant</h1> className="container"
style={{ height: "100vh", padding: 0, maxWidth: "100%" }}
>
{!projectPath ? ( {!projectPath ? (
<div className="selection-screen"> <div
className="selection-screen"
style={{ padding: "2rem", maxWidth: "800px", margin: "0 auto" }}
>
<h1>AI Code Assistant</h1>
<p> <p>
Please select a project folder to start the Story-Driven Spec Please select a project folder to start the Story-Driven Spec
Workflow. Workflow.
@@ -66,31 +71,8 @@ function App() {
<button onClick={selectProject}>Open Project Directory</button> <button onClick={selectProject}>Open Project Directory</button>
</div> </div>
) : ( ) : (
<div className="workspace"> <div className="workspace" style={{ height: "100%" }}>
<div <Chat projectPath={projectPath} onCloseProject={closeProject} />
className="toolbar"
style={{
padding: "10px",
background: "#f0f0f0",
borderRadius: "4px",
color: "#333",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}}
>
<span>
<strong>Active Project:</strong> {projectPath}
</span>
<button
onClick={closeProject}
style={{ padding: "5px 10px", fontSize: "0.9em" }}
>
Close
</button>
</div>
<hr style={{ margin: "20px 0" }} />
<Chat />
</div> </div>
)} )}

402
src/components/Chat.tsx
View File

@@ -4,7 +4,12 @@ import { listen } from "@tauri-apps/api/event";
import Markdown from "react-markdown"; import Markdown from "react-markdown";
import { Message, ProviderConfig } from "../types"; import { Message, ProviderConfig } from "../types";
export function Chat() { interface ChatProps {
projectPath: string;
onCloseProject: () => void;
}
export function Chat({ projectPath, onCloseProject }: ChatProps) {
const [messages, setMessages] = useState<Message[]>([]); const [messages, setMessages] = useState<Message[]>([]);
const [input, setInput] = useState(""); const [input, setInput] = useState("");
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
@@ -86,56 +91,136 @@ export function Chat() {
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
height: "100%", height: "100%",
maxWidth: "800px", backgroundColor: "#171717",
margin: "0 auto", color: "#ececec",
}} }}
> >
{/* Settings Bar */} {/* Sticky Header */}
<div <div
style={{ style={{
padding: "10px", padding: "12px 24px",
borderBottom: "1px solid #ddd", borderBottom: "1px solid #333",
display: "flex", display: "flex",
gap: "10px",
alignItems: "center", alignItems: "center",
justifyContent: "space-between",
background: "#171717",
flexShrink: 0,
fontSize: "0.9rem",
color: "#ececec",
}} }}
> >
<label>Ollama Model:</label> {/* Project Info */}
{availableModels.length > 0 ? ( <div
<select
value={model}
onChange={(e) => setModel(e.target.value)}
style={{ padding: "5px" }}
>
{availableModels.map((m) => (
<option key={m} value={m}>
{m}
</option>
))}
</select>
) : (
<input
value={model}
onChange={(e) => setModel(e.target.value)}
placeholder="e.g. llama3, mistral"
style={{ padding: "5px" }}
/>
)}
<label
style={{ style={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
gap: "5px", gap: "12px",
marginLeft: "10px", overflow: "hidden",
flex: 1,
marginRight: "20px",
}} }}
> >
<input <div
type="checkbox" title={projectPath}
checked={enableTools} style={{
onChange={(e) => setEnableTools(e.target.checked)} whiteSpace: "nowrap",
/> overflow: "hidden",
Enable Tools textOverflow: "ellipsis",
</label> fontWeight: "500",
color: "#aaa",
direction: "rtl",
textAlign: "left",
fontFamily: "monospace",
fontSize: "0.85em",
}}
>
{projectPath}
</div>
<button
onClick={onCloseProject}
style={{
background: "transparent",
border: "none",
cursor: "pointer",
color: "#999",
fontSize: "0.8em",
padding: "4px 8px",
borderRadius: "4px",
}}
onMouseOver={(e) => (e.currentTarget.style.background = "#333")}
onMouseOut={(e) =>
(e.currentTarget.style.background = "transparent")
}
>
✕
</button>
</div>
{/* Model Controls */}
<div style={{ display: "flex", alignItems: "center", gap: "16px" }}>
{availableModels.length > 0 ? (
<select
value={model}
onChange={(e) => setModel(e.target.value)}
style={{
padding: "6px 32px 6px 16px",
borderRadius: "99px",
border: "none",
fontSize: "0.9em",
backgroundColor: "#2f2f2f",
color: "#ececec",
cursor: "pointer",
outline: "none",
appearance: "none",
WebkitAppearance: "none",
backgroundImage: `url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ececec%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E")`,
backgroundRepeat: "no-repeat",
backgroundPosition: "right 12px center",
backgroundSize: "10px",
}}
>
{availableModels.map((m) => (
<option key={m} value={m}>
{m}
</option>
))}
</select>
) : (
<input
value={model}
onChange={(e) => setModel(e.target.value)}
placeholder="Model"
style={{
padding: "6px 12px",
borderRadius: "99px",
border: "none",
fontSize: "0.9em",
background: "#2f2f2f",
color: "#ececec",
outline: "none",
}}
/>
)}
<label
style={{
display: "flex",
alignItems: "center",
gap: "6px",
cursor: "pointer",
fontSize: "0.9em",
color: "#aaa",
}}
title="Allow the Agent to read/write files"
>
<input
type="checkbox"
checked={enableTools}
onChange={(e) => setEnableTools(e.target.checked)}
style={{ accentColor: "#000" }}
/>
<span>Tools</span>
</label>
</div>
</div> </div>
{/* Messages Area */} {/* Messages Area */}
@@ -143,109 +228,190 @@ export function Chat() {
style={{ style={{
flex: 1, flex: 1,
overflowY: "auto", overflowY: "auto",
padding: "20px", padding: "20px 0",
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
gap: "15px", gap: "24px",
}} }}
> >
{messages.map((msg, idx) => ( <div
<div style={{
key={idx} maxWidth: "768px",
className={`message ${msg.role}`} margin: "0 auto",
style={{ width: "100%",
alignSelf: msg.role === "user" ? "flex-end" : "flex-start", padding: "0 24px",
maxWidth: "80%", display: "flex",
padding: "10px 15px", flexDirection: "column",
borderRadius: "10px", gap: "24px",
background: }}
msg.role === "user" >
? "#007AFF" {messages.map((msg, idx) => (
: msg.role === "tool" <div
? "#f0f0f0" key={idx}
: "#E5E5EA", style={{
color: msg.role === "user" ? "white" : "black", display: "flex",
border: msg.role === "tool" ? "1px solid #ccc" : "none", flexDirection: "column",
fontFamily: msg.role === "tool" ? "monospace" : "inherit", alignItems: msg.role === "user" ? "flex-end" : "flex-start",
fontSize: msg.role === "tool" ? "0.9em" : "1em", }}
whiteSpace: msg.role === "tool" ? "pre-wrap" : "normal", >
}}
>
<strong>
{msg.role === "user"
? "You"
: msg.role === "tool"
? "Tool Output"
: "Agent"}
</strong>
{msg.role === "tool" ? (
<div style={{ maxHeight: "200px", overflow: "auto" }}>
{msg.content}
</div>
) : (
<Markdown>{msg.content}</Markdown>
)}
{/* Show Tool Calls if present */}
{msg.tool_calls && (
<div <div
style={{ marginTop: "10px", fontSize: "0.85em", color: "#666" }} style={{
maxWidth: "100%",
padding: msg.role === "user" ? "10px 16px" : "0",
borderRadius: msg.role === "user" ? "20px" : "0",
background:
msg.role === "user"
? "#2f2f2f"
: msg.role === "tool"
? "#222"
: "transparent",
color: "#ececec",
border: msg.role === "tool" ? "1px solid #333" : "none",
fontFamily: msg.role === "tool" ? "monospace" : "inherit",
fontSize: msg.role === "tool" ? "0.85em" : "1em",
fontWeight: "500",
whiteSpace: msg.role === "tool" ? "pre-wrap" : "normal",
lineHeight: "1.6",
}}
> >
{msg.tool_calls.map((tc, i) => ( {msg.role === "user" ? (
msg.content
) : msg.role === "tool" ? (
<div>
<strong
style={{
display: "block",
marginBottom: "4px",
color: "#aaa",
}}
>
Tool Output
</strong>
<div style={{ maxHeight: "300px", overflow: "auto" }}>
{msg.content}
</div>
</div>
) : (
<div className="markdown-body">
{/* Assuming global CSS handles standard markdown styling now */}
<Markdown>{msg.content}</Markdown>
</div>
)}
{/* Show Tool Calls if present */}
{msg.tool_calls && (
<div <div
key={i}
style={{ style={{
background: "rgba(0,0,0,0.05)", marginTop: "12px",
padding: "5px", fontSize: "0.85em",
borderRadius: "4px", color: "#aaa",
display: "flex",
flexDirection: "column",
gap: "8px",
}} }}
> >
🛠{" "} {msg.tool_calls.map((tc, i) => (
<code> <div
{tc.function.name}({tc.function.arguments}) key={i}
</code> style={{
display: "flex",
alignItems: "center",
gap: "8px",
fontFamily: "monospace",
}}
>
<span style={{ color: "#888" }}>Running:</span>
<span
style={{
background: "#333",
padding: "2px 6px",
borderRadius: "4px",
}}
>
{tc.function.name}
</span>
</div>
))}
</div> </div>
))} )}
</div> </div>
)} </div>
</div> ))}
))} {loading && (
{loading && ( <div
<div style={{ alignSelf: "flex-start", color: "#888" }}> style={{
Thinking... alignSelf: "flex-start",
</div> color: "#888",
)} fontSize: "0.9em",
<div ref={messagesEndRef} /> marginTop: "10px",
}}
>
<span className="pulse">Thinking...</span>
</div>
)}
<div ref={messagesEndRef} />
</div>
</div> </div>
{/* Input Area */} {/* Input Area */}
<div <div
style={{ style={{
padding: "20px", padding: "24px",
borderTop: "1px solid #ddd", background: "#171717",
display: "flex", display: "flex",
gap: "10px", justifyContent: "center",
}} }}
> >
<input <div
value={input}
onChange={(e) => setInput(e.target.value)}
onKeyDown={(e) => e.key === "Enter" && sendMessage()}
placeholder="Ask the agent to do something..."
style={{ style={{
flex: 1, maxWidth: "768px",
padding: "10px", width: "100%",
borderRadius: "4px", position: "relative",
border: "1px solid #ccc",
}} }}
/>
<button
onClick={sendMessage}
disabled={loading}
style={{ padding: "10px 20px" }}
> >
Send <input
</button> value={input}
onChange={(e) => setInput(e.target.value)}
onKeyDown={(e) => e.key === "Enter" && sendMessage()}
placeholder="Send a message..."
style={{
width: "100%",
padding: "14px 20px",
paddingRight: "50px", // space for button
borderRadius: "24px",
border: "1px solid #333",
outline: "none",
fontSize: "1rem",
fontWeight: "500",
background: "#2f2f2f",
color: "#ececec",
boxShadow: "0 2px 6px rgba(0,0,0,0.02)",
}}
/>
<button
onClick={sendMessage}
disabled={loading}
style={{
position: "absolute",
right: "8px",
top: "50%",
transform: "translateY(-50%)",
background: "#ececec",
color: "black",
border: "none",
borderRadius: "50%",
width: "32px",
height: "32px",
display: "flex",
alignItems: "center",
justifyContent: "center",
cursor: loading ? "not-allowed" : "pointer",
opacity: loading ? 0.5 : 1,
}}
>
↑
</button>
</div>
</div> </div>
</div> </div>
); );