feat(tags): unify signed-tag badge and refine signature column

v1.1.2 follow-up to the signed-tag surfaces. The 1.1.1 signed-tag look had
replaced the tag icon with the verified glyph and lost the commit-color
background; this restores a unified design:

- The tag icon always renders for tags (signed or not), keeping its
  commit-color background. A signed tag adds a separate verified badge on the
  signature-status green, sitting flush against the tag icon
  (.gitRef.tag.signed > svg zeroes the right margin; no background override).
- The verified badge is square (border-radius 0), sized like the 1.1.1
  verified icon.
- Signed tags share the default neutral border with every other ref; the green
  verified badge, not the border, carries the signature distinction.
- The commit signature column's valid status now shows the verified symbol
  inside a filled signature-status green circle, unifying with the tag badge.

New svgIcons.verified; the signedTag alias is kept for existing test selectors.
sonar.projectVersion 1.1.1 -> 1.1.2.

Gate (ZAM): OK — new_violations 0, new_duplicated_lines_density 0.0, all
project-wide conditions 0.

Co-Authored-By: ZCode <zcode@z.ai>

Author: zamkorus

CHANGELOG.md

@@ -7,6 +7,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.1.2] - 2026-07-29
+
+### Changed
+
+- **Signed-tag visual refined**: the tag icon now keeps its commit-color
+  background (restored), and a separate verified badge sits flush against it
+  on the signature-status green, sized as in 1.1.1. Signed tags share the
+  default neutral border with every other ref so all tags read consistently;
+  the green verified badge — not the border — carries the signature
+  distinction.
+- **Commit signature column**: a valid (signed) commit now shows the verified
+  symbol inside a filled signature-status green circle, unifying the look with
+  the signed-tag badge.
+
 ## [1.1.1] - 2026-07-29
 
 ### Added
@@ -196,7 +210,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 Initial release
 
-[Unreleased]: https://github.com/PlohnenSoftware/git-graph-libre/compare/v1.1.0...HEAD
+[Unreleased]: https://github.com/PlohnenSoftware/git-graph-libre/compare/v1.1.2...HEAD
+[1.1.2]: https://github.com/PlohnenSoftware/git-graph-libre/compare/v1.1.1...v1.1.2
+[1.1.1]: https://github.com/PlohnenSoftware/git-graph-libre/compare/v1.1.0...v1.1.1
 [1.1.0]: https://github.com/PlohnenSoftware/git-graph-libre/compare/v1.0.0...v1.1.0
 [1.0.0]: https://github.com/PlohnenSoftware/git-graph-libre/releases/tag/v1.0.0
 [0.4.0]: https://github.com/asispts/neo-git-graph/compare/v0.3.0...v0.4.0

docs/AI_DEV_KNOWLEDGE_BASE.md

@@ -1685,6 +1685,46 @@ Verification (`2026-07-29`):
   condition is back on the gate (it had been removed per the earlier
   `2026-07-29` note); this slice cleared it at `95.8%`.
 
