diff --git a/ui-design.pen b/ui-design.pen
index 66dcc244..554dc0a8 100644
--- a/ui-design.pen
+++ b/ui-design.pen
@@ -16885,6 +16885,735 @@
           ]
         }
       ]
+    },
+    {
+      "type": "frame",
+      "id": "mni01",
+      "x": 0,
+      "y": 0,
+      "name": "Modified Note Indicator — NoteList States",
+      "width": 340,
+      "height": "fit_content(600)",
+      "fill": "$--card",
+      "layout": "vertical",
+      "children": [
+        {
+          "type": "text",
+          "id": "mni01t",
+          "fill": "$--muted-foreground",
+          "content": "NoteList — Modified vs Clean",
+          "fontFamily": "Inter",
+          "fontSize": 10,
+          "fontWeight": "600",
+          "textTransform": "uppercase",
+          "letterSpacing": 1,
+          "width": "fill_container",
+          "padding": [
+            8,
+            16
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "mni02",
+          "name": "Note Item — Modified",
+          "width": "fill_container",
+          "stroke": {
+            "align": "inside",
+            "thickness": {
+              "bottom": 1
+            },
+            "fill": "$--border"
+          },
+          "layout": "vertical",
+          "gap": 4,
+          "padding": [
+            14,
+            16
+          ],
+          "children": [
+            {
+              "type": "frame",
+              "id": "mni02r",
+              "name": "titleRow",
+              "width": "fill_container",
+              "justifyContent": "space_between",
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "frame",
+                  "id": "mni02tg",
+                  "gap": 6,
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "ellipse",
+                      "id": "mni02dot",
+                      "name": "Modified Indicator",
+                      "width": 6,
+                      "height": 6,
+                      "fill": "$--accent-orange"
+                    },
+                    {
+                      "type": "text",
+                      "id": "mni02ti",
+                      "fill": "$--foreground",
+                      "content": "Build Laputa App",
+                      "fontFamily": "Inter",
+                      "fontSize": 13,
+                      "fontWeight": "500"
+                    }
+                  ]
+                },
+                {
+                  "type": "icon_font",
+                  "id": "mni02ic",
+                  "width": 14,
+                  "height": 14,
+                  "iconFontName": "wrench",
+                  "iconFontFamily": "phosphor",
+                  "fill": "$--accent-red"
+                }
+              ]
+            },
+            {
+              "type": "text",
+              "id": "mni02sn",
+              "fill": "$--muted-foreground",
+              "textGrowth": "fixed-width",
+              "width": "fill_container",
+              "content": "Personal knowledge management app built with Tauri + React.",
+              "lineHeight": 1.5,
+              "fontFamily": "Inter",
+              "fontSize": 12,
+              "fontWeight": "normal"
+            },
+            {
+              "type": "text",
+              "id": "mni02tm",
+              "fill": "$--muted-foreground",
+              "content": "2m ago",
+              "fontFamily": "Inter",
+              "fontSize": 11,
+              "fontWeight": "normal"
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "mni03",
+          "name": "Note Item — Clean (no indicator)",
+          "width": "fill_container",
+          "stroke": {
+            "align": "inside",
+            "thickness": {
+              "bottom": 1
+            },
+            "fill": "$--border"
+          },
+          "layout": "vertical",
+          "gap": 4,
+          "padding": [
+            14,
+            16
+          ],
+          "children": [
+            {
+              "type": "frame",
+              "id": "mni03r",
+              "name": "titleRow",
+              "width": "fill_container",
+              "justifyContent": "space_between",
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "text",
+                  "id": "mni03ti",
+                  "fill": "$--foreground",
+                  "content": "Facebook Ads Strategy",
+                  "fontFamily": "Inter",
+                  "fontSize": 13,
+                  "fontWeight": "500"
+                },
+                {
+                  "type": "icon_font",
+                  "id": "mni03ic",
+                  "width": 14,
+                  "height": 14,
+                  "iconFontName": "file-text",
+                  "iconFontFamily": "phosphor",
+                  "fill": "$--muted-foreground"
+                }
+              ]
+            },
+            {
+              "type": "text",
+              "id": "mni03sn",
+              "fill": "$--muted-foreground",
+              "textGrowth": "fixed-width",
+              "width": "fill_container",
+              "content": "Lookalike audiences convert 3x better than cold.",
+              "lineHeight": 1.5,
+              "fontFamily": "Inter",
+              "fontSize": 12,
+              "fontWeight": "normal"
+            },
+            {
+              "type": "text",
+              "id": "mni03tm",
+              "fill": "$--muted-foreground",
+              "content": "1h ago",
+              "fontFamily": "Inter",
+              "fontSize": 11,
+              "fontWeight": "normal"
+            }
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "mni04",
+          "name": "Note Item — Added (new file)",
+          "width": "fill_container",
+          "stroke": {
+            "align": "inside",
+            "thickness": {
+              "bottom": 1
+            },
+            "fill": "$--border"
+          },
+          "layout": "vertical",
+          "gap": 4,
+          "padding": [
+            14,
+            16
+          ],
+          "children": [
+            {
+              "type": "frame",
+              "id": "mni04r",
+              "name": "titleRow",
+              "width": "fill_container",
+              "justifyContent": "space_between",
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "frame",
+                  "id": "mni04tg",
+                  "gap": 6,
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "ellipse",
+                      "id": "mni04dot",
+                      "name": "Modified Indicator",
+                      "width": 6,
+                      "height": 6,
+                      "fill": "$--accent-orange"
+                    },
+                    {
+                      "type": "text",
+                      "id": "mni04ti",
+                      "fill": "$--foreground",
+                      "content": "AI Agents Primer",
+                      "fontFamily": "Inter",
+                      "fontSize": 13,
+                      "fontWeight": "500"
+                    }
+                  ]
+                },
+                {
+                  "type": "icon_font",
+                  "id": "mni04ic",
+                  "width": 14,
+                  "height": 14,
+                  "iconFontName": "file-text",
+                  "iconFontFamily": "phosphor",
+                  "fill": "$--muted-foreground"
+                }
+              ]
+            },
+            {
+              "type": "text",
+              "id": "mni04sn",
+              "fill": "$--muted-foreground",
+              "textGrowth": "fixed-width",
+              "width": "fill_container",
+              "content": "How autonomous agents are changing software development.",
+              "lineHeight": 1.5,
+              "fontFamily": "Inter",
+              "fontSize": 12,
+              "fontWeight": "normal"
+            },
+            {
+              "type": "text",
+              "id": "mni04tm",
+              "fill": "$--muted-foreground",
+              "content": "5m ago",
+              "fontFamily": "Inter",
+              "fontSize": 11,
+              "fontWeight": "normal"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "type": "frame",
+      "id": "mni10",
+      "x": 380,
+      "y": 0,
+      "name": "Modified Note Indicator — TabBar States",
+      "width": 800,
+      "height": 120,
+      "fill": "$--sidebar",
+      "layout": "vertical",
+      "children": [
+        {
+          "type": "text",
+          "id": "mni10t",
+          "fill": "$--muted-foreground",
+          "content": "TabBar — Modified Dot on Dirty Tabs",
+          "fontFamily": "Inter",
+          "fontSize": 10,
+          "fontWeight": "600",
+          "textTransform": "uppercase",
+          "letterSpacing": 1,
+          "padding": [
+            8,
+            16
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "mni11",
+          "name": "Tab Bar with Modified Indicators",
+          "width": "fill_container",
+          "height": 45,
+          "fill": "$--sidebar",
+          "stroke": {
+            "align": "inside",
+            "thickness": {
+              "bottom": 1
+            },
+            "fill": "$--sidebar-border"
+          },
+          "alignItems": "center",
+          "children": [
+            {
+              "type": "frame",
+              "id": "mni11a",
+              "name": "Tab Active — Modified",
+              "height": "fill_container",
+              "fill": "$--background",
+              "stroke": {
+                "align": "inside",
+                "thickness": {
+                  "right": 1
+                },
+                "fill": "$--border"
+              },
+              "gap": 6,
+              "padding": [
+                0,
+                14
+              ],
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "text",
+                  "id": "mni11at",
+                  "fill": "$--foreground",
+                  "content": "Build Laputa App",
+                  "fontFamily": "Inter",
+                  "fontSize": 12,
+                  "fontWeight": "500"
+                },
+                {
+                  "type": "ellipse",
+                  "id": "mni11adot",
+                  "name": "Tab Modified Dot",
+                  "width": 6,
+                  "height": 6,
+                  "fill": "$--accent-orange"
+                },
+                {
+                  "type": "icon_font",
+                  "id": "mni11ax",
+                  "width": 14,
+                  "height": 14,
+                  "iconFontName": "x",
+                  "iconFontFamily": "lucide",
+                  "fill": "$--muted-foreground"
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "mni11b",
+              "name": "Tab Inactive — Clean",
+              "height": "fill_container",
+              "stroke": {
+                "align": "inside",
+                "thickness": {
+                  "right": 1,
+                  "bottom": 1
+                },
+                "fill": "$--sidebar-border"
+              },
+              "gap": 6,
+              "padding": [
+                0,
+                14
+              ],
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "text",
+                  "id": "mni11bt",
+                  "fill": "$--muted-foreground",
+                  "content": "Facebook Ads Strategy",
+                  "fontFamily": "Inter",
+                  "fontSize": 12,
+                  "fontWeight": "normal"
+                },
+                {
+                  "type": "icon_font",
+                  "id": "mni11bx",
+                  "opacity": 0,
+                  "width": 14,
+                  "height": 14,
+                  "iconFontName": "x",
+                  "iconFontFamily": "lucide",
+                  "fill": "$--muted-foreground"
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "mni11c",
+              "name": "Tab Inactive — Modified",
+              "height": "fill_container",
+              "stroke": {
+                "align": "inside",
+                "thickness": {
+                  "right": 1,
+                  "bottom": 1
+                },
+                "fill": "$--sidebar-border"
+              },
+              "gap": 6,
+              "padding": [
+                0,
+                14
+              ],
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "text",
+                  "id": "mni11ct",
+                  "fill": "$--muted-foreground",
+                  "content": "AI Agents Primer",
+                  "fontFamily": "Inter",
+                  "fontSize": 12,
+                  "fontWeight": "normal"
+                },
+                {
+                  "type": "ellipse",
+                  "id": "mni11cdot",
+                  "name": "Tab Modified Dot",
+                  "width": 6,
+                  "height": 6,
+                  "fill": "$--accent-orange"
+                },
+                {
+                  "type": "icon_font",
+                  "id": "mni11cx",
+                  "opacity": 0,
+                  "width": 14,
+                  "height": 14,
+                  "iconFontName": "x",
+                  "iconFontFamily": "lucide",
+                  "fill": "$--muted-foreground"
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "mni11sp",
+              "name": "tabSpacer",
+              "width": "fill_container",
+              "height": "fill_container",
+              "stroke": {
+                "align": "inside",
+                "thickness": {
+                  "bottom": 1
+                },
+                "fill": "$--border"
+              }
+            },
+            {
+              "type": "frame",
+              "id": "mni11ctrl",
+              "name": "tabControls",
+              "height": "fill_container",
+              "stroke": {
+                "align": "inside",
+                "thickness": {
+                  "bottom": 1,
+                  "left": 1
+                },
+                "fill": "$--border"
+              },
+              "gap": 12,
+              "padding": [
+                0,
+                12
+              ],
+              "justifyContent": "space_around",
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "icon_font",
+                  "id": "mni11plus",
+                  "width": 16,
+                  "height": 16,
+                  "iconFontName": "plus",
+                  "iconFontFamily": "phosphor",
+                  "fill": "$--muted-foreground"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "type": "frame",
+      "id": "mni20",
+      "x": 0,
+      "y": 400,
+      "name": "Modified Note Indicator — StatusBar Pending Count",
+      "width": 800,
+      "height": 80,
+      "fill": "$--background",
+      "layout": "vertical",
+      "children": [
+        {
+          "type": "text",
+          "id": "mni20t",
+          "fill": "$--muted-foreground",
+          "content": "StatusBar — Pending Changes Counter",
+          "fontFamily": "Inter",
+          "fontSize": 10,
+          "fontWeight": "600",
+          "textTransform": "uppercase",
+          "letterSpacing": 1,
+          "padding": [
+            8,
+            16
+          ]
+        },
+        {
+          "type": "frame",
+          "id": "mni21",
+          "name": "StatusBar with Pending Count",
+          "width": "fill_container",
+          "height": 30,
+          "fill": "$--sidebar",
+          "stroke": {
+            "align": "inside",
+            "thickness": {
+              "top": 1
+            },
+            "fill": "$--border"
+          },
+          "padding": [
+            0,
+            8
+          ],
+          "justifyContent": "space_between",
+          "alignItems": "center",
+          "children": [
+            {
+              "type": "frame",
+              "id": "mni21l",
+              "name": "left",
+              "gap": 12,
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "frame",
+                  "id": "mni21v",
+                  "gap": 4,
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "icon_font",
+                      "id": "mni21fi",
+                      "width": 13,
+                      "height": 13,
+                      "iconFontName": "folder-open",
+                      "iconFontFamily": "lucide",
+                      "fill": "$--muted-foreground"
+                    },
+                    {
+                      "type": "text",
+                      "id": "mni21fl",
+                      "fill": "$--muted-foreground",
+                      "content": "Demo v2",
+                      "fontFamily": "Inter",
+                      "fontSize": 11
+                    }
+                  ]
+                },
+                {
+                  "type": "text",
+                  "id": "mni21s1",
+                  "fill": "$--border",
+                  "content": "|",
+                  "fontFamily": "Inter",
+                  "fontSize": 11
+                },
+                {
+                  "type": "frame",
+                  "id": "mni21br",
+                  "gap": 4,
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "icon_font",
+                      "id": "mni21gi",
+                      "width": 13,
+                      "height": 13,
+                      "iconFontName": "git-branch",
+                      "iconFontFamily": "lucide",
+                      "fill": "$--muted-foreground"
+                    },
+                    {
+                      "type": "text",
+                      "id": "mni21gl",
+                      "fill": "$--muted-foreground",
+                      "content": "main",
+                      "fontFamily": "Inter",
+                      "fontSize": 11
+                    }
+                  ]
+                },
+                {
+                  "type": "text",
+                  "id": "mni21s2",
+                  "fill": "$--border",
+                  "content": "|",
+                  "fontFamily": "Inter",
+                  "fontSize": 11
+                },
+                {
+                  "type": "frame",
+                  "id": "mni21sy",
+                  "gap": 4,
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "icon_font",
+                      "id": "mni21ri",
+                      "width": 13,
+                      "height": 13,
+                      "iconFontName": "refresh-cw",
+                      "iconFontFamily": "lucide",
+                      "fill": "$--accent-green"
+                    },
+                    {
+                      "type": "text",
+                      "id": "mni21rl",
+                      "fill": "$--muted-foreground",
+                      "content": "Synced 2m ago",
+                      "fontFamily": "Inter",
+                      "fontSize": 11
+                    }
+                  ]
+                },
+                {
+                  "type": "text",
+                  "id": "mni21s3",
+                  "fill": "$--border",
+                  "content": "|",
+                  "fontFamily": "Inter",
+                  "fontSize": 11
+                },
+                {
+                  "type": "frame",
+                  "id": "mni21pd",
+                  "name": "Pending Count",
+                  "gap": 4,
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "icon_font",
+                      "id": "mni21pi",
+                      "width": 13,
+                      "height": 13,
+                      "iconFontName": "circle-dot",
+                      "iconFontFamily": "lucide",
+                      "fill": "$--accent-orange"
+                    },
+                    {
+                      "type": "text",
+                      "id": "mni21pl",
+                      "fill": "$--muted-foreground",
+                      "content": "3 pending",
+                      "fontFamily": "Inter",
+                      "fontSize": 11
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "id": "mni21r",
+              "name": "right",
+              "gap": 12,
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "frame",
+                  "id": "mni21nc",
+                  "gap": 4,
+                  "alignItems": "center",
+                  "children": [
+                    {
+                      "type": "icon_font",
+                      "id": "mni21ni",
+                      "width": 13,
+                      "height": 13,
+                      "iconFontName": "file-text",
+                      "iconFontFamily": "lucide",
+                      "fill": "$--muted-foreground"
+                    },
+                    {
+                      "type": "text",
+                      "id": "mni21nl",
+                      "fill": "$--muted-foreground",
+                      "content": "9,200 notes",
+                      "fontFamily": "Inter",
+                      "fontSize": 11
+                    }
+                  ]
+                },
+                {
+                  "type": "icon_font",
+                  "id": "mni21set",
+                  "width": 14,
+                  "height": 14,
+                  "iconFontName": "settings",
+                  "iconFontFamily": "lucide",
+                  "fill": "$--muted-foreground"
+                }
+              ]
+            }
+          ]
+        }
+      ]
     }
   ],
   "themes": {