@peers-app/peers-ui 0.10.1 → 0.10.4

package/dist/screens/assistants/assistant-details.js

@@ -1,41 +1,11 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AssistantDetails = void 0;
 const peers_sdk_1 = require("@peers-app/peers-sdk");
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const input_1 = require("../../components/input");
 const loading_indicator_1 = require("../../components/loading-indicator");
 const save_button_1 = require("../../components/save-button");
@@ -46,15 +16,13 @@ const assistant_config_1 = require("./assistant-config");
 const assistant_info_1 = require("./assistant-info");
 const assistant_tools_1 = require("./assistant-tools");
 const AssistantDetails = (props) => {
-    const [isPrimaryAssistant] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)(false));
+    const [userAssistantId] = (0, hooks_1.useObservable)(peers_sdk_1.userPrimaryAssistantVar);
+    const [groupAssistantId] = (0, hooks_1.useObservable)(peers_sdk_1.groupPrimaryAssistantVar);
     const assistant = (0, hooks_1.usePromise)((async () => {
         const assistant = await (0, peers_sdk_1.Assistants)().get(props.assistantId);
         if (!assistant) {
             return null;
         }
-        const primaryAssistantId = (await (0, peers_sdk_1.getPrimaryAssistant)()).assistantId
-            || peers_sdk_1.defaultAssistantId;
-        isPrimaryAssistant(assistant.assistantId === primaryAssistantId);
         (0, tabs_state_1.updateActiveTabTitle)(assistant.name || "Assistant");
         return (0, peers_sdk_1.Assistants)().initDoc(assistant);
     }), undefined, [props.assistantId]);
@@ -77,7 +45,10 @@ const AssistantDetails = (props) => {
             react_1.default.createElement("div", { className: "" },
                 react_1.default.createElement(save_button_1.SaveButton, { key: assistant.assistantId, doc: assistant }))),
         react_1.default.createElement(tabs_1.Tabs, { key: assistant.assistantId, tabs: [
-                { name: 'Info', content: react_1.default.createElement(assistant_info_1.AssistantInfo, { assistant: assistant, isPrimaryAssistant: isPrimaryAssistant }) },
+                {
+                    name: 'Info',
+                    content: (react_1.default.createElement(assistant_info_1.AssistantInfo, { assistant: assistant, isPrimaryAssistant: userAssistantId === assistant.assistantId, isGroupPrimaryAssistant: groupAssistantId === assistant.assistantId, onSetPrimary: (checked) => (0, peers_sdk_1.userPrimaryAssistantVar)(checked ? assistant.assistantId : undefined), onSetGroupPrimary: (checked) => (0, peers_sdk_1.groupPrimaryAssistantVar)(checked ? assistant.assistantId : undefined) })),
+                },
                 { name: 'Config', content: react_1.default.createElement(assistant_config_1.AssistantConfig, { assistant: assistant }) },
                 { name: 'Tools', content: react_1.default.createElement(assistant_tools_1.AssistantTools, { assistant: assistant }), },
             ] })));

package/dist/screens/assistants/assistant-info.d.ts

@@ -1,6 +1,11 @@
-import { IAssistant, IDoc, Observable } from "@peers-app/peers-sdk";
+import { IAssistant, IDoc } from "@peers-app/peers-sdk";
 import React from "react";
-export declare const AssistantInfo: (props: {
+interface AssistantInfoProps {
     assistant: IDoc<IAssistant>;
-    isPrimaryAssistant: Observable<boolean>;
-}) => React.JSX.Element;
+    isPrimaryAssistant: boolean;
+    isGroupPrimaryAssistant: boolean;
+    onSetPrimary: (checked: boolean) => void;
+    onSetGroupPrimary: (checked: boolean) => void;
+}
+export declare const AssistantInfo: (props: AssistantInfoProps) => React.JSX.Element;
+export {};

package/dist/screens/assistants/assistant-info.js

@@ -7,20 +7,17 @@ exports.AssistantInfo = void 0;
 const react_1 = __importDefault(require("react"));
 const input_1 = require("../../components/input");
 const editor_inline_1 = require("../../components/markdown-editor/editor-inline");
