feat(resources): move Resource Details to the bottom panel

Relocate the Resource Details webview from the left activity-bar container
to its own bottom-panel container (localstackPanel), giving the key/value
table room to breathe. Explore and Resources stay in the sidebar, now
split 50/50 by default (Resources size 2 -> 1).

Selecting a resource reveals the panel via WebviewView.show(true), which
brings the tab forward without stealing keyboard focus, so arrow-key
browsing in the Resources tree keeps working and details follow live. The
first reveal (before the view has resolved) falls back to the auto-
generated <viewId>.focus command to open the panel.

Also cap the Resource Details field-label column at 20% (was 33%); the
fixed table layout makes that a hard cap so long labels wrap rather than
widen the column.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: peter-smith-phd

package.json

@@ -137,6 +137,13 @@
 					"title": "LocalStack",
 					"icon": "resources/icons/localstack.svg"
 				}
+			],
+			"panel": [
+				{
+					"id": "localstackPanel",
+					"title": "Resource Details",
+					"icon": "resources/icons/localstack.svg"
+				}
 			]
 		},
 		"views": {
@@ -151,14 +158,15 @@
 					"id": "localstack.resources",
 					"name": "Resources",
 					"icon": "resources/icons/localstack.svg",
-					"size": 2
-				},
+					"size": 1
+				}
+			],
+			"localstackPanel": [
 				{
 					"id": "localstack.resourceDetails",
 					"name": "Resource Details",
 					"icon": "resources/icons/localstack.svg",
-					"type": "webview",
-					"size": 1
+					"type": "webview"
 				}
 			]
 		},

src/plugins/resource-browser.ts

@@ -42,6 +42,7 @@ export default createPlugin(
 					const item = e.selection[0];
 					const profile = item.parent.parent.parent.profile.id;
 					detailsProvider.setArn(profile, item.arn);
+					detailsProvider.reveal();
 				}
 			}),
 		);

src/test/services/cfnRoundTrip.test.ts

@@ -23,7 +23,9 @@ import { cognitoIdpDefinition } from "../../platforms/aws/services/definitions/c
  */
 
 type Handlers = Record<string, (input: Record<string, unknown>) => unknown>;
-function fakeClient(handlers: Handlers): { send: (command: unknown) => unknown } {
+function fakeClient(handlers: Handlers): {
+	send: (command: unknown) => unknown;
+} {
 	return {
 		send: (command: unknown) => {
 			const name = (command as { constructor: { name: string } }).constructor
@@ -32,7 +34,8 @@ function fakeClient(handlers: Handlers): { send: (command: unknown) => unknown }
 			if (!handler) {
 				throw new Error(`Unexpected SDK command: ${name}`);
 			}
-			const input = (command as { input?: Record<string, unknown> }).input ?? {};
+			const input =
+				(command as { input?: Record<string, unknown> }).input ?? {};
 			return Promise.resolve(handler(input));
 		},
 	};

src/views/resource-details/viewProvider.ts

@@ -1,3 +1,4 @@
+import { commands } from "vscode";
 import type * as vscode from "vscode";
 
 import ARN from "../../platforms/aws/models/arnModel.ts";
@@ -44,7 +45,7 @@ const STYLES = `
 		border-collapse: collapse;
 		width: 100%;
 		/* Fixed layout makes the column widths below hard caps, so a long field
-		 * label wraps within its 33% column instead of stretching it. */
+		 * label wraps within its 20% column instead of stretching it. */
 		table-layout: fixed;
 	}
 	td {
@@ -54,12 +55,12 @@ const STYLES = `
 	}
 	td.field {
 		color: var(--vscode-descriptionForeground);
-		width: 33%;
+		width: 20%;
 		white-space: normal;
 		overflow-wrap: break-word;
 	}
 	td.value {
-		width: 67%;
+		width: 80%;
 		word-break: break-word;
 	}
 	.mono {
@@ -119,6 +120,21 @@ export class ResourceDetailsViewProvider implements vscode.WebviewViewProvider {
 		this.render();
 	}
 
+	/**
+	 * Bring the Resource Details panel forward without stealing keyboard focus,
+	 * so the user can keep arrow-key browsing the Resources tree while details
+	 * follow live. Before the panel has ever been opened the view isn't resolved
+	 * yet, so fall back to the auto-generated focus command to open it the first
+	 * time (that one reveal does take focus).
+	 */
+	public reveal(): void {
+		if (this.view) {
+			this.view.show(true); // preserveFocus: keep focus in the Resources tree
+		} else {
+			void commands.executeCommand("localstack.resourceDetails.focus");
+		}
+	}
+
 	/** Render the current state into the webview (no-op until it is resolved). */
 	private render(): void {
 		if (!this.view) {