pre-migration prepped

.env.devdata

@@ -0,0 +1 @@
+VITE_TASGRID_DATA_MODE=dev

.env.production

@@ -0,0 +1,2 @@
+VITE_TASGRID_ENABLE_PROD_MIGRATION=true
+VITE_TASGRID_MIGRATION_ADMIN_EMAILS=tcardoza@cardoza.construction

package.json

@@ -5,8 +5,11 @@
   "type": "module",
   "scripts": {
     "dev": "vite --host 0.0.0.0 --port 4001",
+    "dev:devdata": "vite --host 0.0.0.0 --port 4001 --mode devdata",
     "build": "tsc -b && vite build",
+    "build:devdata": "tsc -b && vite build --mode devdata",
     "serve": "vite preview --host 0.0.0.0 --port 4000",
+    "serve:devdata": "vite preview --host 0.0.0.0 --port 4002 --mode devdata",
     "---PM2 COMMANDS---": "------------------",
     "status": "pm2 status",
     "logs": "pm2 logs tasgrid",

src/components/EmbedLayout.tsx

@@ -7,7 +7,12 @@ interface EmbedLayoutProps {
 export const EmbedLayout: Component<EmbedLayoutProps> = (props) => {
     return (
         <div class="flex h-screen w-full min-w-0 bg-background overflow-hidden relative font-sans antialiased text-foreground">
-            <main class="flex-1 min-w-0 overflow-y-auto overflow-x-hidden relative scroll-smooth bg-background">
+            <main
+                class="flex-1 min-w-0 overflow-y-auto overflow-x-hidden relative scroll-smooth bg-background"
+                style={{
+                    "padding-bottom": "calc(8px + env(safe-area-inset-bottom, 0px))"
+                }}
+            >
                 <div class="w-full h-full mx-auto p-4">
                     {props.children}
                 </div>

src/components/Layout.tsx

@@ -196,10 +196,15 @@ export const Layout: Component<LayoutProps> = (props) => {
                 </Show>
 
                 {/* Main Content Area */}
-                <main class={cn(
-                    "flex-1 min-w-0 overflow-y-auto overflow-x-hidden relative scroll-smooth",
-                    !store.isNotepadMode ? "pb-32 sm:pb-6" : ""
-                )}>
+                <main
+                    class={cn(
+                        "flex-1 min-w-0 overflow-y-auto overflow-x-hidden relative scroll-smooth",
+                        !store.isNotepadMode ? "pb-32 sm:pb-6" : ""
+                    )}
+                    style={{
+                        "padding-bottom": "calc(8px + env(safe-area-inset-bottom, 0px))"
+                    }}
+                >
                     <div class={cn(
                         "w-full h-full mx-auto",
                         !store.isNotepadMode ? "max-w-screen-2xl px-4 sm:px-8 lg:px-12 pt-16 sm:pt-20 pb-8 space-y-6 sm:space-y-8" : "max-w-screen-2xl md:px-8 lg:px-12 md:pt-20 md:pb-8 pt-14"

src/components/Navigation.tsx

@@ -3,9 +3,9 @@ import { LayoutDashboard, ListTodo, Settings, Clock, ArrowUpCircle, PanelLeftClo
 import { cn } from "@/lib/utils";
 import { Button } from "./ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { store, currentTaskContext, setCurrentTaskContext } from "@/store";
+import { store, currentTaskContext, setCurrentTaskContext, loadTasksForOwner } from "@/store";
 import { pb } from "@/lib/pocketbase";
-import { createResource, createSignal, createEffect } from "solid-js";
+import { createSignal, createEffect } from "solid-js";
 
 interface NavItem {
     icon: any;
@@ -121,7 +121,6 @@ export const ContextSwitcher: Component<{
     onOpenChange?: (open: boolean) => void;
     isMobile?: boolean;
 }> = (props) => {
-    const currentUserId = pb.authStore.model?.id;
     const [open, setOpen] = createSignal(false);
 
     // Sync with parent if needed
@@ -136,41 +135,42 @@ export const ContextSwitcher: Component<{
         }
     });
 
-    const [oversightUsers] = createResource(
-        () => [...new Set(store.shareRules.filter(r => r.targetUserId === currentUserId && r.type === 'all').map(r => r.ownerId))],
-        async (ownerIds) => {
-            if (ownerIds.length === 0) return [];
-            try {
-                // Fetch user names for these IDs in a single query
-                const filter = ownerIds.map(id => `id="${id}"`).join(' || ');
-                const users = await pb.collection('users').getFullList({
-                    filter,
-                    fields: 'id,name,email',
-                    requestKey: null // Disable auto-cancellation
-                });
-                return users.map(u => ({ id: u.id, name: u.name || u.email }));
-            } catch (e: any) {
-                if (e.isAbort) return []; // Ignore explicit aborts
-                console.error("Failed to load oversight users", e);
-                return [];
-            }
-        }
-    );
-
     const ctx = currentTaskContext; // Accessor
+    const personalContext = () =>
+        store.contexts.find(context =>
+            !context.deletedAt &&
+            context.kind === "user" &&
+            context.targetUserId === pb.authStore.model?.id
+        ) || null;
+    const isPersonalContext = () => {
+        const current = ctx();
+        const personal = personalContext();
+        return current === 'mine' || (
+            typeof current === "object" &&
+            "bucketId" in current &&
+            !!personal &&
+            current.bucketId === personal.id
+        );
+    };
 
     const label = () => {
         const c = ctx();
-        return c === 'mine' ? "My Bucket" : c.name;
+        return isPersonalContext() ? "My Bucket" : (c === 'mine' ? "My Bucket" : c.name);
     };
 
     const handleSwitch = (id: string, name: string, type: 'mine' | 'user' | 'bucket' = 'mine') => {
         if (type === 'mine') {
-            setCurrentTaskContext('mine');
+            const personal = personalContext();
+            if (personal) {
+                setCurrentTaskContext({ bucketId: personal.id, name: "My Bucket", isPersonal: true });
+            } else {
+                setCurrentTaskContext('mine');
+            }
         } else if (type === 'bucket') {
             setCurrentTaskContext({ bucketId: id, name });
         } else {
             setCurrentTaskContext({ userId: id, name });
+            void loadTasksForOwner(id);
         }
 
         // Close popover
@@ -182,7 +182,7 @@ export const ContextSwitcher: Component<{
         }
     };
 
-    const hasContexts = () => (oversightUsers() && oversightUsers()!.length > 0) || store.subscribedBuckets.length > 0;
+    const hasContexts = () => !!personalContext() || store.subscribedBuckets.length > 0 || store.supervisedContexts.length > 0;
 
     return (
         <Show when={hasContexts()}>
@@ -197,9 +197,9 @@ export const ContextSwitcher: Component<{
                         <Show when={props.isMobile} fallback={
                             <>
                                 <div class="flex items-center gap-3 min-w-0">
-                                    <div class={cn(
-                                        "w-4 h-4 rounded-full flex items-center justify-center shrink-0",
-                                        ctx() === 'mine' ? "bg-primary/20 text-primary" : "bg-orange-500/20 text-orange-500"
+                                        <div class={cn(
+                                            "w-4 h-4 rounded-full flex items-center justify-center shrink-0",
+                                        isPersonalContext() ? "bg-primary/20 text-primary" : "bg-orange-500/20 text-orange-500"
                                     )}>
                                         <div class="w-2 h-2 rounded-full bg-current" />
                                     </div>
@@ -209,8 +209,8 @@ export const ContextSwitcher: Component<{
                             </>
                         }>
                             <div class="relative">
-                                <Users size={18} class={cn("transition-transform duration-300", open() && "scale-110", ctx() !== 'mine' && "text-orange-500")} />
-                                {ctx() !== 'mine' && (
+                                <Users size={18} class={cn("transition-transform duration-300", open() && "scale-110", !isPersonalContext() && "text-orange-500")} />
+                                {!isPersonalContext() && (
                                     <div class="absolute -top-1 -right-1 w-2 h-2 rounded-full bg-orange-500 border border-background" />
                                 )}
                             </div>
@@ -223,7 +223,7 @@ export const ContextSwitcher: Component<{
                             onClick={() => handleSwitch('mine', '', 'mine')}
                             class={cn(
                                 "w-full flex items-center gap-2 p-2 rounded-md text-sm transition-colors",
-                                ctx() === 'mine' ? "bg-primary/10 text-primary font-semibold" : "hover:bg-muted text-foreground"
+                                isPersonalContext() ? "bg-primary/10 text-primary font-semibold" : "hover:bg-muted text-foreground"
                             )}
                         >
                             <div class="w-4 h-4 rounded-full bg-primary/20 flex items-center justify-center">
@@ -260,31 +260,32 @@ export const ContextSwitcher: Component<{
                             </For>
                         </Show>
 
-                        <Show when={oversightUsers() && oversightUsers()!.length > 0}>
+                        <Show when={store.supervisedContexts.length > 0}>
                             <div class="py-1">
                                 <div class="h-px bg-border/50" />
                             </div>
                             <div class="px-2 py-1 text-[0.625rem] font-bold uppercase text-muted-foreground tracking-wider flex items-center gap-2">
-                                <span>Shared User Buckets</span>
-                                <span class="ml-auto bg-muted px-1.5 rounded text-[0.5625rem]">{oversightUsers()?.length}</span>
+                                <span>Supervised Contexts</span>
+                                <span class="ml-auto bg-muted px-1.5 rounded text-[0.5625rem]">{store.supervisedContexts.length}</span>
                             </div>
-                            <For each={oversightUsers()}>
-                                {(user) => (
+                            <For each={store.supervisedContexts}>
+                                {(supervised) => (
                                     <button
-                                        onClick={() => handleSwitch(user.id, user.name, 'user')}
+                                        onClick={() => handleSwitch(supervised.ownerUserId, supervised.ownerName, 'user')}
                                         class={cn(
                                             "w-full flex items-center gap-2 p-2 rounded-md text-sm transition-colors",
-                                            (ctx() as any).userId === user.id ? "bg-orange-500/10 text-orange-600 font-semibold" : "hover:bg-muted text-foreground"
+                                            (ctx() as any).userId === supervised.ownerUserId ? "bg-orange-500/10 text-orange-600 font-semibold" : "hover:bg-muted text-foreground"
                                         )}
                                     >
                                         <div class="w-4 h-4 rounded-full bg-orange-500/20 flex items-center justify-center">
                                             <div class="w-2 h-2 rounded-full bg-orange-500" />
                                         </div>
-                                        <span class="truncate">{user.name}</span>
+                                        <span class="truncate">{supervised.ownerName}</span>
                                     </button>
                                 )}
                             </For>
                         </Show>
+
                     </div>
                 </PopoverContent>
             </Popover>

src/components/NotesSidebar.tsx

@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { NOTES_COLLECTION } from "@/lib/constants";
 import { FilterBar } from "./FilterBar";
+import { normalizeNoteKey } from "@/lib/tags";
 
 export const NotesSidebar: Component<{
     selectedNoteId: string | null;
@@ -170,12 +171,15 @@ export const NotesSidebar: Component<{
     const handleCreateNote = async () => {
         if (!currentUserId) return;
         try {
+            const keyBase = normalizeNoteKey("new-note");
             const result = await pb.collection(NOTES_COLLECTION).create({
                 title: "New Note",
+                key: `${keyBase}-${Date.now()}`,
                 content: "",
                 tags: [],
                 isPrivate: false,
                 user: currentUserId,
+                tasks: []
             });
             props.setSelectedNoteId(result.id);
         } catch (e) {

src/components/QuickEntryForm.tsx

@@ -224,7 +224,7 @@ export const QuickEntryForm: Component<QuickEntryFormProps> = (props) => {
             }
         } else if (typeof ctx === 'object') {
             if ('bucketId' in ctx) {
-                const bucketName = ctx.name;
+                const bucketName = store.contexts.find(context => context.id === ctx.bucketId)?.displayName || ctx.name;
                 if (bucketName) {
                     const tag = `@${bucketName}`;
                     if (!finalTags.includes(tag)) finalTags.push(tag);

src/components/TagPicker.tsx

@@ -4,6 +4,8 @@ import { useTheme } from "./ThemeProvider";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Button } from "@/components/ui/button";
 import { Tag, Plus } from "lucide-solid";
+import { toast } from "solid-sonner";
+import { buildNoteTag, buildShareTag, normalizeContextKey, normalizeNoteKey } from "@/lib/tags";
 
 interface TagPickerProps {
     selectedTags: string[];
@@ -24,11 +26,11 @@ export const TagPicker: Component<TagPickerProps> = (props) => {
 
     const allTagNames = () => {
         const definedTags = store.tagDefinitions.filter(d => !d.name.endsWith("_favorite__")).map(d => d.name);
-        const bucketTags = store.buckets.map(b => `@${b.name}`);
+        const contextTags = store.contexts.filter(c => !c.deletedAt).map(c => buildShareTag(c.displayName));
         const noteTags = store.notes
             .filter(n => !(n.tags || []).some(t => t.startsWith("child-of-")))
-            .map(n => `#${n.title}`);
-        return [...new Set([...definedTags, ...bucketTags, ...noteTags])].sort();
+            .map(n => buildNoteTag(n.key || n.title));
+        return [...new Set([...definedTags, ...contextTags, ...noteTags])].sort();
     };
 
     const suggestedTags = () => {
@@ -53,10 +55,34 @@ export const TagPicker: Component<TagPickerProps> = (props) => {
         const name = selectedTagName().trim();
         if (!name) return;
 
+        if (name.startsWith("@")) {
+            const normalized = normalizeContextKey(name);
+            const exists = store.contexts.some(context =>
+                !context.deletedAt && (
+                    context.key === normalized ||
+                    normalizeContextKey(context.displayName) === normalized
+                )
+            );
+            if (!exists) {
+                toast.error("Create the shared context first before tagging tasks with it.");
+                return;
+            }
+        }
+
+        if (name.startsWith("#")) {
+            const exists = store.notes.some(note => note.key === normalizeNoteKey(name));
+            if (!exists) {
+                toast.error("Create the canonical note first before linking it with a #tag.");
+                return;
+            }
+        }
+
         // update global definition
         const bucket = store.buckets.find(b => b.name === name || `@${b.name}` === name);
         const color = bucket ? bucket.color : undefined;
-        upsertTagDefinition(name, valueScore(), color, resolvedTheme());
+        if (!name.startsWith("@") && !name.startsWith("#")) {
+            upsertTagDefinition(name, valueScore(), color, resolvedTheme());
+        }
 
         // Toggle in current task selection if not already there
         const currentSelected = props.selectedTags;

src/components/TaskCard.tsx

@@ -8,6 +8,7 @@ import { getThemeAdjustedColor } from "@/lib/colors";
 import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select";
 import { getStatusOptionsForTask } from "@/lib/constants";
 import { getRecurrenceProgress } from "@/lib/recurrence";
+import { buildShareTag } from "@/lib/tags";
 import { StatusCircle } from "./StatusCircle";
 
 export const TaskCard: Component<{ task: Task, isShaking?: boolean }> = (props) => {
@@ -33,9 +34,8 @@ export const TaskCard: Component<{ task: Task, isShaking?: boolean }> = (props)
         const ctx = currentTaskContext();
 
         if (typeof ctx === 'object' && 'bucketId' in ctx) {
-            // We are in a bucket view. Hide the tag that matches this bucket's name.
-            // Buckets are now tagged with '@' + name.
-            const bucketTagName = `@${(ctx as { name: string }).name.toLowerCase()}`;
+            const bucketContext = store.contexts.find(context => context.id === ctx.bucketId);
+            const bucketTagName = buildShareTag(bucketContext?.displayName || ctx.name).toLowerCase();
             return tags.filter(t => t.toLowerCase() !== bucketTagName && !t.endsWith("_favorite__"));
         }
 
@@ -139,23 +139,13 @@ export const TaskCard: Component<{ task: Task, isShaking?: boolean }> = (props)
                         <span class="text-[0.625rem] font-medium">P{props.task.priority}</span>
                     </div>
 
-                    {/* Shared Indicator - shows for individual shares OR tag-based ShareRules */}
+                    {/* Shared Indicator - driven by @tag share contexts */}
                     {(() => {
-                        const hasIndividualShares = props.task.sharedWith && props.task.sharedWith.length > 0;
-                        // Check if any tag-based ShareRules match this task's tags (exclude 'all' type)
-                        const hasTagRuleShares = store.shareRules.some(rule =>
-                            rule.type === 'tag' &&
-                            rule.tagName &&
-                            props.task.tags?.includes(rule.tagName)
-                        );
-                        const isShared = hasIndividualShares || hasTagRuleShares;
+                        if (props.task.shareRefs.length === 0) return null;
 
-                        if (!isShared) return null;
-
-                        const shareCount = (props.task.sharedWith?.length || 0);
-                        const tooltip = hasIndividualShares
-                            ? `Shared with ${shareCount} user${shareCount > 1 ? 's' : ''}`
-                            : 'Shared via tag rule';
+                        const tooltip = props.task.shareRefs.length === 1
+                            ? 'Shared via 1 @context'
+                            : `Shared via ${props.task.shareRefs.length} @contexts`;
 
                         return (
                             <div class="flex items-center gap-1 shrink-0" title={tooltip}>

src/components/TaskDetail.tsx

@@ -1,9 +1,9 @@
 import { type Component, createEffect, createSignal, For, createMemo, onCleanup, Show } from "solid-js";
 import { Sheet, SheetContent } from "@/components/ui/sheet";
-import { type Task, removeTask, restoreTask, updateTask, saveTaskAsTemplate, shareTask, revokeShare, splitTask, loadTaskContent, currentTaskContext, cleanupTaskAttachments, getFavoriteTag, now } from "@/store";
+import { type Task, removeTask, restoreTask, updateTask, saveTaskAsTemplate, loadTaskContent, currentTaskContext, cleanupTaskAttachments, getFavoriteTag, now } from "@/store";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { ArrowUpCircle, Clock, Calendar, Type, Trash2, X, Copy, MoreHorizontal, Gauge, Share2, UserMinus, GitBranch, Tag, Settings, Star, FileText } from "lucide-solid";
+import { ArrowUpCircle, Clock, Calendar, Type, Trash2, X, Copy, MoreHorizontal, Gauge, Star, FileText } from "lucide-solid";
 import { StatusCircle } from "./StatusCircle";
 import { calculateDateFromUrgency, calculateUrgencyFromDate } from "@/store";
 import { Button } from "./ui/button";
@@ -16,8 +16,8 @@ import { toast } from "solid-sonner";
 import { lazy, Suspense } from "solid-js";
 import { useTheme } from "./ThemeProvider";
 import { getThemeAdjustedColor } from "@/lib/colors";
-import { pb } from "@/lib/pocketbase";
 import { getRecurrenceProgress } from "@/lib/recurrence";
+import { buildShareTag } from "@/lib/tags";
 import { TextBubbleMenu } from "@/components/TextBubbleMenu";
 import { TableBubbleMenu } from "@/components/TableBubbleMenu";
 
@@ -174,7 +174,8 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
 
         // If in a bucket view, ensure the bucket tag is preserved (it was hidden from the UI so it's missing from 'tags')
         if (typeof ctx === 'object' && 'bucketId' in ctx) {
-            const bucketTagName = `@${(ctx as { name: string }).name}`;
+            const bucketContext = store.contexts.find(context => context.id === ctx.bucketId);
+            const bucketTagName = buildShareTag(bucketContext?.displayName || ctx.name);
             // Check case-insensitive existence
             if (!newTags.some(t => t.toLowerCase() === bucketTagName.toLowerCase())) {
                 newTags.push(bucketTagName);
@@ -201,9 +202,8 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
         const ctx = currentTaskContext();
 
         if (typeof ctx === 'object' && 'bucketId' in ctx) {
-            // We are in a bucket view. Hide the tag that matches this bucket's name.
-            // Buckets are now tagged with '@' + name.
-            const bucketTagName = `@${(ctx as { name: string }).name.toLowerCase()}`;
+            const bucketContext = store.contexts.find(context => context.id === ctx.bucketId);
+            const bucketTagName = buildShareTag(bucketContext?.displayName || ctx.name).toLowerCase();
             return tags.filter(t => t.toLowerCase() !== bucketTagName && !t.endsWith("_favorite__"));
         }
 
@@ -682,11 +682,32 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
                                     {/* Sharing Section */}
                                     <div class="p-2 border-t border-border/50">
                                         <div class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground/70 px-2 py-1 mb-1">Sharing</div>
-                                        <UserSharePicker
-                                            taskId={props.task.id}
-                                            sharedWith={props.task.sharedWith || []}
-                                            tags={props.task.tags || []}
-                                        />
+                                        <div class="px-2 py-1.5 rounded-lg bg-muted/20 border border-border/30 space-y-2">
+                                            <p class="text-[0.6875rem] text-muted-foreground leading-relaxed">
+                                                Sharing is driven by the task&apos;s <span class="font-semibold text-foreground">@tags</span>. Add or remove
+                                                <span class="font-semibold text-foreground"> @people</span> and <span class="font-semibold text-foreground">@buckets</span> in the tag list above.
+                                            </p>
+                                            <Show
+                                                when={props.task.shareRefs.length > 0}
+                                                fallback={<p class="text-[0.6875rem] text-muted-foreground/70">No shared contexts on this task.</p>}
+                                            >
+                                                <div class="flex flex-wrap gap-1.5">
+                                                    <For each={props.task.shareRefs}>
+                                                        {(ref) => {
+                                                            const context = store.contexts.find(existing => existing.id === ref.contextId) || store.contexts.find(existing => existing.key === ref.key);
+                                                            const label = `@${context?.displayName || ref.key}`;
+                                                            const policy = context?.policy || (ref.kind === "bucket" ? "handoff" : "collaborative");
+                                                            return (
+                                                                <Badge variant="secondary" class="h-6 px-2 text-[0.625rem] gap-1 bg-muted/40 border-border/40">
+                                                                    <span>{label}</span>
+                                                                    <span class="uppercase text-[0.5rem] tracking-wider text-muted-foreground">{policy}</span>
+                                                                </Badge>
+                                                            );
+                                                        }}
+                                                    </For>
+                                                </div>
+                                            </Show>
+                                        </div>
                                     </div>
                                 </div>
                             </PopoverContent>
@@ -757,139 +778,3 @@ const MetadataItem: Component<{
     );
 };
 
-// User Share Picker Component
-const UserSharePicker: Component<{
-    taskId: string;
-    sharedWith: Array<{ userId: string; access: 'view' | 'edit' }>;
-    tags: string[];
-}> = (props) => {
-    const [users, setUsers] = createSignal<Array<{ id: string; name: string }>>([]);
-    const [selectedUserId, setSelectedUserId] = createSignal<string>("");
-    const [loading, setLoading] = createSignal(true);
-
-    // Get matching ShareRules for this task
-    const matchingRules = () => {
-        const currentUserId = pb.authStore.model?.id;
-        return store.shareRules.filter(rule => {
-            if (rule.ownerId !== currentUserId) return false;
-            if (rule.type === 'all') return true;
-            if (rule.type === 'tag' && props.tags.includes(rule.tagName!)) return true;
-            return false;
-        });
-    };
-
-    const getUserName = (userId: string) => {
-        return users().find(u => u.id === userId)?.name || userId;
-    };
-
-    // Fetch users on mount
-    createEffect(async () => {
-        try {
-            const records = await pb.collection('users').getFullList({
-                fields: 'id,name'
-            });
-            setUsers(records.map(r => ({ id: r.id, name: r.name || r.email || r.id })));
-        } catch (err) {
-            console.error("Failed to load users:", err);
-        } finally {
-            setLoading(false);
-        }
-    });
-
-
-    const availableUsers = () => {
-        const sharedUserIds = props.sharedWith.map(s => s.userId);
-        const currentUserId = pb.authStore.model?.id;
-        return users().filter(u => !sharedUserIds.includes(u.id) && u.id !== currentUserId);
-    };
-
-    return (
-        <>
-            <div class="flex gap-1 mb-2">
-                <Select<{ id: string; name: string }>
-                    value={users().find(u => u.id === selectedUserId()) || null}
-                    onChange={(user) => setSelectedUserId(user?.id || "")}
-                    options={availableUsers()}
-                    optionValue="id"
-                    optionTextValue="name"
-                    placeholder={loading() ? "Loading..." : "Select user..."}
-                    itemComponent={(itemProps: any) => (
-                        <SelectItem item={itemProps.item}>{itemProps.item.rawValue.name}</SelectItem>
-                    )}
-                >
-                    <SelectTrigger class="flex-1 h-8 text-xs">
-                        <SelectValue<{ id: string; name: string }>>
-                            {(state) => state.selectedOption()?.name || "Select user..."}
-                        </SelectValue>
-                    </SelectTrigger>
-                    <SelectContent />
-                </Select>
-                <Button
-                    variant="ghost"
-                    size="icon"
-                    class="h-8 w-8"
-                    disabled={!selectedUserId()}
-                    onClick={async () => {
-                        if (selectedUserId()) {
-                            await shareTask(props.taskId, selectedUserId(), 'edit');
-                            setSelectedUserId("");
-                        }
-                    }}
-                >
-                    <Share2 size={14} />
-                </Button>
-            </div>
-            <For each={props.sharedWith}>
-                {(share) => (
-                    <div class="flex items-center justify-between py-1 px-2 rounded-lg bg-muted/30 mb-1">
-                        <span class="text-xs truncate flex-1">{getUserName(share.userId)}</span>
-                        <div class="flex gap-1">
-                            <Button
-                                variant="ghost"
-                                size="icon"
-                                class="h-6 w-6 hover:bg-amber-500/10 hover:text-amber-600"
-                                title="Split - Give them an independent copy"
-                                onClick={() => splitTask(props.taskId, share.userId)}
-                            >
-                                <GitBranch size={12} />
-                            </Button>
-                            <Button
-                                variant="ghost"
-                                size="icon"
-                                class="h-6 w-6 hover:bg-destructive/10 hover:text-destructive"
-                                title="Revoke access"
-                                onClick={() => revokeShare(props.taskId, share.userId)}
-                            >
-                                <UserMinus size={12} />
-                            </Button>
-                        </div>
-                    </div>
-                )}
-            </For>
-
-            {/* ShareRule-based sharing */}
-            {matchingRules().length > 0 && (
-                <div class="mt-3 pt-3 border-t border-border/30">
-                    <div class="text-[9px] font-bold uppercase tracking-widest text-muted-foreground/40 mb-2 px-1">Automatic Rule Shares</div>
-                    <For each={matchingRules()}>
-                        {(rule) => (
-                            <div class="flex items-center gap-2 py-1.5 px-2 rounded-lg bg-muted/10 mb-1 border border-border/5">
-                                <div class="shrink-0 text-muted-foreground/40">
-                                    {rule.type === 'tag' ? <Tag size={10} /> : <Settings size={10} />}
-                                </div>
-                                <div class="flex flex-col min-w-0">
-                                    <span class="text-[0.6875rem] font-medium leading-none truncate">
-                                        {getUserName(rule.targetUserId)}
-                                    </span>
-                                    <span class="text-[9px] text-muted-foreground/50 mt-0.5 uppercase tracking-tighter">
-                                        {rule.type === 'all' ? 'All Tasks Rule' : `Matched Tag: ${rule.tagName}`}
-                                    </span>
-                                </div>
-                            </div>
-                        )}
-                    </For>
-                </div>
-            )}
-        </>
-    );
-};

src/lib/app-config.ts

@@ -0,0 +1,18 @@
+const rawMode = (import.meta.env.VITE_TASGRID_DATA_MODE || "prod").toLowerCase();
+
+export const TASGRID_DATA_MODE = rawMode === "dev" ? "dev" : "prod";
+export const TASGRID_IS_DEV_DATA = TASGRID_DATA_MODE === "dev";
+const rawMigrationAdmins = import.meta.env.VITE_TASGRID_MIGRATION_ADMIN_EMAILS || "";
+const rawMigrationEnabled = (import.meta.env.VITE_TASGRID_ENABLE_PROD_MIGRATION || "").toLowerCase();
+
+export const POCKETBASE_URL = import.meta.env.VITE_POCKETBASE_URL || "https://pocketbase.ccllc.pro";
+export const AUTH_STORE_KEY = TASGRID_IS_DEV_DATA ? "tasgrid_dev_auth" : "tasgrid_auth";
+export const STORAGE_KEY_PREFIX = TASGRID_IS_DEV_DATA ? "tasgrid_dev" : "tasgrid";
+export const PWA_CACHE_SUFFIX = TASGRID_IS_DEV_DATA ? "dev" : "prod";
+export const PROD_MIGRATION_ENABLED = rawMigrationEnabled === "true";
+export const PROD_MIGRATION_ADMIN_EMAILS = rawMigrationAdmins
+    .split(",")
+    .map((email: string) => email.trim().toLowerCase())
+    .filter(Boolean);
+
+export const withDataSuffix = (base: string) => TASGRID_IS_DEV_DATA ? `${base}_Dev` : base;

src/lib/constants.ts

@@ -1,3 +1,5 @@
+import { withDataSuffix } from "@/lib/app-config";
+
 export const PRIORITY_OPTIONS = [
     { value: "10", label: "10 - Necessary" },
     { value: "9", label: "9" },
@@ -36,11 +38,12 @@ export const URGENCY_HOURS: Record<number, number> = {
     1: 4320
 };
 
-export const TASGRID_COLLECTION = 'TasGrid';
-export const TAGS_COLLECTION = 'TasGrid_Tags';
-export const SHARE_RULES_COLLECTION = 'TasGrid_ShareRules';
-export const BUCKETS_COLLECTION = 'buckets';
-export const NOTES_COLLECTION = 'TasGrid_Notes';
+export const TASGRID_COLLECTION = withDataSuffix('TasGrid');
+export const CONTEXTS_COLLECTION = withDataSuffix('TasGrid_Contexts');
+export const NOTES_COLLECTION = withDataSuffix('TasGrid_Notes');
+export const TAGS_COLLECTION = CONTEXTS_COLLECTION;
+export const SHARE_RULES_COLLECTION = CONTEXTS_COLLECTION;
+export const BUCKETS_COLLECTION = CONTEXTS_COLLECTION;
 
 export const SIZE_OPTIONS = [
     { value: "10", label: "10 - Two weeks" },

src/lib/mention-suggestion.tsx

@@ -2,14 +2,16 @@ import { store } from "@/store";
 import { render } from "solid-js/web";
 import tippy, { type Instance as TippyInstance } from "tippy.js";
 import { MentionList } from "@/components/MentionList";
+import { buildShareTag } from "@/lib/tags";
 
 export const userSuggestion = {
     items: ({ query }: { query: string }) => {
-        return store.tagDefinitions
-            .filter(tag => tag.isUser && tag.name.toLowerCase().substring(1).startsWith(query.toLowerCase()))
-            .map(tag => ({
-                id: tag.name, // Use the tag name as ID for sharing logic
-                label: tag.name.substring(1),
+        return store.contexts
+            .filter(context => context.kind === "user" && !context.deletedAt)
+            .filter(context => context.displayName.toLowerCase().startsWith(query.toLowerCase()))
+            .map(context => ({
+                id: buildShareTag(context.displayName),
+                label: context.displayName,
                 type: 'user' as const
             }));
     },
@@ -90,10 +92,10 @@ export const noteSuggestion = {
     items: ({ query }: { query: string }) => {
         return store.notes
             .filter(note => !(note.tags || []).some(t => t.startsWith("child-of-")))
-            .filter(note => note.title.toLowerCase().includes(query.toLowerCase()))
+            .filter(note => (note.key || note.title).toLowerCase().includes(query.toLowerCase()))
             .map(note => ({
                 id: note.id,
-                label: note.title,
+                label: note.key || note.title,
                 sublabel: note.content?.substring(0, 50).replace(/<[^>]*>?/gm, ''),
                 type: 'note' as const
             }));

src/lib/pocketbase.ts

@@ -1,6 +1,6 @@
-import PocketBase from 'pocketbase';
+import PocketBase, { LocalAuthStore } from 'pocketbase';
+import { AUTH_STORE_KEY, POCKETBASE_URL } from "@/lib/app-config";
+import { CONTEXTS_COLLECTION, NOTES_COLLECTION, TASGRID_COLLECTION } from "@/lib/constants";
 
-export const pb = new PocketBase('https://pocketbase.ccllc.pro');
-
-export const TASGRID_COLLECTION = 'TasGrid';
-export const TAGS_COLLECTION = 'TasGrid_Tags';
+export const pb = new PocketBase(POCKETBASE_URL, new LocalAuthStore(AUTH_STORE_KEY));
+export { TASGRID_COLLECTION, CONTEXTS_COLLECTION, NOTES_COLLECTION };

src/lib/tags.ts

@@ -0,0 +1,41 @@
+export type ParsedTag =
+    | { kind: "share"; raw: string; key: string; display: string }
+    | { kind: "note"; raw: string; key: string; display: string }
+    | { kind: "label"; raw: string; key: string; display: string };
+
+const normalizeWhitespace = (value: string) => value.trim().replace(/\s+/g, " ");
+
+export const normalizeKey = (value: string) =>
+    normalizeWhitespace(value)
+        .toLowerCase()
+        .replace(/^[@#]+/, "")
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "");
+
+export const normalizeContextKey = (value: string) => normalizeKey(value);
+export const normalizeNoteKey = (value: string) => normalizeKey(value);
+
+export const parseTag = (rawTag: string): ParsedTag => {
+    const raw = normalizeWhitespace(rawTag);
+    const prefix = raw[0];
+    const display = prefix === "@" || prefix === "#" ? raw.slice(1).trim() : raw;
+    const key = normalizeKey(display);
+
+    if (prefix === "@") {
+        return { kind: "share", raw, key, display };
+    }
+
+    if (prefix === "#") {
+        return { kind: "note", raw, key, display };
+    }
+
+    return { kind: "label", raw, key, display };
+};
+
+export const parseTags = (rawTags: string[] | undefined | null) =>
+    (rawTags || [])
+        .map(parseTag)
+        .filter(tag => !!tag.display);
+
+export const buildShareTag = (displayName: string) => `@${normalizeWhitespace(displayName)}`;
+export const buildNoteTag = (keyOrTitle: string) => `#${normalizeWhitespace(keyOrTitle)}`;

src/views/NotepadView.tsx

@@ -1,5 +1,5 @@
 import { type Component, createSignal, createMemo, createEffect, onCleanup, For, Show } from "solid-js";
-import { store, renameTagDefinition, updateNote, removeNote, restoreNote, setActiveNoteId, cleanupNoteAttachments, getFavoriteTag, fetchNoteById, updateStoreWithNote } from "@/store";
+import { store, renameTagDefinition, updateNote, updateTask, removeNote, restoreNote, setActiveNoteId, cleanupNoteAttachments, getFavoriteTag, fetchNoteById, updateStoreWithNote } from "@/store";
 import { pb } from "@/lib/pocketbase";
 import { type Note } from "@/store";
 import { Plus, X, Lock, Unlock, Trash2, ChevronDown, Link as LinkIcon, MoreHorizontal, Type, FileText, Search, Star, ChevronRight } from "lucide-solid";
@@ -14,6 +14,7 @@ import { NotesSidebar } from "@/components/NotesSidebar";
 import { toast } from "solid-sonner";
 import { TextBubbleMenu } from "@/components/TextBubbleMenu";
 import { TableBubbleMenu } from "@/components/TableBubbleMenu";
+import { buildNoteTag, normalizeNoteKey } from "@/lib/tags";
 
 export const NotepadView: Component<{
     selectedNoteId: string | null;
@@ -105,12 +106,15 @@ export const NotepadView: Component<{
     };
 
     const handleRenameNote = async (id: string, oldTitle: string, newTitle: string) => {
+        const currentNote = store.notes.find(note => note.id === id);
+        const oldKey = currentNote?.key || normalizeNoteKey(oldTitle);
+        const newKey = normalizeNoteKey(newTitle);
+
         // 1. Update the note title
-        await handleUpdateNote(id, { title: newTitle });
+        await handleUpdateNote(id, { title: newTitle, key: newKey });
 
         // 2. Rename the TagDefinition (preserves color) and propagate to all tagged tasks
-        // Use '#' prefix for note tags
-        await renameTagDefinition(`#${oldTitle}`, `#${newTitle}`);
+        await renameTagDefinition(buildNoteTag(oldKey), buildNoteTag(newKey));
     };
 
     const handleDeleteNote = async (id: string) => {
@@ -133,8 +137,13 @@ export const NotepadView: Component<{
     const handleLinkTask = async (taskId: string) => {
         const note = activeNote();
         if (!note) return;
+        const task = store.tasks.find(existing => existing.id === taskId);
+        const noteTag = buildNoteTag(note.key || note.title);
         const newTasks = [...(note.tasks || []), taskId];
         await handleUpdateNote(note.id, { tasks: newTasks });
+        if (task && !task.tags.some(tag => tag.toLowerCase() === noteTag.toLowerCase())) {
+            await updateTask(taskId, { tags: [...task.tags, noteTag] });
+        }
         setIsLinking(false);
         setLinkSearchQuery("");
     };
@@ -142,20 +151,25 @@ export const NotepadView: Component<{
     const handleUnlinkTask = async (taskId: string) => {
         const note = activeNote();
         if (!note) return;
+        const task = store.tasks.find(existing => existing.id === taskId);
+        const noteTag = buildNoteTag(note.key || note.title).toLowerCase();
         const newTasks = (note.tasks || []).filter(id => id !== taskId);
         await handleUpdateNote(note.id, { tasks: newTasks });
+        if (task && task.tags.some(tag => tag.toLowerCase() === noteTag)) {
+            await updateTask(taskId, { tags: task.tags.filter(tag => tag.toLowerCase() !== noteTag) });
+        }
     };
 
     // Linked tasks calculation
     const linkedTasks = createMemo(() => {
         const note = activeNote();
         if (!note) return [];
-        const noteTagName = `#${note.title}`;
+        const noteTagName = buildNoteTag(note.key || note.title).toLowerCase();
         return store.tasks.filter(t => {
             // Explicit relation
             if (note.tasks && note.tasks.includes(t.id)) return true;
-            // Tag relation (case-insensitive title match with # prefix)
-            if (t.tags && t.tags.some(tag => tag.toLowerCase() === noteTagName.toLowerCase())) return true;
+            if (t.noteRefs && t.noteRefs.some(ref => ref.key === note.key || ref.noteId === note.id)) return true;
+            if (t.tags && t.tags.some(tag => tag.toLowerCase() === noteTagName)) return true;
             return false;
         });
     });
@@ -183,7 +197,11 @@ export const NotepadView: Component<{
                 if (!hasPinnedBucket) return false;
             }
 
-            if (note.tasks && note.tasks.includes(t.id)) return false; // Already linked
+            const isAlreadyLinked =
+                (note.tasks && note.tasks.includes(t.id)) ||
+                t.noteRefs?.some(ref => ref.key === note.key || ref.noteId === note.id) ||
+                t.tags?.some(tag => tag.toLowerCase() === buildNoteTag(note.key || note.title).toLowerCase());
+            if (isAlreadyLinked) return false;
             if (!q) return false; // Don't show all by default
             return t.title.toLowerCase().includes(q);
         }).slice(0, 10);
@@ -229,12 +247,15 @@ export const NotepadView: Component<{
         if (!root || !userId) return;
 
         try {
+            const keyBase = normalizeNoteKey(`${root.key || root.title}-tab`);
             const result = await pb.collection(NOTES_COLLECTION).create({
                 title: "New Tab",
+                key: `${keyBase}-${Date.now()}`,
                 content: "",
                 tags: [`child-of-${root.id}`],
                 isPrivate: root.isPrivate, // inherit privacy
                 user: userId,
+                tasks: []
             });
             props.setSelectedNoteId(result.id);
         } catch (e) {
@@ -739,7 +760,13 @@ export const NotepadView: Component<{
                                     </div>
                                 </div>
                                 {/* Sticky Footer Actions (Match TaskDetail style) */}
-                                <div class="px-4 py-4 border-t border-border/50 md:hidden flex items-center justify-between shrink-0 bg-background/95 backdrop-blur-sm z-40 w-full sticky bottom-0">
+                                <div
+                                    class="px-4 pt-4 border-t border-border/50 md:hidden flex items-center justify-between shrink-0 bg-background/95 backdrop-blur-sm z-40 w-full sticky bottom-0"
+                                    style={{
+                                        "padding-bottom": "calc(1rem + env(safe-area-inset-bottom, 0px))",
+                                        "min-height": "calc(73px + env(safe-area-inset-bottom, 0px))"
+                                    }}
+                                >
                                     <div class="flex items-center gap-2 w-16 shrink-0">
                                         {/* "..." popover menu containing Public/Private toggle and Delete */}
                                         <Show when={isOwner()}>

src/views/SettingsView.tsx

@@ -1,6 +1,6 @@
 import { type Component, For, Show, createSignal, lazy, Suspense } from "solid-js";
 import { ThemeToggle } from "../components/ThemeToggle";
-import { store, restoreTask, deleteTaskPermanently, restoreNote, deleteNotePermanently, addTemplate, removeTemplate, updateTemplate, upsertTagDefinition, removeTagDefinition, renameTagDefinition, addShareRule, removeShareRule, updateShareRule, createBucket, updateBucket, deleteBucket, toggleBucketSubscription } from "@/store";
+import { store, restoreTask, deleteTaskPermanently, restoreNote, deleteNotePermanently, addTemplate, removeTemplate, updateTemplate, upsertTagDefinition, removeTagDefinition, renameTagDefinition, addShareRule, removeShareRule, updateShareRule, createBucket, updateBucket, deleteBucket, toggleBucketSubscription, updateUserContextPolicy, savePersonalContextSupervisors, runDevDataMigration, runProdDataMigration, canRunProdMigration } from "@/store";
 import { useTheme } from "@/components/ThemeProvider";
 import { Trash2, Undo2, ArrowLeftRight, Tag, ChevronDown, ChevronRight, Share2, Users, HelpCircle, Copy, Plus, Type, Upload, Box, Edit2, Archive } from "lucide-solid";
 import { TagPicker } from "@/components/TagPicker";
@@ -10,6 +10,7 @@ import { toast } from "solid-sonner";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { PRIORITY_OPTIONS, URGENCY_OPTIONS } from "@/lib/constants";
 import { pb } from "@/lib/pocketbase";
+import { TASGRID_IS_DEV_DATA } from "@/lib/app-config";
 import { createEffect } from "solid-js";
 
 const TaskEditor = lazy(() => import("../components/TaskEditor").then(m => ({ default: m.TaskEditor })));
@@ -23,15 +24,18 @@ export const SettingsView: Component<{ setView?: (v: string) => void }> = (props
     const [isSharingOpen, setIsSharingOpen] = createSignal(false);
     const [isImportOpen, setIsImportOpen] = createSignal(false);
     const [isBucketsOpen, setIsBucketsOpen] = createSignal(false);
+    const [isDevToolsOpen, setIsDevToolsOpen] = createSignal(false);
+    const [isProdMigrationOpen, setIsProdMigrationOpen] = createSignal(false);
+    const [isRunningDevMigration, setIsRunningDevMigration] = createSignal(false);
+    const [isRunningProdMigration, setIsRunningProdMigration] = createSignal(false);
     const [expandedTemplateId, setExpandedTemplateId] = createSignal<string | null>(null);
     const [shareUserId, setShareUserId] = createSignal("");
-    const [shareType, setShareType] = createSignal<'all' | 'tag'>('all');
+    const [shareType, setShareType] = createSignal<'all' | 'tag'>('tag');
     const [shareMode, setShareMode] = createSignal<'ADD_USER' | 'SEND_TASK'>('ADD_USER');
     const [shareTag, setShareTag] = createSignal<string>("");
     const [allUsers, setAllUsers] = createSignal<Array<{ id: string; name: string }>>([]);
     const [usersLoading, setUsersLoading] = createSignal(false);
 
-    // Fetch users when sharing section opens
     createEffect(() => {
         if (isSharingOpen() && allUsers().length === 0 && !usersLoading()) {
             setUsersLoading(true);
@@ -53,6 +57,11 @@ export const SettingsView: Component<{ setView?: (v: string) => void }> = (props
         return allUsers().filter(u => u.id !== currentUserId);
     };
 
+    const userContexts = () =>
+        store.contexts
+            .filter(context => !context.deletedAt && context.kind === "user")
+            .sort((a, b) => a.displayName.localeCompare(b.displayName));
+
     return (
         <div class="w-full max-w-2xl mx-auto py-4 sm:py-10 px-4 sm:px-0 space-y-8 sm:space-y-12 animate-in fade-in slide-in-from-bottom-2 duration-500 min-w-0 overflow-hidden text-balance">
             <header class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
@@ -113,9 +122,9 @@ export const SettingsView: Component<{ setView?: (v: string) => void }> = (props
                                 <div class="space-y-0.5">
                                     <h3 class="text-base font-semibold flex items-center gap-2">
                                         <Share2 size={16} />
-                                        Task Sharing
+                                        Tag Sharing
                                     </h3>
-                                    <p class="text-sm text-muted-foreground">Share all tasks or tasks with specific tags with others.</p>
+                                    <p class="text-sm text-muted-foreground">Share through tags: `@people` to collaborate, `@buckets` to move tasks to buckets, and `#notes` to link tasks to notes.</p>
                                 </div>
                                 <div class="w-8 h-8 rounded-full flex items-center justify-center bg-muted/50 group-hover:bg-muted transition-colors">
                                     {isSharingOpen() ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
@@ -124,260 +133,368 @@ export const SettingsView: Component<{ setView?: (v: string) => void }> = (props
 
                             <Show when={isSharingOpen()}>
                                 <div class="space-y-4 pt-2 animate-in fade-in slide-in-from-top-2 duration-300">
-                                    {/* Add new share rule */}
                                     <div class="p-3 rounded-xl bg-muted/30 border border-border/50 space-y-3">
-                                        <div class="flex gap-2">
-                                            <Button
-                                                variant={shareType() === 'all' ? 'default' : 'outline'}
-                                                size="sm"
-                                                class="h-8 text-xs gap-1"
-                                                onClick={() => setShareType('all')}
-                                            >
-                                                <Users size={12} />
-                                                All Tasks
-                                            </Button>
-                                            <Button
-                                                variant={shareType() === 'tag' ? 'default' : 'outline'}
-                                                size="sm"
-                                                class="h-8 text-xs gap-1"
-                                                onClick={() => setShareType('tag')}
-                                            >
-                                                <Tag size={12} />
-                                                By Tag
-                                            </Button>
-                                        </div>
-
-                                        {/* Share Mode Selection */}
-                                        <div class="flex gap-2">
-                                            <Button
-                                                variant={shareMode() === 'ADD_USER' ? 'default' : 'outline'}
-                                                size="sm"
-                                                class="h-7 text-[0.625rem] gap-1 px-2"
-                                                title="Recipient gets edit access (Collaboration)"
-                                                onClick={() => setShareMode('ADD_USER')}
-                                            >
-                                                <Users size={10} />
-                                                Collaborate
-                                            </Button>
-                                            <Button
-                                                variant={shareMode() === 'SEND_TASK' ? 'default' : 'outline'}
-                                                size="sm"
-                                                class="h-7 text-[0.625rem] gap-1 px-2"
-                                                title="Task ownership is transferred to recipient (Handoff)"
-                                                onClick={() => setShareMode('SEND_TASK')}
-                                            >
-                                                <ArrowLeftRight size={10} />
-                                                Handoff
-                                            </Button>
-                                        </div>
-
-                                        <Show when={shareType() === 'tag'}>
-                                            <Select
-                                                value={shareTag()}
-                                                onChange={(val) => {
-                                                    if (val) {
-                                                        setShareTag(val);
-                                                        const tagDef = store.tagDefinitions.find(t => t.name === val);
-                                                        const isBucket = tagDef?.isBucket || store.buckets.some(b => b.name === val);
-                                                        const isUser = tagDef?.isUser;
-
-                                                        if (isBucket) {
-                                                            setShareMode('SEND_TASK');
-                                                        } else if (isUser) {
-                                                            setShareMode('ADD_USER');
-                                                        }
-                                                    }
-                                                }}
-                                                options={store.tagDefinitions.map(t => t.name)}
-                                                placeholder="Select a tag"
-                                                itemComponent={(props: any) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
-                                            >
-                                                <SelectTrigger class="h-9 text-sm">
-                                                    <span>{shareTag() || "Select a tag..."}</span>
-                                                </SelectTrigger>
-                                                <SelectContent />
-                                            </Select>
-                                        </Show>
-
-                                        <div class="flex gap-2">
-                                            <Select<{ id: string; name: string }>
-                                                value={allUsers().find(u => u.id === shareUserId()) || null}
-                                                onChange={(user) => setShareUserId(user?.id || "")}
-                                                options={availableUsers()}
-                                                optionValue="id"
-                                                optionTextValue="name"
-                                                placeholder={usersLoading() ? "Loading..." : "Select user..."}
-                                                itemComponent={(itemProps: any) => (
-                                                    <SelectItem item={itemProps.item}>{itemProps.item.rawValue.name}</SelectItem>
-                                                )}
-                                            >
-                                                <SelectTrigger class="flex-1 h-9 text-sm">
-                                                    <SelectValue<{ id: string; name: string }>>
-                                                        {(state) => state.selectedOption()?.name || "Select user..."}
-                                                    </SelectValue>
-                                                </SelectTrigger>
-                                                <SelectContent />
-                                            </Select>
-                                            <Button
-                                                size="sm"
-                                                class="h-9 gap-2"
-                                                disabled={!shareUserId()}
-                                                onClick={async () => {
-                                                    if (shareUserId()) {
-                                                        await addShareRule(shareType(), shareUserId(), shareType() === 'tag' ? shareTag() : undefined, shareMode());
-                                                        setShareUserId("");
-                                                    }
-                                                }}
-                                            >
-                                                <Plus size={14} />
-                                                Share
-                                            </Button>
-                                        </div>
-                                        <p class="text-[0.625rem] text-muted-foreground italic px-1 pt-1">
-                                            {shareMode() === 'ADD_USER'
-                                                ? "User will be added to the task's shared list."
-                                                : "Task owner will change to the recipient immediately when tagged."}
+                                        <h4 class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground">User Tag Policies</h4>
+                                        <p class="text-[0.6875rem] text-muted-foreground">
+                                            Control how each <span class="font-semibold text-foreground">@user</span> share tag behaves. Collaborative keeps tasks in both of your lists. Handoff moves tasks from your list to theirs.
                                         </p>
-
-                                    </div>
-
-                                    {/* Active share rules */}
-                                    {/* Active share rules - Outgoing */}
-                                    <div class="space-y-3">
-                                        <h4 class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground pb-1 flex items-center gap-2">
-                                            <div class="w-1 h-1 rounded-full bg-primary" />
-                                            Sharing With Others
-                                        </h4>
-                                        <For each={store.shareRules.filter(r => {
-                                            const tagDef = r.type === 'tag' ? store.tagDefinitions.find(t => t.name === r.tagName) : null;
-                                            const isBucketTag = r.type === 'tag' && store.buckets.some(b => b.name === r.tagName);
-                                            const isSystem = tagDef?.isUser || tagDef?.isBucket || isBucketTag;
-                                            const isOwner = r.ownerId === pb.authStore.model?.id;
-                                            return !isSystem && isOwner;
-                                        })} fallback={
-                                            <div class="text-center py-4 text-muted-foreground text-[0.625rem] uppercase tracking-widest italic border border-dashed border-border/40 rounded-xl bg-muted/5">
-                                                You aren't sharing with anyone yet.
-                                            </div>
-                                        }>
-                                            {(rule) => (
-                                                <div class="flex items-center justify-between p-3 rounded-xl bg-muted/20 border border-border/40 gap-3 group/rule hover:bg-muted/30 transition-all">
-                                                    <div class="flex items-center gap-3 min-w-0 flex-1">
-                                                        <div class="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center text-primary shrink-0 transition-transform group-hover/rule:scale-110">
-                                                            {rule.type === 'all' ? <Users size={14} /> : <Tag size={14} />}
-                                                        </div>
+                                        <div class="space-y-2">
+                                            <For each={userContexts()} fallback={
+                                                <div class="text-center py-4 text-muted-foreground text-[0.625rem] uppercase tracking-widest italic border border-dashed border-border/40 rounded-xl bg-muted/5">
+                                                    No user contexts found yet.
+                                                </div>
+                                            }>
+                                                {(context) => (
+                                                    <div class="flex items-center justify-between gap-3 p-3 rounded-xl border border-border/40 bg-background/70">
                                                         <div class="min-w-0">
-                                                            <p class="text-xs font-bold truncate">To: {getUserName(rule.targetUserId)}</p>
-                                                            <p class="text-[0.5625rem] text-muted-foreground uppercase font-black tracking-widest opacity-60 flex items-center gap-1">
-                                                                {rule.type === 'all' ? 'All Tasks' : `Tag: ${rule.tagName} `}
-                                                                <span class="mx-1">•</span>
-                                                                <button
-                                                                    class="hover:text-primary transition-colors hover:underline"
-                                                                    onClick={() => updateShareRule(rule.id, {
-                                                                        share_mode: rule.share_mode === 'SEND_TASK' ? 'ADD_USER' : 'SEND_TASK'
-                                                                    })}
-                                                                >
-                                                                    {rule.share_mode === 'SEND_TASK' ? 'HANDOFF' : 'COLLAB'}
-                                                                </button>
+                                                            <p class="text-sm font-bold truncate">@{context.displayName}</p>
+                                                            <p class="text-[0.625rem] uppercase tracking-widest text-muted-foreground">
+                                                                {context.targetUserId === pb.authStore.model?.id ? "Your personal context" : `User: ${getUserName(context.targetUserId || "")}`}
                                                             </p>
                                                         </div>
+                                                        <div class="flex gap-2 shrink-0">
+                                                            <Button
+                                                                variant={context.policy === 'collaborative' ? 'default' : 'outline'}
+                                                                size="sm"
+                                                                class="h-7 text-[0.625rem] gap-1 px-2"
+                                                                onClick={() => updateUserContextPolicy(context.id, 'collaborative')}
+                                                            >
+                                                                <Users size={10} />
+                                                                Collaborate
+                                                            </Button>
+                                                            <Button
+                                                                variant={context.policy === 'handoff' ? 'default' : 'outline'}
+                                                                size="sm"
+                                                                class="h-7 text-[0.625rem] gap-1 px-2"
+                                                                onClick={() => updateUserContextPolicy(context.id, 'handoff')}
+                                                            >
+                                                                <ArrowLeftRight size={10} />
+                                                                Handoff
+                                                            </Button>
+                                                        </div>
                                                     </div>
-                                                    <Button
-                                                        variant="ghost"
-                                                        size="icon"
-                                                        class="h-8 w-8 hover:bg-destructive/10 hover:text-destructive rounded-lg transition-all opacity-0 group-hover/rule:opacity-100"
-                                                        onClick={() => removeShareRule(rule.id)}
-                                                    >
-                                                        <Trash2 size={14} />
-                                                    </Button>
-                                                </div>
-                                            )}
+                                                )}
+                                            </For>
+                                        </div>
+                                    </div>
+
+                                    <div class="p-3 rounded-xl bg-muted/30 border border-border/50 space-y-3">
+                                        <h4 class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground">Personal Context Supervision</h4>
+                                        <p class="text-[0.6875rem] text-muted-foreground">
+                                            Allow specific supervisors to switch into your whole personal context, the same way they switch into pinned bucket contexts.
+                                        </p>
+                                        <For each={availableUsers()} fallback={
+                                            <div class="text-center py-4 text-muted-foreground text-[0.625rem] uppercase tracking-widest italic border border-dashed border-border/40 rounded-xl bg-muted/5">
+                                                No other users available.
+                                            </div>
+                                        }>
+                                            {(user) => {
+                                                const hasAccess = () => store.personalContextSupervisorIds.includes(user.id);
+                                                return (
+                                                    <div class="flex items-center justify-between gap-3 p-3 rounded-xl border border-border/40 bg-background/70">
+                                                        <div class="min-w-0">
+                                                            <p class="text-sm font-bold truncate">{user.name}</p>
+                                                            <p class="text-[0.625rem] uppercase tracking-widest text-muted-foreground">
+                                                                {hasAccess() ? "Can switch into your personal context" : "No supervision access"}
+                                                            </p>
+                                                        </div>
+                                                        <Button
+                                                            variant={hasAccess() ? "default" : "outline"}
+                                                            size="sm"
+                                                            class="h-8 text-[0.625rem] px-3"
+                                                            onClick={() => {
+                                                                const nextIds = hasAccess()
+                                                                    ? store.personalContextSupervisorIds.filter(id => id !== user.id)
+                                                                    : [...store.personalContextSupervisorIds, user.id];
+                                                                savePersonalContextSupervisors(nextIds);
+                                                            }}
+                                                        >
+                                                            {hasAccess() ? "Allowed" : "Grant Access"}
+                                                        </Button>
+                                                    </div>
+                                                );
+                                            }}
                                         </For>
                                     </div>
 
-                                    {/* Active share rules - Incoming */}
-                                    <div class="space-y-3 pt-4 border-t border-border/20">
-                                        <h4 class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground pb-1 flex items-center gap-2">
-                                            <div class="w-1 h-1 rounded-full bg-indigo-500" />
-                                            Shared With You
-                                        </h4>
-                                        <For each={store.shareRules.filter(r => {
-                                            const tagDef = r.type === 'tag' ? store.tagDefinitions.find(t => t.name === r.tagName) : null;
-                                            const isBucketTag = r.type === 'tag' && store.buckets.some(b => b.name === r.tagName);
-                                            const isSystem = tagDef?.isUser || tagDef?.isBucket || isBucketTag;
-                                            const isTarget = r.targetUserId === pb.authStore.model?.id;
-                                            return !isSystem && isTarget;
-                                        })} fallback={
-                                            <div class="text-center py-4 text-muted-foreground text-[0.625rem] uppercase tracking-widest italic border border-dashed border-border/40 rounded-xl bg-muted/5">
-                                                No one has shared with you yet.
-                                            </div>
-                                        }>
-                                            {(rule) => (
-                                                <div class="flex items-center justify-between p-3 rounded-xl bg-muted/20 border border-border/40 gap-3 group/rule hover:bg-muted/30 transition-all opacity-80">
-                                                    <div class="flex items-center gap-3 min-w-0 flex-1">
-                                                        <div class="w-8 h-8 rounded-lg bg-indigo-500/10 flex items-center justify-center text-indigo-500 shrink-0">
-                                                            {rule.type === 'all' ? <Users size={14} /> : <Tag size={14} />}
-                                                        </div>
+                                    <Show when={store.supervisedContexts.length > 0}>
+                                        <div class="space-y-3 pt-2">
+                                            <h4 class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground pb-1 flex items-center gap-2">
+                                                <div class="w-1 h-1 rounded-full bg-orange-500" />
+                                                Personal Contexts Shared With You
+                                            </h4>
+                                            <For each={store.supervisedContexts}>
+                                                {(context) => (
+                                                    <div class="flex items-center justify-between p-3 rounded-xl bg-muted/20 border border-border/40 gap-3">
                                                         <div class="min-w-0">
-                                                            <p class="text-xs font-bold truncate">From: {getUserName(rule.ownerId)}</p>
-                                                            <p class="text-[0.5625rem] text-muted-foreground uppercase font-black tracking-widest opacity-60 flex items-center gap-1">
-                                                                {rule.type === 'all' ? 'All Tasks' : `Tag: ${rule.tagName} `}
-                                                                <span class="mx-1">•</span>
-                                                                {rule.share_mode === 'SEND_TASK' ? 'HANDOFF' : 'COLLAB'}
+                                                            <p class="text-xs font-bold truncate">{context.ownerName}</p>
+                                                            <p class="text-[0.5625rem] text-muted-foreground uppercase font-black tracking-widest opacity-60">
+                                                                Available in the context switcher
                                                             </p>
                                                         </div>
                                                     </div>
-                                                    {/* No delete button for incoming rules unless we add leave logic later */}
-                                                </div>
-                                            )}
-                                        </For>
-                                    </div>
+                                                )}
+                                            </For>
+                                        </div>
+                                    </Show>
 
-                                    {/* Active share rules - System */}
-                                    <details class="group/details">
-                                        <summary class="flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-muted-foreground cursor-pointer hover:text-foreground transition-colors py-2 select-none">
-                                            <div class="bg-muted/50 p-1 rounded-md group-open/details:rotate-90 transition-transform">
-                                                <ChevronRight size={12} />
+                                    <Show when={false}>
+                                        {/* Add new share rule */}
+                                        <div class="p-3 rounded-xl bg-muted/30 border border-border/50 space-y-3">
+                                            <div class="flex gap-2">
+                                                <Button
+                                                    variant={shareType() === 'all' ? 'default' : 'outline'}
+                                                    size="sm"
+                                                    class="h-8 text-xs gap-1"
+                                                    disabled
+                                                    title="All-task sharing is no longer supported"
+                                                >
+                                                    <Users size={12} />
+                                                    Legacy Off
+                                                </Button>
+                                                <Button
+                                                    variant={shareType() === 'tag' ? 'default' : 'outline'}
+                                                    size="sm"
+                                                    class="h-8 text-xs gap-1"
+                                                    onClick={() => setShareType('tag')}
+                                                >
+                                                    <Tag size={12} />
+                                                    By Tag
+                                                </Button>
                                             </div>
-                                            System Rules (Auto-Generated)
-                                        </summary>
-                                        <div class="pt-2 pl-4 space-y-2 animate-in fade-in slide-in-from-top-1 duration-200">
+
+                                            {/* Share Mode Selection */}
+                                            <div class="flex gap-2">
+                                                <Button
+                                                    variant={shareMode() === 'ADD_USER' ? 'default' : 'outline'}
+                                                    size="sm"
+                                                    class="h-7 text-[0.625rem] gap-1 px-2"
+                                                    title="Recipient gets edit access (Collaboration)"
+                                                    onClick={() => setShareMode('ADD_USER')}
+                                                >
+                                                    <Users size={10} />
+                                                    Collaborate
+                                                </Button>
+                                                <Button
+                                                    variant={shareMode() === 'SEND_TASK' ? 'default' : 'outline'}
+                                                    size="sm"
+                                                    class="h-7 text-[0.625rem] gap-1 px-2"
+                                                    title="Task ownership is transferred to recipient (Handoff)"
+                                                    onClick={() => setShareMode('SEND_TASK')}
+                                                >
+                                                    <ArrowLeftRight size={10} />
+                                                    Handoff
+                                                </Button>
+                                            </div>
+
+                                            <Show when={shareType() === 'tag'}>
+                                                <Select
+                                                    value={shareTag()}
+                                                    onChange={(val) => {
+                                                        if (val) {
+                                                            setShareTag(val);
+                                                            const tagDef = store.tagDefinitions.find(t => t.name === val);
+                                                            const isBucket = tagDef?.isBucket || store.buckets.some(b => b.name === val);
+                                                            const isUser = tagDef?.isUser;
+
+                                                            if (isBucket) {
+                                                                setShareMode('SEND_TASK');
+                                                            } else if (isUser) {
+                                                                setShareMode('ADD_USER');
+                                                            }
+                                                        }
+                                                    }}
+                                                    options={store.tagDefinitions.filter(t => t.name.startsWith("@")).map(t => t.name)}
+                                                    placeholder="Select a tag"
+                                                    itemComponent={(props: any) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
+                                                >
+                                                    <SelectTrigger class="h-9 text-sm">
+                                                        <span>{shareTag() || "Select a tag..."}</span>
+                                                    </SelectTrigger>
+                                                    <SelectContent />
+                                                </Select>
+                                            </Show>
+
+                                            <div class="flex gap-2">
+                                                <Select<{ id: string; name: string }>
+                                                    value={allUsers().find(u => u.id === shareUserId()) || null}
+                                                    onChange={(user) => setShareUserId(user?.id || "")}
+                                                    options={availableUsers()}
+                                                    optionValue="id"
+                                                    optionTextValue="name"
+                                                    placeholder={usersLoading() ? "Loading..." : "Select user..."}
+                                                    itemComponent={(itemProps: any) => (
+                                                        <SelectItem item={itemProps.item}>{itemProps.item.rawValue.name}</SelectItem>
+                                                    )}
+                                                >
+                                                    <SelectTrigger class="flex-1 h-9 text-sm">
+                                                        <SelectValue<{ id: string; name: string }>>
+                                                            {(state) => state.selectedOption()?.name || "Select user..."}
+                                                        </SelectValue>
+                                                    </SelectTrigger>
+                                                    <SelectContent />
+                                                </Select>
+                                                <Button
+                                                    size="sm"
+                                                    class="h-9 gap-2"
+                                                    disabled={!shareUserId() || !shareTag()}
+                                                    onClick={async () => {
+                                                        if (shareUserId() && shareTag()) {
+                                                            await addShareRule('tag', shareUserId(), shareTag(), shareMode());
+                                                            setShareUserId("");
+                                                        }
+                                                    }}
+                                                >
+                                                    <Plus size={14} />
+                                                    Share
+                                                </Button>
+                                            </div>
+                                            <p class="text-[0.625rem] text-muted-foreground italic px-1 pt-1">
+                                                {shareMode() === 'ADD_USER'
+                                                    ? "Collaborative contexts add access through the selected @tag."
+                                                    : "Handoff contexts transfer ownership when that @tag is applied."}
+                                            </p>
+
+                                        </div>
+
+                                        {/* Active share rules */}
+                                        {/* Active share rules - Outgoing */}
+                                        <div class="space-y-3">
+                                            <h4 class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground pb-1 flex items-center gap-2">
+                                                <div class="w-1 h-1 rounded-full bg-primary" />
+                                                Sharing With Others
+                                            </h4>
                                             <For each={store.shareRules.filter(r => {
                                                 const tagDef = r.type === 'tag' ? store.tagDefinitions.find(t => t.name === r.tagName) : null;
                                                 const isBucketTag = r.type === 'tag' && store.buckets.some(b => b.name === r.tagName);
-                                                return tagDef?.isUser || tagDef?.isBucket || isBucketTag;
-                                            })}>
-                                                {(rule) => {
-                                                    const tagDef = store.tagDefinitions.find(t => t.name === rule.tagName);
-                                                    return (
-                                                        <div class="flex items-center justify-between p-2 rounded-lg bg-muted/10 border border-border/20 gap-3 opacity-70">
-                                                            <div class="flex items-center gap-3 min-w-0 flex-1">
-                                                                <Tag size={14} class="text-muted-foreground shrink-0" />
-                                                                <div class="min-w-0">
-                                                                    <p class="text-sm font-medium truncate flex items-center gap-2">
-                                                                        {/* If it's a user tag, show the person's name. If it's a bucket, show the bucket name (tagName). */}
-                                                                        {tagDef?.isUser ? getUserName(rule.targetUserId) : rule.tagName}
-                                                                        {tagDef?.isUser ? <Users size={10} class="text-muted-foreground" /> : <Archive size={10} class="text-muted-foreground" />}
-                                                                    </p>
-                                                                    <p class="text-[0.625rem] text-muted-foreground uppercase tracking-wider flex items-center gap-1">
-                                                                        Auto-shared via {tagDef?.isUser ? 'User' : 'Bucket'} Tag
-                                                                        <span class="mx-1">•</span>
-                                                                        <button
-                                                                            class="hover:text-primary transition-colors hover:underline"
-                                                                            onClick={() => updateShareRule(rule.id, {
-                                                                                share_mode: rule.share_mode === 'SEND_TASK' ? 'ADD_USER' : 'SEND_TASK'
-                                                                            })}
-                                                                        >
-                                                                            {rule.share_mode === 'SEND_TASK' ? 'HANDOFF' : 'COLLAB'}
-                                                                        </button>
-                                                                    </p>
-                                                                </div>
+                                                const isSystem = tagDef?.isUser || tagDef?.isBucket || isBucketTag;
+                                                const isOwner = r.ownerId === pb.authStore.model?.id;
+                                                return !isSystem && isOwner;
+                                            })} fallback={
+                                                <div class="text-center py-4 text-muted-foreground text-[0.625rem] uppercase tracking-widest italic border border-dashed border-border/40 rounded-xl bg-muted/5">
+                                                    You aren't sharing with anyone yet.
+                                                </div>
+                                            }>
+                                                {(rule) => (
+                                                    <div class="flex items-center justify-between p-3 rounded-xl bg-muted/20 border border-border/40 gap-3 group/rule hover:bg-muted/30 transition-all">
+                                                        <div class="flex items-center gap-3 min-w-0 flex-1">
+                                                            <div class="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center text-primary shrink-0 transition-transform group-hover/rule:scale-110">
+                                                                {rule.type === 'all' ? <Users size={14} /> : <Tag size={14} />}
+                                                            </div>
+                                                            <div class="min-w-0">
+                                                                <p class="text-xs font-bold truncate">To: {getUserName(rule.targetUserId)}</p>
+                                                                <p class="text-[0.5625rem] text-muted-foreground uppercase font-black tracking-widest opacity-60 flex items-center gap-1">
+                                                                    {rule.type === 'all' ? 'All Tasks' : `Tag: ${rule.tagName} `}
+                                                                    <span class="mx-1">•</span>
+                                                                    <button
+                                                                        class="hover:text-primary transition-colors hover:underline"
+                                                                        onClick={() => updateShareRule(rule.id, {
+                                                                            share_mode: rule.share_mode === 'SEND_TASK' ? 'ADD_USER' : 'SEND_TASK'
+                                                                        })}
+                                                                    >
+                                                                        {rule.share_mode === 'SEND_TASK' ? 'HANDOFF' : 'COLLAB'}
+                                                                    </button>
+                                                                </p>
                                                             </div>
                                                         </div>
-                                                    );
-                                                }}
+                                                        <Button
+                                                            variant="ghost"
+                                                            size="icon"
+                                                            class="h-8 w-8 hover:bg-destructive/10 hover:text-destructive rounded-lg transition-all opacity-0 group-hover/rule:opacity-100"
+                                                            onClick={() => removeShareRule(rule.id)}
+                                                        >
+                                                            <Trash2 size={14} />
+                                                        </Button>
+                                                    </div>
+                                                )}
                                             </For>
                                         </div>
-                                    </details>
+
+                                        {/* Active share rules - Incoming */}
+                                        <div class="space-y-3 pt-4 border-t border-border/20">
+                                            <h4 class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground pb-1 flex items-center gap-2">
+                                                <div class="w-1 h-1 rounded-full bg-indigo-500" />
+                                                Shared With You
+                                            </h4>
+                                            <For each={store.shareRules.filter(r => {
+                                                const tagDef = r.type === 'tag' ? store.tagDefinitions.find(t => t.name === r.tagName) : null;
+                                                const isBucketTag = r.type === 'tag' && store.buckets.some(b => b.name === r.tagName);
+                                                const isSystem = tagDef?.isUser || tagDef?.isBucket || isBucketTag;
+                                                const isTarget = r.targetUserId === pb.authStore.model?.id;
+                                                return !isSystem && isTarget;
+                                            })} fallback={
+                                                <div class="text-center py-4 text-muted-foreground text-[0.625rem] uppercase tracking-widest italic border border-dashed border-border/40 rounded-xl bg-muted/5">
+                                                    No one has shared with you yet.
+                                                </div>
+                                            }>
+                                                {(rule) => (
+                                                    <div class="flex items-center justify-between p-3 rounded-xl bg-muted/20 border border-border/40 gap-3 group/rule hover:bg-muted/30 transition-all opacity-80">
+                                                        <div class="flex items-center gap-3 min-w-0 flex-1">
+                                                            <div class="w-8 h-8 rounded-lg bg-indigo-500/10 flex items-center justify-center text-indigo-500 shrink-0">
+                                                                {rule.type === 'all' ? <Users size={14} /> : <Tag size={14} />}
+                                                            </div>
+                                                            <div class="min-w-0">
+                                                                <p class="text-xs font-bold truncate">From: {getUserName(rule.ownerId)}</p>
+                                                                <p class="text-[0.5625rem] text-muted-foreground uppercase font-black tracking-widest opacity-60 flex items-center gap-1">
+                                                                    {rule.type === 'all' ? 'All Tasks' : `Tag: ${rule.tagName} `}
+                                                                    <span class="mx-1">•</span>
+                                                                    {rule.share_mode === 'SEND_TASK' ? 'HANDOFF' : 'COLLAB'}
+                                                                </p>
+                                                            </div>
+                                                        </div>
+                                                        {/* No delete button for incoming rules unless we add leave logic later */}
+                                                    </div>
+                                                )}
+                                            </For>
+                                        </div>
+
+                                        {/* Active share rules - System */}
+                                        <details class="group/details">
+                                            <summary class="flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-muted-foreground cursor-pointer hover:text-foreground transition-colors py-2 select-none">
+                                                <div class="bg-muted/50 p-1 rounded-md group-open/details:rotate-90 transition-transform">
+                                                    <ChevronRight size={12} />
+                                                </div>
+                                                System Rules (Auto-Generated)
+                                            </summary>
+                                            <div class="pt-2 pl-4 space-y-2 animate-in fade-in slide-in-from-top-1 duration-200">
+                                                <For each={store.shareRules.filter(r => {
+                                                    const tagDef = r.type === 'tag' ? store.tagDefinitions.find(t => t.name === r.tagName) : null;
+                                                    const isBucketTag = r.type === 'tag' && store.buckets.some(b => b.name === r.tagName);
+                                                    return tagDef?.isUser || tagDef?.isBucket || isBucketTag;
+                                                })}>
+                                                    {(rule) => {
+                                                        const tagDef = store.tagDefinitions.find(t => t.name === rule.tagName);
+                                                        return (
+                                                            <div class="flex items-center justify-between p-2 rounded-lg bg-muted/10 border border-border/20 gap-3 opacity-70">
+                                                                <div class="flex items-center gap-3 min-w-0 flex-1">
+                                                                    <Tag size={14} class="text-muted-foreground shrink-0" />
+                                                                    <div class="min-w-0">
+                                                                        <p class="text-sm font-medium truncate flex items-center gap-2">
+                                                                            {/* If it's a user tag, show the person's name. If it's a bucket, show the bucket name (tagName). */}
+                                                                            {tagDef?.isUser ? getUserName(rule.targetUserId) : rule.tagName}
+                                                                            {tagDef?.isUser ? <Users size={10} class="text-muted-foreground" /> : <Archive size={10} class="text-muted-foreground" />}
+                                                                        </p>
+                                                                        <p class="text-[0.625rem] text-muted-foreground uppercase tracking-wider flex items-center gap-1">
+                                                                            Auto-shared via {tagDef?.isUser ? 'User' : 'Bucket'} Tag
+                                                                            <span class="mx-1">•</span>
+                                                                            <button
+                                                                                class="hover:text-primary transition-colors hover:underline"
+                                                                                onClick={() => updateShareRule(rule.id, {
+                                                                                    share_mode: rule.share_mode === 'SEND_TASK' ? 'ADD_USER' : 'SEND_TASK'
+                                                                                })}
+                                                                            >
+                                                                                {rule.share_mode === 'SEND_TASK' ? 'HANDOFF' : 'COLLAB'}
+                                                                            </button>
+                                                                        </p>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        );
+                                                    }}
+                                                </For>
+                                            </div>
+                                        </details>
+                                    </Show>
                                 </div>
                             </Show>
                         </section>
@@ -392,9 +509,9 @@ export const SettingsView: Component<{ setView?: (v: string) => void }> = (props
                                 <div class="space-y-0.5">
                                     <h3 class="text-base font-semibold flex items-center gap-2">
                                         <Box size={16} />
-                                        Shared Global Buckets
+                                        Shared Buckets
                                     </h3>
-                                    <p class="text-sm text-muted-foreground">Manage public task buckets and your subscriptions.</p>
+                                    <p class="text-sm text-muted-foreground">Buckets are shared spaces where tasks can be moved and collaborated on.</p>
                                 </div>
                                 <div class="w-8 h-8 rounded-full flex items-center justify-center bg-muted/50 group-hover:bg-muted transition-colors">
                                     {isBucketsOpen() ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
@@ -405,7 +522,7 @@ export const SettingsView: Component<{ setView?: (v: string) => void }> = (props
                                 <div class="space-y-4 pt-2 animate-in fade-in slide-in-from-top-2 duration-300">
                                     {/* Create Bucket */}
                                     <div class="p-3 rounded-xl bg-muted/30 border border-border/50 space-y-3">
-                                        <h4 class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground">Create New Bucket</h4>
+                                        <h4 class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground">Create New Bucket Context</h4>
                                         <form
                                             class="flex flex-col sm:flex-row gap-2"
                                             onSubmit={(e) => {
@@ -455,7 +572,7 @@ export const SettingsView: Component<{ setView?: (v: string) => void }> = (props
                                     <div class="space-y-2">
                                         <For each={store.buckets} fallback={
                                             <div class="text-center py-8 text-muted-foreground text-sm italic border border-dashed border-border rounded-xl">
-                                                No buckets found.
+                                                No bucket contexts found.
                                             </div>
                                         }>
                                             {(bucket) => {
@@ -497,10 +614,21 @@ export const SettingsView: Component<{ setView?: (v: string) => void }> = (props
                                                                     />
                                                                 </Show>
                                                                 <p class="text-[0.625rem] text-muted-foreground truncate opacity-80">{bucket.description || "No description"}</p>
+                                                                <p class="text-[0.5625rem] uppercase tracking-widest text-muted-foreground/60 mt-1">@{bucket.name}</p>
                                                             </div>
                                                         </div>
 
                                                         <div class="flex items-center gap-2">
+                                                            <Button
+                                                                variant="outline"
+                                                                size="sm"
+                                                                class="h-8 text-[0.625rem] uppercase tracking-wider"
+                                                                onClick={() => updateBucket(bucket.id, {
+                                                                    policy: bucket.policy === "handoff" ? "collaborative" : "handoff"
+                                                                })}
+                                                            >
+                                                                {bucket.policy === "handoff" ? "Handoff" : "Collaborative"}
+                                                            </Button>
                                                             <Button
                                                                 variant={isSubscribed() ? "secondary" : "outline"}
                                                                 size="sm"
@@ -528,7 +656,7 @@ export const SettingsView: Component<{ setView?: (v: string) => void }> = (props
                                                                 size="icon"
                                                                 class="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10 opacity-0 group-hover/bucket:opacity-100 transition-opacity"
                                                                 onClick={() => {
-                                                                    if (confirm(`Delete the bucket "${bucket.name}" ? This cannot be undone and will affect all users.`)) {
+                                                                    if (confirm(`Archive the bucket "${bucket.name}"? Tasks stay intact and the bucket can be restored later.`)) {
                                                                         deleteBucket(bucket.id);
                                                                     }
                                                                 }}
@@ -930,6 +1058,102 @@ export const SettingsView: Component<{ setView?: (v: string) => void }> = (props
                     </div>
                 </div>
 
+                <Show when={TASGRID_IS_DEV_DATA}>
+                    <div class="space-y-3">
+                        <h2 class="text-xs font-bold text-muted-foreground/40 uppercase tracking-widest pl-1">Dev Tools</h2>
+                        <section class="p-4 sm:p-5 rounded-2xl border border-amber-500/20 bg-amber-500/5 shadow-sm space-y-4 overflow-hidden">
+                            <div
+                                class="flex items-center justify-between cursor-pointer group"
+                                onClick={() => setIsDevToolsOpen(!isDevToolsOpen())}
+                            >
+                                <div class="space-y-0.5">
+                                    <h3 class="text-base font-semibold flex items-center gap-2">
+                                        <Archive size={16} />
+                                        Dev Data Migration
+                                    </h3>
+                                    <p class="text-sm text-muted-foreground">
+                                        Rebuild canonical note keys, task `shareRefs` and `noteRefs`, personal user contexts, and bucket handoff cleanup for dev data.
+                                    </p>
+                                </div>
+                                <div class="w-8 h-8 rounded-full flex items-center justify-center bg-muted/50 group-hover:bg-muted transition-colors">
+                                    {isDevToolsOpen() ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
+                                </div>
+                            </div>
+
+                            <Show when={isDevToolsOpen()}>
+                                <div class="pt-2 animate-in fade-in slide-in-from-top-2 duration-300 space-y-3">
+                                    <p class="text-[0.6875rem] text-muted-foreground">
+                                        This is a dev-only repair tool. It updates notes and tasks in the current `*_Dev` collections to the latest key and context model.
+                                    </p>
+                                    <Button
+                                        variant="outline"
+                                        class="w-full sm:w-auto"
+                                        disabled={isRunningDevMigration()}
+                                        onClick={async () => {
+                                            setIsRunningDevMigration(true);
+                                            try {
+                                                await runDevDataMigration();
+                                            } finally {
+                                                setIsRunningDevMigration(false);
+                                            }
+                                        }}
+                                    >
+                                        {isRunningDevMigration() ? "Running Migration..." : "Run Dev Data Migration"}
+                                    </Button>
+                                </div>
+                            </Show>
+                        </section>
+                    </div>
+                </Show>
+
+                <Show when={canRunProdMigration()}>
+                    <div class="space-y-3">
+                        <h2 class="text-xs font-bold text-muted-foreground/40 uppercase tracking-widest pl-1">Production Migration</h2>
+                        <section class="p-4 sm:p-5 rounded-2xl border border-red-500/20 bg-red-500/5 shadow-sm space-y-4 overflow-hidden">
+                            <div
+                                class="flex items-center justify-between cursor-pointer group"
+                                onClick={() => setIsProdMigrationOpen(!isProdMigrationOpen())}
+                            >
+                                <div class="space-y-0.5">
+                                    <h3 class="text-base font-semibold flex items-center gap-2">
+                                        <Archive size={16} />
+                                        Prod Data Migration
+                                    </h3>
+                                    <p class="text-sm text-muted-foreground">
+                                        Admin-only one-shot migration for production tasks, notes, contexts, and note-task links.
+                                    </p>
+                                </div>
+                                <div class="w-8 h-8 rounded-full flex items-center justify-center bg-muted/50 group-hover:bg-muted transition-colors">
+                                    {isProdMigrationOpen() ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
+                                </div>
+                            </div>
+
+                            <Show when={isProdMigrationOpen()}>
+                                <div class="pt-2 animate-in fade-in slide-in-from-top-2 duration-300 space-y-3">
+                                    <p class="text-[0.6875rem] text-muted-foreground">
+                                        Run this only after the PocketBase production schema is ready and you have a fresh backup. This updates live production data in place.
+                                    </p>
+                                    <Button
+                                        variant="destructive"
+                                        class="w-full sm:w-auto"
+                                        disabled={isRunningProdMigration()}
+                                        onClick={async () => {
+                                            setIsRunningProdMigration(true);
+                                            try {
+                                                await runProdDataMigration();
+                                            } finally {
+                                                setIsRunningProdMigration(false);
+                                            }
+                                        }}
+                                    >
+                                        {isRunningProdMigration() ? "Running Production Migration..." : "Run Production Migration"}
+                                    </Button>
+                                </div>
+                            </Show>
+                        </section>
+                    </div>
+                </Show>
+
                 {/* Organization Category */}
                 <div class="space-y-3">
                     <h2 class="text-xs font-bold text-muted-foreground/40 uppercase tracking-widest pl-1">Organization</h2>

vite.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import solid from 'vite-plugin-solid'
 import { VitePWA } from 'vite-plugin-pwa'
 import tailwindcss from '@tailwindcss/vite'
@@ -9,80 +9,90 @@ const packageJson = JSON.parse(
   readFileSync(new URL('./package.json', import.meta.url), 'utf-8')
 );
 
-export default defineConfig({
-  define: {
-    __APP_VERSION__: JSON.stringify(packageJson.version),
-  },
-  plugins: [
-    solid(),
-    tailwindcss(),
-    VitePWA({
-      registerType: 'prompt',
-      includeAssets: ['icon.webp', 'vite.svg'],
-      manifest: {
-        name: 'Tasgrid',
-        short_name: 'Tasgrid',
-        description: 'Precision Productivity Task Manager',
-        theme_color: '#0a0a0a',
-        background_color: '#0a0a0a',
-        display: 'standalone',
-        icons: [
-          {
-            src: 'icon.webp',
-            sizes: '1024x1024',
-            type: 'image/webp',
-            purpose: 'any'
-          },
-          {
-            src: 'icon.webp',
-            sizes: '192x192',
-            type: 'image/webp',
-            purpose: 'maskable'
-          },
-          {
-            src: 'icon.webp',
-            sizes: '512x512',
-            type: 'image/webp',
-            purpose: 'any'
-          }
-        ]
-      },
-      workbox: {
-        globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'],
-        runtimeCaching: [
-          {
-            urlPattern: /^https:\/\/pocketbase\.ccllc\.pro\/api\/.*/i,
-            method: 'GET',
-            handler: 'NetworkFirst',
-            options: {
-              cacheName: 'api-cache',
-              expiration: {
-                maxEntries: 100,
-                maxAgeSeconds: 60 * 60 * 24 * 7 // 1 week
-              },
-              cacheableResponse: {
-                statuses: [0, 200]
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), '')
+  const dataMode = (env.VITE_TASGRID_DATA_MODE || 'prod').toLowerCase()
+  const isDevData = dataMode === 'dev'
+  const pocketbaseUrl = env.VITE_POCKETBASE_URL || 'https://pocketbase.ccllc.pro'
+  const pocketbaseOrigin = new URL(pocketbaseUrl).origin.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+  const cacheSuffix = isDevData ? '-devdata' : '-prod'
+
+  return {
+    define: {
+      __APP_VERSION__: JSON.stringify(packageJson.version),
+    },
+    plugins: [
+      solid(),
+      tailwindcss(),
+      VitePWA({
+        registerType: 'prompt',
+        includeAssets: ['icon.webp', 'vite.svg'],
+        manifest: {
+          name: isDevData ? 'Tasgrid Dev' : 'Tasgrid',
+          short_name: isDevData ? 'TasgridDev' : 'Tasgrid',
+          description: isDevData ? 'Tasgrid development data lane' : 'Precision Productivity Task Manager',
+          theme_color: '#0a0a0a',
+          background_color: '#0a0a0a',
+          display: 'standalone',
+          icons: [
+            {
+              src: 'icon.webp',
+              sizes: '1024x1024',
+              type: 'image/webp',
+              purpose: 'any'
+            },
+            {
+              src: 'icon.webp',
+              sizes: '192x192',
+              type: 'image/webp',
+              purpose: 'maskable'
+            },
+            {
+              src: 'icon.webp',
+              sizes: '512x512',
+              type: 'image/webp',
+              purpose: 'any'
+            }
+          ]
+        },
+        workbox: {
+          cleanupOutdatedCaches: true,
+          globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'],
+          runtimeCaching: [
+            {
+              urlPattern: new RegExp(`^${pocketbaseOrigin}/api/.*`, 'i'),
+              method: 'GET',
+              handler: 'NetworkFirst',
+              options: {
+                cacheName: `api-cache${cacheSuffix}`,
+                expiration: {
+                  maxEntries: 100,
+                  maxAgeSeconds: 60 * 60 * 24 * 7
+                },
+                cacheableResponse: {
+                  statuses: [0, 200]
+                }
               }
             }
-          }
-        ]
-      }
-    })
-  ],
-  server: {
-    host: '0.0.0.0',
-    port: 4000,
-    cors: { origin: '*' },
-    headers: {
-      'Access-Control-Allow-Origin': '*'
+          ]
+        }
+      })
+    ],
+    server: {
+      host: '0.0.0.0',
+      port: 4000,
+      cors: { origin: '*' },
+      headers: {
+        'Access-Control-Allow-Origin': '*'
+      },
+      allowedHosts: [
+        'tasgrid.ccllc.pro'
+      ]
     },
-    allowedHosts: [
-      'tasgrid.ccllc.pro'
-    ]
-  },
-  resolve: {
-    alias: {
-      "@": path.resolve(__dirname, "./src")
+    resolve: {
+      alias: {
+        "@": path.resolve(__dirname, "./src")
+      }
     }
   }
 })