Develop

media/gitGraph.css

@@ -0,0 +1,147 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background: var(--vscode-editor-background);
+  color: var(--vscode-editor-foreground);
+  font-family: var(--vscode-editor-font-family, "Courier New", monospace);
+  font-size: 13px;
+  height: 100vh;
+  overflow: hidden;
+}
+
+#header {
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--vscode-panel-border);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--vscode-sideBarSectionHeader-background);
+}
+
+#header h2 {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--vscode-sideBarSectionHeader-foreground);
+  font-family: var(--vscode-font-family);
+  letter-spacing: 0.5px;
+}
+
+#header .branch-badge {
+  background: var(--vscode-badge-background);
+  color: var(--vscode-badge-foreground);
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-size: 11px;
+}
+
+#header .commit-count {
+  color: var(--vscode-descriptionForeground);
+  font-size: 11px;
+  margin-left: auto;
+}
+
+#table-container {
+  overflow-y: auto;
+  height: calc(100vh - 49px);
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+thead {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--vscode-editor-background);
+}
+
+thead tr {
+  border-bottom: 2px solid var(--vscode-panel-border);
+  background: var(--vscode-sideBarSectionHeader-background);
+}
+
+th {
+  padding: 8px 12px;
+  text-align: left;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 1.5px;
+  color: var(--vscode-sideBarSectionHeader-foreground);
+  white-space: nowrap;
+  border-right: 1px solid var(--vscode-panel-border);
+  font-family:
+    "Segoe UI",
+    system-ui,
+    -apple-system,
+    sans-serif;
+}
+
+th:last-child {
+  border-right: none;
+}
+
+tbody tr {
+  border-bottom: 1px solid var(--vscode-panel-border, rgba(255, 255, 255, 0.05));
+  cursor: pointer;
+  transition: background 0.1s;
+}
+
+tbody tr:nth-child(even) {
+  background: var(
+    --vscode-list-inactiveSelectionBackground,
+    rgba(255, 255, 255, 0.02)
+  );
+}
+
+tbody tr:hover {
+  background: var(--vscode-list-hoverBackground);
+}
+
+td {
+  padding: 8px 12px;
+  vertical-align: middle;
+}
+
+.graph-cell {
+  width: 40px;
+  padding: 0 8px;
+}
+
+.hash {
+  font-family: monospace;
+  color: var(--vscode-textLink-foreground);
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.message {
+  color: var(--vscode-editor-foreground);
+  max-width: 400px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.author {
+  color: var(--vscode-terminal-ansiGreen);
+  white-space: nowrap;
+  font-size: 12px;
+}
+
+.date {
+  color: var(--vscode-descriptionForeground);
+  white-space: nowrap;
+  font-size: 12px;
+}
+
+svg.graph {
+  display: block;
+  overflow: visible;
+}

package.json

@@ -44,10 +44,6 @@
   "main": "./dist/extension.js",
   "contributes": {
     "commands": [
-      {
-        "command": "gops.helloWorld",
-        "title": "Gops Hello World"
-      },
       {
         "command": "gops.refresh",
         "title": "Refresh Git Ops View",
@@ -122,6 +118,11 @@
         "command": "gops.stageAllFiles",
         "title": "Stage All Files",
         "icon": "$(expand-all)"
+      },
+      {
+        "command": "gops.showGitGraph",
+        "title": "Show Git Graph",
+        "icon": "$(graph)"
       }
     ],
     "viewsContainers": {

src/commands/CommandRegistrar.ts

@@ -41,6 +41,8 @@ export class CommandRegistrar {
     );
     this.register(COMMANDS.COMMIT, () => this.delegate.commit());
     this.register(COMMANDS.CREATE_TAG, () => this.delegate.createTag());
+    this.register(COMMANDS.SHOW_GIT_GRAPH, (node) => this.delegate.showGitGraph(node)
+    );
   }
 
   private register(

src/commands/Commands.ts

@@ -14,4 +14,5 @@ export const COMMANDS = {
   UNSTAGE_FILE: "gops.unstageFile",
   UNSTAGE_ALL_FILES: "gops.unstageAllFiles",
   COMMIT: "gops.commit",
+  SHOW_GIT_GRAPH: "gops.showGitGraph",
 } as const;

src/commands/GitOperationsDelegate.ts

@@ -5,6 +5,7 @@ import { TreeDataProvider } from "../gopstree/TreeDataProvider";
 import { GitTreeNode } from "../gopstree/types";
 import { ChangedFileNode } from "../gopstree/nodes/ChangedFileNode";
 import { StagedFileNode } from "../gopstree/nodes/StagedFileNode";
+import { GitGraphPanel } from "../gopswebpanel/GitGraphPanel";
 
 export class GitOperationsDelegate {
   constructor(
@@ -173,4 +174,8 @@ export class GitOperationsDelegate {
   async createTag(): Promise<void> {
     // TODO: implement
   }
+
+  async showGitGraph(branchName: string): Promise<void> {
+    await GitGraphPanel.createOrShow(branchName, this.gitService);
+  }
 }

src/gopstree/nodes/LocalBranchNode.ts

@@ -1,17 +1,27 @@
 import { ContextValue } from "../ContextValue";
 import { NodeType } from "./NodeType";
 import { TreeItemModel } from "../TreeItemModel";
-import * as vscode from 'vscode';
-import { createLocalBranchTooltip, formatLocalBranchLabel } from "./utils/nodeUtils";
+import * as vscode from "vscode";
+import {
+  createLocalBranchTooltip,
+  formatLocalBranchLabel,
+} from "./utils/nodeUtils";
+import { COMMANDS } from "../../commands/Commands";
 
 export class LocalBranchNode extends TreeItemModel<NodeType.Local> {
+  public override command?: vscode.Command;  
   constructor(
     public readonly branchName: string,
     public readonly isCurrent: boolean,
     public readonly ahead?: number,
     public readonly behind?: number,
   ) {
-    const fomatted = formatLocalBranchLabel(branchName, isCurrent, ahead, behind);
+    const fomatted = formatLocalBranchLabel(
+      branchName,
+      isCurrent,
+      ahead,
+      behind,
+    );
     super(
       {
         label: fomatted.label,
@@ -20,12 +30,20 @@ export class LocalBranchNode extends TreeItemModel<NodeType.Local> {
       NodeType.Local,
       vscode.TreeItemCollapsibleState.None,
     );
-    this.contextValue = isCurrent ? ContextValue.LocalBranchesCurrent : ContextValue.LocalBranches;
+    this.contextValue = isCurrent
+      ? ContextValue.LocalBranchesCurrent
+      : ContextValue.LocalBranches;
+
+    this.command = {
+      command: COMMANDS.SHOW_GIT_GRAPH,
+      title: "Open Git Graph",
+      arguments: [this.branchName],
+    };
 
     if (isCurrent) {
       this.iconPath = new vscode.ThemeIcon("check");
     }
-    
+
     this.tooltip = createLocalBranchTooltip(
       branchName,
       isCurrent,
@@ -37,4 +55,4 @@ export class LocalBranchNode extends TreeItemModel<NodeType.Local> {
   public toString(): string {
     return `LocalBranchNode(${this.branchName}, current=${this.isCurrent}, ahead=${this.ahead}, behind=${this.behind}, contextValue=${this.contextValue})`;
   }
-}
+}

src/gopswebpanel/GitGraphPanel.ts

@@ -0,0 +1,31 @@
+import * as vscode from "vscode";
+import { GitService } from "../services/GitService";
+import { renderGitGraph } from "./GitGraphWebview";
+
+export class GitGraphPanel {
+  private static currentPanel: GitGraphPanel | undefined;
+
+  private constructor(private readonly panel: vscode.WebviewPanel) {}
+
+  public static async createOrShow(branchName: string, gitService: GitService) {
+    const extensionUri =
+      vscode.extensions.getExtension("codemanxdev.gops")!.extensionUri;
+    const panel = vscode.window.createWebviewPanel(
+      "gitGraph",
+      `Git Graph: ${branchName}`,
+      vscode.ViewColumn.One,
+      { enableScripts: true },
+    );
+
+    GitGraphPanel.currentPanel = new GitGraphPanel(panel);
+    await GitGraphPanel.currentPanel.render(extensionUri, branchName, gitService);
+  }
+
+  private async render(extensionUri: vscode.Uri, branchName: string, gitService: GitService) {
+    const commits = await gitService.getBranchCommits(branchName);
+    const cssUri = this.panel.webview.asWebviewUri(
+      vscode.Uri.joinPath(extensionUri, "media", "gitGraph.css"),
+    );
+    this.panel.webview.html = renderGitGraph(branchName, commits, cssUri);
+  }
+}