From 88cda3cd5f0ff88d743797bf5aed0b427dbaac6c Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 30 Jan 2026 15:15:09 +0000
Subject: [PATCH 1/4] Initial plan


From 9d8f2fe545e46afbd4ddb3286fee5cc7859ba0b3 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 30 Jan 2026 15:18:53 +0000
Subject: [PATCH 2/4] Update tool calls display from list to table format in
 file viewer

Co-authored-by: rajbos <6085745+rajbos@users.noreply.github.com>
---
 src/webview/logviewer/main.ts | 70 ++++++++++++++++++++++++++++-------
 1 file changed, 57 insertions(+), 13 deletions(-)

diff --git a/src/webview/logviewer/main.ts b/src/webview/logviewer/main.ts
index d3101db..09adfd7 100644
--- a/src/webview/logviewer/main.ts
+++ b/src/webview/logviewer/main.ts
@@ -157,18 +157,28 @@ function renderTurnCard(turn: ChatTurn): string {
 	const toolCallsHtml = hasToolCalls ? `
 		<div class="turn-tools">
 			<div class="tools-header">🔧 Tool Calls (${turn.toolCalls.length})</div>
-			<div class="tools-list">
-				${turn.toolCalls.map((tc, idx) => `
-					<div class="tool-item">
-						<div class="tool-item-header">
-							<span class="tool-name tool-call-link" data-turn="${turn.turnNumber}" data-toolcall="${idx}" title="${escapeHtml(tc.toolName)}" style="cursor:pointer;">${escapeHtml(lookupToolName(tc.toolName))}</span>
-							<span class="tool-call-pretty" data-turn="${turn.turnNumber}" data-toolcall="${idx}" title="View pretty JSON" style="cursor:pointer;color:#22c55e;">Investigate</span>
-						</div>
-						${tc.arguments ? `<details class="tool-details"><summary>Arguments</summary><pre>${escapeHtml(tc.arguments)}</pre></details>` : ''}
-						${tc.result ? `<details class="tool-details"><summary>Result</summary><pre>${escapeHtml(truncateText(tc.result, 500))}</pre></details>` : ''}
-					</div>
-				`).join('')}
-			</div>
+			<table class="tools-table">
+				<thead>
+					<tr>
+						<th>Tool Name</th>
+						<th>Action</th>
+					</tr>
+				</thead>
+				<tbody>
+					${turn.toolCalls.map((tc, idx) => `
+						<tr class="tool-row">
+							<td class="tool-name-cell">
+								<span class="tool-name tool-call-link" data-turn="${turn.turnNumber}" data-toolcall="${idx}" title="${escapeHtml(tc.toolName)}" style="cursor:pointer;">${escapeHtml(lookupToolName(tc.toolName))}</span>
+								${tc.arguments ? `<details class="tool-details"><summary>Arguments</summary><pre>${escapeHtml(tc.arguments)}</pre></details>` : ''}
+								${tc.result ? `<details class="tool-details"><summary>Result</summary><pre>${escapeHtml(truncateText(tc.result, 500))}</pre></details>` : ''}
+							</td>
+							<td class="tool-action-cell">
+								<span class="tool-call-pretty" data-turn="${turn.turnNumber}" data-toolcall="${idx}" title="View pretty JSON" style="cursor:pointer;color:#22c55e;">Investigate</span>
+							</td>
+						</tr>
+					`).join('')}
+				</tbody>
+			</table>
 		</div>
 	` : '';
 	
@@ -542,7 +552,40 @@ function renderLayout(data: SessionLogData): void {
 				font-weight: 700;
 				color: #fff;
 				margin-bottom: 10px;
-				text-t2px;
+				text-transform: uppercase;
+				letter-spacing: 0.5px;
+			}
+			.tools-table {
+				width: 100%;
+				border-collapse: collapse;
+				font-size: 13px;
+			}
+			.tools-table thead th {
+				text-align: left;
+				padding: 8px 12px;
+				background: #1a1a22;
+				border-bottom: 2px solid #4a4a5a;
+				color: #94a3b8;
+				font-weight: 600;
+				font-size: 12px;
+				text-transform: uppercase;
+				letter-spacing: 0.5px;
+			}
+			.tools-table tbody .tool-row {
+				border-bottom: 1px solid #3a3a44;
+			}
+			.tools-table tbody .tool-row:last-child {
+				border-bottom: none;
+			}
+			.tool-name-cell {
+				padding: 10px 12px;
+				vertical-align: top;
+			}
+			.tool-action-cell {
+				padding: 10px 12px;
+				text-align: right;
+				vertical-align: top;
+				width: 100px;
 			}
 			.tool-name {
 				font-weight: 700;
@@ -554,6 +597,7 @@ function renderLayout(data: SessionLogData): void {
 				color: #34d399;
 				font-size: 12px;
 				text-decoration: underline;
+				white-space: nowrap;
 			}
 			.tool-call-pretty:hover {
 				color: #6ee7b7;

From b71e8abb53a4e51f99a0d07bfb7abf1278d9686b Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 30 Jan 2026 15:21:35 +0000
Subject: [PATCH 3/4] Right-align Action column header to match cell content
 alignment

Co-authored-by: rajbos <6085745+rajbos@users.noreply.github.com>
---
 src/webview/logviewer/main.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/webview/logviewer/main.ts b/src/webview/logviewer/main.ts
index 09adfd7..81fabf5 100644
--- a/src/webview/logviewer/main.ts
+++ b/src/webview/logviewer/main.ts
@@ -571,6 +571,9 @@ function renderLayout(data: SessionLogData): void {
 				text-transform: uppercase;
 				letter-spacing: 0.5px;
 			}
+			.tools-table thead th:nth-child(2) {
+				text-align: right;
+			}
 			.tools-table tbody .tool-row {
 				border-bottom: 1px solid #3a3a44;
 			}

From 1cad48e50778ae03c0bf94598e6fb88a8229b84a Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 30 Jan 2026 15:22:46 +0000
Subject: [PATCH 4/4] Add scope attributes to table headers for accessibility

Co-authored-by: rajbos <6085745+rajbos@users.noreply.github.com>
---
 src/webview/logviewer/main.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/webview/logviewer/main.ts b/src/webview/logviewer/main.ts
index 81fabf5..ff5aaf3 100644
--- a/src/webview/logviewer/main.ts
+++ b/src/webview/logviewer/main.ts
@@ -160,8 +160,8 @@ function renderTurnCard(turn: ChatTurn): string {
 			<table class="tools-table">
 				<thead>
 					<tr>
-						<th>Tool Name</th>
-						<th>Action</th>
+						<th scope="col">Tool Name</th>
+						<th scope="col">Action</th>
 					</tr>
 				</thead>
 				<tbody>