-const hooks_1 = require("../../hooks");
 const AssistantInfo = (props) => {
-    const { assistant, isPrimaryAssistant } = props;
-    (0, hooks_1.useObservable)(isPrimaryAssistant);
+    const { assistant, isPrimaryAssistant, isGroupPrimaryAssistant, onSetPrimary, onSetGroupPrimary } = props;
     return (react_1.default.createElement("div", null,
         react_1.default.createElement("small", null, "Name:"),
         react_1.default.createElement(input_1.Input, { value: assistant.qs.name, className: "form-control mb-3 p-0 ps-2", placeholder: "Tool name", title: "Tool name" }),
         react_1.default.createElement("div", null,
-            react_1.default.createElement("label", { htmlFor: "isPrimary", className: "form-label small mt-2 me-2" }, "Primary Assistant:"),
-            react_1.default.createElement("input", { type: "checkbox", checked: isPrimaryAssistant(), onChange: (e) => {
-                    const checked = e.target.checked;
-                    isPrimaryAssistant(checked);
-                    assistant.q(assistant.q() + 1);
-                } })),
+            react_1.default.createElement("label", { htmlFor: "isPrimary", className: "form-label small mt-2 me-2" }, "My Default Assistant:"),
+            react_1.default.createElement("input", { type: "checkbox", id: "isPrimary", checked: isPrimaryAssistant, onChange: (e) => onSetPrimary(e.target.checked) })),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement("label", { htmlFor: "isGroupPrimary", className: "form-label small mt-2 me-2" }, "Group Default Assistant:"),
+            react_1.default.createElement("input", { type: "checkbox", id: "isGroupPrimary", checked: isGroupPrimaryAssistant, onChange: (e) => onSetGroupPrimary(e.target.checked) })),
         react_1.default.createElement("div", { className: 'mt-2' },
             react_1.default.createElement("small", null, "Description:"),
             react_1.default.createElement(editor_inline_1.MarkdownEditorInline, { value: assistant.qs.description }))));

package/dist/screens/packages/package-info.js

@@ -72,6 +72,8 @@ const PackageInfo = (props) => {
         for (const v of all) {
             if (!v.version || v.packageVersionId === activeVersionId)
                 continue;
+            if (!(0, peers_sdk_1.doesTagMatch)(active.versionTag, v.versionTag, followVersionTags, deviceTag))
+                continue;
             const [maj, min, pat] = parse(v.version);
             if (maj > aMaj)
                 return 'major';
@@ -88,7 +90,7 @@ const PackageInfo = (props) => {
             }
         }
         return highest || 'uptodate';
-    }, undefined, [activeVersionId, pkg.packageId]);
+    }, undefined, [activeVersionId, pkg.packageId, followVersionTags, deviceTag]);
     const isPinned = versionFollowRange === 'pinned';
     return (react_1.default.createElement("div", null,
         react_1.default.createElement("small", null, "Name:"),
@@ -111,12 +113,6 @@ const PackageInfo = (props) => {
                             peers_sdk_1.rpcServerCalls.openLinkInBrowser(pkg.remoteRepo);
                         } }, "Open Remote"))),
             react_1.default.createElement(input_1.Input, { value: pkg.qs.remoteRepo, className: "form-control mb-3 p-0 ps-2", disabled: true }))),
-        react_1.default.createElement("div", { className: "mt-2" },
-            react_1.default.createElement("hr", null),
-            react_1.default.createElement("small", null,
-                "Description:",
-                react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: `This should be edited in the package's README.md.  It will automatically update when you restart Peers or reload the package.` })),
-            react_1.default.createElement(markdown_with_mentions_1.MarkdownWithMentions, { content: pkg.description || '' })),
         react_1.default.createElement("div", { className: "mt-2" },
             react_1.default.createElement("hr", null),
             react_1.default.createElement("small", null,
@@ -156,6 +152,12 @@ const PackageInfo = (props) => {
                 react_1.default.createElement("div", { className: "d-flex align-items-center gap-2" },
                     react_1.default.createElement("input", { type: "text", className: "form-control form-control-sm p-0 ps-2", placeholder: "e.g. beta", value: deviceTagDraft, onChange: (e) => setDeviceTagDraft(e.target.value) }),
                     deviceTagDraft && (react_1.default.createElement("button", { className: "btn btn-sm btn-outline-secondary", title: "Clear device tag override", onClick: () => setDeviceTagDraft('') },
-                        react_1.default.createElement("i", { className: "bi bi-x-lg" }))))))));
+                        react_1.default.createElement("i", { className: "bi bi-x-lg" })))))),
+        react_1.default.createElement("div", { className: "mt-2" },
+            react_1.default.createElement("hr", null),
+            react_1.default.createElement("small", null,
+                "Description:",
+                react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: `This should be edited in the package's README.md.  It will automatically update when you restart Peers or reload the package.` })),
+            react_1.default.createElement(markdown_with_mentions_1.MarkdownWithMentions, { content: pkg.description || '' }))));
 };
 exports.PackageInfo = PackageInfo;

