@mseep/claudian 2.0.25

package/src/style/toolbar/mcp-selector.css

@@ -0,0 +1,176 @@
+/* MCP Server Selector */
+.claudian-mcp-selector {
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin-left: 8px;
+}
+
+.claudian-mcp-selector-icon-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.claudian-mcp-selector-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: var(--text-faint);
+  transition: color 0.15s ease;
+}
+
+.claudian-mcp-selector-icon-wrapper:hover .claudian-mcp-selector-icon {
+  color: var(--text-normal);
+}
+
+.claudian-mcp-selector-icon.active {
+  color: var(--claudian-brand);
+  animation: mcp-glow 2s ease-in-out infinite;
+}
+
+.claudian-mcp-selector-icon svg {
+  width: 16px;
+  height: 16px;
+}
+
+.claudian-mcp-selector-badge {
+  position: absolute;
+  top: 0;
+  right: 0;
+  font-size: 9px;
+  font-weight: 600;
+  color: var(--claudian-brand);
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  pointer-events: none;
+}
+
+.claudian-mcp-selector-badge.visible {
+  opacity: 1;
+}
+
+.claudian-mcp-selector-dropdown {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 100%;
+  margin-bottom: 4px;
+  min-width: 200px;
+  max-width: 280px;
+  background: var(--background-secondary);
+  border: 1px solid var(--background-modifier-border);
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.15s ease, visibility 0.15s ease;
+  z-index: 100;
+}
+
+/* Bridge the gap between icon and dropdown to prevent hover breaks */
+.claudian-mcp-selector-dropdown::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -8px;
+  height: 8px;
+}
+
+.claudian-mcp-selector-dropdown.visible,
+.claudian-mcp-selector:hover .claudian-mcp-selector-dropdown {
+  opacity: 1;
+  visibility: visible;
+}
+
+.claudian-mcp-selector-header {
+  padding: 10px 12px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-muted);
+  border-bottom: 1px solid var(--background-modifier-border);
+}
+
+.claudian-mcp-selector-list {
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.claudian-mcp-selector-empty {
+  padding: 16px 12px;
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 12px;
+  font-style: italic;
+}
+
+.claudian-mcp-selector-item {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  gap: 8px;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.claudian-mcp-selector-item:hover {
+  background: var(--background-modifier-hover);
+}
+
+.claudian-mcp-selector-item.enabled {
+  background: rgba(var(--claudian-brand-rgb), 0.1);
+}
+
+.claudian-mcp-selector-check {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--background-modifier-border);
+  border-radius: 3px;
+  color: var(--claudian-brand);
+}
+
+.claudian-mcp-selector-item.enabled .claudian-mcp-selector-check {
+  background: rgba(var(--claudian-brand-rgb), 0.2);
+  border-color: var(--claudian-brand);
+}
+
+.claudian-mcp-selector-check svg {
+  width: 12px;
+  height: 12px;
+}
+
+.claudian-mcp-selector-item-info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  flex: 1;
+  overflow: hidden;
+}
+
+.claudian-mcp-selector-item-name {
+  font-size: 12px;
+  color: var(--text-normal);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.claudian-mcp-selector-cs-badge {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 1px 4px;
+  border-radius: 3px;
+  background: rgba(var(--claudian-brand-rgb), 0.2);
+  color: var(--claudian-brand);
+  flex-shrink: 0;
+  margin-left: auto;
+}

package/src/style/toolbar/mode-selector.css

@@ -0,0 +1,19 @@
+.claudian-mode-selector {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
+  padding-left: 12px;
+  padding-right: 8px;
+}
+
+.claudian-mode-label {
+  font-size: 11px;
+  color: var(--text-muted);
+  min-width: 32px;
+}
+
+.claudian-mode-label.active {
+  color: var(--claudian-brand);
+  font-weight: 600;
+}

package/src/style/toolbar/model-selector.css

@@ -0,0 +1,99 @@
+/* Model selector */
+.claudian-model-selector {
+  position: relative;
+}
+
+.claudian-model-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--claudian-brand);
+  font-size: 12px;
+}
+
+.claudian-model-label {
+  font-weight: 500;
+}
+
+.claudian-model-chevron {
+  display: flex;
+  align-items: center;
+}
+
+.claudian-model-chevron svg {
+  width: 12px;
+  height: 12px;
+}
+
+.claudian-model-dropdown {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  margin-bottom: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  background: var(--background-secondary);
+  border: 1px solid var(--background-modifier-border);
+  border-radius: 4px;
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+  width: max-content;
+  padding: 4px;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.15s ease, visibility 0.15s ease;
+}
+
+.claudian-model-selector:hover .claudian-model-dropdown {
+  opacity: 1;
+  visibility: visible;
+}
+
+.claudian-model-group {
+  padding: 3px 8px;
+  font-size: 8px;
+  font-weight: 600;
+  color: var(--text-faint);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  pointer-events: none;
+}
+
+.claudian-model-group:not(:first-child) {
+  margin-top: 4px;
+  border-top: 1px solid var(--background-modifier-border);
+  padding-top: 6px;
+}
+
+.claudian-model-provider-icon {
+  flex-shrink: 0;
+  opacity: 0.7;
+}
+
+.claudian-model-option {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 8px;
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--text-muted);
+  border-radius: 3px;
+  transition: background 0.1s ease, color 0.1s ease;
+  white-space: nowrap;
+}
+
+.claudian-model-option:hover {
+  background: var(--background-modifier-hover);
+  color: var(--text-normal);
+}
+
+.claudian-model-option.selected {
+  background: rgba(var(--claudian-brand-rgb), 0.15);
+  color: var(--claudian-brand);
+  font-weight: 500;
+}

