Update layout to three columns

Author: ericceg

README.md

@@ -26,6 +26,7 @@ Core loop:
 - Error-to-entity links via `VIOLATES` edges (`python/graph/ingest.py`)
 - Agent tooling to inspect errors, traverse graph context, read source, and output correction prompts (`python/agents/*`)
 - Live, non-blocking agent run indicators in the desktop UI (phase updates + progress bars while fix suggestions are generated)
+- Three-column desktop workspace layout: errors (left), graph (center, primary), and a suggestion panel (right) that appears only after an agent workflow run starts
 
 ## Agent Workflow (Implemented in `python/agents`)
 

src/frontend/app/App.tsx

@@ -24,6 +24,7 @@ export default function App() {
     service: tauriCodeHealthService
   });
   const [copyStatus, setCopyStatus] = useState("");
+  const hasAgentWorkflowRun = Boolean(latestSuggestion || agentRunProgress || resolvingErrorId);
 
   async function handleCopySuggestion() {
     if (!latestSuggestion) {
@@ -70,7 +71,11 @@ export default function App() {
       {state.error ? <div className="card error">{state.error}</div> : null}
       {agentRunProgress ? <AgentProgressPanel progress={agentRunProgress} /> : null}
 
-      <section className="layout-grid">
+      <section
+        className={`layout-grid ${
+          hasAgentWorkflowRun ? "layout-grid-with-suggestion" : "layout-grid-without-suggestion"
+        }`}
+      >
         <div className="column-left">
           <ErrorListPanel
             graph={state.graph}
@@ -98,26 +103,35 @@ export default function App() {
             onNodeClick={handleNodeClick}
           />
         </div>
-      </section>
-
-      {latestSuggestion ? (
-        <section className="card panel suggestion-panel">
-          <h2>Agent Suggestion</h2>
-          <p className="suggestion-meta">
-            Error: <code>{latestSuggestion.errorId}</code> ({latestSuggestion.ruleCode}) | Model:{" "}
-            {latestSuggestion.model}
-          </p>
-          <div className="suggestion-actions">
-            <button type="button" onClick={() => void handleCopySuggestion()}>
-              Copy Suggestion
-            </button>
-            <span className="suggestion-copy-status" aria-live="polite">
-              {copyStatus}
-            </span>
+        {hasAgentWorkflowRun ? (
+          <div className="column-suggestion">
+            <section className="card panel suggestion-panel">
+              <h2>Agent Suggestion</h2>
+              {latestSuggestion ? (
+                <>
+                  <p className="suggestion-meta">
+                    Error: <code>{latestSuggestion.errorId}</code> ({latestSuggestion.ruleCode}) | Model:{" "}
+                    {latestSuggestion.model}
+                  </p>
+                  <div className="suggestion-actions">
+                    <button type="button" onClick={() => void handleCopySuggestion()}>
+                      Copy Suggestion
+                    </button>
+                    <span className="suggestion-copy-status" aria-live="polite">
+                      {copyStatus}
+                    </span>
+                  </div>
+                  <pre>{latestSuggestion.suggestion}</pre>
+                </>
+              ) : (
+                <p className="suggestion-empty-state">
+                  Agent workflow is running. Suggestion will appear here when generation completes.
+                </p>
+              )}
+            </section>
           </div>
-          <pre>{latestSuggestion.suggestion}</pre>
-        </section>
-      ) : null}
+        ) : null}
+      </section>
     </main>
   );
 }

src/frontend/styles/styles.css

@@ -111,14 +111,22 @@ h1 {
 .layout-grid {
   margin-top: 1rem;
   display: grid;
-  grid-template-columns: minmax(280px, 360px) 1fr;
   gap: 1rem;
   flex: 1;
   min-height: 0;
 }
 
+.layout-grid-without-suggestion {
+  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
+}
+
+.layout-grid-with-suggestion {
+  grid-template-columns: minmax(260px, 340px) minmax(0, 1.9fr) minmax(320px, 1fr);
+}
+
 .column-left,
-.column-right {
+.column-right,
+.column-suggestion {
   display: grid;
   gap: 1rem;
   min-width: 0;
@@ -133,6 +141,10 @@ h1 {
   grid-template-rows: minmax(0, 1fr);
 }
 
+.column-suggestion {
+  grid-template-rows: minmax(0, 1fr);
+}
+
 .error-panel {
   min-height: 0;
   display: grid;
@@ -494,9 +506,11 @@ h1 {
 }
 
 .suggestion-panel {
-  margin-top: 1rem;
+  height: 100%;
+  min-height: 0;
   display: grid;
-  gap: 0.55rem;
+  grid-template-rows: auto auto auto minmax(0, 1fr);
+  gap: 0.6rem;
 }
 
 .suggestion-meta {
@@ -526,10 +540,19 @@ h1 {
   white-space: pre-wrap;
   overflow-wrap: anywhere;
   line-height: 1.4;
-  max-height: 220px;
+  max-height: none;
   overflow: auto;
 }
 
+.suggestion-empty-state {
+  margin: 0;
+  color: #486581;
+  border: 1px solid #d9e2ec;
+  border-radius: 8px;
+  padding: 0.75rem;
+  background: #f8fbff;
+}
+
 button {
   border: 1px solid #7aa5d2;
   background: #eef6ff;
@@ -562,7 +585,8 @@ button:disabled {
   }
 
   .column-left,
-  .column-right {
+  .column-right,
+  .column-suggestion {
     min-height: initial;
   }