package/dist/screens/packages/package-list.js

@@ -43,19 +43,54 @@ const tooltip_1 = require("../../components/tooltip");
 const globals_1 = require("../../globals");
 const hooks_1 = require("../../hooks");
 const ui_loader_1 = require("../../ui-router/ui-loader");
-const PackageVersionBadge = ({ activePackageVersionId }) => {
-    const pv = (0, hooks_1.usePromise)(async () => {
+const PackageVersionBadge = ({ activePackageVersionId, packageId, followVersionTags }) => {
+    const data = (0, hooks_1.usePromise)(async () => {
         if (!activePackageVersionId)
             return null;
-        return (0, peers_sdk_1.PackageVersions)().get(activePackageVersionId);
-    }, undefined, [activePackageVersionId]);
-    if (!pv)
+        const all = await (0, peers_sdk_1.PackageVersions)().list({ packageId });
+        const active = all.find(v => v.packageVersionId === activePackageVersionId);
+        if (!active)
+            return null;
+        let newerLevel = null;
+        if (active.version) {
+            const parse = (v) => v.split('.').map(Number);
+            const [aMaj, aMin, aPat] = parse(active.version);
+            for (const v of all) {
+                if (!v.version || v.packageVersionId === activePackageVersionId)
+                    continue;
+                if (!(0, peers_sdk_1.doesTagMatch)(active.versionTag, v.versionTag, followVersionTags, undefined))
+                    continue;
+                const [maj, min, pat] = parse(v.version);
+                if (maj > aMaj) {
+                    newerLevel = 'major';
+                    break;
+                }
+                if (maj === aMaj && min > aMin) {
+                    newerLevel = 'minor';
+                    continue;
+                }
+                if (maj === aMaj && min === aMin && pat > aPat && !newerLevel) {
+                    newerLevel = 'patch';
+                    continue;
+                }
+                if (maj === aMaj && min === aMin && pat === aPat && (v.createdAt || '') > (active.createdAt || '') && !newerLevel) {
+                    newerLevel = 'patch';
+                }
+            }
+        }
+        return { pv: active, newerLevel };
+    }, undefined, [activePackageVersionId, packageId, followVersionTags]);
+    if (!data)
         return null;
+    const { pv, newerLevel } = data;
     return (react_1.default.createElement("span", { className: "ms-2" },
         react_1.default.createElement("small", { className: "text-muted" },
             "v",
             pv.version),
-        pv.versionTag && (react_1.default.createElement("span", { className: `badge ms-1 ${pv.versionTag.startsWith('beta') ? 'text-bg-warning' : 'text-bg-info'}`, style: { fontSize: '0.65em' } }, pv.versionTag))));
+        pv.versionTag && (react_1.default.createElement("span", { className: `badge ms-1 ${pv.versionTag.startsWith('beta') ? 'text-bg-warning' : 'text-bg-info'}`, style: { fontSize: '0.65em' } }, pv.versionTag)),
+        newerLevel ? (react_1.default.createElement("span", { className: `badge ms-1 text-bg-${newerLevel === 'major' ? 'danger' : newerLevel === 'minor' ? 'warning' : 'info'}`, style: { fontSize: '0.65em' } },
+            newerLevel,
+            " update")) : (react_1.default.createElement("span", { className: "badge ms-1 text-bg-success", style: { fontSize: '0.65em' } }, "up to date"))));
 };
 const PackageList = () => {
     const [searchTextObs] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)(''));
