feat: I need you to review all styling for button, menu, log vi...

apps/server/src/routes/app-spec/generate-spec.ts

@@ -208,18 +208,25 @@ ${getStructuredSpecPromptInstruction()}`;
       throw new Error("No response text and no structured output - cannot generate spec");
     }
 
-    xmlContent = responseText;
     const xmlStart = responseText.indexOf("<project_specification>");
     const xmlEnd = responseText.lastIndexOf("</project_specification>");
 
     if (xmlStart !== -1 && xmlEnd !== -1) {
-      // Extract just the XML content
+      // Extract just the XML content, discarding any conversational text before/after
       xmlContent = responseText.substring(xmlStart, xmlEnd + "</project_specification>".length);
       logger.info(`Extracted XML content: ${xmlContent.length} chars (from position ${xmlStart})`);
-    } else if (xmlStart === -1) {
-      logger.warn("⚠️ Response does not contain <project_specification> tag - saving raw response");
     } else {
-      logger.warn("⚠️ Response has incomplete XML (missing closing tag) - saving raw response");
+      // No valid XML structure found in the response text
+      // This happens when structured output was expected but not received, and the agent
+      // output conversational text instead of XML (e.g., "The project directory appears to be empty...")
+      // We should NOT save this conversational text as it's not a valid spec
+      logger.error("❌ Response does not contain valid <project_specification> XML structure");
+      logger.error("This typically happens when structured output failed and the agent produced conversational text instead of XML");
+      throw new Error(
+        "Failed to generate spec: No valid XML structure found in response. " +
+        "The response contained conversational text but no <project_specification> tags. " +
+        "Please try again."
+      );
     }
   }
 

apps/ui/src/components/layout/sidebar.tsx

@@ -1872,9 +1872,6 @@ export function Sidebar() {
                         title={!sidebarOpen ? item.label : undefined}
                         data-testid={`nav-${item.id}`}
                       >
-                        {isActive && (
-                          <div className="absolute inset-y-0 left-0 w-1 bg-gradient-to-b from-brand-400 via-brand-500 to-brand-600 rounded-r-full shadow-sm shadow-brand-500/50"></div>
-                        )}
                         <Icon
                           className={cn(
                             "w-[18px] h-[18px] shrink-0 transition-all duration-200",
@@ -1974,9 +1971,6 @@ export function Sidebar() {
               title={!sidebarOpen ? "Wiki" : undefined}
               data-testid="wiki-link"
             >
-              {isActiveRoute("wiki") && (
-                <div className="absolute inset-y-0 left-0 w-1 bg-gradient-to-b from-brand-400 via-brand-500 to-brand-600 rounded-r-full shadow-sm shadow-brand-500/50"></div>
-              )}
               <BookOpen
                 className={cn(
                   "w-[18px] h-[18px] shrink-0 transition-all duration-200",
@@ -2037,9 +2031,6 @@ export function Sidebar() {
               title={!sidebarOpen ? "Running Agents" : undefined}
               data-testid="running-agents-link"
             >
-              {isActiveRoute("running-agents") && (
-                <div className="absolute inset-y-0 left-0 w-1 bg-gradient-to-b from-brand-400 via-brand-500 to-brand-600 rounded-r-full shadow-sm shadow-brand-500/50"></div>
-              )}
               <div className="relative">
                 <Activity
                   className={cn(
@@ -2135,9 +2126,6 @@ export function Sidebar() {
             title={!sidebarOpen ? "Settings" : undefined}
             data-testid="settings-button"
           >
-            {isActiveRoute("settings") && (
-              <div className="absolute inset-y-0 left-0 w-1 bg-gradient-to-b from-brand-400 via-brand-500 to-brand-600 rounded-r-full shadow-sm shadow-brand-500/50"></div>
-            )}
             <Settings
               className={cn(
                 "w-[18px] h-[18px] shrink-0 transition-all duration-200",

apps/ui/src/components/ui/log-viewer.tsx

@@ -325,7 +325,7 @@ function LogEntryItem({ entry, isExpanded, onToggle }: LogEntryItemProps) {
   return (
     <div
       className={cn(
-        "rounded-lg border-l-4 transition-all duration-200",
+        "rounded-lg border transition-all duration-200",
         bgColor,
         borderColor,
         "hover:brightness-110"

apps/ui/src/components/views/interview-view.tsx

@@ -465,7 +465,7 @@ export function InterviewView() {
                 "max-w-[80%]",
                 message.role === "user"
                   ? "bg-transparent border border-primary text-foreground"
-                  : "border-l-4 border-primary bg-card"
+                  : "border border-primary/30 bg-card"
               )}
             >
               <CardContent className="px-3 py-2">
@@ -498,7 +498,7 @@ export function InterviewView() {
             <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
               <Bot className="w-4 h-4 text-primary" />
             </div>
-            <Card className="border-l-4 border-primary bg-card">
+            <Card className="border border-primary/30 bg-card">
               <CardContent className="p-3">
                 <div className="flex items-center gap-2">
                   <Loader2 className="w-4 h-4 animate-spin text-primary" />

apps/ui/src/lib/log-parser.ts

@@ -662,7 +662,7 @@ export function getLogTypeColors(type: LogEntryType): {
     case "prompt":
       return {
         bg: "bg-blue-500/10",
-        border: "border-l-blue-500",
+        border: "border-blue-500/30",
         text: "text-blue-300",
         icon: "text-blue-400",
         badge: "bg-blue-500/20 text-blue-300",
@@ -670,7 +670,7 @@ export function getLogTypeColors(type: LogEntryType): {
     case "tool_call":
       return {
         bg: "bg-amber-500/10",
-        border: "border-l-amber-500",
+        border: "border-amber-500/30",
         text: "text-amber-300",
         icon: "text-amber-400",
         badge: "bg-amber-500/20 text-amber-300",
@@ -678,7 +678,7 @@ export function getLogTypeColors(type: LogEntryType): {
     case "tool_result":
       return {
         bg: "bg-slate-500/10",
-        border: "border-l-slate-400",
+        border: "border-slate-400/30",
         text: "text-slate-300",
         icon: "text-slate-400",
         badge: "bg-slate-500/20 text-slate-300",
@@ -686,7 +686,7 @@ export function getLogTypeColors(type: LogEntryType): {
     case "phase":
       return {
         bg: "bg-cyan-500/10",
-        border: "border-l-cyan-500",
+        border: "border-cyan-500/30",
         text: "text-cyan-300",
         icon: "text-cyan-400",
         badge: "bg-cyan-500/20 text-cyan-300",
@@ -694,7 +694,7 @@ export function getLogTypeColors(type: LogEntryType): {
     case "error":
       return {
         bg: "bg-red-500/10",
-        border: "border-l-red-500",
+        border: "border-red-500/30",
         text: "text-red-300",
         icon: "text-red-400",
         badge: "bg-red-500/20 text-red-300",
@@ -702,7 +702,7 @@ export function getLogTypeColors(type: LogEntryType): {
     case "success":
       return {
         bg: "bg-emerald-500/10",
-        border: "border-l-emerald-500",
+        border: "border-emerald-500/30",
         text: "text-emerald-300",
         icon: "text-emerald-400",
         badge: "bg-emerald-500/20 text-emerald-300",
@@ -710,7 +710,7 @@ export function getLogTypeColors(type: LogEntryType): {
     case "warning":
       return {
         bg: "bg-orange-500/10",
-        border: "border-l-orange-500",
+        border: "border-orange-500/30",
         text: "text-orange-300",
         icon: "text-orange-400",
         badge: "bg-orange-500/20 text-orange-300",
@@ -718,7 +718,7 @@ export function getLogTypeColors(type: LogEntryType): {
     case "thinking":
       return {
         bg: "bg-indigo-500/10",
-        border: "border-l-indigo-500",
+        border: "border-indigo-500/30",
         text: "text-indigo-300",
         icon: "text-indigo-400",
         badge: "bg-indigo-500/20 text-indigo-300",
@@ -726,7 +726,7 @@ export function getLogTypeColors(type: LogEntryType): {
     case "debug":
       return {
         bg: "bg-primary/10",
-        border: "border-l-primary",
+        border: "border-primary/30",
         text: "text-primary",
         icon: "text-primary",
         badge: "bg-primary/20 text-primary",
@@ -734,7 +734,7 @@ export function getLogTypeColors(type: LogEntryType): {
     default:
       return {
         bg: "bg-zinc-500/10",
-        border: "border-l-zinc-500",
+        border: "border-zinc-500/30",
         text: "text-zinc-300",
         icon: "text-zinc-400",
         badge: "bg-zinc-500/20 text-zinc-300",

package-lock.json

@@ -1003,7 +1003,7 @@
     },
     "node_modules/@electron/node-gyp": {
       "version": "10.2.0-electron.1",
-      "resolved": "git+https://github.com/electron/node-gyp.git#06b29aafb7708acef8b3669835c8a7857ebc92d2",
+      "resolved": "git+ssh://git@github.com/electron/node-gyp.git#06b29aafb7708acef8b3669835c8a7857ebc92d2",
       "integrity": "sha512-4MSBTT8y07YUDqf69/vSh80Hh791epYqGtWHO3zSKhYFwQg+gx9wi1PqbqP6YqC4WMsNxZ5l9oDmnWdK5pfCKQ==",
       "dev": true,
       "license": "MIT",