package/src/style/toolbar/permission-toggle.css

@@ -0,0 +1,56 @@
+/* Permission Mode Toggle */
+.claudian-permission-toggle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
+  padding-left: 12px;
+  padding-right: 8px;
+}
+
+.claudian-permission-label {
+  font-size: 11px;
+  color: var(--text-muted);
+  min-width: 28px;
+}
+
+.claudian-permission-label.plan-active {
+  color: rgb(92, 148, 140);
+  font-weight: 600;
+}
+
+.claudian-toggle-switch {
+  width: 32px;
+  height: 18px;
+  border-radius: 9px;
+  background: var(--background-modifier-border);
+  cursor: pointer;
+  position: relative;
+  transition: background 0.2s ease;
+  flex-shrink: 0;
+}
+
+.claudian-toggle-switch::after {
+  content: '';
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--text-muted);
+  top: 2px;
+  left: 2px;
+  transition: transform 0.2s ease, background 0.2s ease;
+}
+
+.claudian-toggle-switch:hover {
+  background: var(--background-modifier-hover);
+}
+
+.claudian-toggle-switch.active {
+  background: rgba(var(--claudian-brand-rgb), 0.3);
+}
+
+.claudian-toggle-switch.active::after {
+  transform: translateX(14px);
+  background: var(--claudian-brand);
+}

package/src/style/toolbar/service-tier-toggle.css

@@ -0,0 +1,39 @@
+/* Codex fast-mode / service-tier toggle */
+.claudian-service-tier-toggle {
+  display: flex;
+  align-items: center;
+  padding-left: 2px;
+}
+
+.claudian-service-tier-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 4px;
+  color: var(--text-muted);
+  background: transparent;
+  cursor: pointer;
+  transition: color 0.15s ease, background 0.15s ease;
+  flex-shrink: 0;
+}
+
+.claudian-service-tier-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.claudian-service-tier-icon svg {
+  width: 14px;
+  height: 14px;
+}
+
+.claudian-service-tier-button:hover {
+  background: var(--background-modifier-hover);
+}
+
+.claudian-service-tier-button.active {
+  color: var(--claudian-brand);
+}

