comisai 1.0.15 → 1.0.17

package/node_modules/@comis/web/dist/assets/setup-wizard-nT0tz9QP.js

@@ -0,0 +1,853 @@
+import{a as _,I as m,A as n,b as s,s as w,f as x,i as $,n as k,r as p,t as C}from"./index-CEcM1R_C.js";import"./ic-icon-xeGTVhVG.js";var D=Object.defineProperty,z=Object.getOwnPropertyDescriptor,c=(e,a,t,r)=>{for(var i=r>1?void 0:r?z(a,t):a,l=e.length-1,o;l>=0;l--)(o=e[l])&&(i=(r?o(a,t,i):o(i))||i);return r&&i&&D(a,t,i),i};const b=[{label:"Basics",icon:"settings"},{label:"Provider",icon:"server"},{label:"Agent",icon:"agent"},{label:"Channels",icon:"channel"},{label:"Review",icon:"check"}],f=[{key:"anthropic",type:"anthropic",name:"Anthropic",description:"Claude models, recommended for agents",needsApiKey:!0,needsBaseUrl:!1,defaultBaseUrl:"",defaultModel:"claude-sonnet-4-5-20250929"},{key:"openai",type:"openai",name:"OpenAI",description:"GPT-4o, o1, o3 models",needsApiKey:!0,needsBaseUrl:!1,defaultBaseUrl:"",defaultModel:"gpt-4o"},{key:"google",type:"google",name:"Google",description:"Gemini models",needsApiKey:!0,needsBaseUrl:!1,defaultBaseUrl:"",defaultModel:"gemini-2.0-flash"},{key:"groq",type:"groq",name:"Groq",description:"Fast inference (Llama, Mixtral)",needsApiKey:!0,needsBaseUrl:!1,defaultBaseUrl:"",defaultModel:"llama-3.3-70b-versatile"},{key:"mistral",type:"mistral",name:"Mistral",description:"Mistral models",needsApiKey:!0,needsBaseUrl:!1,defaultBaseUrl:"",defaultModel:"mistral-large-latest"},{key:"deepseek",type:"deepseek",name:"DeepSeek",description:"DeepSeek models",needsApiKey:!0,needsBaseUrl:!1,defaultBaseUrl:"",defaultModel:"deepseek-chat"},{key:"xai",type:"xai",name:"xAI",description:"Grok models",needsApiKey:!0,needsBaseUrl:!1,defaultBaseUrl:"",defaultModel:"grok-2"},{key:"together",type:"together",name:"Together AI",description:"Open-source model hosting",needsApiKey:!0,needsBaseUrl:!1,defaultBaseUrl:"",defaultModel:"meta-llama/Meta-Llama-3.1-70B-Instruct-Turbo"},{key:"cerebras",type:"cerebras",name:"Cerebras",description:"Fast inference",needsApiKey:!0,needsBaseUrl:!1,defaultBaseUrl:"",defaultModel:"llama-3.3-70b"},{key:"openrouter",type:"openrouter",name:"OpenRouter",description:"Multi-provider routing",needsApiKey:!0,needsBaseUrl:!1,defaultBaseUrl:"",defaultModel:"anthropic/claude-sonnet-4-5-20250929"},{key:"ollama",type:"ollama",name:"Ollama",description:"Local open-source models, no API key needed",needsApiKey:!1,needsBaseUrl:!0,defaultBaseUrl:"http://localhost:11434",defaultModel:"llama3"},{key:"custom",type:"openai",name:"Custom",description:"Any OpenAI-compatible API endpoint",needsApiKey:!1,needsBaseUrl:!0,defaultBaseUrl:"",defaultModel:""}],g=[{key:"telegram",label:"Telegram",fields:[{key:"botToken",label:"Bot Token",type:"password"},{key:"allowedChatIds",label:"Allowed Chat IDs",type:"text",placeholder:"Comma-separated IDs"}]},{key:"discord",label:"Discord",fields:[{key:"botToken",label:"Bot Token",type:"password"},{key:"guildIds",label:"Guild IDs",type:"text",placeholder:"Comma-separated IDs"}]},{key:"slack",label:"Slack",fields:[{key:"botToken",label:"Bot Token",type:"password"},{key:"appToken",label:"App Token",type:"password"},{key:"signingSecret",label:"Signing Secret",type:"password"}]},{key:"whatsapp",label:"WhatsApp",fields:[{key:"phoneNumberId",label:"Phone Number ID",type:"text"},{key:"accessToken",label:"Access Token",type:"password"},{key:"verifyToken",label:"Verify Token",type:"text"}]},{key:"line",label:"LINE",fields:[{key:"channelAccessToken",label:"Channel Access Token",type:"password"},{key:"channelSecret",label:"Channel Secret",type:"password"}]},{key:"signal",label:"Signal",fields:[{key:"phone",label:"Phone Number",type:"text"},{key:"signalCliPath",label:"Signal CLI Path",type:"text"}]},{key:"irc",label:"IRC",fields:[{key:"server",label:"Server",type:"text"},{key:"port",label:"Port",type:"number",defaultValue:"6667"},{key:"nick",label:"Nickname",type:"text"},{key:"channels",label:"Channels",type:"text",placeholder:"Comma-separated, e.g. #general,#dev"}]},{key:"imessage",label:"iMessage",fields:[{key:"applescriptPath",label:"AppleScript Path",type:"text",placeholder:"Requires macOS with Messages app"}]}],S=["trace","debug","info","warn","error"];function h(e,a=0){const t="  ".repeat(a);if(e==null)return`${t}~
+`;if(typeof e=="string")return e===""||/[:#[\]{},&*!|>'"@`]/.test(e)||/^\s|\s$/.test(e)?`"${e.replace(/\\/g,"\\\\").replace(/"/g,'\\"')}"`:e;if(typeof e=="number"||typeof e=="boolean")return String(e);if(Array.isArray(e))return e.length===0?`[]
+`:e.map(r=>{if(typeof r=="object"&&r!==null){const i=h(r,a+1),l=i.split(`
+`).filter(Boolean);if(l.length>0){const o="  ".repeat(a+1);return`${t}- ${l[0].substring(o.length)}
+${l.slice(1).map(u=>`${t}  ${u.substring(o.length)}
+`).join("")}`}return`${t}- ${i.trim()}
+`}return`${t}- ${h(r,0)}
+`}).join("");if(typeof e=="object"){const r=Object.entries(e).filter(([,i])=>i!=null&&i!=="");return r.length===0?`{}
+`:r.map(([i,l])=>{if(typeof l=="object"&&!Array.isArray(l)){const o=h(l,a+1);return`${t}${i}:
+${o}`}if(Array.isArray(l)){const o=h(l,a+1);return`${t}${i}:
+${o}`}return`${t}${i}: ${h(l,0)}
+`}).join("")}return String(e)}function P(){const e={};for(const a of g)e[a.key]={enabled:!1,credentials:{}};return{tenantId:"default",dataDir:"~/.comis",logLevel:"info",gatewayHost:"127.0.0.1",gatewayPort:4766,providerName:"",providerType:"",apiKey:"",baseUrl:"",defaultModel:"",agentId:"default",agentName:"Comis",agentModel:"",agentProvider:"",maxSteps:50,budgetPerDay:1e8,budgetPerHour:1e7,channels:e}}let d=class extends _{constructor(){super(...arguments),this.rpcClient=null,this._currentStep=0,this._wizardData=P(),this._testResult={status:"idle"},this._expandedChannels=new Set,this._yamlPreview="",this._applying=!1,this._applyStatus="",this._applyDone=!1,this._validationErrors={}}_validateStep(e){const a={};switch(e){case 0:this._wizardData.tenantId.trim()||(a.tenantId="Tenant ID is required");break;case 1:{this._wizardData.providerType||(a.providerType="Please select a provider");const t=f.find(r=>r.key===this._wizardData.providerName);t?.needsApiKey&&!this._wizardData.apiKey.trim()&&(a.apiKey="API key is required for this provider"),t?.needsBaseUrl&&!this._wizardData.baseUrl.trim()&&(a.baseUrl="Base URL is required for this provider");break}case 2:this._wizardData.agentId.trim()||(a.agentId="Agent ID is required");break}return this._validationErrors=a,Object.keys(a).length===0}_goNext(){this._validateStep(this._currentStep)&&(this._currentStep===3&&this._generateYaml(),this._currentStep===1&&(this._wizardData.agentModel||(this._wizardData={...this._wizardData,agentModel:this._wizardData.defaultModel,agentProvider:this._wizardData.providerName})),this._currentStep=Math.min(this._currentStep+1,b.length-1),this._validationErrors={})}_goBack(){this._currentStep=Math.max(this._currentStep-1,0),this._validationErrors={}}_selectProvider(e){this._wizardData={...this._wizardData,providerName:e.key,providerType:e.type,baseUrl:e.defaultBaseUrl,defaultModel:e.defaultModel},this._testResult={status:"idle"},this._validationErrors={}}async _testConnection(){if(this.rpcClient){this._testResult={status:"testing"};try{await this.rpcClient.call("models.test",{provider:this._wizardData.providerType}),this._testResult={status:"success",message:"Connected"}}catch(e){const a=e instanceof Error?e.message:"Connection failed";this._testResult={status:"error",message:a}}}}_toggleChannel(e){const a=this._wizardData.channels[e],t={...this._wizardData.channels,[e]:{...a,enabled:!a.enabled}};if(this._wizardData={...this._wizardData,channels:t},!a.enabled){const r=new Set(this._expandedChannels);r.add(e),this._expandedChannels=r}}_toggleExpand(e){const a=new Set(this._expandedChannels);a.has(e)?a.delete(e):a.add(e),this._expandedChannels=a}_updateChannelCredential(e,a,t){const r=this._wizardData.channels[e],i={...r.credentials,[a]:t},l={...this._wizardData.channels,[e]:{...r,credentials:i}};this._wizardData={...this._wizardData,channels:l}}_generateYaml(){const e=this._wizardData,a={};if(e.tenantId&&e.tenantId!=="default"&&(a.tenantId=e.tenantId),a.logLevel=e.logLevel,a.dataDir=e.dataDir,a.gateway={enabled:!0,host:e.gatewayHost,port:e.gatewayPort},e.providerName){const i={};e.apiKey&&(i.apiKeyName="env:"+e.providerName.toUpperCase()+"_API_KEY"),e.baseUrl&&(i.baseUrl=e.baseUrl),a.providers={[e.providerName]:i},e.defaultModel&&(a.models={defaultProvider:e.providerName,defaultModel:e.defaultModel})}const t={name:e.agentName,model:e.agentModel||e.defaultModel,provider:e.agentProvider||e.providerName,maxSteps:e.maxSteps,budgets:{perExecution:2e6,perHour:e.budgetPerHour,perDay:e.budgetPerDay}};a.agents={[e.agentId]:t};const r={};for(const[i,l]of Object.entries(e.channels)){if(!l.enabled)continue;const o={enabled:!0};for(const[u,v]of Object.entries(l.credentials))v&&(u==="allowedChatIds"?o.allowFrom=v.split(",").map(y=>y.trim()).filter(Boolean):o[u]=v);r[i]=o}Object.keys(r).length>0&&(a.channels=r),this._yamlPreview=h(a)}async _copyYaml(){try{await navigator.clipboard.writeText(this._yamlPreview),m.show("Copied to clipboard","success")}catch{m.show("Failed to copy","error")}}_downloadYaml(){const e=new Blob([this._yamlPreview],{type:"text/yaml"}),a=URL.createObjectURL(e),t=document.createElement("a");t.href=a,t.download="comis-config.yaml",t.click(),URL.revokeObjectURL(a)}async _applyConfig(){if(!this.rpcClient||this._applying)return;this._applying=!0,this._applyDone=!1;const e=this._wizardData,a=[];e.providerName&&e.defaultModel&&a.push({label:"models",section:"models",value:{defaultProvider:e.providerName,defaultModel:e.defaultModel}});const t=[];t.push("agents"),t.push("gateway"),e.providerName&&t.push("providers"),Object.values(e.channels).some(l=>l.enabled)&&t.push("channels");let i=0;for(const l of a){this._applyStatus=`Applying ${l.label}...`;try{await this.rpcClient.call("config.apply",{section:l.section,value:l.value}),i++}catch(o){const u=o instanceof Error?o.message:"Failed to apply configuration";m.show(`${l.label}: ${u}`,"error")}}this._applying=!1,this._applyStatus="",this._applyDone=!0,t.length>0?m.show(`Applied ${i} section(s). ${t.join(", ")} require saving the config file and restarting the daemon. Use Copy or Download to get the full config.`,"info"):m.show("Configuration applied! Restart the daemon to activate.","success")}_goToDashboard(){this.dispatchEvent(new CustomEvent("navigate",{detail:"dashboard",bubbles:!0,composed:!0}))}_renderStep1(){const e=this._wizardData,a=this._validationErrors;return s`
+      <div class="form-container">
+        <div class="form-field">
+          <label class="form-label">Tenant ID</label>
+          <input
+            class="form-input"
+            type="text"
+            .value=${e.tenantId}
+            @input=${t=>{this._wizardData={...this._wizardData,tenantId:t.target.value}}}
+          />
+          <span class="form-hint">Unique identifier for this installation</span>
+          ${a.tenantId?s`<span class="form-error">${a.tenantId}</span>`:n}
+        </div>
+
+        <div class="form-field">
+          <label class="form-label">Data Directory</label>
+          <input
+            class="form-input"
+            type="text"
+            .value=${e.dataDir}
+            @input=${t=>{this._wizardData={...this._wizardData,dataDir:t.target.value}}}
+          />
+          <span class="form-hint">Where Comis stores databases and logs</span>
+        </div>
+
+        <div class="form-field">
+          <label class="form-label">Log Level</label>
+          ${this._renderLogLevelSelect()}
+        </div>
+
+        <div class="form-field">
+          <label class="form-label">Gateway Host</label>
+          <input
+            class="form-input"
+            type="text"
+            .value=${e.gatewayHost}
+            @input=${t=>{this._wizardData={...this._wizardData,gatewayHost:t.target.value}}}
+          />
+        </div>
+
+        <div class="form-field">
+          <label class="form-label">Gateway Port</label>
+          <input
+            class="form-input"
+            type="number"
+            min="1"
+            max="65535"
+            .value=${String(e.gatewayPort)}
+            @input=${t=>{this._wizardData={...this._wizardData,gatewayPort:Number(t.target.value)||4766}}}
+          />
+        </div>
+      </div>
+    `}_renderLogLevelSelect(){return s`
+      <select
+        class="form-select"
+        @change=${e=>{this._wizardData={...this._wizardData,logLevel:e.target.value}}}
+      >
+        ${S.map(e=>s`<option value=${e} ?selected=${e===this._wizardData.logLevel}>${e}</option>`)}
+      </select>
+    `}_renderStep2(){const e=this._wizardData,a=this._validationErrors,t=f.find(r=>r.key===e.providerName);return s`
+      <div class="provider-grid">
+        ${f.map(r=>s`
+            <div
+              class="provider-card ${e.providerName===r.key?"active":""}"
+              role="button"
+              tabindex="0"
+              aria-pressed=${e.providerName===r.key?"true":"false"}
+              @click=${()=>this._selectProvider(r)}
+              @keydown=${i=>{(i.key==="Enter"||i.key===" ")&&(i.preventDefault(),this._selectProvider(r))}}
+            >
+              <div class="provider-card-name">${r.name}</div>
+              <div class="provider-card-desc">${r.description}</div>
+            </div>
+          `)}
+      </div>
+      ${a.providerType?s`<span class="form-error">${a.providerType}</span>`:n}
+
+      ${t?this._renderProviderConfig(t):n}
+    `}_renderProviderConfig(e){const a=this._wizardData,t=this._validationErrors;return s`
+      <div class="provider-config">
+        ${e.needsApiKey?s`
+          <div class="form-field">
+            <label class="form-label">API Key</label>
+            <input
+              class="form-input"
+              type="password"
+              .value=${a.apiKey}
+              placeholder="Enter your API key"
+              @input=${r=>{this._wizardData={...this._wizardData,apiKey:r.target.value}}}
+            />
+            ${t.apiKey?s`<span class="form-error">${t.apiKey}</span>`:n}
+          </div>
+        `:n}
+
+        ${e.needsBaseUrl?s`
+          <div class="form-field">
+            <label class="form-label">Base URL</label>
+            <input
+              class="form-input"
+              type="text"
+              .value=${a.baseUrl}
+              placeholder=${e.defaultBaseUrl||"https://api.example.com"}
+              @input=${r=>{this._wizardData={...this._wizardData,baseUrl:r.target.value}}}
+            />
+            ${t.baseUrl?s`<span class="form-error">${t.baseUrl}</span>`:n}
+          </div>
+        `:n}
+
+        <div class="form-field">
+          <label class="form-label">Default Model</label>
+          <input
+            class="form-input"
+            type="text"
+            .value=${a.defaultModel}
+            placeholder=${e.defaultModel||"Model ID"}
+            @input=${r=>{this._wizardData={...this._wizardData,defaultModel:r.target.value}}}
+          />
+        </div>
+
+        <div class="test-row">
+          <button
+            class="test-btn"
+            ?disabled=${this._testResult.status==="testing"}
+            @click=${()=>this._testConnection()}
+          >
+            ${this._testResult.status==="testing"?"Testing...":"Test Connection"}
+          </button>
+          ${this._testResult.status==="success"?s`<span class="test-success">Connected</span>`:n}
+          ${this._testResult.status==="error"?s`<span class="test-error">${this._testResult.message}</span>`:n}
+          ${this._testResult.status==="testing"?s`<span class="test-spinner">Connecting...</span>`:n}
+        </div>
+      </div>
+    `}_renderStep3(){const e=this._wizardData,a=this._validationErrors;return s`
+      <div class="form-container">
+        <div class="info-box">
+          The agent will use the provider configured in Step 2. You can add more agents later from the Agents view.
+        </div>
+
+        <div class="form-field">
+          <label class="form-label">Agent ID</label>
+          <input
+            class="form-input"
+            type="text"
+            .value=${e.agentId}
+            @input=${t=>{this._wizardData={...this._wizardData,agentId:t.target.value}}}
+          />
+          <span class="form-hint">Unique identifier (letters, numbers, hyphens)</span>
+          ${a.agentId?s`<span class="form-error">${a.agentId}</span>`:n}
+        </div>
+
+        <div class="form-field">
+          <label class="form-label">Agent Name</label>
+          <input
+            class="form-input"
+            type="text"
+            .value=${e.agentName}
+            @input=${t=>{this._wizardData={...this._wizardData,agentName:t.target.value}}}
+          />
+          <span class="form-hint">Display name for the agent</span>
+        </div>
+
+        <div class="form-field">
+          <label class="form-label">Model</label>
+          <input
+            class="form-input"
+            type="text"
+            .value=${e.agentModel}
+            @input=${t=>{this._wizardData={...this._wizardData,agentModel:t.target.value}}}
+          />
+          <span class="form-hint">LLM model ID to use</span>
+        </div>
+
+        <div class="form-field">
+          <label class="form-label">Provider</label>
+          <input
+            class="form-input"
+            type="text"
+            .value=${e.agentProvider}
+            readonly
+          />
+        </div>
+
+        <div class="form-field">
+          <label class="form-label">Max Steps</label>
+          <input
+            class="form-input"
+            type="number"
+            min="1"
+            max="100"
+            .value=${String(e.maxSteps)}
+            @input=${t=>{this._wizardData={...this._wizardData,maxSteps:Number(t.target.value)||25}}}
+          />
+        </div>
+
+        <div class="form-field">
+          <label class="form-label">Budget Per Day (tokens)</label>
+          <input
+            class="form-input"
+            type="number"
+            min="0"
+            step="0.01"
+            .value=${String(e.budgetPerDay)}
+            @input=${t=>{this._wizardData={...this._wizardData,budgetPerDay:Number(t.target.value)||0}}}
+          />
+        </div>
+
+        <div class="form-field">
+          <label class="form-label">Budget Per Hour (tokens)</label>
+          <input
+            class="form-input"
+            type="number"
+            min="0"
+            step="0.01"
+            .value=${String(e.budgetPerHour)}
+            @input=${t=>{this._wizardData={...this._wizardData,budgetPerHour:Number(t.target.value)||0}}}
+          />
+        </div>
+      </div>
+    `}_renderStep4(){return s`
+      <div class="info-box">
+        Enable the channels you want to connect. You can configure more channels later.
+      </div>
+      <div class="channel-cards">
+        ${g.map(e=>this._renderChannelCard(e))}
+      </div>
+    `}_renderChannelCard(e){const a=this._wizardData.channels[e.key],t=this._expandedChannels.has(e.key);return s`
+      <div class="channel-card">
+        <div
+          class="channel-header"
+          @click=${()=>this._toggleExpand(e.key)}
+        >
+          <ic-platform-icon platform=${e.key} size="20px"></ic-platform-icon>
+          <span class="channel-name">${e.label}</span>
+          <button
+            class="channel-toggle ${a.enabled?"enabled":""}"
+            aria-label="${a.enabled?"Disable":"Enable"} ${e.label}"
+            @click=${r=>{r.stopPropagation(),this._toggleChannel(e.key)}}
+          ></button>
+          <span class="channel-expand ${t?"open":""}">&#9660;</span>
+        </div>
+        ${t?s`
+          <div class="channel-body">
+            ${this._renderChannelFields(e)}
+          </div>
+        `:n}
+      </div>
+    `}_renderChannelFields(e){switch(e.key){case"telegram":return this._renderTelegramFields();case"discord":return this._renderDiscordFields();case"slack":return this._renderSlackFields();case"whatsapp":return this._renderWhatsappFields();case"line":return this._renderLineFields();case"signal":return this._renderSignalFields();case"irc":return this._renderIrcFields();case"imessage":return this._renderImessageFields();default:return n}}_renderTelegramFields(){const e=this._wizardData.channels.telegram.credentials;return s`
+      <div class="form-field">
+        <label class="form-label">Bot Token</label>
+        <input class="form-input" type="password" .value=${e.botToken??""}
+          @input=${a=>this._updateChannelCredential("telegram","botToken",a.target.value)} />
+      </div>
+      <div class="form-field">
+        <label class="form-label">Allowed Chat IDs</label>
+        <input class="form-input" type="text" placeholder="Comma-separated IDs" .value=${e.allowedChatIds??""}
+          @input=${a=>this._updateChannelCredential("telegram","allowedChatIds",a.target.value)} />
+      </div>
+    `}_renderDiscordFields(){const e=this._wizardData.channels.discord.credentials;return s`
+      <div class="form-field">
+        <label class="form-label">Bot Token</label>
+        <input class="form-input" type="password" .value=${e.botToken??""}
+          @input=${a=>this._updateChannelCredential("discord","botToken",a.target.value)} />
+      </div>
+      <div class="form-field">
+        <label class="form-label">Guild IDs</label>
+        <input class="form-input" type="text" placeholder="Comma-separated IDs" .value=${e.guildIds??""}
+          @input=${a=>this._updateChannelCredential("discord","guildIds",a.target.value)} />
+      </div>
+    `}_renderSlackFields(){const e=this._wizardData.channels.slack.credentials;return s`
+      <div class="form-field">
+        <label class="form-label">Bot Token</label>
+        <input class="form-input" type="password" .value=${e.botToken??""}
+          @input=${a=>this._updateChannelCredential("slack","botToken",a.target.value)} />
+      </div>
+      <div class="form-field">
+        <label class="form-label">App Token</label>
+        <input class="form-input" type="password" .value=${e.appToken??""}
+          @input=${a=>this._updateChannelCredential("slack","appToken",a.target.value)} />
+      </div>
+      <div class="form-field">
+        <label class="form-label">Signing Secret</label>
+        <input class="form-input" type="password" .value=${e.signingSecret??""}
+          @input=${a=>this._updateChannelCredential("slack","signingSecret",a.target.value)} />
+      </div>
+    `}_renderWhatsappFields(){const e=this._wizardData.channels.whatsapp.credentials;return s`
+      <div class="form-field">
+        <label class="form-label">Phone Number ID</label>
+        <input class="form-input" type="text" .value=${e.phoneNumberId??""}
+          @input=${a=>this._updateChannelCredential("whatsapp","phoneNumberId",a.target.value)} />
+      </div>
+      <div class="form-field">
+        <label class="form-label">Access Token</label>
+        <input class="form-input" type="password" .value=${e.accessToken??""}
+          @input=${a=>this._updateChannelCredential("whatsapp","accessToken",a.target.value)} />
+      </div>
+      <div class="form-field">
+        <label class="form-label">Verify Token</label>
+        <input class="form-input" type="text" .value=${e.verifyToken??""}
+          @input=${a=>this._updateChannelCredential("whatsapp","verifyToken",a.target.value)} />
+      </div>
+    `}_renderLineFields(){const e=this._wizardData.channels.line.credentials;return s`
+      <div class="form-field">
+        <label class="form-label">Channel Access Token</label>
+        <input class="form-input" type="password" .value=${e.channelAccessToken??""}
+          @input=${a=>this._updateChannelCredential("line","channelAccessToken",a.target.value)} />
+      </div>
+      <div class="form-field">
+        <label class="form-label">Channel Secret</label>
+        <input class="form-input" type="password" .value=${e.channelSecret??""}
+          @input=${a=>this._updateChannelCredential("line","channelSecret",a.target.value)} />
+      </div>
+    `}_renderSignalFields(){const e=this._wizardData.channels.signal.credentials;return s`
+      <div class="form-field">
+        <label class="form-label">Phone Number</label>
+        <input class="form-input" type="text" .value=${e.phone??""}
+          @input=${a=>this._updateChannelCredential("signal","phone",a.target.value)} />
+      </div>
+      <div class="form-field">
+        <label class="form-label">Signal CLI Path</label>
+        <input class="form-input" type="text" .value=${e.signalCliPath??""}
+          @input=${a=>this._updateChannelCredential("signal","signalCliPath",a.target.value)} />
+      </div>
+    `}_renderIrcFields(){const e=this._wizardData.channels.irc.credentials;return s`
+      <div class="form-field">
+        <label class="form-label">Server</label>
+        <input class="form-input" type="text" .value=${e.server??""}
+          @input=${a=>this._updateChannelCredential("irc","server",a.target.value)} />
+      </div>
+      <div class="form-field">
+        <label class="form-label">Port</label>
+        <input class="form-input" type="number" .value=${e.port??"6667"}
+          @input=${a=>this._updateChannelCredential("irc","port",a.target.value)} />
+      </div>
+      <div class="form-field">
+        <label class="form-label">Nickname</label>
+        <input class="form-input" type="text" .value=${e.nick??""}
+          @input=${a=>this._updateChannelCredential("irc","nick",a.target.value)} />
+      </div>
+      <div class="form-field">
+        <label class="form-label">Channels</label>
+        <input class="form-input" type="text" placeholder="Comma-separated, e.g. #general,#dev" .value=${e.channels??""}
+          @input=${a=>this._updateChannelCredential("irc","channels",a.target.value)} />
+      </div>
+    `}_renderImessageFields(){const e=this._wizardData.channels.imessage.credentials;return s`
+      <div class="form-field">
+        <label class="form-label">AppleScript Path</label>
+        <input class="form-input" type="text" placeholder="Requires macOS with Messages app" .value=${e.applescriptPath??""}
+          @input=${a=>this._updateChannelCredential("imessage","applescriptPath",a.target.value)} />
+      </div>
+    `}_renderStep5(){return s`
+      <div class="yaml-preview">${this._yamlPreview}</div>
+      <div class="review-actions">
+        <button class="btn btn-secondary" @click=${()=>this._copyYaml()}>Copy</button>
+        <button class="btn btn-secondary" @click=${()=>this._downloadYaml()}>Download</button>
+        <button class="btn btn-primary" ?disabled=${this._applying} @click=${()=>this._applyConfig()}>
+          ${this._applying?"Applying...":"Apply"}
+        </button>
+      </div>
+      ${this._applyStatus?s`<div class="apply-status">${this._applyStatus}</div>`:n}
+      ${this._applyDone?s`
+        <div class="dashboard-link">
+          <a @click=${e=>{e.preventDefault(),this._goToDashboard()}}>Go to Dashboard</a>
+        </div>
+      `:n}
+    `}_renderStepBar(){return s`
+      <div class="step-bar" role="navigation" aria-label="Setup wizard progress">
+        ${b.map((e,a)=>{const t=a<this._currentStep,r=a===this._currentStep,i=t?"completed":r?"current":"",l=t?"completed":r?"current":"";return s`
+            ${a>0?s`<div class="step-line ${a<=this._currentStep?"completed":""}"></div>`:n}
+            <div class="step-item">
+              <div class="step-circle ${i}" aria-label="Step ${a+1}: ${e.label}">
+                ${t?s`&#10003;`:s`${a+1}`}
+              </div>
+              <span class="step-label ${l}">${e.label}</span>
+            </div>
+          `})}
+      </div>
+    `}render(){return s`
+      <div class="wizard-header">
+        <div class="wizard-title">Setup Wizard</div>
+        <div class="wizard-subtitle">Configure your Comis installation step by step</div>
+      </div>
+
+      ${this._renderStepBar()}
+
+      <div class="step-content">
+        ${this._currentStep===0?this._renderStep1():n}
+        ${this._currentStep===1?this._renderStep2():n}
+        ${this._currentStep===2?this._renderStep3():n}
+        ${this._currentStep===3?this._renderStep4():n}
+        ${this._currentStep===4?this._renderStep5():n}
+      </div>
+
+      <div class="nav-bar">
+        ${this._currentStep>0?s`<button class="btn btn-secondary" @click=${()=>this._goBack()}>Back</button>`:s`<div class="nav-spacer"></div>`}
+        ${this._currentStep<4?s`<button class="btn btn-primary" @click=${()=>this._goNext()}>
+              ${this._currentStep===3?"Review":"Next"}
+            </button>`:s`<div class="nav-spacer"></div>`}
+      </div>
+    `}};d.styles=[w,x,$`
+      :host {
+        display: block;
+      }
+
+      .wizard-header {
+        margin-bottom: var(--ic-space-lg);
+      }
+
+      .wizard-title {
+        font-size: 1.125rem;
+        font-weight: 600;
+      }
+
+      .wizard-subtitle {
+        font-size: var(--ic-text-sm);
+        color: var(--ic-text-muted);
+        margin-top: var(--ic-space-xs);
+      }
+
+      /* Step progress bar */
+      .step-bar {
+        display: flex;
+        align-items: flex-start;
+        justify-content: center;
+        gap: 0;
+        margin-bottom: var(--ic-space-xl, 2rem);
+      }
+
+      .step-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        min-width: 80px;
+      }
+
+      .step-circle {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: var(--ic-text-sm);
+        font-weight: 600;
+        border: 2px solid var(--ic-border);
+        background: var(--ic-surface-2);
+        color: var(--ic-text-dim);
+        position: relative;
+      }
+
+      .step-circle.completed {
+        background: var(--ic-accent);
+        border-color: var(--ic-accent);
+        color: white;
+      }
+
+      .step-circle.current {
+        border-color: var(--ic-accent);
+        color: var(--ic-accent);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--ic-accent) 25%, transparent);
+      }
+
+      .step-label {
+        font-size: var(--ic-text-xs);
+        margin-top: var(--ic-space-xs);
+        color: var(--ic-text-dim);
+        text-align: center;
+      }
+
+      .step-label.current {
+        color: var(--ic-text);
+        font-weight: 500;
+      }
+
+      .step-label.completed {
+        color: var(--ic-text-muted);
+      }
+
+      .step-line {
+        flex: 1;
+        height: 2px;
+        background: var(--ic-border);
+        margin-top: 16px;
+        min-width: 40px;
+        max-width: 80px;
+      }
+
+      .step-line.completed {
+        background: var(--ic-accent);
+      }
+
+      /* Step content area */
+      .step-content {
+        max-width: 640px;
+        margin: 0 auto;
+        min-height: 300px;
+      }
+
+      /* Form styling */
+      .form-container {
+        max-width: 500px;
+      }
+
+      .form-field {
+        display: flex;
+        flex-direction: column;
+        gap: var(--ic-space-xs);
+        margin-bottom: var(--ic-space-md);
+      }
+
+      .form-label {
+        font-size: var(--ic-text-sm);
+        font-weight: 500;
+        color: var(--ic-text-muted);
+      }
+
+      .form-input {
+        padding: 0.5rem 0.75rem;
+        background: var(--ic-surface-2);
+        border: 1px solid var(--ic-border);
+        border-radius: var(--ic-radius-md);
+        color: var(--ic-text);
+        font-family: inherit;
+        font-size: var(--ic-text-sm);
+      }
+
+      .form-input:focus {
+        outline: none;
+        border-color: var(--ic-accent);
+      }
+
+      .form-input::placeholder {
+        color: var(--ic-text-dim);
+      }
+
+      .form-hint {
+        font-size: var(--ic-text-xs);
+        color: var(--ic-text-dim);
+      }
+
+      .form-error {
+        font-size: var(--ic-text-xs);
+        color: var(--ic-error);
+      }
+
+      .form-select {
+        padding: 0.5rem 0.75rem;
+        background: var(--ic-surface-2);
+        border: 1px solid var(--ic-border);
+        border-radius: var(--ic-radius-md);
+        color: var(--ic-text);
+        font-family: inherit;
+        font-size: var(--ic-text-sm);
+      }
+
+      .form-select:focus {
+        outline: none;
+        border-color: var(--ic-accent);
+      }
+
+      /* Provider cards */
+      .provider-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 0.75rem;
+        margin-bottom: var(--ic-space-lg);
+      }
+
+      @media (max-width: 768px) {
+        .provider-grid {
+          grid-template-columns: repeat(2, 1fr);
+        }
+      }
+
+      @media (max-width: 480px) {
+        .provider-grid {
+          grid-template-columns: 1fr;
+        }
+      }
+
+      .provider-card {
+        padding: 1rem;
+        background: var(--ic-surface);
+        border: 2px solid var(--ic-border);
+        border-radius: var(--ic-radius-md);
+        cursor: pointer;
+        transition: border-color var(--ic-transition, 150ms), background var(--ic-transition, 150ms);
+      }
+
+      .provider-card:hover {
+        border-color: var(--ic-text-dim);
+      }
+
+      .provider-card.active {
+        border-color: var(--ic-accent);
+        background: var(--ic-surface-2);
+      }
+
+      .provider-card-name {
+        font-weight: 600;
+        font-size: var(--ic-text-sm);
+        margin-bottom: var(--ic-space-xs);
+      }
+
+      .provider-card-desc {
+        font-size: var(--ic-text-xs);
+        color: var(--ic-text-muted);
+      }
+
+      /* Provider config section */
+      .provider-config {
+        margin-top: var(--ic-space-lg);
+        max-width: 500px;
+      }
+
+      /* Test connection */
+      .test-row {
+        display: flex;
+        align-items: center;
+        gap: var(--ic-space-sm);
+        margin-top: var(--ic-space-sm);
+      }
+
+      .test-btn {
+        padding: 0.375rem 0.75rem;
+        background: var(--ic-surface-2);
+        border: 1px solid var(--ic-border);
+        border-radius: var(--ic-radius-md);
+        color: var(--ic-text-muted);
+        font-size: var(--ic-text-xs);
+        font-family: inherit;
+        cursor: pointer;
+        white-space: nowrap;
+      }
+
+      .test-btn:hover {
+        background: var(--ic-border);
+      }
+
+      .test-btn:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .test-success {
+        font-size: var(--ic-text-xs);
+        color: var(--ic-success);
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+      }
+
+      .test-error {
+        font-size: var(--ic-text-xs);
+        color: var(--ic-error);
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+      }
+
+      .test-spinner {
+        font-size: var(--ic-text-xs);
+        color: var(--ic-text-muted);
+      }
+
+      /* Info box */
+      .info-box {
+        padding: 0.75rem 1rem;
+        background: color-mix(in srgb, var(--ic-accent) 10%, transparent);
+        border: 1px solid color-mix(in srgb, var(--ic-accent) 30%, transparent);
+        border-radius: var(--ic-radius-md);
+        font-size: var(--ic-text-sm);
+        color: var(--ic-text-muted);
+        margin-bottom: var(--ic-space-md);
+      }
+
+      /* Channel cards */
+      .channel-cards {
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+      }
+
+      .channel-card {
+        border: 1px solid var(--ic-border);
+        border-radius: var(--ic-radius-md);
+        overflow: hidden;
+      }
+
+      .channel-header {
+        display: flex;
+        align-items: center;
+        gap: var(--ic-space-sm);
+        padding: 0.75rem 1rem;
+        cursor: pointer;
+        background: var(--ic-surface);
+        user-select: none;
+      }
+
+      .channel-header:hover {
+        background: var(--ic-surface-2);
+      }
+
+      .channel-name {
+        font-weight: 500;
+        font-size: var(--ic-text-sm);
+        flex: 1;
+      }
+
+      .channel-toggle {
+        width: 36px;
+        height: 20px;
+        border-radius: 10px;
+        border: none;
+        cursor: pointer;
+        position: relative;
+        background: var(--ic-border);
+        transition: background var(--ic-transition, 150ms);
+        padding: 0;
+      }
+
+      .channel-toggle.enabled {
+        background: var(--ic-accent);
+      }
+
+      .channel-toggle::after {
+        content: "";
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        background: white;
+        top: 2px;
+        left: 2px;
+        transition: transform var(--ic-transition, 150ms);
+      }
+
+      .channel-toggle.enabled::after {
+        transform: translateX(16px);
+      }
+
+      .channel-expand {
+        font-size: var(--ic-text-xs);
+        color: var(--ic-text-dim);
+        transition: transform var(--ic-transition, 150ms);
+      }
+
+      .channel-expand.open {
+        transform: rotate(180deg);
+      }
+
+      .channel-body {
+        padding: 0.75rem 1rem 1rem;
+        border-top: 1px solid var(--ic-border);
+        background: var(--ic-surface-2);
+      }
+
+      /* Review YAML preview */
+      .yaml-preview {
+        background: var(--ic-surface-2);
+        color: var(--ic-text);
+        padding: 1rem;
+        border-radius: var(--ic-radius-md);
+        border: 1px solid var(--ic-border);
+        max-height: 500px;
+        overflow: auto;
+        font-family: var(--ic-font-mono, ui-monospace, monospace);
+        font-size: var(--ic-text-sm);
+        white-space: pre;
+        line-height: 1.5;
+      }
+
+      .review-actions {
+        display: flex;
+        gap: var(--ic-space-sm);
+        margin-top: var(--ic-space-md);
+        flex-wrap: wrap;
+      }
+
+      .btn {
+        padding: 0.5rem 1rem;
+        border-radius: var(--ic-radius-md);
+        font-size: var(--ic-text-sm);
+        font-family: inherit;
+        cursor: pointer;
+        border: none;
+        white-space: nowrap;
+      }
+
+      .btn-primary {
+        background: var(--ic-accent);
+        color: white;
+      }
+
+      .btn-primary:hover {
+        opacity: 0.9;
+      }
+
+      .btn-primary:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .btn-secondary {
+        background: var(--ic-surface-2);
+        border: 1px solid var(--ic-border);
+        color: var(--ic-text-muted);
+      }
+
+      .btn-secondary:hover {
+        background: var(--ic-border);
+      }
+
+      .apply-status {
+        font-size: var(--ic-text-sm);
+        color: var(--ic-text-muted);
+        margin-top: var(--ic-space-sm);
+      }
+
+      .dashboard-link {
+        margin-top: var(--ic-space-md);
+      }
+
+      .dashboard-link a {
+        color: var(--ic-accent);
+        cursor: pointer;
+        text-decoration: underline;
+        font-size: var(--ic-text-sm);
+      }
+
+      /* Navigation bar */
+      .nav-bar {
+        display: flex;
+        justify-content: space-between;
+        margin-top: var(--ic-space-xl, 2rem);
+        padding-top: var(--ic-space-md);
+        border-top: 1px solid var(--ic-border);
+      }
+
+      .nav-spacer {
+        flex: 1;
+      }
+    `];c([k({attribute:!1})],d.prototype,"rpcClient",2);c([p()],d.prototype,"_currentStep",2);c([p()],d.prototype,"_wizardData",2);c([p()],d.prototype,"_testResult",2);c([p()],d.prototype,"_expandedChannels",2);c([p()],d.prototype,"_yamlPreview",2);c([p()],d.prototype,"_applying",2);c([p()],d.prototype,"_applyStatus",2);c([p()],d.prototype,"_applyDone",2);c([p()],d.prototype,"_validationErrors",2);d=c([C("ic-setup-wizard")],d);export{d as IcSetupWizard};