@plannotator/ui 0.22.0

package/utils/identity.ts

@@ -0,0 +1,112 @@
+/**
+ * Tater Identity System
+ *
+ * Generates anonymous identities for collaborative annotation sharing.
+ * Format: {adjective}-{noun}-tater
+ * Examples: "swift-falcon-tater", "gentle-crystal-tater"
+ *
+ * Resolution is delegated to ConfigStore (packages/ui/config/configStore.ts)
+ * which handles: server config file > cookie > generated tater name.
+ * This module provides the identity-specific API surface.
+ */
+
+import { configStore } from '../config';
+import { generateIdentity } from './generateIdentity';
+
+/**
+ * Host-overridable identity provider.
+ *
+ * Default = today's tater behavior (ConfigStore-backed nickname + cookie match).
+ * A host (e.g. Workspaces) calls setIdentityProvider once at startup to stamp its
+ * logged-in user on comments and drive the `(me)` badge instead. Mirrors the
+ * swappable storage backend in ./storage.ts (StorageBackend/setStorageBackend).
+ */
+export interface IdentityProvider {
+  /** Display name stamped as `author` on new annotations. */
+  getIdentity(): string;
+  /** Whether an annotation's `author` is the current user (drives the `(me)` badge). */
+  isCurrentUser(author: string | undefined): boolean;
+  /**
+   * Whether the user may change their own display name from the Settings UI.
+   * Default (Plannotator's cookie identity) is editable. A host whose identity
+   * is owned by its auth system (e.g. a logged-in Workspaces user, whose author
+   * is the server-stamped account id) returns `false` so the rename/regenerate
+   * controls are hidden — preventing a locally-chosen name from diverging from
+   * the server-stamped author. Optional for backward-compat: absent ⇒ editable.
+   */
+  isEditable?(): boolean;
+}
+
+/**
+ * Default provider: today's literal Plannotator behavior.
+ * `displayName` resolution stays in ConfigStore (server config > cookie > tater).
+ */
+const defaultIdentityProvider: IdentityProvider = {
+  getIdentity(): string {
+    return configStore.get('displayName');
+  },
+  isCurrentUser(author: string | undefined): boolean {
+    if (!author) return false;
+    return author === configStore.get('displayName');
+  },
+  isEditable(): boolean {
+    return true;
+  },
+};
+
+// Active provider. Defaults to the tater identity so Plannotator is unchanged.
+let identityProvider: IdentityProvider = defaultIdentityProvider;
+
+/** Override the identity provider. Call once at app startup. */
+export function setIdentityProvider(p: IdentityProvider): void {
+  identityProvider = p;
+}
+
+/** Reset to the default (tater) provider. Mainly for tests. */
+export function resetIdentityProvider(): void {
+  identityProvider = defaultIdentityProvider;
+}
+
+/**
+ * Get current identity. Delegates to the active provider (default = ConfigStore tater).
+ */
+export function getIdentity(): string {
+  return identityProvider.getIdentity();
+}
+
+/**
+ * Set a custom display name.
+ * Writes to cookie (sync) + queues server write-back (async) via ConfigStore.
+ */
+export function setCustomIdentity(name: string): string {
+  const trimmed = name.trim();
+  if (!trimmed) return getIdentity(); // reject empty
+  configStore.set('displayName', trimmed);
+  return trimmed;
+}
+
+/**
+ * Regenerate identity with a new random tater name.
+ * Writes to cookie + queues server write-back via ConfigStore.
+ */
+export function regenerateIdentity(): string {
+  const identity = generateIdentity();
+  configStore.set('displayName', identity);
+  return identity;
+}
+
+/**
+ * Check if an identity belongs to the current user. Delegates to the active provider.
+ */
+export function isCurrentUser(author: string | undefined): boolean {
+  return identityProvider.isCurrentUser(author);
+}
+
+/**
+ * Whether the current identity is user-editable (drives whether the Settings
+ * rename/regenerate controls are shown). Delegates to the active provider;
+ * defaults to editable when the provider doesn't implement `isEditable`.
+ */
+export function isIdentityEditable(): boolean {
+  return identityProvider.isEditable ? identityProvider.isEditable() : true;
+}

package/utils/inlineTransforms.ts

