dot-studio 0.0.1 → 0.0.2

package/client/assets/index-C-vnj9y3.js

@@ -0,0 +1 @@
+import{r as u,j as e}from"./react-vendor-DzpMUNDT.js";import{b as se}from"./query-vendor-_taqgrbn.js";import{a as M,O as te,u as K}from"./index-CWrv6O3o.js";import{p as ae,l as ne,a as ie,c as le,m as re,d as ce}from"./settings-utils-l7KCS3Ev.js";import{X as H,aw as oe,aq as V,v as de,R as me,k as ue,o as he,ag as ge,ax as xe,S as pe,L as je,j as ve,ay as Ne}from"./icon-vendor-I2JVIi1s.js";import"./flow-vendor-C868rU-6.js";import"./dnd-vendor-CIAZE2P2.js";import"./markdown-vendor-DnTJ9hmR.js";import"./terminal-vendor-D0xRnmbI.js";function be(t,s){return t.filter(o=>o.provider===s&&o.connected).sort((o,v)=>{const g=o.name||o.id,j=v.name||v.id;return o.toolCall!==v.toolCall?o.toolCall?-1:1:g.localeCompare(j)})}function fe(t){const s=t.query.trim().toLowerCase();return t.models.filter(o=>s?`${o.name} ${o.id}`.toLowerCase().includes(s):!0)}function _e(t){const{providers:s,selectedPerformer:o,setPerformerModel:v,refreshProviderState:g,setError:j,setProjectMessage:S,setActiveTab:k}=t,[p,d]=u.useState({}),[c,h]=u.useState(null),N=u.useMemo(()=>c?fe(c):[],[c]);function F(a){d(r=>{const n={...r};return delete n[a],n})}function f(a,r){d(n=>{const l=n[a];return l?{...n,[a]:r(l)}:n})}async function E(a,r){const n=o,l=await M.models.list(),b=be(l,a);h({providerId:a,providerName:r,performerId:(n==null?void 0:n.id)||null,performerName:(n==null?void 0:n.name)||null,models:b,query:""})}async function _(a,r){F(a),await g(),o?await E(a,r):S(`${r} connected. Select a performer to assign a model.`)}async function O(a,r){try{await M.provider.oauthCallback(a,r);const n=s.find(l=>l.id===a);await _(a,(n==null?void 0:n.name)||a)}catch(n){const l=n instanceof Error?n.message:String(n);f(a,b=>({...b,submitting:!1,error:l}))}}function A(a,r=0,n="API Key"){h(null),d(l=>({...l,[a.id]:{methodIndex:r,label:n,mode:"api",instructions:a.env.length>0?`Paste the credential for ${a.name}. OpenCode will store it in its auth store for ${a.env.join(", ")}.`:`Paste the credential for ${a.name}. OpenCode will store it in its auth store.`,code:"",submitting:!1}}))}async function P(a,r,n){if(j(null),S(null),k("providers"),n.type==="api"){A(a,r,n.label);return}try{const l=await M.provider.oauthAuthorize(a.id,r);l.url&&window.open(l.url,"_blank","noopener,noreferrer"),d(b=>({...b,[a.id]:{methodIndex:r,label:n.label,mode:l.method,url:l.url,instructions:l.instructions||"",code:"",submitting:l.method==="auto"}})),l.method==="auto"&&O(a.id,r)}catch(l){j(l instanceof Error?l.message:String(l))}}async function i(a){const r=p[a];if(!(!r||r.mode!=="code"||!r.code.trim())){f(a,n=>({...n,submitting:!0,error:void 0}));try{await M.provider.oauthCallback(a,r.methodIndex,r.code.trim());const n=s.find(l=>l.id===a);await _(a,(n==null?void 0:n.name)||a)}catch(n){const l=n instanceof Error?n.message:String(n);f(a,b=>({...b,submitting:!1,error:l}))}}}async function x(a){const r=p[a];if(!(!r||r.mode!=="api"||!r.code.trim())){f(a,n=>({...n,submitting:!0,error:void 0}));try{await M.provider.setAuth(a,{type:"api",key:r.code.trim()});const n=s.find(l=>l.id===a);await _(a,(n==null?void 0:n.name)||a)}catch(n){const l=n instanceof Error?n.message:String(n);f(a,b=>({...b,submitting:!1,error:l}))}}}function R(a){F(a)}async function $(a,r){var b;j(null),S(null);const n=s.find(w=>w.id===a),l=(n==null?void 0:n.source)==="custom";try{if(await M.provider.clearAuth(a),l){const w=await M.config.getProject().catch(()=>({config:{}})),y=Array.isArray((b=w.config)==null?void 0:b.disabled_providers)?w.config.disabled_providers:[];y.includes(a)||await M.config.update({disabled_providers:[...y,a]}).catch(()=>{})}F(a),h(w=>(w==null?void 0:w.providerId)===a?null:w),await g(),S(`${r} credentials cleared from OpenCode auth store.`)}catch(w){j(w instanceof Error?w.message:String(w))}}function z(a){c!=null&&c.performerId&&(v(c.performerId,{provider:a.provider,modelId:a.id}),S(`${a.name||a.id} applied to ${c.performerName||"the selected performer"}.`),h(null))}async function B(a){const r=p[a];!r||r.mode!=="auto"||(j(null),f(a,n=>({...n,submitting:!0,error:void 0})),O(a,r.methodIndex))}function L(a){d(r=>{let n=!1;const l={...r};for(const b of a)b.connected&&l[b.id]&&(delete l[b.id],n=!0);return n?l:r})}return{oauthFlows:p,setOauthFlows:d,modelPicker:c,setModelPicker:h,visibleModelPickerModels:N,openApiKeyFlow:A,handleAuthMethod:P,handleOauthCallback:i,handleApiAuthSave:x,dismissOauthFlow:R,disconnectProvider:$,openModelPicker:E,applyPickedModel:z,retryBrowserOauth:B,syncFlowsWithProviders:L}}const ye=[{value:"steer",label:"Steer",description:"Immediately redirect the active conversation"},{value:"queue",label:"Queue",description:"Add as the next message after the current turn finishes"}];function W({title:t,description:s,checked:o,onChange:v}){return e.jsxs("div",{className:"stg-row",children:[e.jsxs("div",{className:"stg-row__text",children:[e.jsx("span",{className:"stg-row__title",children:t}),e.jsx("span",{className:"stg-row__desc",children:s})]}),e.jsxs("label",{className:"stg-toggle",children:[e.jsx("input",{type:"checkbox",checked:o,onChange:g=>v(g.target.checked)}),e.jsx("span",{className:"stg-toggle__track"})]})]})}function Ce({title:t,description:s,value:o,options:v,onChange:g}){return e.jsxs("div",{className:"stg-row",children:[e.jsxs("div",{className:"stg-row__text",children:[e.jsx("span",{className:"stg-row__title",children:t}),e.jsx("span",{className:"stg-row__desc",children:s})]}),e.jsx("select",{className:"stg-select",value:o,onChange:j=>g(j.target.value),children:v.map(j=>e.jsx("option",{value:j.value,children:j.label},j.value))})]})}function ke(){const t=te();return e.jsxs("div",{className:"stg-panel",children:[e.jsx("div",{className:"stg-panel__header",children:e.jsx("h2",{className:"stg-panel__title",children:"General"})}),e.jsx("div",{className:"stg-section",children:e.jsxs("div",{className:"stg-group",children:[e.jsx(W,{title:"Show reasoning summaries",description:"Display collapsed reasoning summaries from model thinking blocks",checked:t.showReasoningSummaries,onChange:t.setShowReasoningSummaries}),e.jsx(W,{title:"Expand shell tool parts",description:"Auto-expand shell command output in the conversation feed",checked:t.shellToolPartsExpanded,onChange:t.setShellToolPartsExpanded}),e.jsx(W,{title:"Expand edit tool parts",description:"Auto-expand file edit diffs in the conversation feed",checked:t.editToolPartsExpanded,onChange:t.setEditToolPartsExpanded}),e.jsx(Ce,{title:"Follow-up behavior",description:"How to handle messages you send while the AI is still responding",value:t.followup,options:ye,onChange:s=>t.setFollowup(s)})]})})]})}function Se({provider:t,flow:s,modelPicker:o,visibleModelPickerModels:v,onClose:g,openApiKeyFlow:j,handleAuthMethod:S,handleOauthCallback:k,handleApiAuthSave:p,dismissOauthFlow:d,retryBrowserOauth:c,setOauthFlows:h,applyPickedModel:N,setModelPicker:F}){const f=ae(t),E=t.authMethods.map((i,x)=>({method:i,methodIndex:x})).filter(({method:i})=>i.type==="oauth"),[_,O]=u.useState(()=>f&&E.length===0?"api":!f&&E.length===1?"oauth":"choose");u.useEffect(()=>{(s==null?void 0:s.mode)==="api"?O("api"):((s==null?void 0:s.mode)==="code"||(s==null?void 0:s.mode)==="auto")&&O("oauth")},[s==null?void 0:s.mode]),u.useEffect(()=>{o&&O("pick-model")},[o]),u.useEffect(()=>{_==="api"&&!s&&j(t)},[_,s,t,j]);function A(){s&&d(t.id),o&&F(null),g()}function P(i,x){x.type==="api"?j(t):S(t,i,x)}return e.jsx("div",{className:"provider-connect-overlay",onClick:A,children:e.jsxs("div",{className:"provider-connect-modal",onClick:i=>i.stopPropagation(),children:[e.jsxs("div",{className:"provider-connect-modal__header",children:[e.jsx("span",{className:"provider-connect-modal__title",children:_==="pick-model"?"Choose Model":`Connect ${t.name}`}),e.jsx("button",{className:"icon-btn",onClick:A,children:e.jsx(H,{size:14})})]}),e.jsxs("div",{className:"provider-connect-modal__body",children:[_==="choose"&&e.jsxs("div",{className:"provider-connect-modal__methods",children:[f&&e.jsxs("button",{className:"provider-connect-modal__method-btn",onClick:()=>P(0,{type:"api",label:"API Key"}),children:[e.jsx(oe,{size:14,className:"provider-connect-modal__method-icon"}),e.jsx("span",{className:"provider-connect-modal__method-label",children:"API Key"})]}),E.map(({method:i,methodIndex:x})=>e.jsxs("button",{className:"provider-connect-modal__method-btn",onClick:()=>P(x,i),children:[e.jsx(V,{size:14,className:"provider-connect-modal__method-icon"}),e.jsx("span",{className:"provider-connect-modal__method-label",children:ne(i)})]},`${t.id}-${x}`))]}),_==="api"&&s&&e.jsxs("div",{className:"provider-connect-modal__api-section",children:[e.jsx("div",{className:"stg-note",children:s.instructions||`Paste the API key for ${t.name}.`}),e.jsxs("div",{className:"provider-connect-modal__api-row",children:[e.jsx("input",{className:"input",value:s.code,onChange:i=>{const x=i.target.value;h(R=>({...R,[t.id]:{...s,code:x,error:void 0}}))},placeholder:"Paste credential",type:"password",autoFocus:!0}),e.jsx("button",{className:"btn btn--primary",onClick:()=>p(t.id),disabled:s.submitting||!s.code.trim(),children:s.submitting?"Saving…":"Save"})]}),s.error&&e.jsx("div",{className:"stg-note stg-note--error",children:s.error})]}),_==="oauth"&&s&&e.jsxs("div",{className:"provider-connect-modal__oauth-section",children:[s.mode==="code"?e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"stg-note",children:s.instructions||"Complete authorization in the opened browser window."}),e.jsxs("div",{className:"provider-connect-modal__api-row",children:[e.jsx("input",{className:"input",value:s.code,onChange:i=>{const x=i.target.value;h(R=>({...R,[t.id]:{...s,code:x,error:void 0}}))},placeholder:"Paste authorization code",type:"text",autoFocus:!0}),e.jsx("button",{className:"btn btn--primary",onClick:()=>k(t.id),disabled:s.submitting||!s.code.trim(),children:s.submitting?"Submitting…":"Submit"})]})]}):e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"stg-note stg-note--muted",children:s.submitting?"Waiting for authorization callback…":"Browser auth is paused. Retry or reopen the auth window."}),e.jsxs("div",{className:"stg-actions",children:[s.url&&e.jsxs("button",{className:"btn",onClick:()=>window.open(s.url,"_blank","noopener,noreferrer"),children:[e.jsx(V,{size:12})," Reopen"]}),e.jsx("button",{className:"btn btn--primary",onClick:()=>c(t.id),disabled:s.submitting,children:s.submitting?"Waiting…":"Retry"})]})]}),s.error&&e.jsx("div",{className:"stg-note stg-note--error",children:s.error})]}),_==="pick-model"&&o&&e.jsxs("div",{className:"stg-model-picker",children:[e.jsxs("div",{className:"stg-note stg-note--success",children:[t.name," connected! Pick a model to assign."]}),e.jsx("input",{className:"input",value:o.query,onChange:i=>F(x=>x&&{...x,query:i.target.value}),placeholder:`Search ${o.providerName} models`,autoFocus:!0}),e.jsxs("div",{className:"stg-model-picker__list",children:[v.slice(0,12).map(i=>e.jsxs("button",{className:"stg-model-opt",onClick:()=>{N(i),A()},children:[e.jsx("span",{className:"stg-model-opt__name",children:i.name||i.id}),e.jsxs("span",{className:"stg-model-opt__meta",children:[i.id,i.toolCall?" · tools":"",i.reasoning?" · reasoning":""]})]},`${i.provider}:${i.id}`)),v.length===0&&e.jsx("div",{className:"stg-note stg-note--muted",children:"No models matched."})]})]})]})]})})}const D=["opencode","anthropic","openai","google","github-copilot","openrouter","amazon-bedrock","azure"];function Pe(t){const{providers:s,oauthFlows:o,setOauthFlows:v,modelPicker:g,setModelPicker:j,visibleModelPickerModels:S,openApiKeyFlow:k,handleAuthMethod:p,handleOauthCallback:d,handleApiAuthSave:c,dismissOauthFlow:h,disconnectProvider:N,applyPickedModel:F,retryBrowserOauth:f,projectMessage:E}=t,[_,O]=u.useState(null),A=u.useMemo(()=>s.filter(i=>i.connected&&i.id!=="opencode"),[s]),P=u.useMemo(()=>{const i=new Set(A.map(x=>x.id));return s.filter(x=>!i.has(x.id)&&ie(x.id)).sort((x,R)=>{const $=D.indexOf(x.id),z=D.indexOf(R.id);return($<0?999:$)-(z<0?999:z)})},[s,A]);return e.jsxs("div",{className:"stg-panel",children:[e.jsx("div",{className:"stg-panel__header",children:e.jsx("h2",{className:"stg-panel__title",children:"Providers"})}),E&&e.jsx("div",{className:"stg-banner stg-banner--success",children:E}),e.jsxs("div",{className:"stg-section",children:[e.jsx("h3",{className:"stg-section__title",children:"Connected"}),e.jsx("div",{className:"stg-group",children:A.length===0?e.jsx("div",{className:"stg-empty",children:"No providers connected yet."}):A.map(i=>e.jsxs("div",{className:"stg-provider-row",children:[e.jsxs("div",{className:"stg-provider-row__info",children:[e.jsx("span",{className:"stg-provider-row__name",children:i.name}),e.jsx("span",{className:"stg-tag",children:"Connected"}),i.env.length>0&&e.jsx("span",{className:"stg-tag stg-tag--subtle",children:i.env[0]})]}),e.jsx("div",{className:"stg-provider-row__actions",children:i.source==="env"?e.jsx("span",{className:"stg-tag stg-tag--subtle",children:"Set via environment"}):e.jsx("button",{className:"btn",onClick:()=>N(i.id,i.name),children:"Disconnect"})})]},i.id))})]}),e.jsxs("div",{className:"stg-section",children:[e.jsx("h3",{className:"stg-section__title",children:"Popular"}),e.jsx("div",{className:"stg-group",children:P.map(i=>e.jsxs("div",{className:"stg-provider-row",children:[e.jsxs("div",{className:"stg-provider-row__info",children:[e.jsx("span",{className:"stg-provider-row__name",children:i.name}),e.jsxs("span",{className:"stg-provider-row__meta",children:[i.modelCount," models"]})]}),e.jsx("div",{className:"stg-provider-row__actions",children:e.jsx("button",{className:"btn btn--primary",onClick:()=>O(i),children:"Connect"})})]},i.id))})]}),_&&e.jsx(Se,{provider:_,flow:o[_.id],modelPicker:g,visibleModelPickerModels:S,onClose:()=>O(null),openApiKeyFlow:k,handleAuthMethod:p,handleOauthCallback:d,handleApiAuthSave:c,dismissOauthFlow:h,retryBrowserOauth:f,setOauthFlows:v,applyPickedModel:F,setModelPicker:j})]})}function we(){const[t,s]=u.useState([]),[o,v]=u.useState(!0),[g,j]=u.useState("");u.useEffect(()=>{let p=!1;async function d(){v(!0);try{const c=await M.models.list();if(p)return;const h=(c||[]).map(N=>({id:N.id,name:N.name||N.id,provider:N.provider,providerName:N.providerName||N.provider,toolCall:!!N.toolCall,reasoning:!!N.reasoning,connected:!!N.connected}));s(h)}catch{}finally{p||v(!1)}}return d(),()=>{p=!0}},[]);const S=u.useMemo(()=>{const p=g.trim().toLowerCase();return p?t.filter(d=>d.connected).filter(d=>`${d.name} ${d.id} ${d.providerName}`.toLowerCase().includes(p)):t.filter(d=>d.connected)},[t,g]),k=u.useMemo(()=>{const p=new Map;for(const c of S){let h=p.get(c.provider);h||(h={providerId:c.provider,providerName:c.providerName,models:[]},p.set(c.provider,h)),h.models.push(c)}const d=Array.from(p.values());d.sort((c,h)=>c.providerName.localeCompare(h.providerName));for(const c of d)c.models.sort((h,N)=>h.name.localeCompare(N.name));return d},[S]);return e.jsxs("div",{className:"stg-panel",children:[e.jsx("div",{className:"stg-panel__header",children:e.jsx("h2",{className:"stg-panel__title",children:"Models"})}),e.jsxs("div",{className:"stg-search",children:[e.jsx(de,{size:14,className:"stg-search__icon"}),e.jsx("input",{className:"stg-search__input",value:g,onChange:p=>j(p.target.value),placeholder:"Search models…",spellCheck:!1,autoComplete:"off"}),g&&e.jsx("button",{className:"icon-btn",onClick:()=>j(""),children:e.jsx(H,{size:12})})]}),o?e.jsx("div",{className:"stg-empty",children:"Loading models…"}):k.length===0?e.jsx("div",{className:"stg-empty",children:g?`No models matching "${g}"`:"No connected models available."}):e.jsx("div",{className:"stg-models-list",children:k.map(p=>e.jsxs("div",{className:"stg-section",children:[e.jsx("h3",{className:"stg-section__title",children:p.providerName}),e.jsx("div",{className:"stg-group",children:p.models.map(d=>{const c=`${d.provider}:${d.id}`;return e.jsx("div",{className:"stg-row",children:e.jsxs("div",{className:"stg-row__text",children:[e.jsx("span",{className:"stg-row__title",children:d.name}),e.jsxs("span",{className:"stg-row__desc",children:[d.id,d.toolCall?" · tools":"",d.reasoning?" · reasoning":""]})]})},c)})})]},p.providerId))})]})}function Me({opencodeInfo:t,onRestart:s,setError:o}){var v;return e.jsxs("div",{className:"stg-panel",children:[e.jsx("div",{className:"stg-panel__header",children:e.jsx("h2",{className:"stg-panel__title",children:"OpenCode"})}),e.jsxs("section",{className:"settings-section",children:[e.jsxs("div",{className:"settings-section-head",children:[e.jsx("h4",{children:"Connection"}),(t==null?void 0:t.mode)==="managed"&&t.restartAvailable&&e.jsx("button",{className:"btn",onClick:async()=>{o(null);try{await s()}catch(g){o(g instanceof Error?g.message:String(g))}},children:"Restart OpenCode"})]}),e.jsxs("div",{className:"settings-row",children:[e.jsx("span",{className:"settings-label",children:"Status"}),e.jsx("span",{className:"settings-value",children:t!=null&&t.connected?e.jsxs(e.Fragment,{children:[e.jsx(me,{size:12,color:"#14AE5C"})," Connected"]}):e.jsxs(e.Fragment,{children:[e.jsx(ue,{size:12,color:"#F24822"})," Disconnected"]})})]}),e.jsxs("div",{className:"settings-row",children:[e.jsx("span",{className:"settings-label",children:"Mode"}),e.jsx("span",{className:"settings-value",children:(t==null?void 0:t.mode)==="external"?"External OpenCode":"Managed by Studio"})]}),(t==null?void 0:t.url)&&e.jsxs("div",{className:"settings-row settings-row--stacked",children:[e.jsx("span",{className:"settings-label",children:"URL"}),e.jsx("span",{className:"settings-value mono",children:t.url})]}),((v=t==null?void 0:t.project)==null?void 0:v.worktree)&&e.jsxs("div",{className:"settings-row settings-row--stacked",children:[e.jsx("span",{className:"settings-label",children:"Project"}),e.jsx("span",{className:"settings-value mono",children:t.project.worktree})]}),(t==null?void 0:t.error)&&e.jsx("div",{className:"settings-note settings-note--error",children:t.error})]}),e.jsxs("section",{className:"settings-section",children:[e.jsx("h4",{children:"About"}),e.jsxs("div",{className:"settings-row",children:[e.jsx("span",{className:"settings-label",children:"Studio API"}),e.jsx("span",{className:"settings-value mono",children:typeof window>"u"?"/api":`${window.location.origin}/api`})]}),e.jsxs("div",{className:"settings-row",children:[e.jsx("span",{className:"settings-label",children:"Frontend"}),e.jsx("span",{className:"settings-value mono",children:typeof window>"u"?"Unavailable":window.location.origin})]})]})]})}function Ae({projectMeta:t,projectDraft:s,providers:o,projectDirty:v,savingProject:g,projectMessage:j,toggleProviderVisibility:S,setProjectDraft:k,resetProjectDraft:p,saveProjectSettings:d}){return e.jsxs("div",{className:"stg-panel",children:[e.jsx("div",{className:"stg-panel__header",children:e.jsx("h2",{className:"stg-panel__title",children:"Project"})}),e.jsxs("section",{className:"settings-section",children:[e.jsxs("div",{className:"settings-section-head",children:[e.jsx("h4",{children:"OpenCode Project Config"}),e.jsx("span",{className:"settings-caption",children:"Saved through OpenCode into the current working directory."})]}),t&&e.jsxs("div",{className:"settings-row settings-row--stacked",children:[e.jsx("span",{className:"settings-label",children:"Config File"}),e.jsx("span",{className:"settings-value mono",children:t.path})]}),e.jsxs("div",{className:"settings-form-grid",children:[e.jsxs("label",{className:"settings-field",children:[e.jsx("span",{className:"settings-field__label",children:"Share mode"}),e.jsxs("select",{className:"select",value:(s==null?void 0:s.share)||"manual",onChange:c=>k(h=>h&&{...h,share:c.target.value}),children:[e.jsx("option",{value:"manual",children:"Manual"}),e.jsx("option",{value:"auto",children:"Auto"}),e.jsx("option",{value:"disabled",children:"Disabled"})]})]}),e.jsxs("label",{className:"settings-field",children:[e.jsx("span",{className:"settings-field__label",children:"Username"}),e.jsx("input",{className:"input",value:(s==null?void 0:s.username)||"",onChange:c=>k(h=>h&&{...h,username:c.target.value}),placeholder:"Display name for OpenCode sessions"})]})]}),e.jsxs("div",{className:"settings-note",children:[e.jsx("div",{className:"settings-note__title",children:"Provider visibility"}),"Hide providers you do not want surfaced in this project."]}),e.jsx("div",{className:"settings-checkbox-list",children:o.map(c=>e.jsxs("label",{className:"settings-checkbox",children:[e.jsx("input",{type:"checkbox",checked:(s==null?void 0:s.visibleProviders[c.id])??!0,onChange:()=>S(c.id)}),e.jsxs("span",{className:"settings-checkbox__body",children:[e.jsx("span",{className:"settings-checkbox__title",children:c.name}),e.jsxs("span",{className:"settings-checkbox__meta",children:[c.id," · ",c.modelCount," models · ",c.connected?"connected":"not connected"]})]})]},c.id))}),e.jsxs("div",{className:"settings-save-row",children:[e.jsx("button",{className:"btn",onClick:p,disabled:!v||g,children:"Reset"}),e.jsx("button",{className:"btn btn--primary",onClick:()=>void d(),disabled:!v||g,children:g?"Saving...":t!=null&&t.exists?"Update config":"Create config"})]}),j&&e.jsx("div",{className:"settings-note settings-note--success",children:j})]})]})}const Oe=[{label:"Studio",items:[{key:"general",label:"General",icon:e.jsx(xe,{size:14})}]},{label:"Server",items:[{key:"providers",label:"Providers",icon:e.jsx(pe,{size:14})},{key:"models",label:"Models",icon:e.jsx(je,{size:14})}]},{label:"Runtime",items:[{key:"opencode",label:"OpenCode",icon:e.jsx(ve,{size:14})},{key:"project",label:"Project",icon:e.jsx(Ne,{size:14})}]}];function Be({open:t,onClose:s}){const o=se(),v=K(m=>m.workingDir),g=K(m=>m.performers),j=K(m=>m.selectedPerformerId),S=K(m=>m.setPerformerModel),[k,p]=u.useState([]),[d,c]=u.useState(null),[h,N]=u.useState(!0),[F,f]=u.useState(null),[E,_]=u.useState(0),[O,A]=u.useState("general"),[P,i]=u.useState(null),[x,R]=u.useState(null),[$,z]=u.useState(null),[B,L]=u.useState(!1),[a,r]=u.useState(null),n=u.useRef(!1),l=u.useMemo(()=>g.find(m=>m.id===j)||null,[g,j]);function b(){_(m=>m+1)}async function w(){o.invalidateQueries({queryKey:["models"]}),b()}const y=_e({providers:k,selectedPerformer:l?{id:l.id,name:l.name}:null,setPerformerModel:S,refreshProviderState:w,setError:f,setProjectMessage:r,setActiveTab:m=>A(m)}),U=u.useMemo(()=>!le(P,x),[P,x]);if(u.useEffect(()=>{n.current=U},[U]),u.useEffect(()=>{if(!t)return;let m=!1;return(async()=>{k.length===0&&!d&&N(!0),f(null);try{const[q,I,ee,Q]=await Promise.all([M.providers.list(),M.provider.auth().catch(()=>({})),M.opencodeHealth().catch(T=>({connected:!1,url:"",error:T instanceof Error?T.message:String(T),restartAvailable:!1})),M.config.getProject().catch(()=>({exists:!1,path:`${v}/config.json`,config:{}}))]);if(m)return;const G=re(q,I||{});if(p(G),c(ee),z({exists:Q.exists,path:Q.path}),!n.current||!P||!x){const T=ce(G,Q.config||{});i(T),R(T)}y.syncFlowsWithProviders(G)}catch(q){m||f(q instanceof Error?q.message:String(q))}finally{m||N(!1)}})(),()=>{m=!0}},[t,E,v]),!t)return null;function X(m){i(C=>C&&{...C,visibleProviders:{...C.visibleProviders,[m]:!C.visibleProviders[m]}})}function J(){x&&(i(x),r(null))}async function Y(){if(P){L(!0),f(null),r(null);try{const m=k.filter(C=>!P.visibleProviders[C.id]).map(C=>C.id);await M.config.update({share:P.share,username:P.username,disabled_providers:m,enabled_providers:[]}),R(P),r("Saved to OpenCode project config."),o.invalidateQueries({queryKey:["models"]}),_(C=>C+1)}catch(m){f(m instanceof Error?m.message:String(m))}finally{L(!1)}}}function Z(){if(h&&O!=="general")return e.jsx("div",{className:"stg-empty",children:"Loading…"});switch(O){case"general":return e.jsx(ke,{});case"providers":return e.jsx(Pe,{providers:k,oauthFlows:y.oauthFlows,setOauthFlows:y.setOauthFlows,modelPicker:y.modelPicker,setModelPicker:y.setModelPicker,visibleModelPickerModels:y.visibleModelPickerModels,openApiKeyFlow:y.openApiKeyFlow,handleAuthMethod:y.handleAuthMethod,handleOauthCallback:y.handleOauthCallback,handleApiAuthSave:y.handleApiAuthSave,dismissOauthFlow:y.dismissOauthFlow,disconnectProvider:y.disconnectProvider,openModelPicker:y.openModelPicker,applyPickedModel:y.applyPickedModel,retryBrowserOauth:y.retryBrowserOauth,selectedPerformer:l?{id:l.id,name:l.name}:null,projectMessage:a});case"models":return e.jsx(we,{});case"opencode":return e.jsx(Me,{opencodeInfo:d,setError:f,onRestart:async()=>{await M.opencodeRestart(),b()}});case"project":return e.jsx(Ae,{projectMeta:$,projectDraft:P,providers:k,projectDirty:U,savingProject:B,projectMessage:a,toggleProviderVisibility:X,setProjectDraft:i,resetProjectDraft:J,saveProjectSettings:Y})}}return e.jsx("div",{className:"settings-overlay",onClick:s,children:e.jsxs("div",{className:"settings-modal",onClick:m=>m.stopPropagation(),children:[e.jsxs("div",{className:"settings-header",children:[e.jsxs("h3",{children:[e.jsx(he,{size:16,style:{display:"inline",verticalAlign:"-2px",marginRight:6}}),"Settings"]}),e.jsxs("div",{className:"settings-header-actions",children:[e.jsx("button",{className:"icon-btn",onClick:b,"aria-label":"Refresh settings",children:e.jsx(ge,{size:14})}),e.jsx("button",{className:"icon-btn",onClick:s,"aria-label":"Close settings",children:e.jsx(H,{size:14})})]})]}),e.jsxs("div",{className:"settings-body",children:[e.jsxs("div",{className:"stg-sidebar",children:[e.jsx("nav",{className:"stg-sidebar__nav",children:Oe.map(m=>e.jsxs("div",{children:[e.jsx("div",{className:"stg-sidebar__group-label",children:m.label}),e.jsx("div",{className:"stg-sidebar__items",children:m.items.map(C=>e.jsxs("button",{className:`stg-sidebar__item ${O===C.key?"active":""}`,onClick:()=>A(C.key),children:[C.icon,C.label]},C.key))})]},m.label))}),e.jsxs("div",{className:"stg-sidebar__footer",children:["DOT Studio",e.jsx("br",{}),"v0.1.0"]})]}),e.jsxs("div",{className:"stg-content",children:[F&&e.jsx("div",{className:"stg-banner",style:{color:"#f24822",background:"rgba(242,72,34,0.1)",margin:"16px 24px 0"},children:F}),Z()]})]})]})})}export{Be as SettingsModal};