+Follow-up (`2026-07-29`): signed-tag visual polish, released as `v1.1.2`. The
+1.1.1 signed-tag look had regressed: the tag icon was replaced by the verified
+glyph and lost its commit-color background. Restored a unified design:
+
+- `refIcon()` always returns the **tag** octicon for tags (signed or not); the
+  `signedTag` glyph-as-icon path is gone. A signed tag renders the tag icon on
+  the commit-color background, then a `.gitRefSignedBadge` (the verified octicon
+  on the signature-status green) sits **flush** against it.
+- `.gitRef.tag.signed > svg { margin-right: 0 }` zeroes the default 5px right
+  margin only on signed tags so the badge meets the icon with no background gap;
+  it does **not** override the icon background, so the commit color is preserved.
+- The `.gitRefSignedBadge` is a square (`border-radius: 0`), sized 14px with the
+  glyph at 14px to match the 1.1.1 verified-icon weight.
+- Signed tags now share the **default neutral border** with every other ref
+  (`.gitRef.tag.signed { border-color: var(--ngg-neutral-border-heavy) }`); the
+  green verified badge — not the border — carries the signature distinction.
+- Commit signature column: `COMMIT_SIGNATURE_PRESENTATIONS.valid` glyph changed
+  from the `"✓"` character to `svgIcons.verified`, and `.commitSignature-valid`
+  is now a filled `background: var(--ngg-signed-ref)` circle (not the old 14%
+  tint) with the glyph in the editor-background color, unifying with the tag
+  badge. A new `svgIcons.verified` was added (the `signedTag` alias is kept so
+  existing `signedTagIcon` test selectors keep matching).
+
+Verification (`2026-07-29`):
+
+- `git fetch --all --prune`; `AI-dev` level with `origin/AI-dev`
+- `pnpm run typecheck`
+- strict Biome over the five touched files (clean), `pnpm run lint` (only the
+  pre-existing schema-version info), `pnpm run format` (only the six known
+  pre-existing drifts in untouched files)
+- `pnpm run test`: backend `44` files / `315` tests, webview `34` files /
+  `294` tests
+- `pnpm run l10n:check` `100%`; `pnpm run package`
+- `pnpm run test:coverage` (`78` files / `609` tests)
+- `sonar.projectVersion` advanced `1.1.1` → `1.1.2` so the `Previous Version`
+  new-code window covers exactly this slice.
+- `pnpm run sonar:scan`, task `1f5566fc-d85d-4a1e-a386-881b73a80f3b`: `ZAM`
+  quality gate **`OK`** — `new_violations` `0`, `new_duplicated_lines_density`
+  `0.0`, and all four project-wide conditions `0`.
+
 Test notes for future slices:
 
 - A signature-bearing tag object can be created **without a GPG key** by writing

media/main.css

@@ -207,8 +207,13 @@ body.unableToLoad p {
   line-height: 1;
 }
 .commitSignature-valid {
-  color: var(--vscode-testing-iconPassed, var(--vscode-charts-green, var(--ngg-success)));
-  background: color-mix(in srgb, currentColor 14%, var(--ngg-transparent));
+  color: var(--vscode-editor-background);
+  background: var(--ngg-signed-ref);
+}
+.commitSignature-valid > svg {
+  width: 12px;
+  height: 12px;
+  fill: currentColor;
 }
 .commitSignature-warning {
   color: var(--vscode-editorWarning-foreground, var(--vscode-charts-yellow, oklch(78% 0.15 85)));
@@ -685,15 +690,37 @@ body.commitDetailsResizing * {
   color: var(--vscode-descriptionForeground, var(--ngg-neutral-icon));
 }
 
-/* Signed tags: verified badge on the signature-status green, plus a tinted
-   label so the distinction survives at a glance and without relying on the
-   icon shape alone. */
+/* Signed tags: the tag icon keeps its commit-color background (restored);
+   a separate verified badge on the signature-status green carries the
+   signature distinction, and the border stays signed-green. */
 .gitRef.tag.signed {
-  border-color: var(--ngg-signed-ref);
-  background-color: color-mix(in srgb, var(--ngg-signed-ref) 16%, var(--ngg-transparent));
+  border-color: var(--ngg-neutral-border-heavy);
+  background-color: color-mix(in srgb, var(--ngg-signed-ref) 12%, var(--ngg-transparent));
 }
+/* On a signed tag the verified badge sits flush against the tag icon, so the
+   two backgrounds meet with no gap; the badge then keeps its own right margin
+   to separate it from the tag name. */
 .gitRef.tag.signed > svg {
+  margin-right: 0;
+}
+.gitRefSignedBadge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  margin-right: 4px;
+  margin-left: 0;
+  padding: 2px;
+  border-radius: 0;
+  vertical-align: top;
   background-color: var(--ngg-signed-ref);
+  color: var(--vscode-editor-background);
+}
+.gitRefSignedBadge > svg {
+  width: 14px;
+  height: 14px;
+  fill: currentColor;
 }
 
 /* Loader */

