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

.living_spec/specs/functional/UI_LAYOUT.md

@@ -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`.

.living_spec/stories/06_fix_ui_responsiveness.md

@@ -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).

.living_spec/stories/07_ui_polish_sticky_header.md

@@ -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).

src/App.tsx

@@ -54,11 +54,16 @@ function App() {
   }
 
   return (
-    <main className="container">
+    <main
-      <h1>AI Code Assistant</h1>
+      className="container"
-
+      style={{ height: "100vh", padding: 0, maxWidth: "100%" }}
+    >
       {!projectPath ? (
-        <div className="selection-screen">
+        <div
+          className="selection-screen"
+          style={{ padding: "2rem", maxWidth: "800px", margin: "0 auto" }}
+        >
+          <h1>AI Code Assistant</h1>
           <p>
             Please select a project folder to start the Story-Driven Spec
             Workflow.
@@ -66,31 +71,8 @@ function App() {
           <button onClick={selectProject}>Open Project Directory</button>
         </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>
       )}
 

src/components/Chat.tsx

@@ -4,7 +4,12 @@ import { listen } from "@tauri-apps/api/event";
 import Markdown from "react-markdown";
 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 [input, setInput] = useState("");
   const [loading, setLoading] = useState(false);
@@ -86,26 +91,93 @@ export function Chat() {
         display: "flex",
         flexDirection: "column",
         height: "100%",
-        maxWidth: "800px",
+        backgroundColor: "#171717",
-        margin: "0 auto",
+        color: "#ececec",
       }}
     >
-      {/* Settings Bar */}
+      {/* Sticky Header */}
       <div
         style={{
-          padding: "10px",
+          padding: "12px 24px",
-          borderBottom: "1px solid #ddd",
+          borderBottom: "1px solid #333",
           display: "flex",
-          gap: "10px",
           alignItems: "center",
+          justifyContent: "space-between",
+          background: "#171717",
+          flexShrink: 0,
+          fontSize: "0.9rem",
+          color: "#ececec",
         }}
       >
-        <label>Ollama Model:</label>
+        {/* Project Info */}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "12px",
+            overflow: "hidden",
+            flex: 1,
+            marginRight: "20px",
+          }}
+        >
+          <div
+            title={projectPath}
+            style={{
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              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: "5px" }}
+              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}>
@@ -117,136 +189,230 @@ export function Chat() {
             <input
               value={model}
               onChange={(e) => setModel(e.target.value)}
-            placeholder="e.g. llama3, mistral"
+              placeholder="Model"
-            style={{ padding: "5px" }}
+              style={{
+                padding: "6px 12px",
+                borderRadius: "99px",
+                border: "none",
+                fontSize: "0.9em",
+                background: "#2f2f2f",
+                color: "#ececec",
+                outline: "none",
+              }}
             />
           )}
           <label
             style={{
               display: "flex",
               alignItems: "center",
-            gap: "5px",
+              gap: "6px",
-            marginLeft: "10px",
+              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" }}
             />
-          Enable Tools
+            <span>Tools</span>
           </label>
         </div>
+      </div>
 
       {/* Messages Area */}
       <div
         style={{
           flex: 1,
           overflowY: "auto",
-          padding: "20px",
+          padding: "20px 0",
           display: "flex",
           flexDirection: "column",
-          gap: "15px",
+          gap: "24px",
+        }}
+      >
+        <div
+          style={{
+            maxWidth: "768px",
+            margin: "0 auto",
+            width: "100%",
+            padding: "0 24px",
+            display: "flex",
+            flexDirection: "column",
+            gap: "24px",
           }}
         >
           {messages.map((msg, idx) => (
             <div
               key={idx}
-            className={`message ${msg.role}`}
               style={{
-              alignSelf: msg.role === "user" ? "flex-end" : "flex-start",
+                display: "flex",
-              maxWidth: "80%",
+                flexDirection: "column",
-              padding: "10px 15px",
+                alignItems: msg.role === "user" ? "flex-end" : "flex-start",
-              borderRadius: "10px",
-              background:
-                msg.role === "user"
-                  ? "#007AFF"
-                  : msg.role === "tool"
-                    ? "#f0f0f0"
-                    : "#E5E5EA",
-              color: msg.role === "user" ? "white" : "black",
-              border: msg.role === "tool" ? "1px solid #ccc" : "none",
-              fontFamily: msg.role === "tool" ? "monospace" : "inherit",
-              fontSize: msg.role === "tool" ? "0.9em" : "1em",
-              whiteSpace: msg.role === "tool" ? "pre-wrap" : "normal",
               }}
             >
-            <strong>
+              <div
-              {msg.role === "user"
+                style={{
-                ? "You"
+                  maxWidth: "100%",
+                  padding: msg.role === "user" ? "10px 16px" : "0",
+                  borderRadius: msg.role === "user" ? "20px" : "0",
+                  background:
+                    msg.role === "user"
+                      ? "#2f2f2f"
                       : msg.role === "tool"
-                  ? "Tool Output"
+                        ? "#222"
-                  : "Agent"}
+                        : "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.role === "user" ? (
+                  msg.content
+                ) : msg.role === "tool" ? (
+                  <div>
+                    <strong
+                      style={{
+                        display: "block",
+                        marginBottom: "4px",
+                        color: "#aaa",
+                      }}
+                    >
+                      Tool Output
                     </strong>
-            {msg.role === "tool" ? (
+                    <div style={{ maxHeight: "300px", overflow: "auto" }}>
-              <div style={{ maxHeight: "200px", 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
-                style={{ marginTop: "10px", fontSize: "0.85em", color: "#666" }}
+                    style={{
+                      marginTop: "12px",
+                      fontSize: "0.85em",
+                      color: "#aaa",
+                      display: "flex",
+                      flexDirection: "column",
+                      gap: "8px",
+                    }}
                   >
                     {msg.tool_calls.map((tc, i) => (
                       <div
                         key={i}
                         style={{
-                      background: "rgba(0,0,0,0.05)",
+                          display: "flex",
-                      padding: "5px",
+                          alignItems: "center",
+                          gap: "8px",
+                          fontFamily: "monospace",
+                        }}
+                      >
+                        <span style={{ color: "#888" }}>Running:</span>
+                        <span
+                          style={{
+                            background: "#333",
+                            padding: "2px 6px",
                             borderRadius: "4px",
                           }}
                         >
-                    🛠{" "}
+                          {tc.function.name}
-                    <code>
+                        </span>
-                      {tc.function.name}({tc.function.arguments})
-                    </code>
                       </div>
                     ))}
                   </div>
                 )}
               </div>
+            </div>
           ))}
           {loading && (
-          <div style={{ alignSelf: "flex-start", color: "#888" }}>
+            <div
-            Thinking...
+              style={{
+                alignSelf: "flex-start",
+                color: "#888",
+                fontSize: "0.9em",
+                marginTop: "10px",
+              }}
+            >
+              <span className="pulse">Thinking...</span>
             </div>
           )}
           <div ref={messagesEndRef} />
         </div>
+      </div>
 
       {/* Input Area */}
       <div
         style={{
-          padding: "20px",
+          padding: "24px",
-          borderTop: "1px solid #ddd",
+          background: "#171717",
           display: "flex",
-          gap: "10px",
+          justifyContent: "center",
+        }}
+      >
+        <div
+          style={{
+            maxWidth: "768px",
+            width: "100%",
+            position: "relative",
           }}
         >
           <input
             value={input}
             onChange={(e) => setInput(e.target.value)}
             onKeyDown={(e) => e.key === "Enter" && sendMessage()}
-          placeholder="Ask the agent to do something..."
+            placeholder="Send a message..."
             style={{
-            flex: 1,
+              width: "100%",
-            padding: "10px",
+              padding: "14px 20px",
-            borderRadius: "4px",
+              paddingRight: "50px", // space for button
-            border: "1px solid #ccc",
+              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={{ padding: "10px 20px" }}
+            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,
+            }}
           >
-          Send
+            ↑
           </button>
         </div>
       </div>
+    </div>
   );
 }