@@ -171,7 +206,7 @@ const PackageList = () => {
                             react_1.default.createElement("i", { className: "bi bi-box-fill" }),
                             "\u00A0\u00A0",
                             react_1.default.createElement("a", { href: `#packages/${pkg.packageId}` }, pkg.name),
-                            react_1.default.createElement(PackageVersionBadge, { activePackageVersionId: pkg.activePackageVersionId }),
+                            react_1.default.createElement(PackageVersionBadge, { activePackageVersionId: pkg.activePackageVersionId, packageId: pkg.packageId, followVersionTags: pkg.followVersionTags }),
                             react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: pkg.description, positions: ['bottom', 'top', 'right', 'left'] })));
                     });
                 }, loadingIndicator: react_1.default.createElement("div", { className: "d-flex justify-content-center", style: { height: 200 } },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peers-app/peers-ui",
-  "version": "0.10.1",
+  "version": "0.10.4",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/peers-app/peers-ui.git"
@@ -26,7 +26,7 @@
     "test:coverage": "jest --coverage"
   },
   "peerDependencies": {
-    "@peers-app/peers-sdk": "^0.10.1",
+    "@peers-app/peers-sdk": "^0.10.4",
     "bootstrap": "^5.3.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
@@ -37,7 +37,7 @@
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.27.1",
     "@electron/rebuild": "^3.6.0",
-    "@peers-app/peers-sdk": "0.10.1",
+    "@peers-app/peers-sdk": "0.10.4",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",

package/src/screens/assistants/assistant-details.tsx

@@ -1,10 +1,10 @@
-import { Assistants, defaultAssistantId, getPrimaryAssistant, observable } from "@peers-app/peers-sdk";
-import React, { useState } from 'react';
+import { Assistants, groupPrimaryAssistantVar, userPrimaryAssistantVar } from "@peers-app/peers-sdk";
+import React from 'react';
 import { Input } from '../../components/input';
 import { LoadingIndicator } from '../../components/loading-indicator';
 import { SaveButton } from '../../components/save-button';
 import { Tabs } from '../../components/tabs';
-import { usePromise } from '../../hooks';
+import { useObservable, usePromise } from '../../hooks';
 import { updateActiveTabTitle } from '../../tabs-layout/tabs-state';
 import { AssistantConfig } from './assistant-config';
 import { AssistantInfo } from './assistant-info';
@@ -13,16 +13,14 @@ import { AssistantTools } from './assistant-tools';
 
 export const AssistantDetails = (props: { assistantId: string }) => {
 
-  const [isPrimaryAssistant] = useState(() => observable(false));
+  const [userAssistantId] = useObservable(userPrimaryAssistantVar);
+  const [groupAssistantId] = useObservable(groupPrimaryAssistantVar);
 
   const assistant = usePromise((async () => {
     const assistant = await Assistants().get(props.assistantId);
     if (!assistant) {
       return null;
-    }  
-    const primaryAssistantId = (await getPrimaryAssistant()).assistantId
-      || defaultAssistantId;
-    isPrimaryAssistant(assistant.assistantId === primaryAssistantId);
+    }
     updateActiveTabTitle(assistant.name || "Assistant");
     return Assistants().initDoc(assistant);
   }), undefined, [props.assistantId]);
@@ -66,7 +64,22 @@ export const AssistantDetails = (props: { assistantId: string }) => {
       <Tabs
         key={assistant.assistantId}
         tabs={[
-          { name: 'Info', content: <AssistantInfo assistant={assistant} isPrimaryAssistant={isPrimaryAssistant} /> },
+          {
+            name: 'Info',
+            content: (
+              <AssistantInfo
+                assistant={assistant}
+                isPrimaryAssistant={userAssistantId === assistant.assistantId}
+                isGroupPrimaryAssistant={groupAssistantId === assistant.assistantId}
+                onSetPrimary={(checked) =>
+                  userPrimaryAssistantVar(checked ? assistant.assistantId : undefined)
+                }
+                onSetGroupPrimary={(checked) =>
+                  groupPrimaryAssistantVar(checked ? assistant.assistantId : undefined)
+                }
+              />
+            ),
+          },
           { name: 'Config', content: <AssistantConfig assistant={assistant} /> },
           { name: 'Tools', content: <AssistantTools assistant={assistant} />, },
         ]}

package/src/screens/assistants/assistant-info.tsx

@@ -1,13 +1,18 @@
-import { IAssistant, IDoc, Observable } from "@peers-app/peers-sdk";
+import { IAssistant, IDoc } from "@peers-app/peers-sdk";
 import React from "react";
 import { Input } from "../../components/input";
 import { MarkdownEditorInline } from "../../components/markdown-editor/editor-inline";
-import { useObservable } from "../../hooks";
 
-export const AssistantInfo = (props: { assistant: IDoc<IAssistant>, isPrimaryAssistant: Observable<boolean> }) => {
-  const { assistant, isPrimaryAssistant } = props;
+interface AssistantInfoProps {
+  assistant: IDoc<IAssistant>;
+  isPrimaryAssistant: boolean;
+  isGroupPrimaryAssistant: boolean;
+  onSetPrimary: (checked: boolean) => void;
+  onSetGroupPrimary: (checked: boolean) => void;
+}
 
-  useObservable(isPrimaryAssistant);
+export const AssistantInfo = (props: AssistantInfoProps) => {
+  const { assistant, isPrimaryAssistant, isGroupPrimaryAssistant, onSetPrimary, onSetGroupPrimary } = props;
 
   return (
     <div>
@@ -21,15 +26,22 @@ export const AssistantInfo = (props: { assistant: IDoc<IAssistant>, isPrimaryAss
       />
 
       <div>
-        <label htmlFor="isPrimary" className="form-label small mt-2 me-2">Primary Assistant:</label>
+        <label htmlFor="isPrimary" className="form-label small mt-2 me-2">My Default Assistant:</label>
         <input
           type="checkbox"
-          checked={isPrimaryAssistant()}
-          onChange={(e) => {
-            const checked = (e.target as HTMLInputElement).checked;
-            isPrimaryAssistant(checked);
-            assistant.q(assistant.q() + 1);
-          }}
+          id="isPrimary"
+          checked={isPrimaryAssistant}
+          onChange={(e) => onSetPrimary((e.target as HTMLInputElement).checked)}
+        />
+      </div>
+
+      <div>
+        <label htmlFor="isGroupPrimary" className="form-label small mt-2 me-2">Group Default Assistant:</label>
+        <input
+          type="checkbox"
+          id="isGroupPrimary"
+          checked={isGroupPrimaryAssistant}
+          onChange={(e) => onSetGroupPrimary((e.target as HTMLInputElement).checked)}
         />
       </div>
 
@@ -42,4 +54,4 @@ export const AssistantInfo = (props: { assistant: IDoc<IAssistant>, isPrimaryAss
 
     </div>
   );
-};
+};

package/src/screens/packages/package-info.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { rpcServerCalls, IDoc, IPackage, IPackageVersion, PackageVersions, packagesRootDir, groupDeviceVar } from "@peers-app/peers-sdk";
+import { rpcServerCalls, IDoc, IPackage, IPackageVersion, PackageVersions, packagesRootDir, groupDeviceVar, doesTagMatch } from "@peers-app/peers-sdk";
 import { MarkdownWithMentions } from "../../components/markdown-with-mentions";
 import { Tooltip } from "../../components/tooltip";
 import { Input } from "../../components/input";
@@ -70,6 +70,7 @@ export const PackageInfo = (props: {
     let highest: 'major' | 'minor' | 'patch' | null = null;
     for (const v of all) {
       if (!v.version || v.packageVersionId === activeVersionId) continue;
+      if (!doesTagMatch(active.versionTag, v.versionTag, followVersionTags, deviceTag)) continue;
       const [maj, min, pat] = parse(v.version);
       if (maj > aMaj) return 'major';
       if (maj === aMaj && min > aMin) { highest = 'minor'; continue; }
@@ -77,7 +78,7 @@ export const PackageInfo = (props: {
       if (maj === aMaj && min === aMin && pat === aPat && (v.createdAt || '') > (active.createdAt || '') && !highest) { highest = 'patch'; }
     }
     return highest || 'uptodate';
-  }, undefined, [activeVersionId, pkg.packageId]);
+  }, undefined, [activeVersionId, pkg.packageId, followVersionTags, deviceTag]);
 
   const isPinned = versionFollowRange === 'pinned';
 
@@ -134,17 +135,6 @@ export const PackageInfo = (props: {
         </div>
       )}
 
-      <div className="mt-2">
-        <hr />
-        <small>
-          Description:
-          <Tooltip markdownContent={`This should be edited in the package's README.md.  It will automatically update when you restart Peers or reload the package.`} />
-        </small>
-        <MarkdownWithMentions
-          content={pkg.description || ''}
-        />
-      </div>
-
       <div className="mt-2">
         <hr />
         <small>
@@ -231,6 +221,17 @@ export const PackageInfo = (props: {
         </div>
       </div>
 
+      <div className="mt-2">
+        <hr />
+        <small>
+          Description:
+          <Tooltip markdownContent={`This should be edited in the package's README.md.  It will automatically update when you restart Peers or reload the package.`} />
+        </small>
+        <MarkdownWithMentions
+          content={pkg.description || ''}
+        />
+      </div>
+
     </div>
   )
 }

package/src/screens/packages/package-list.tsx

@@ -1,4 +1,4 @@
-import { ICursorIterable, IPackage, observable, Packages, PackageVersions, packagesRootDir, rpcServerCalls } from "@peers-app/peers-sdk";
+import { ICursorIterable, IPackage, observable, Packages, PackageVersions, packagesRootDir, rpcServerCalls, doesTagMatch } from "@peers-app/peers-sdk";
 import React, { useEffect, useState } from 'react';
 import { Input } from "../../components/input";
 import { LazyList } from "../../components/lazy-list";
@@ -8,13 +8,32 @@ import { isDesktop, mainContentPath } from '../../globals';
 import { useObservable, useObservableState, usePromise } from "../../hooks";
 import { registerInternalPeersUI } from "../../ui-router/ui-loader";
 
-const PackageVersionBadge = ({ activePackageVersionId }: { activePackageVersionId?: string }) => {
-  const pv = usePromise(async () => {
+const PackageVersionBadge = ({ activePackageVersionId, packageId, followVersionTags }: { activePackageVersionId?: string, packageId: string, followVersionTags?: string }) => {
+  const data = usePromise(async () => {
     if (!activePackageVersionId) return null;
-    return PackageVersions().get(activePackageVersionId);
-  }, undefined, [activePackageVersionId]);
+    const all = await PackageVersions().list({ packageId });
+    const active = all.find(v => v.packageVersionId === activePackageVersionId);
+    if (!active) return null;
+
+    let newerLevel: 'major' | 'minor' | 'patch' | null = null;
+    if (active.version) {
+      const parse = (v: string) => v.split('.').map(Number);
+      const [aMaj, aMin, aPat] = parse(active.version);
+      for (const v of all) {
+        if (!v.version || v.packageVersionId === activePackageVersionId) continue;
+        if (!doesTagMatch(active.versionTag, v.versionTag, followVersionTags, undefined)) continue;
+        const [maj, min, pat] = parse(v.version);
+        if (maj > aMaj) { newerLevel = 'major'; break; }
+        if (maj === aMaj && min > aMin) { newerLevel = 'minor'; continue; }
+        if (maj === aMaj && min === aMin && pat > aPat && !newerLevel) { newerLevel = 'patch'; continue; }
+        if (maj === aMaj && min === aMin && pat === aPat && (v.createdAt || '') > (active.createdAt || '') && !newerLevel) { newerLevel = 'patch'; }
+      }
+    }
+    return { pv: active, newerLevel };
+  }, undefined, [activePackageVersionId, packageId, followVersionTags]);
 
-  if (!pv) return null;
+  if (!data) return null;
+  const { pv, newerLevel } = data;
 
   return (
     <span className="ms-2">
@@ -26,6 +45,15 @@ const PackageVersionBadge = ({ activePackageVersionId }: { activePackageVersionI
           {pv.versionTag}
         </span>
       )}
+      {newerLevel ? (
+        <span className={`badge ms-1 text-bg-${newerLevel === 'major' ? 'danger' : newerLevel === 'minor' ? 'warning' : 'info'}`}
+          style={{ fontSize: '0.65em' }}
+        >
+          {newerLevel} update
+        </span>
+      ) : (
+        <span className="badge ms-1 text-bg-success" style={{ fontSize: '0.65em' }}>up to date</span>
+      )}
     </span>
   );
 };
@@ -168,7 +196,7 @@ export const PackageList = () => {
                   <a href={`#packages/${pkg.packageId}`}>
                     {pkg.name}
                   </a>
-                  <PackageVersionBadge activePackageVersionId={pkg.activePackageVersionId} />
+                  <PackageVersionBadge activePackageVersionId={pkg.activePackageVersionId} packageId={pkg.packageId} followVersionTags={pkg.followVersionTags} />
                   <Tooltip
                     markdownContent={pkg.description}
                     positions={['bottom', 'top', 'right', 'left']}