package/client/assets/index-C9HTqfZw.css

@@ -0,0 +1 @@
+.settings-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:1000;display:flex;align-items:center;justify-content:center}.settings-modal{background:var(--bg-panel);border:1px solid var(--border-main);border-radius:var(--radius-lg);box-shadow:var(--shadow-window);width:820px;max-width:calc(100vw - 32px);height:600px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif}.settings-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border-light);flex-shrink:0}.settings-header h3{font-size:var(--font-lg);font-weight:600;color:var(--text-primary)}.settings-header-actions{display:flex;align-items:center;gap:6px}.settings-body{display:flex;flex:1;min-height:0;overflow:hidden}.stg-sidebar{width:180px;flex-shrink:0;display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid var(--border-light);padding:12px 8px;overflow-y:auto}.stg-sidebar__nav{display:flex;flex-direction:column;gap:16px}.stg-sidebar__group-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);padding:0 8px}.stg-sidebar__items{display:flex;flex-direction:column;gap:2px}.stg-sidebar__item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--radius-md, 6px);font-size:var(--font-sm);font-weight:500;color:var(--text-secondary);cursor:pointer;background:transparent;border:none;text-align:left;width:100%;transition:background .15s,color .15s}.stg-sidebar__item:hover{background:var(--bg-hover);color:var(--text-primary)}.stg-sidebar__item.active{background:var(--bg-hover);color:var(--text-primary);font-weight:600}.stg-sidebar__footer{padding:8px;color:var(--text-muted);font-size:11px;line-height:1.4}.stg-content{flex:1;overflow-y:auto;min-width:0}@media(max-width:700px){.settings-modal{width:calc(100vw - 24px);height:calc(100vh - 48px)}.stg-sidebar{width:140px}.settings-form-grid{grid-template-columns:1fr}.settings-section-head{flex-direction:column;align-items:flex-start}.settings-caption{max-width:none;text-align:left}}.stg-panel{padding:0 24px 24px}.stg-panel__header{position:sticky;top:0;z-index:1;background:var(--bg-panel);padding:20px 0 12px}.stg-panel__title{font-size:15px;font-weight:600;color:var(--text-primary)}.stg-section{margin-bottom:20px}.stg-section__title{font-size:var(--font-sm);font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;padding-bottom:8px}.stg-group{border:1px solid var(--border-light);border-radius:var(--radius-lg);background:var(--bg-canvas);overflow:hidden}.stg-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-bottom:1px solid var(--border-light)}.stg-row:last-child{border-bottom:none}.stg-row__text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.stg-row__title{font-size:var(--font-base);font-weight:500;color:var(--text-primary)}.stg-row__desc{font-size:var(--font-sm);color:var(--text-muted);line-height:1.4}.stg-toggle{position:relative;display:inline-flex;cursor:pointer;flex-shrink:0}.stg-toggle input{position:absolute;opacity:0;width:0;height:0}.stg-toggle__track{width:36px;height:20px;background:var(--border-main);border-radius:10px;transition:background .2s;position:relative}.stg-toggle__track:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .2s}.stg-toggle input:checked+.stg-toggle__track{background:var(--accent, #635bff)}.stg-toggle input:checked+.stg-toggle__track:after{transform:translate(16px)}.stg-select{padding:4px 8px;border-radius:var(--radius-md, 6px);border:1px solid var(--border-main);background:var(--bg-canvas);color:var(--text-primary);font-size:var(--font-sm);min-width:120px;cursor:pointer;-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}.stg-search{display:flex;align-items:center;gap:8px;padding:6px 10px;margin-bottom:16px;border:1px solid var(--border-light);border-radius:var(--radius-lg);background:var(--bg-canvas)}.stg-search__icon{color:var(--text-muted);flex-shrink:0}.stg-search__input{flex:1;border:none;background:transparent;color:var(--text-primary);font-size:var(--font-base);outline:none}.stg-search__input::placeholder{color:var(--text-muted)}.stg-provider-row{padding:10px 12px;border-bottom:1px solid var(--border-light);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}.stg-provider-row:last-child{border-bottom:none}.stg-provider-row__info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.stg-provider-row__name{font-size:var(--font-base);font-weight:500;color:var(--text-primary)}.stg-provider-row__meta{font-size:var(--font-sm);color:var(--text-muted)}.stg-provider-row__actions{display:flex;gap:6px;flex-shrink:0}.stg-tag{display:inline-flex;align-items:center;padding:2px 6px;border-radius:4px;font-size:11px;font-weight:600;background:#14ae5c1f;color:#14ae5c;white-space:nowrap}.stg-tag--subtle{background:var(--bg-hover);color:var(--text-muted);font-weight:500}.stg-note{margin-top:8px;border-radius:var(--radius-lg);padding:8px 10px;font-size:var(--font-sm);line-height:1.5;color:var(--text-secondary);background:var(--bg-hover)}.stg-note--muted{background:transparent;padding:4px 0}.stg-note--error{color:#f24822;background:#f248221a}.stg-note--success{color:#14ae5c;background:#14ae5c1a}.stg-note__title{font-weight:600;color:var(--text-primary);margin-bottom:2px}.stg-banner{margin:0 0 16px;border-radius:var(--radius-lg);padding:10px 12px;font-size:var(--font-sm);line-height:1.5}.stg-banner--success{color:#14ae5c;background:#14ae5c1a}.stg-banner__text{font-weight:500}.stg-empty{padding:20px;text-align:center;color:var(--text-muted);font-size:var(--font-sm)}.stg-flow{margin-top:8px;padding-top:8px;border-top:1px solid var(--border-light);width:100%}.stg-flow__header{display:flex;align-items:center;justify-content:space-between;gap:8px}.stg-flow__label{font-size:var(--font-base);font-weight:600;color:var(--text-primary)}.stg-flow__input-row{display:flex;gap:8px;margin-top:8px}.stg-actions{display:flex;gap:6px;margin-top:8px}.stg-model-picker{display:flex;flex-direction:column;gap:8px;margin-top:8px}.stg-model-picker__list{display:flex;flex-direction:column;gap:4px;max-height:180px;overflow-y:auto}.stg-model-opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;border:1px solid var(--border-light);background:var(--bg-canvas);color:var(--text-primary);border-radius:var(--radius-md, 6px);padding:8px 10px;cursor:pointer;text-align:left}.stg-model-opt:hover{border-color:var(--accent);background:var(--bg-panel)}.stg-model-opt__name{font-size:var(--font-base);font-weight:600}.stg-model-opt__meta{font-size:var(--font-sm);color:var(--text-muted)}.settings-section{padding:0;margin-bottom:16px}.settings-section h4{font-size:var(--font-sm);font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:10px}.settings-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}.settings-caption{color:var(--text-muted);font-size:var(--font-sm);line-height:1.4;max-width:280px;text-align:right}.settings-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 0;font-size:var(--font-base)}.settings-row--stacked{align-items:flex-start;flex-direction:column}.settings-label{color:var(--text-secondary)}.settings-value{color:var(--text-primary);display:flex;align-items:center;gap:4px;font-weight:500;text-align:right}.settings-value.mono{font-family:SF Mono,Menlo,monospace;font-size:var(--font-sm);font-weight:400;color:var(--text-secondary);word-break:break-all}.settings-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.settings-field{display:flex;flex-direction:column;gap:6px}.settings-field__label{color:var(--text-muted);font-size:var(--font-sm);font-weight:600;letter-spacing:.04em;text-transform:uppercase}.settings-note{margin-top:10px;border-radius:var(--radius-lg);padding:9px 10px;font-size:var(--font-sm);line-height:1.5;color:var(--text-secondary);background:var(--bg-hover)}.settings-note--muted{background:transparent;padding-left:0;padding-right:0}.settings-note--error{color:#f24822;background:#f248221a}.settings-note--success{color:#14ae5c;background:#14ae5c1a}.settings-note__title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);margin-bottom:2px}.settings-checkbox-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}.settings-checkbox{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:10px;background:var(--bg-canvas);cursor:pointer}.settings-checkbox input{margin-top:2px}.settings-checkbox__body{display:flex;flex-direction:column;gap:2px}.settings-checkbox__title{font-size:var(--font-base);font-weight:600;color:var(--text-primary)}.settings-checkbox__meta{font-size:var(--font-sm);color:var(--text-muted);line-height:1.4}.settings-save-row{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}.stg-models-list{display:flex;flex-direction:column;gap:20px}.provider-connect-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;align-items:center;justify-content:center;background:#00000073;border-radius:var(--radius-lg)}.provider-connect-modal{background:var(--bg-panel);border:1px solid var(--border-main);border-radius:var(--radius-lg);box-shadow:var(--shadow-window);width:440px;max-width:calc(100% - 32px);max-height:80%;display:flex;flex-direction:column;overflow:hidden}.provider-connect-modal__header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border-light);flex-shrink:0}.provider-connect-modal__title{font-size:15px;font-weight:600;color:var(--text-primary)}.provider-connect-modal__body{padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}.provider-connect-modal__methods{display:flex;flex-direction:column;gap:6px}.provider-connect-modal__method-btn{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;border:1px solid var(--border-light);border-radius:var(--radius-md, 6px);background:var(--bg-canvas);color:var(--text-primary);font-size:var(--font-base);font-weight:500;cursor:pointer;transition:border-color .15s,background .15s}.provider-connect-modal__method-btn:hover{border-color:var(--accent, #635bff);background:var(--bg-panel)}.provider-connect-modal__method-icon{color:var(--text-muted);flex-shrink:0}.provider-connect-modal__method-label{flex:1;text-align:left}.provider-connect-modal__api-section{display:flex;flex-direction:column;gap:8px}.provider-connect-modal__api-label{font-size:var(--font-sm);font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}.provider-connect-modal__api-row{display:flex;gap:8px}.provider-connect-modal__api-row .input{flex:1}.provider-connect-modal__oauth-section{display:flex;flex-direction:column;gap:8px}.provider-connect-modal__footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--border-light)}