package/src/style/toolbar/thinking-selector.css

@@ -0,0 +1,83 @@
+/* Thinking selector (effort for adaptive models, token budget for custom) */
+.claudian-thinking-selector {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* Effort / budget container (shared layout) */
+.claudian-thinking-effort,
+.claudian-thinking-budget {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.claudian-thinking-label-text {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.claudian-thinking-gears {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border-radius: 4px;
+}
+
+/* Current selection (visible when collapsed) */
+.claudian-thinking-current {
+  padding: 3px 8px;
+  font-size: 11px;
+  color: var(--claudian-brand);
+  font-weight: 500;
+  cursor: pointer;
+  border-radius: 3px;
+  white-space: nowrap;
+  background: transparent;
+}
+
+/* Options container - expands vertically upward */
+.claudian-thinking-options {
+  position: absolute;
+  left: 0;
+  bottom: 100%;
+  margin-bottom: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  background: var(--background-secondary);
+  border: 1px solid var(--background-modifier-border);
+  border-radius: 4px;
+  padding: 4px;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.15s ease, visibility 0.15s ease;
+}
+
+/* Expand on hover */
+.claudian-thinking-gears:hover .claudian-thinking-options {
+  opacity: 1;
+  visibility: visible;
+}
+
+.claudian-thinking-gear {
+  padding: 3px 8px;
+  font-size: 11px;
+  color: var(--text-muted);
+  cursor: pointer;
+  border-radius: 3px;
+  transition: background 0.1s ease, color 0.1s ease;
+  white-space: nowrap;
+}
+
+.claudian-thinking-gear:hover {
+  background: var(--background-modifier-hover);
+  color: var(--text-normal);
+}
+
+.claudian-thinking-gear.selected {
+  background: rgba(var(--claudian-brand-rgb), 0.15);
+  color: var(--claudian-brand);
+  font-weight: 500;
+}

package/src/types/smol-toml.d.ts

@@ -0,0 +1,4 @@
+declare module 'smol-toml' {
+  export function parse(input: string): unknown;
+  export function stringify(value: unknown): string;
+}

package/src/utils/agent.ts

@@ -0,0 +1,50 @@
+import type { AgentDefinition } from '../core/types';
+import { validateSlugName } from './frontmatter';
+import { yamlString } from './slashCommand';
+
+export function validateAgentName(name: string): string | null {
+  return validateSlugName(name, 'Agent');
+}
+
+function pushYamlList(lines: string[], key: string, items?: string[]): void {
+  if (!items || items.length === 0) return;
+  lines.push(`${key}:`);
+  for (const item of items) {
+    lines.push(`  - ${yamlString(item)}`);
+  }
+}
+
+export function serializeAgent(agent: AgentDefinition): string {
+  const lines: string[] = ['---'];
+
+  lines.push(`name: ${agent.name}`);
+  lines.push(`description: ${yamlString(agent.description)}`);
+
+  pushYamlList(lines, 'tools', agent.tools);
+  pushYamlList(lines, 'disallowedTools', agent.disallowedTools);
+
+  if (agent.model && agent.model !== 'inherit') {
+    lines.push(`model: ${agent.model}`);
+  }
+
+  if (agent.permissionMode) {
+    lines.push(`permissionMode: ${agent.permissionMode}`);
+  }
+
+  pushYamlList(lines, 'skills', agent.skills);
+
+  if (agent.hooks !== undefined) {
+    lines.push(`hooks: ${JSON.stringify(agent.hooks)}`);
+  }
+
+  if (agent.extraFrontmatter) {
+    for (const [key, value] of Object.entries(agent.extraFrontmatter)) {
+      lines.push(`${key}: ${JSON.stringify(value)}`);
+    }
+  }
+
+  lines.push('---');
+  lines.push(agent.prompt);
+
+  return lines.join('\n');
+}

package/src/utils/animationFrame.ts

@@ -0,0 +1,46 @@
+export interface ScheduledAnimationFrame {
+  kind: 'raf' | 'timeout';
+  id: number;
+  ownerWindow: Window | null;
+}
+
+function getRendererWindow(): Window | null {
+  return typeof window === 'undefined' ? null : window;
+}
+
+export function scheduleAnimationFrame(
+  callback: () => void,
+  ownerWindow: Window | null = getRendererWindow(),
+): ScheduledAnimationFrame {
+  const targetWindow = ownerWindow ?? getRendererWindow();
+  if (!targetWindow) {
+    callback();
+    return { kind: 'timeout', id: 0, ownerWindow: null };
+  }
+
+  if (typeof targetWindow.requestAnimationFrame === 'function') {
+    return {
+      kind: 'raf',
+      id: targetWindow.requestAnimationFrame(() => callback()),
+      ownerWindow: targetWindow,
+    };
+  }
+
+  return {
+    kind: 'timeout',
+    id: targetWindow.setTimeout(callback, 16),
+    ownerWindow: targetWindow,
+  };
+}
+
+export function cancelScheduledAnimationFrame(frame: ScheduledAnimationFrame): void {
+  const targetWindow = frame.ownerWindow ?? getRendererWindow();
+  if (!targetWindow) return;
+
+  if (frame.kind === 'raf' && typeof targetWindow.cancelAnimationFrame === 'function') {
+    targetWindow.cancelAnimationFrame(frame.id);
+    return;
+  }
+
+  targetWindow.clearTimeout(frame.id);
+}

package/src/utils/browser.ts

@@ -0,0 +1,46 @@
+export interface BrowserSelectionContext {
+  source: string;
+  selectedText: string;
+  title?: string;
+  url?: string;
+}
+
+function escapeXmlAttribute(value: string): string {
+  return value
+    .replace(/&/g, '&')
+    .replace(/"/g, '"')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+}
+
+function buildAttributeList(context: BrowserSelectionContext): string {
+  const attrs: string[] = [];
+  const source = context.source.trim() || 'unknown';
+  attrs.push(`source="${escapeXmlAttribute(source)}"`);
+
+  if (context.title?.trim()) {
+    attrs.push(`title="${escapeXmlAttribute(context.title.trim())}"`);
+  }
+
+  if (context.url?.trim()) {
+    attrs.push(`url="${escapeXmlAttribute(context.url.trim())}"`);
+  }
+
+  return attrs.join(' ');
+}
+
+function escapeXmlBody(text: string): string {
+  return text.replace(/<\/browser_selection>/gi, '&lt;/browser_selection&gt;');
+}
+
+export function formatBrowserContext(context: BrowserSelectionContext): string {
+  const selectedText = context.selectedText.trim();
+  if (!selectedText) return '';
+  const attrs = buildAttributeList(context);
+  return `<browser_selection ${attrs}>\n${escapeXmlBody(selectedText)}\n</browser_selection>`;
+}
+
+export function appendBrowserContext(prompt: string, context: BrowserSelectionContext): string {
+  const formatted = formatBrowserContext(context);
+  return formatted ? `${prompt}\n\n${formatted}` : prompt;
+}

package/src/utils/canvas.ts

@@ -0,0 +1,14 @@
+export interface CanvasSelectionContext {
+  canvasPath: string;
+  nodeIds: string[];
+}
+
+export function formatCanvasContext(context: CanvasSelectionContext): string {
+  if (context.nodeIds.length === 0) return '';
+  return `<canvas_selection path="${context.canvasPath}">\n${context.nodeIds.join(', ')}\n</canvas_selection>`;
+}
+
+export function appendCanvasContext(prompt: string, context: CanvasSelectionContext): string {
+  const formatted = formatCanvasContext(context);
+  return formatted ? `${prompt}\n\n${formatted}` : prompt;
+}