@@ -0,0 +1,41 @@
+/**
+ * Render-time transforms applied to plain-text fragments inside the inline
+ * scanner. Called only after code spans, links, and other markdown syntax
+ * have been consumed — so transforms here are guaranteed to operate on prose,
+ * not on code or URL strings.
+ */
+
+const EMOJI_MAP: Record<string, string> = {
+  smile: '😄', heart: '❤️', thumbsup: '👍', thumbsdown: '👎',
+  fire: '🔥', star: '⭐', tada: '🎉', rocket: '🚀',
+  bug: '🐛', sparkles: '✨', warning: '⚠️', white_check_mark: '✅',
+  x: '❌', eyes: '👀', wave: '👋', thinking: '🤔',
+  ok: '🆗', construction: '🚧', boom: '💥', gear: '⚙️',
+  hourglass: '⏳', zap: '⚡', lock: '🔒', unlock: '🔓',
+  memo: '📝', book: '📖', package: '📦', hammer: '🔨',
+  checkered_flag: '🏁', question: '❓', exclamation: '❗', bulb: '💡',
+};
+
+function replaceEmoji(s: string): string {
+  return s.replace(/:([a-z_]+):/g, (whole, code) => EMOJI_MAP[code] ?? whole);
+}
+
+function smartypants(s: string): string {
+  return s
+    .replace(/\.{3}/g, '…')
+    .replace(/---/g, '—')
+    // Narrow en-dash rule to numeric ranges (e.g. "pages 3--5" → "3–5").
+    // Previously matched any non-hyphen context, which rewrote CLI flags
+    // like "bun --watch" into "bun –watch". Letter-to-letter en-dashes
+    // are rare in technical writing; we accept losing them to avoid the
+    // false positive on command-line arguments.
+    .replace(/(\d)--(?=\d)/g, '$1–')
+    .replace(/(^|[\s([{])"/g, '$1“')
+    .replace(/"/g, '”')
+    .replace(/(^|[\s([{])'/g, '$1‘')
+    .replace(/'/g, '’');
+}
+
+export function transformPlainText(text: string): string {
+  return smartypants(replaceEmoji(text));
+}

package/utils/inputMethod.ts

@@ -0,0 +1,17 @@
+import { storage } from './storage';
+import type { InputMethod } from '../types';
+
+const STORAGE_KEY = 'plannotator-input-method';
+const DEFAULT_METHOD: InputMethod = 'drag';
+
+export function getInputMethod(): InputMethod {
+  const stored = storage.getItem(STORAGE_KEY);
+  if (stored === 'drag' || stored === 'pinpoint') {
+    return stored;
+  }
+  return DEFAULT_METHOD;
+}
+
+export function saveInputMethod(method: InputMethod): void {
+  storage.setItem(STORAGE_KEY, method);
+}

package/utils/lookAndFeelAnnouncement.ts

@@ -0,0 +1,18 @@
+/**
+ * Tracks whether the user has seen the UI 2.0 "look & feel" refresh announcement.
+ * Uses cookies so the dismissal survives Plannotator's random localhost ports.
+ */
+
+import { storage } from './storage';
+
+const STORAGE_KEY = 'plannotator-look-feel-announcement-seen';
+// v2: grid is the default again; the dialog became a grid-vs-clean image chooser.
+const CURRENT_VERSION = '2';
+
+export function needsLookAndFeelAnnouncement(): boolean {
+  return storage.getItem(STORAGE_KEY) !== CURRENT_VERSION;
+}
+
+export function markLookAndFeelAnnouncementSeen(): void {
+  storage.setItem(STORAGE_KEY, CURRENT_VERSION);
+}

package/utils/obsidian.ts

@@ -0,0 +1,201 @@
+/**
+ * Obsidian Integration Utility
+ *
+ * Manages settings for auto-saving plans to Obsidian vaults.
+ * Settings are stored in cookies (like other settings) so they persist
+ * across different ports used by the hook server.
+ */
+
+import { storage } from './storage';
+
+// Storage keys
+const STORAGE_KEY_ENABLED = 'plannotator-obsidian-enabled';
+const STORAGE_KEY_VAULT = 'plannotator-obsidian-vault';
+const STORAGE_KEY_FOLDER = 'plannotator-obsidian-folder';
+const STORAGE_KEY_CUSTOM_PATH = 'plannotator-obsidian-custom-path';
+const STORAGE_KEY_FILENAME_FORMAT = 'plannotator-obsidian-filename-format';
+const STORAGE_KEY_VAULT_BROWSER = 'plannotator-obsidian-vault-browser';
+const STORAGE_KEY_AUTOSAVE = 'plannotator-obsidian-autosave';
+const STORAGE_KEY_FILENAME_SEPARATOR = 'plannotator-obsidian-filename-separator';
+
+// Sentinel value for custom path selection
+export const CUSTOM_PATH_SENTINEL = '__custom__';
+
+// Default folder name in the vault
+const DEFAULT_FOLDER = 'plannotator';
+
+// Default filename format — matches the original hardcoded behavior
+export const DEFAULT_FILENAME_FORMAT = '{title} - {Mon} {D}, {YYYY} {h}-{mm}{ampm}';
+
+/**
+ * Obsidian integration settings
+ */
+export type FilenameSeparator = 'space' | 'dash' | 'underscore';
+
+export interface ObsidianSettings {
+  enabled: boolean;
+  vaultPath: string;      // Selected vault path OR '__custom__' sentinel
+  folder: string;
+  customPath?: string;    // User-entered path when vaultPath === '__custom__'
+  filenameFormat?: string; // Custom filename format (e.g. '{YYYY}-{MM}-{DD} - {title}')
+  filenameSeparator: FilenameSeparator; // Replace spaces in filename with dash/underscore
+  autoSave: boolean;      // Auto-save to Obsidian on plan arrival
+  vaultBrowserEnabled: boolean; // Show vault file browser in sidebar
+}
+
+/**
+ * Get current Obsidian settings from storage
+ */
+export function getObsidianSettings(): ObsidianSettings {
+  return {
+    enabled: storage.getItem(STORAGE_KEY_ENABLED) === 'true',
+    vaultPath: storage.getItem(STORAGE_KEY_VAULT) || '',
+    folder: storage.getItem(STORAGE_KEY_FOLDER) || DEFAULT_FOLDER,
+    customPath: storage.getItem(STORAGE_KEY_CUSTOM_PATH) || undefined,
+    filenameFormat: storage.getItem(STORAGE_KEY_FILENAME_FORMAT) || undefined,
+    filenameSeparator: (storage.getItem(STORAGE_KEY_FILENAME_SEPARATOR) as FilenameSeparator) || 'space',
+    autoSave: storage.getItem(STORAGE_KEY_AUTOSAVE) === 'true',
+    vaultBrowserEnabled: storage.getItem(STORAGE_KEY_VAULT_BROWSER) === 'true',
+  };
+}
+
+/**
+ * Save Obsidian settings to storage
+ */
+export function saveObsidianSettings(settings: ObsidianSettings): void {
+  storage.setItem(STORAGE_KEY_ENABLED, String(settings.enabled));
+  storage.setItem(STORAGE_KEY_VAULT, settings.vaultPath);
+  storage.setItem(STORAGE_KEY_FOLDER, settings.folder);
+  storage.setItem(STORAGE_KEY_CUSTOM_PATH, settings.customPath || '');
+  storage.setItem(STORAGE_KEY_FILENAME_FORMAT, settings.filenameFormat || '');
+  storage.setItem(STORAGE_KEY_FILENAME_SEPARATOR, settings.filenameSeparator || 'space');
+  storage.setItem(STORAGE_KEY_AUTOSAVE, String(settings.autoSave));
+  storage.setItem(STORAGE_KEY_VAULT_BROWSER, String(settings.vaultBrowserEnabled));
+}
+
+/**
+ * Get the effective vault path, resolving custom path if selected
+ */
+export function getEffectiveVaultPath(settings: ObsidianSettings): string {
+  if (settings.vaultPath === CUSTOM_PATH_SENTINEL) {
+    return settings.customPath || '';
+  }
+  return settings.vaultPath;
+}
+
+/**
+ * Check if Obsidian integration is properly configured
+ */
+export function isObsidianConfigured(): boolean {
+  const settings = getObsidianSettings();
+  const effectivePath = getEffectiveVaultPath(settings);
+  return settings.enabled && effectivePath.trim().length > 0;
+}
+
+/**
+ * Check if the vault browser sidebar tab should be shown
+ */
+export function isVaultBrowserEnabled(): boolean {
+  const settings = getObsidianSettings();
+  const effectivePath = getEffectiveVaultPath(settings);
+  return settings.enabled && settings.vaultBrowserEnabled && effectivePath.trim().length > 0;
+}
+
+/**
+ * Extract tags from markdown content using simple heuristics
+ *
+ * Extracts:
+ * - Words from the first H1 title (excluding common words)
+ * - Code fence languages (```typescript, ```sql, etc.)
+ * - Always includes "plan" as base tag
+ *
+ * @param markdown - The markdown content to extract tags from
+ * @returns Array of lowercase tag strings (max 6)
+ */
+export function extractTags(markdown: string): string[] {
+  const tags = new Set<string>(['plannotator']);
+
+  // Common words to exclude from title extraction
+  const stopWords = new Set([
+    'the', 'and', 'for', 'with', 'this', 'that', 'from', 'into',
+    'plan', 'implementation', 'overview', 'phase', 'step', 'steps',
+  ]);
+
+  // 1. Extract from first H1 title
+  // Matches: "# Title" or "# Implementation Plan: Title" or "# Plan: Title"
+  const h1Match = markdown.match(/^#\s+(?:Implementation\s+Plan:|Plan:)?\s*(.+)$/im);
+  if (h1Match) {
+    const titleWords = h1Match[1]
+      .toLowerCase()
+      .replace(/[^\w\s-]/g, ' ')  // Remove special chars except hyphens
+      .split(/\s+/)
+      .filter(word => word.length > 2 && !stopWords.has(word));
+
+    // Add first 3 meaningful words from title
+    titleWords.slice(0, 3).forEach(word => tags.add(word));
+  }
+
+  // 2. Extract code fence languages
+  // Matches: ```typescript, ```sql, ```rust, etc.
+  const langMatches = markdown.matchAll(/```(\w+)/g);
+  const seenLangs = new Set<string>();
+
+  for (const [, lang] of langMatches) {
+    const normalizedLang = lang.toLowerCase();
+    // Skip generic/config languages and duplicates
+    if (!seenLangs.has(normalizedLang) &&
+        !['json', 'yaml', 'yml', 'text', 'txt', 'markdown', 'md'].includes(normalizedLang)) {
+      seenLangs.add(normalizedLang);
+      tags.add(normalizedLang);
+    }
+  }
+
+  // Return max 6 tags
+  return Array.from(tags).slice(0, 6);
+}
+
+/**
+ * Generate YAML frontmatter for an Obsidian note
+ *
+ * @param tags - Array of tags to include
+ * @returns Frontmatter string including opening and closing ---
+ */
+export function generateFrontmatter(tags: string[]): string {
+  const now = new Date().toISOString();
+  const tagList = tags.map(t => t.toLowerCase()).join(', ');
+
+  return `---
+created: ${now}
+source: plannotator
+tags: [${tagList}]
+---`;
+}
+
+/**
+ * Generate a filename for the plan note
+ * Format: YYYY-MM-DD-HHmm.md (e.g., 2026-01-02-1430.md)
+ *
+ * @returns Filename string
+ */
+export function generateFilename(): string {
+  const now = new Date();
+  const timestamp = now.toISOString()
+    .slice(0, 16)           // "2026-01-02T14:30"
+    .replace('T', '-')      // "2026-01-02-14:30"
+    .replace(/:/g, '');     // "2026-01-02-1430"
+
+  return `${timestamp}.md`;
+}
+
+/**
+ * Prepare the full note content with frontmatter
+ *
+ * @param markdown - The plan markdown content
+ * @returns Full note content with frontmatter prepended
+ */
+export function prepareNoteContent(markdown: string): string {
+  const tags = extractTags(markdown);
+  const frontmatter = generateFrontmatter(tags);
+
+  return `${frontmatter}\n\n${markdown}`;
+}

package/utils/octarine.ts

@@ -0,0 +1,53 @@
+/**
+ * Octarine Notes Integration Utility
+ *
+ * Manages settings for auto-saving plans to Octarine.
+ * Uses octarine:// URI scheme — no vault detection needed.
+ */
+
+import { storage } from './storage';
+
+const STORAGE_KEY_ENABLED = 'plannotator-octarine-enabled';
+const STORAGE_KEY_WORKSPACE = 'plannotator-octarine-workspace';
+const STORAGE_KEY_FOLDER = 'plannotator-octarine-folder';
+const STORAGE_KEY_AUTOSAVE = 'plannotator-octarine-autosave';
+
+/**
+ * Octarine integration settings
+ */
+export interface OctarineSettings {
+  enabled: boolean;
+  workspace: string;
+  folder: string;
+  autoSave: boolean;
+}
+
+/**
+ * Get current Octarine settings from storage
+ */
+export function getOctarineSettings(): OctarineSettings {
+  return {
+    enabled: storage.getItem(STORAGE_KEY_ENABLED) === 'true',
+    workspace: storage.getItem(STORAGE_KEY_WORKSPACE) ?? '',
+    folder: storage.getItem(STORAGE_KEY_FOLDER) || 'plannotator',
+    autoSave: storage.getItem(STORAGE_KEY_AUTOSAVE) === 'true',
+  };
+}
+
+/**
+ * Save Octarine settings to storage
+ */
+export function saveOctarineSettings(settings: OctarineSettings): void {
+  storage.setItem(STORAGE_KEY_ENABLED, String(settings.enabled));
+  storage.setItem(STORAGE_KEY_WORKSPACE, settings.workspace);
+  storage.setItem(STORAGE_KEY_FOLDER, settings.folder);
+  storage.setItem(STORAGE_KEY_AUTOSAVE, String(settings.autoSave));
+}
+
+/**
+ * Check if Octarine integration is properly configured
+ */
+export function isOctarineConfigured(): boolean {
+  const settings = getOctarineSettings();
+  return settings.enabled && settings.workspace.trim().length > 0;
+}