@miphamai/cli 0.3.0 → 0.5.0

package/src/core/permission.ts

@@ -1,56 +1,127 @@
-import type { ToolDefinition, ToolPermission, PermissionLevel, PermissionRule } from '../shared/index.ts'
+import type {
+  ToolDefinition,
+  PermissionMode,
+  PermissionLevel,
+  PermissionRule,
+} from '../shared/index.ts'
+import type { PermissionRuleEntry } from '../shared/index.ts'
+import { matchBashRule, compileRule } from './permission-rules'
+import { loadPermissionConfig, nextMode, MODE_CYCLE } from './permission-config'
+
+const VALID_MODES: Set<string> = new Set<string>(MODE_CYCLE)
 
 export class PermissionSystem {
-  private rules = new Map<string, PermissionLevel>()
-  private patternRules: Array<{ pattern: RegExp; level: PermissionLevel }> = []
+  private allowRules: PermissionRuleEntry[] = []
+  private denyRules: PermissionRuleEntry[] = []
+  private askRules: PermissionRuleEntry[] = []
+  /** Legacy exact-name rules for backward compat (set via setRule with 'auto' level). */
+  private legacyRules = new Map<string, PermissionLevel>()
+  /** Legacy default level from constructor when passed non-mode values like 'ask' or 'bypass'. */
+  private legacyDefaultFallback: PermissionLevel | null = null
+  private mode: PermissionMode = 'default'
 
-  constructor(private defaultLevel: ToolPermission = 'auto') {}
+  constructor(modeOrLevel: PermissionLevel = 'default') {
+    if (VALID_MODES.has(modeOrLevel)) {
+      this.mode = modeOrLevel as PermissionMode
+    } else {
+      // Legacy values ('ask', 'bypass') → store as fallback, use 'default' mode
+      this.mode = 'default'
+      this.legacyDefaultFallback = modeOrLevel
+    }
+  }
 
-  setDefaultLevel(level: PermissionLevel): void {
-    this.defaultLevel = level
+  // ── Mode management ──
+
+  setMode(mode: PermissionMode): void {
+    this.mode = mode
   }
 
-  getDefaultLevel(): PermissionLevel {
-    return this.defaultLevel
+  getMode(): PermissionMode {
+    return this.mode
   }
 
-  setRule(toolNameOrRule: string | PermissionRule, level?: PermissionLevel): void {
-    if (typeof toolNameOrRule === 'string') {
-      if (level) this.rules.set(toolNameOrRule, level)
-    } else {
-      const rule = toolNameOrRule
-      if (rule.pattern) {
-        this.patternRules.push({ pattern: new RegExp(rule.pattern), level: rule.level })
-      } else {
-        this.rules.set(rule.toolName, rule.level)
-      }
-    }
+  cycleMode(): PermissionMode {
+    this.mode = nextMode(this.mode)
+    return this.mode
   }
 
-  removeRule(toolName: string): void {
-    this.rules.delete(toolName)
+  // ── Rule management ──
+
+  allow(rule: string): void {
+    this.allowRules.push(compileRule(rule, 'allow'))
+  }
+
+  deny(rule: string): void {
+    this.denyRules.push(compileRule(rule, 'deny'))
   }
 
+  ask(rule: string): void {
+    this.askRules.push(compileRule(rule, 'ask'))
+  }
+
+  loadConfig(raw: { mode?: string; allow?: string[]; deny?: string[] }): void {
+    const config = loadPermissionConfig(
+      raw as Partial<{ mode: PermissionMode; allow: string[]; deny: string[] }>,
+    )
+    this.mode = config.mode
+
+    this.allowRules = []
+    this.denyRules = []
+    this.askRules = []
+
+    for (const rule of config.allow) {
+      this.allowRules.push(compileRule(rule, 'allow'))
+    }
+    for (const rule of config.deny) {
+      this.denyRules.push(compileRule(rule, 'deny'))
+    }
+  }
+
+  // ── Permission check ──
+
   /**
-   * Resolve permission level for a tool call.
-   *
-   * Fallback chain: exact rule → pattern rule → tool permission → system default
+   * Resolution chain (first match wins):
+   * 1. Deny rules → block
+   * 2. Ask rules → require approval
+   * 3. Allow rules → permit
+   * 4. Legacy exact-name rules (backward compat — e.g. setRule('tool', 'auto'))
+   * 5. Mode baseline → mode-specific default (overrides tool.permission for explicit modes)
+   * 6. Tool's own permission → tool-specific default (backward compat)
+   * 7. Legacy constructor fallback (when constructed with 'ask'/'bypass')
+   * 8. System default → 'ask'
    */
   check(tool: ToolDefinition, input: Record<string, unknown>): PermissionLevel {
-    // 1. Exact-name rule wins
-    const ruleLevel = this.rules.get(tool.name)
-    if (ruleLevel) return ruleLevel
+    // 1. Check deny rules (always win)
+    for (const rule of this.denyRules) {
+      if (this.ruleMatches(rule, tool, input)) return 'ask'
+    }
+
+    // 2. Check ask rules
+    for (const rule of this.askRules) {
+      if (this.ruleMatches(rule, tool, input)) return 'ask'
+    }
 
-    // 2. Pattern-based rules (e.g. "file_*" → bypass)
-    for (const { pattern, level } of this.patternRules) {
-      if (pattern.test(tool.name)) return level
+    // 3. Check allow rules
+    for (const rule of this.allowRules) {
+      if (this.ruleMatches(rule, tool, input)) return 'bypass'
     }
 
-    // 3. Tool's own permission level
+    // 4. Legacy exact-name rules (backward compat)
+    const legacyLevel = this.legacyRules.get(tool.name)
+    if (legacyLevel !== undefined) return legacyLevel
+
+    // 5. Mode baseline
+    const baseline = this.modeBaseline(tool)
+    if (baseline !== 'mode-baseline') return baseline
+
+    // 6. Tool's own permission level (backward compat fallback)
     if (tool.permission) return tool.permission
 
-    // 4. System default
-    return this.defaultLevel
+    // 7. Legacy constructor fallback
+    if (this.legacyDefaultFallback) return this.legacyDefaultFallback
+
+    // 8. System default
+    return 'ask'
   }
 
   needsApproval(tool: ToolDefinition, input: Record<string, unknown>): boolean {
@@ -61,8 +132,127 @@ export class PermissionSystem {
     return this.check(tool, input) === 'bypass'
   }
 
+  // ── Helpers ──
+
+  private ruleMatches(
+    rule: PermissionRuleEntry,
+    tool: ToolDefinition,
+    input: Record<string, unknown>,
+  ): boolean {
+    // Try Bash-style matching first
+    if (rule.pattern.includes('(')) {
+      return matchBashRule(rule.pattern, tool.name, input)
+    }
+    // Simple tool name match
+    return rule.pattern === tool.name || rule.compiled.test(tool.name)
+  }
+
+  private modeBaseline(tool: ToolDefinition): PermissionLevel | 'mode-baseline' {
+    switch (this.mode) {
+      case 'default':
+        // Delegate to tool.permission (backward compat)
+        return 'mode-baseline'
+
+      case 'acceptEdits':
+        // Reads + file edits free; Bash requires approval
+        return tool.category === 'file'
+          ? ['Bash'].includes(tool.name)
+            ? 'ask'
+            : 'bypass'
+          : tool.name === 'Bash'
+            ? 'ask'
+            : 'ask'
+
+      case 'plan':
+        // Only reads, no writes or executes
+        return tool.category === 'file' && ['Read', 'Grep', 'Glob'].includes(tool.name)
+          ? 'bypass'
+          : 'ask'
+
+      case 'auto':
+        // Respect tool-level permissions; safety checks handled by hook layer
+        return 'mode-baseline'
+
+      case 'dontAsk':
+        // Only allowlisted tools free (already handled above); everything else requires approval
+        return 'ask'
+
+      case 'bypassPermissions':
+        return 'bypass'
+
+      default:
+        return 'mode-baseline'
+    }
+  }
+
+  // ── Legacy compatibility ──
+
+  setDefaultLevel(level: PermissionLevel): void {
+    // Map legacy 3-level to new mode
+    if (level === 'auto') this.mode = 'auto'
+    else if (level === 'bypass') this.mode = 'bypassPermissions'
+    else this.mode = 'default'
+  }
+
+  getDefaultLevel(): PermissionLevel {
+    // Legacy constructor fallback takes priority
+    if (this.legacyDefaultFallback) return this.legacyDefaultFallback
+    if (this.mode === 'auto' || this.mode === 'bypassPermissions' || this.mode === 'dontAsk')
+      return 'bypass'
+    if (this.mode === 'plan') return 'ask'
+    return 'auto'
+  }
+
+  setRule(toolNameOrRule: string | PermissionRule, level?: PermissionLevel): void {
+    if (typeof toolNameOrRule === 'string') {
+      const toolName = toolNameOrRule
+      // Remove old entries for this tool
+      this.removeRuleFromArrays(toolName)
+      if (level !== undefined) {
+        this.legacyRules.set(toolName, level)
+        // Also sync to new-style arrays for listRules / new API consistency
+        if (level === 'bypass') this.allow(toolName)
+        else if (level === 'ask') this.ask(toolName)
+        // 'auto' is stored only in legacyRules (returns 'auto', not 'bypass')
+      }
+    } else {
+      const rule = toolNameOrRule
+      if (rule.pattern) {
+        const entry = compileRule(rule.pattern, rule.level === 'bypass' ? 'allow' : 'ask')
+        if (rule.level === 'bypass') this.allowRules.push(entry)
+        else this.askRules.push(entry)
+      } else {
+        this.removeRuleFromArrays(rule.toolName)
+        this.legacyRules.set(rule.toolName, rule.level)
+        if (rule.level === 'bypass') this.allow(rule.toolName)
+        else if (rule.level === 'ask') this.ask(rule.toolName)
+      }
+    }
+  }
+
+  removeRule(toolName: string): void {
+    this.legacyRules.delete(toolName)
+    this.removeRuleFromArrays(toolName)
+  }
+
+  private removeRuleFromArrays(toolName: string): void {
+    this.allowRules = this.allowRules.filter((r) => r.pattern !== toolName)
+    this.denyRules = this.denyRules.filter((r) => r.pattern !== toolName)
+    this.askRules = this.askRules.filter((r) => r.pattern !== toolName)
+  }
+
   listRules(): Map<string, PermissionLevel> {
-    return new Map(this.rules)
+    const map = new Map<string, PermissionLevel>(this.legacyRules)
+    for (const r of this.allowRules) {
+      if (!map.has(r.pattern)) map.set(r.pattern, 'bypass')
+    }
+    for (const r of this.denyRules) {
+      if (!map.has(r.pattern)) map.set(r.pattern, 'ask')
+    }
+    for (const r of this.askRules) {
+      if (!map.has(r.pattern)) map.set(r.pattern, 'ask')
+    }
+    return map
   }
 
   getByCategory(

package/src/index.tsx

@@ -1,3 +1,4 @@
+import { join } from 'node:path'
 import { render } from 'ink'
 import { App } from './ui/app'
 import { loadConfig } from './config/loader'
@@ -10,6 +11,10 @@ import { SkillsLoader } from './skills/loader'
 import { createToolRegistry } from './tools'
 import { McpClient } from './mcp/client'
 import { HookEngine } from './core/hooks'
+import { ArtifactServer } from './artifacts/server'
+import { ARTIFACTS_DIR, ARTIFACT_PORT, MIPHAM_DIR } from './shared/constants'
+import { AgentViewManager } from './agent-view/agent-view-manager'
+import { AgentViewDashboard } from './agent-view/dashboard'
 
 interface RunOptions {
   model?: string
@@ -20,6 +25,23 @@ interface RunOptions {
 }
 
 export async function runApp(options: RunOptions): Promise<void> {
+  // Handle `mipham agents` subcommand — launch standalone dashboard
+  const args = process.argv.slice(2)
+  if (args[0] === 'agents') {
+    const agentViewManager = new AgentViewManager()
+    const { waitUntilExit } = render(
+      <AgentViewDashboard
+        manager={agentViewManager}
+        onAttach={() => {}}
+        onExit={() => process.exit(0)}
+      />,
+    )
+    await waitUntilExit()
+    process.exit(0)
+  }
+
+  // Create AgentViewManager for the full app (shared across the session)
+  const agentViewManager = new AgentViewManager()
   // Set terminal window title
   process.stdout.write('\x1b]0;Mipham Code\x07')
 
@@ -83,16 +105,22 @@ export async function runApp(options: RunOptions): Promise<void> {
     }
   }
 
+  // Start artifact server (lazy — first artifact creation triggers listening)
+  const artifactsDir = join(process.cwd(), MIPHAM_DIR, ARTIFACTS_DIR)
+  const artifactServer = new ArtifactServer(artifactsDir, ARTIFACT_PORT)
+
   // Create query engine
   const engine = new QueryEngine(registry, context, tools)
   engine.setHookEngine(hookEngine)
+  engine.setArtifactServer(artifactServer)
+  engine.setAgentViewManager(agentViewManager)
   engine.setupContextSummarizer()
 
   // Auto-save session on exit
-  let autoSaveName: string | undefined
   const saveAndExit = () => {
+    artifactServer.stop()
     if (context.getMessageCount() > 0) {
-      autoSaveName = SessionStore.autoSave(context.getMessages(), {
+      SessionStore.autoSave(context.getMessages(), {
         provider: defaultProvider,
         model: defaultModel,
       })

package/src/mcp/transport.ts

@@ -1,11 +1,51 @@
 import { spawn, type ChildProcess } from 'node:child_process'
 import type { JsonRpcRequest, JsonRpcResponse, JsonRpcNotification } from './types'
 
-type ResponseHandler = (response: JsonRpcResponse) => void
 type NotificationHandler = (notification: JsonRpcNotification) => void
 
 const REQUEST_TIMEOUT_MS = 30_000
 
+// ── Environment variable security: block sensitive vars from MCP subprocess ──
+//
+// By default, MCP servers receive a sanitised copy of the parent environment.
+// Sensitive values (API keys, tokens, secrets, cloud credentials) are stripped
+// to prevent data exfiltration by third-party MCP plugins.
+//
+// The `env` parameter on `start()` allows explicit overrides — use it to
+// intentionally pass specific values to a trusted MCP server.
+const SENSITIVE_ENV_PATTERNS = [
+  /_API_KEY$/i, // ANTHROPIC_API_KEY, OPENAI_API_KEY, etc.
+  /_SECRET$/i, // STRIPE_SECRET, etc.
+  /_TOKEN$/i, // GITHUB_TOKEN, NPM_TOKEN, etc.
+  /_PASSWORD$/i, // DB_PASSWORD, etc.
+  /_CREDENTIALS?$/i, // GOOGLE_APPLICATION_CREDENTIALS, etc.
+  /^AWS_/, // AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY, etc.
+  /^GCLOUD_/, // GCP credentials
+  /^AZURE_/, // Azure credentials
+  /^DOCKER_/, // DOCKER_TOKEN, DOCKER_PASSWORD
+]
+
+/**
+ * Build a sanitised environment for MCP subprocesses.
+ * Strips sensitive vars; allows explicit overrides via `extra`.
+ */
+function buildProcEnv(extra?: Record<string, string>): Record<string, string> {
+  const sanitized: Record<string, string> = {}
+
+  for (const [key, value] of Object.entries(process.env as Record<string, string>)) {
+    if (value === undefined) continue
+    if (SENSITIVE_ENV_PATTERNS.some((p) => p.test(key))) continue
+    sanitized[key] = value
+  }
+
+  // Explicit overrides take precedence (for intentionally shared secrets)
+  if (extra) {
+    Object.assign(sanitized, extra)
+  }
+
+  return sanitized
+}
+
 /**
  * MCP stdio transport — spawns a subprocess and communicates via
  * newline-delimited JSON-RPC 2.0 messages on stdin/stdout.
@@ -30,10 +70,7 @@ export class StdioTransport {
   async start(command: string, args: string[], env?: Record<string, string>): Promise<void> {
     this.closed = false
 
-    const procEnv: Record<string, string> = {
-      ...(process.env as Record<string, string>),
-      ...env,
-    }
+    const procEnv = buildProcEnv(env)
 
     return new Promise((resolve, reject) => {
       const child = spawn(command, args, {

package/src/plugin/plugin-loader.ts

@@ -0,0 +1,36 @@
+import type { PluginManager } from './plugin-manager'
+import { join } from 'node:path'
+import { existsSync } from 'node:fs'
+
+export function loadPlugins(
+  pluginManager: PluginManager,
+  engine: unknown,
+  skillsLoader: unknown,
+): void {
+  for (const plugin of pluginManager.getEnabled()) {
+    // Load custom agents
+    const agentsDir = join(plugin.path, 'agents')
+    if (existsSync(agentsDir)) {
+      // → register with AgentRegistry
+    }
+
+    // Load custom skills
+    const skillsDir = join(plugin.path, 'skills')
+    if (existsSync(skillsDir)) {
+      // → register with SkillsLoader
+    }
+
+    // Load MCP servers
+    const mcpDir = join(plugin.path, 'mcp-servers')
+    if (existsSync(mcpDir)) {
+      // → register MCP configs
+    }
+
+    // Load hooks
+    // → parse plugin.json hooks → register with HookEngine
+  }
+
+  // Suppress unused parameter warnings — these are wiring stubs for future phases
+  void engine
+  void skillsLoader
+}

package/src/plugin/plugin-manager.ts

@@ -0,0 +1,125 @@
+import { mkdirSync, existsSync, writeFileSync, readFileSync, readdirSync, rmSync } from 'node:fs'
+import { join } from 'node:path'
+import { homedir } from 'node:os'
+import { validatePlugin } from './plugin-validator'
+
+const PLUGIN_DIR = join(homedir(), '.mipham', 'plugins')
+
+export interface InstalledPlugin {
+  name: string
+  version: string
+  path: string
+  enabled: boolean
+  installedAt: string
+}
+
+export class PluginManager {
+  private plugins: InstalledPlugin[] = []
+  private pluginDir: string
+  private statePath: string
+
+  constructor(pluginDir?: string) {
+    this.pluginDir = pluginDir ?? PLUGIN_DIR
+    mkdirSync(this.pluginDir, { recursive: true })
+    this.statePath = join(this.pluginDir, 'state.json')
+    this.loadState()
+  }
+
+  install(sourcePath: string): { success: boolean; message: string } {
+    const validation = validatePlugin(sourcePath)
+    if (!validation.valid || !validation.manifest) {
+      return { success: false, message: validation.errors.join('; ') }
+    }
+
+    const destDir = join(this.pluginDir, validation.manifest.name)
+    if (existsSync(destDir)) {
+      return {
+        success: false,
+        message: `Plugin "${validation.manifest.name}" is already installed`,
+      }
+    }
+
+    // Copy plugin directory
+    mkdirSync(destDir, { recursive: true })
+    this.copyDir(sourcePath, destDir)
+
+    this.plugins.push({
+      name: validation.manifest.name,
+      version: validation.manifest.version,
+      path: destDir,
+      enabled: true,
+      installedAt: new Date().toISOString(),
+    })
+
+    this.saveState()
+    return {
+      success: true,
+      message: `Plugin "${validation.manifest.name}" v${validation.manifest.version} installed`,
+    }
+  }
+
+  list(): InstalledPlugin[] {
+    return [...this.plugins]
+  }
+
+  remove(name: string): boolean {
+    const plugin = this.plugins.find((p) => p.name === name)
+    if (!plugin) return false
+    try {
+      rmSync(plugin.path, { recursive: true, force: true })
+    } catch {
+      // Directory may already be gone — that's fine
+    }
+    this.plugins = this.plugins.filter((p) => p.name !== name)
+    this.saveState()
+    return true
+  }
+
+  enable(name: string): boolean {
+    const p = this.plugins.find((p) => p.name === name)
+    if (!p) return false
+    p.enabled = true
+    this.saveState()
+    return true
+  }
+
+  disable(name: string): boolean {
+    const p = this.plugins.find((p) => p.name === name)
+    if (!p) return false
+    p.enabled = false
+    this.saveState()
+    return true
+  }
+
+  getEnabled(): InstalledPlugin[] {
+    return this.plugins.filter((p) => p.enabled)
+  }
+
+  private copyDir(src: string, dest: string): void {
+    mkdirSync(dest, { recursive: true })
+    for (const entry of readdirSync(src, { withFileTypes: true })) {
+      const srcPath = join(src, entry.name)
+      const destPath = join(dest, entry.name)
+      if (entry.isDirectory()) {
+        this.copyDir(srcPath, destPath)
+      } else {
+        const content = readFileSync(srcPath)
+        writeFileSync(destPath, content)
+      }
+    }
+  }
+
+  private loadState(): void {
+    try {
+      if (existsSync(this.statePath)) {
+        this.plugins = JSON.parse(readFileSync(this.statePath, 'utf-8'))
+      }
+    } catch {
+      this.plugins = []
+    }
+  }
+
+  private saveState(): void {
+    writeFileSync(this.statePath, JSON.stringify(this.plugins, null, 2), 'utf-8')
+  }
+}

package/src/plugin/plugin-validator.ts

@@ -0,0 +1,41 @@
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
+
+export interface PluginManifest {
+  name: string
+  version: string
+  miphamVersion?: string
+  hooks?: Record<string, unknown>
+}
+
+export function validatePlugin(dir: string): {
+  valid: boolean
+  errors: string[]
+  manifest?: PluginManifest
+} {
+  const errors: string[] = []
+
+  try {
+    const raw = readFileSync(join(dir, 'plugin.json'), 'utf-8')
+    const manifest = JSON.parse(raw) as PluginManifest
+
+    if (!manifest.name || !/^[a-z0-9-]+$/.test(manifest.name)) {
+      errors.push('Invalid plugin name: must be lowercase alphanumeric with hyphens')
+    }
+    if (!manifest.version) {
+      errors.push('Missing required field: version')
+    }
+
+    // Check for suspicious hooks
+    if (manifest.hooks) {
+      const hooksStr = JSON.stringify(manifest.hooks)
+      if (hooksStr.includes('rm -rf') || hooksStr.includes('curl') || hooksStr.includes('eval')) {
+        errors.push('Suspicious hook commands detected — manual review required')
+      }
+    }
+
+    return { valid: errors.length === 0, errors, manifest }
+  } catch (err) {
+    return { valid: false, errors: [`Failed to read plugin.json: ${String(err)}`] }
+  }
+}

package/src/providers/fetch-utils.ts

@@ -39,9 +39,7 @@ export async function fetchWithRetry(
   for (let attempt = 0; attempt <= maxRetries; attempt++) {
     const controller = new AbortController()
     const timer = setTimeout(() => controller.abort(), timeout)
-    const signal = init.signal
-      ? anySignal([init.signal, controller.signal])
-      : controller.signal
+    const signal = init.signal ? anySignal([init.signal, controller.signal]) : controller.signal
 
     try {
       const response = await fetch(url, { ...init, signal })

package/src/providers/openai-compat.ts

@@ -1,10 +1,4 @@
-import type {
-  ProviderConfig,
-  ModelInfo,
-  Message,
-  StreamChunk,
-  ContentBlock,
-} from '../shared/index.ts'
+import type { ProviderConfig, ModelInfo, Message, StreamChunk } from '../shared/index.ts'
 import type { ProviderInstance, ChatRequest } from './registry'
 import { fetchWithRetry } from './fetch-utils'
 
@@ -49,10 +43,7 @@ export class OpenAICompatProvider implements ProviderInstance {
     let buffer = ''
 
     // Track incremental tool calls across streaming deltas
-    const pendingToolCalls = new Map<
-      number,
-      { id: string; name: string; arguments: string }
-    >()
+    const pendingToolCalls = new Map<number, { id: string; name: string; arguments: string }>()
 
     while (true) {
       const { done, value } = await reader.read()

package/src/shared/constants.ts

@@ -361,8 +361,15 @@ export const PROTOCOL_LABELS: Record<string, string> = {
   custom: 'Custom Protocol',
 }
 
-export const TOOL_CATEGORIES = ['file', 'exec', 'agent', 'network', 'system'] as const
+export const TOOL_CATEGORIES = ['file', 'exec', 'agent', 'network', 'system', 'artifact'] as const
 export const CONFIG_FILE_NAME = 'config.yml'
 export const MIPHAM_DIR = '.mipham'
 export const USER_CONFIG_DIR = '.mipham'
 export const MEMORY_DIR = 'memory'
+
+// ── Artifact Constants ──
+export const ARTIFACTS_DIR = 'artifacts'
+export const ARTIFACT_PORT = 9876
+export const ARTIFACT_MAX_PORT_TRIES = 10
+export const ARTIFACT_MAX_SIZE = 5 * 1024 * 1024 // 5MB
+export const ARTIFACT_ALLOWED_EXTENSIONS = ['.html', '.svg']