package.json

@@ -1,7 +1,7 @@
 {
   "name": "git-graph-libre",
   "displayName": "%displayName%",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "%description%",
   "categories": [
     "SCM Providers",

sonar-project.properties

@@ -1,6 +1,6 @@
 sonar.projectKey=git-graph-libre
 sonar.projectName=Git Graph Libre
-sonar.projectVersion=1.1.1
+sonar.projectVersion=1.1.2
 sonar.sourceEncoding=UTF-8
 
 sonar.sources=src,scripts,esbuild.js

src/webview/main.ts

@@ -75,7 +75,7 @@ const COMMIT_SIGNATURE_PRESENTATIONS: Record<
   NonNullable<GitCommitNode["signature"]>["status"],
   { glyph: string; tone: string; label: string }
 > = {
-  valid: { glyph: "✓", tone: "valid", label: l10n.signatureValid },
+  valid: { glyph: svgIcons.verified, tone: "valid", label: l10n.signatureValid },
   "valid-untrusted": {
     glyph: "!",
     tone: "warning",
@@ -4207,14 +4207,14 @@ class GitGraphView {
     const title = escapeHtml(signed ? `${ref.name} — ${l10n.signedTagTooltip}` : ref.name);
     return (
       `<span class="gitRef ${ref.type}${refActive ? " active" : ""}${signed ? " signed" : ""}${extraClass}" data-name="${refName}" title="${title}">` +
-      this.refIcon(ref.type, signed) +
+      this.refIcon(ref.type) +
+      (signed ? `<span class="gitRefSignedBadge">${svgIcons.verified}</span>` : "") +
       escapeHtml(label) +
       "</span>"
     );
   }
-  private refIcon(type: GitCommitNode["refs"][number]["type"], signed: boolean) {
-    if (type !== "tag") return svgIcons.branch;
-    return signed ? svgIcons.signedTag : svgIcons.tag;
+  private refIcon(type: GitCommitNode["refs"][number]["type"]) {
+    return type === "tag" ? svgIcons.tag : svgIcons.branch;
   }
   private renderCommitAvatar(commit: GitCommitNode) {
     if (!this.config.fetchAvatars) return "";

src/webview/utils/icons.ts

@@ -9,6 +9,7 @@ export const svgIcons = {
   copy: octicon("copy", "fileActionIcon copyIcon"),
   info: octicon("info"),
   tag: octicon("tag"),
+  verified: octicon("verified", "signedTagIcon"),
   signedTag: octicon("verified", "signedTagIcon"),
   loading: octicon("sync"),
   openFolder: octicon("file-directory-open-fill", "openFolderIcon"),

tests/webview/dialogStyles.test.ts

@@ -187,4 +187,34 @@ describe("dialog styles", () => {
     expect(ruleFor(css, ".tagDetailsActions")).toContain("display: flex;");
     expect(ruleFor(css, ".tagDetailsActions")).toContain("flex-wrap: wrap;");
   });
+
+  it("uses the default ref border for signed tags while the tag icon keeps commit color", () => {
+    const signedRef = ruleFor(css, ".gitRef.tag.signed");
+
+    // The signed tag shares the default neutral border with every other ref so
+    // all tags read consistently; only the green verified badge distinguishes it.
+    expect(signedRef).toContain("border-color: var(--ngg-neutral-border-heavy);");
+    expect(signedRef).not.toContain("border-color: var(--ngg-signed-ref);");
+    // The tag icon background must NOT be overridden for signed tags, so it
+    // keeps the commit color like every other ref icon. The only signed > svg
+    // rule zeroes the right margin so the verified badge sits flush.
+    const signedSvg = ruleFor(css, ".gitRef.tag.signed > svg");
+    expect(signedSvg).not.toContain("background-color");
+    expect(signedSvg).toContain("margin-right: 0;");
+    // The verified badge carries the signature distinction on the green fill.
+    // It is square (no border-radius) so there is no gap where it meets the
+    // tag icon's commit-color background and the badge reads consistently.
+    const badge = ruleFor(css, ".gitRefSignedBadge");
+    expect(badge).toContain("background-color: var(--ngg-signed-ref);");
+    expect(badge).toContain("border-radius: 0;");
+    expect(badge).toContain("border-radius: 0;");
+  });
+
+  it("renders the valid signature as a filled green circle with the glyph", () => {
+    const valid = ruleFor(css, ".commitSignature-valid");
+
+    // A filled signature-status green circle (not the old faint tint).
+    expect(valid).toContain("background: var(--ngg-signed-ref);");
+    expect(valid).not.toContain("color-mix");
+  });
 });

tests/webview/rendering.test.ts

@@ -419,13 +419,18 @@ describe("webview rendering", () => {
     const signed = gitRef("v1.0.0", ".gitRef.tag");
     expect(signed?.classList.contains("signed")).toBe(true);
     expect(signed?.title).toBe("v1.0.0 — signed tag");
-    expect(signed?.querySelector("svg.signedTagIcon")).not.toBeNull();
+    // The signed tag keeps the tag icon (on the commit-color background) AND
+    // adds a separate verified badge on the signature-status green.
+    expect(signed?.querySelector(".gitRefSignedBadge")).not.toBeNull();
+    expect(signed?.querySelector(".gitRefSignedBadge svg.signedTagIcon")).not.toBeNull();
+    expect(signed?.querySelector(":scope > svg.signedTagIcon")).toBeNull();
 
     for (const name of ["v0.9.0", "v0.8.0"]) {
       const unsigned = gitRef(name, ".gitRef.tag");
       expect(unsigned?.classList.contains("signed")).toBe(false);
       expect(unsigned?.title).toBe(name);
-      expect(unsigned?.querySelector("svg.signedTagIcon")).toBeNull();
+      // Normal/unsigned tags keep the tag icon and have no verified badge.
+      expect(unsigned?.querySelector(".gitRefSignedBadge")).toBeNull();
     }
 
     expect(document.querySelectorAll(".gitRef.tag.signed")).toHaveLength(1);
@@ -1944,7 +1949,9 @@ describe("webview rendering", () => {
     const validSignature = document.querySelector(
       'tr.commit[data-hash="abc123"] .commitSignature-valid'
     );
-    expect(validSignature?.textContent).toBe("✓");
+    // The valid signature renders the verified symbol (a filled green circle
+    // with the verified glyph), not a plain "✓" character.
+    expect(validSignature?.querySelector("svg.signedTagIcon")).not.toBeNull();
     expect(validSignature?.getAttribute("title")).toContain("Valid signature");
     expect(validSignature?.getAttribute("title")).toContain("Signer: Alice");
     expect(validSignature?.getAttribute("aria-label")).toContain("Key: ABC123");

tests/webview/tableStyles.test.ts

@@ -97,8 +97,16 @@ describe("commit table styles", () => {
     expect(css).toContain("var(--vscode-testing-iconPassed");
     expect(css).toContain("var(--ngg-success)");
     expect(css).toContain(".gitRef.tag.signed {");
-    expect(css).toContain("border-color: var(--ngg-signed-ref);");
+    // The signed tag shares the default neutral border with every other ref;
+    // the green verified badge (not the border) carries the distinction.
+    expect(css).toContain("border-color: var(--ngg-neutral-border-heavy);");
+    // The tag icon keeps its commit-color background: the only
+    // `.gitRef.tag.signed > svg` rule zeroes the right margin so the verified
+    // badge sits flush (it does not override the background). The verified
+    // badge carries the signature-status green fill instead.
     expect(css).toContain(".gitRef.tag.signed > svg {");
+    expect(css).toContain("margin-right: 0;");
+    expect(css).toContain(".gitRefSignedBadge {");
     expect(css).toContain("background-color: var(--ngg-signed-ref);");
   });