import{f as g,a as p,i as h,b as s,t as f,r as u}from"./vendor-lit-B2r-dKc0.js";var m=Object.defineProperty,v=Object.getOwnPropertyDescriptor,y=(t,i,o,e)=>{for(var r=e>1?void 0:e?v(i,o):i,n=t.length-1,a;n>=0;n--)(a=t[n])&&(r=(e?a(i,o,r):a(r))||r);return e&&r&&m(i,o,r),r};let x=class extends h{constructor(){super(...arguments),this.busy=!1}createRenderRoot(){return this}updated(t){super.updated(t),t.has("entry")&&(this.entry?.state&&this.setAttribute("data-state",this.entry.state),this.entry?.id&&this.setAttribute("data-entry-id",this.entry.id))}_emit(t){this.dispatchEvent(new CustomEvent(t,{detail:{entryId:this.entry.id},bubbles:!0,composed:!0}))}_sourceBadge(){const t=this.entry.source?.type;return t==="trigger"?"trigger":t==="manual_ui"?"manual":t==="manual_api"?"api":"?"}_statePillClass(){switch(this.entry.state){case"pending":return"inbox-pill inbox-pill--pending";case"completed":return"inbox-pill inbox-pill--completed";case"failed":return"inbox-pill inbox-pill--failed";case"cancelled":return"inbox-pill inbox-pill--cancelled";default:return"inbox-pill"}}_relativeAge(){const t=Date.now()-(this.entry.createdAt||0);return t<6e4?"just now":t<36e5?`${Math.floor(t/6e4)}m ago`:t<864e5?`${Math.floor(t/36e5)}h ago`:`${Math.floor(t/864e5)}d ago`}render(){const t=this.entry.state==="pending";return s`
			<div
				class="inbox-row"
				data-entry-id=${this.entry.id}
				data-state=${this.entry.state}
				style="display:flex;flex-direction:column;gap:4px;padding:8px 10px;border:1px solid var(--border);border-radius:6px;background:var(--card,var(--background));"
			>
				<div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;">
					<span style="font-weight:500;font-size:13px;color:var(--foreground);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title=${this.entry.title}>
						${this.entry.title}
					</span>
					<span class=${this._statePillClass()} style="font-size:10px;padding:1px 6px;border-radius:999px;background:color-mix(in oklch, var(--muted-foreground) 15%, transparent);color:var(--muted-foreground);text-transform:uppercase;letter-spacing:0.04em;">
						${this.entry.state}
					</span>
				</div>
				<div style="display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted-foreground);flex-wrap:wrap;">
					<span class="inbox-source-badge" style="padding:1px 5px;border-radius:4px;background:color-mix(in oklch, var(--chart-2) 18%, transparent);color:var(--foreground);font-size:10px;">
						${this._sourceBadge()}
					</span>
					<span class="inbox-age" title=${new Date(this.entry.createdAt||0).toISOString()}>${this._relativeAge()}</span>
					${this.entry.result?s`<span class="inbox-result" style="flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title=${this.entry.result}>${this.entry.result}</span>`:""}
					${this.entry.error?s`<span class="inbox-error" style="flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--negative,var(--destructive));" title=${this.entry.error}>${this.entry.error}</span>`:""}
					<span style="flex:1;"></span>
					${t?s`<button
								class="inbox-cancel-btn"
								?disabled=${this.busy}
								@click=${()=>this._emit("inbox-cancel")}
								style="font-size:11px;padding:2px 8px;border-radius:4px;border:1px solid var(--border);background:transparent;color:var(--muted-foreground);cursor:pointer;"
								title="Cancel this entry"
							>Cancel</button>`:s`<button
								class="inbox-delete-btn"
								?disabled=${this.busy}
								@click=${()=>this._emit("inbox-delete")}
								style="font-size:11px;padding:2px 8px;border-radius:4px;border:1px solid var(--border);background:transparent;color:var(--muted-foreground);cursor:pointer;"
								title="Delete from history"
							>Delete</button>`}
				</div>
			</div>
		`}};x.styles=g`
		:host {
			display: block;
		}
	`;y([p({attribute:!1})],x.prototype,"entry",2);y([p({type:Boolean})],x.prototype,"busy",2);x=y([f("inbox-entry-row")],x);var _=Object.defineProperty,$=Object.getOwnPropertyDescriptor,b=(t,i,o,e)=>{for(var r=e>1?void 0:e?$(i,o):i,n=t.length-1,a;n>=0;n--)(a=t[n])&&(r=(e?a(i,o,r):a(r))||r);return e&&r&&_(i,o,r),r};let l=class extends h{constructor(){super(...arguments),this.staffId="",this._title="",this._prompt="",this._submitting=!1,this._error=null}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.style.position="absolute",this.style.inset="0",this.style.zIndex="100",this.style.display="block"}_close(){this.dispatchEvent(new CustomEvent("inbox-add-close",{bubbles:!0,composed:!0}))}async _submit(){if(this._submitting)return;const t=this._title.trim(),i=this._prompt.trim();if(!t||!i){this._error="Title and prompt are required.";return}this._submitting=!0,this._error=null;try{const o=await fetch(`/api/staff/${encodeURIComponent(this.staffId)}/inbox`,{method:"POST",credentials:"include",headers:{"Content-Type":"application/json"},body:JSON.stringify({title:t,prompt:i,source:{type:"manual_ui"}})});if(!o.ok){const e=await o.text().catch(()=>"");this._error=`Failed (${o.status}): ${e||"unknown"}`,this._submitting=!1;return}this.dispatchEvent(new CustomEvent("inbox-add-submitted",{bubbles:!0,composed:!0})),this._close()}catch(o){this._error=o?.message||String(o),this._submitting=!1}}render(){return s`
			<div
				class="add-to-inbox-backdrop"
				@click=${this._close}
				style="position:absolute;inset:0;background:color-mix(in oklch, var(--background) 50%, transparent);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:100;"
			>
				<div
					class="add-to-inbox-dialog"
					role="dialog"
					aria-label="Add to inbox"
					@click=${t=>t.stopPropagation()}
					style="background:var(--card,var(--background));color:var(--foreground);border:1px solid var(--border);border-radius:8px;padding:18px;width:min(520px, calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;box-sizing:border-box;box-shadow:0 8px 24px color-mix(in oklch, var(--foreground) 12%, transparent);display:flex;flex-direction:column;gap:12px;"
				>
					<div style="display:flex;align-items:center;justify-content:space-between;">
						<h2 style="margin:0;font-size:14px;font-weight:600;">Add to inbox</h2>
						<button
							@click=${this._close}
							style="background:none;border:none;color:var(--muted-foreground);font-size:18px;cursor:pointer;line-height:1;padding:0 4px;"
							title="Close"
							aria-label="Close"
						>×</button>
					</div>
					<div>
						<label style="display:block;font-size:11px;color:var(--muted-foreground);margin-bottom:4px;">Title</label>
						<input
							class="add-to-inbox-title"
							type="text"
							.value=${this._title}
							@input=${t=>{this._title=t.target.value}}
							placeholder="e.g. Investigate slow queries"
							style="width:100%;box-sizing:border-box;padding:6px 8px;border-radius:4px;border:1px solid var(--border);background:var(--background);color:var(--foreground);font-size:13px;"
						/>
					</div>
					<div>
						<label style="display:block;font-size:11px;color:var(--muted-foreground);margin-bottom:4px;">Prompt</label>
						<textarea
							class="add-to-inbox-prompt"
							rows="6"
							.value=${this._prompt}
							@input=${t=>{this._prompt=t.target.value}}
							placeholder="What should the agent do?"
							style="width:100%;box-sizing:border-box;padding:6px 8px;border-radius:4px;border:1px solid var(--border);background:var(--background);color:var(--foreground);font-size:13px;font-family:inherit;resize:vertical;min-height:120px;"
						></textarea>
					</div>
					${this._error?s`<div style="font-size:12px;color:var(--negative,var(--destructive));">${this._error}</div>`:""}
					<div style="display:flex;justify-content:flex-end;gap:8px;padding-top:4px;">
						<button
							@click=${this._close}
							?disabled=${this._submitting}
							style="font-size:12px;padding:6px 12px;border-radius:4px;border:1px solid var(--border);background:transparent;color:var(--foreground);cursor:pointer;"
						>Cancel</button>
						<button
							class="add-to-inbox-submit"
							@click=${this._submit}
							?disabled=${this._submitting||!this._title.trim()||!this._prompt.trim()}
							style="font-size:12px;padding:6px 14px;border-radius:4px;border:1px solid var(--primary);background:var(--primary);color:var(--primary-foreground,white);cursor:pointer;"
						>${this._submitting?"Adding…":"Add to inbox"}</button>
					</div>
				</div>
			</div>
		`}};b([p({type:String})],l.prototype,"staffId",2);b([u()],l.prototype,"_title",2);b([u()],l.prototype,"_prompt",2);b([u()],l.prototype,"_submitting",2);b([u()],l.prototype,"_error",2);l=b([f("add-to-inbox-dialog")],l);var w=Object.defineProperty,k=Object.getOwnPropertyDescriptor,c=(t,i,o,e)=>{for(var r=e>1?void 0:e?k(i,o):i,n=t.length-1,a;n>=0;n--)(a=t[n])&&(r=(e?a(i,o,r):a(r))||r);return e&&r&&w(i,o,r),r};let d=class extends h{constructor(){super(...arguments),this.entries=[],this.staffId="",this.sessionId="",this.addDialogOpen=!1,this._historyOpen=!1,this._busyEntryIds=new Set}createRenderRoot(){return this}_markBusy(t,i){const o=new Set(this._busyEntryIds);i?o.add(t):o.delete(t),this._busyEntryIds=o}async _cancel(t){this._markBusy(t,!0);try{await fetch(`/api/staff/${encodeURIComponent(this.staffId)}/inbox/${encodeURIComponent(t)}/dismiss`,{method:"POST",credentials:"include",headers:{"Content-Type":"application/json"},body:JSON.stringify({sessionId:this.sessionId,outcome:"cancelled",reason:"Cancelled from UI"})})}finally{this._markBusy(t,!1)}}async _delete(t){this._markBusy(t,!0);try{await fetch(`/api/staff/${encodeURIComponent(this.staffId)}/inbox/${encodeURIComponent(t)}`,{method:"DELETE",credentials:"include"})}finally{this._markBusy(t,!1)}}_openAddDialog(){this.dispatchEvent(new CustomEvent("inbox-open-add",{bubbles:!0,composed:!0}))}_closeAddDialog(){this.dispatchEvent(new CustomEvent("inbox-add-close",{bubbles:!0,composed:!0}))}_onEntryAction(t,i){t==="inbox-cancel"?this._cancel(i):this._delete(i)}render(){const t=this.entries.filter(e=>e.state==="pending"),i=this.entries.filter(e=>e.state!=="pending").sort((e,r)=>(r.completedAt||r.createdAt)-(e.completedAt||e.createdAt)),o=t.length===0&&i.length===0;return s`
			<div class="inbox-panel" style="position:relative;overflow:hidden;display:flex;flex-direction:column;height:100%;min-height:0;">
				<div class="inbox-panel-header" style="display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--border);flex-shrink:0;">
					<div style="font-size:13px;font-weight:600;color:var(--foreground);">Inbox</div>
					<button
						class="inbox-add-btn"
						@click=${this._openAddDialog}
						style="font-size:12px;padding:4px 10px;border-radius:4px;border:1px solid var(--border);background:transparent;color:var(--foreground);cursor:pointer;"
						title="Add a manual inbox entry"
					>+ Add to inbox</button>
				</div>

				<div class="inbox-panel-body" style="flex:1;min-height:0;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:14px;">
					${o?s`<div class="inbox-empty" style="text-align:center;color:var(--muted-foreground);font-size:13px;padding:24px 12px;">
								<div style="margin-bottom:6px;">No inbox entries yet</div>
								<div style="font-size:11px;">Triggers or the "+ Add to inbox" button will queue work for this staff agent.</div>
							</div>`:s`
							<section class="inbox-section inbox-pending-section" data-section="pending">
								<header style="font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted-foreground);margin-bottom:6px;">
									Pending ${t.length>0?s`<span style="font-weight:600;">(${t.length})</span>`:""}
								</header>
								${t.length===0?s`<div style="font-size:12px;color:var(--muted-foreground);padding:4px 0;">No pending entries.</div>`:s`
										<div style="display:flex;flex-direction:column;gap:6px;">
											${t.map(e=>s`
												<inbox-entry-row
													.entry=${e}
													.busy=${this._busyEntryIds.has(e.id)}
													@inbox-cancel=${()=>this._onEntryAction("inbox-cancel",e.id)}
													@inbox-delete=${()=>this._onEntryAction("inbox-delete",e.id)}
												></inbox-entry-row>
											`)}
										</div>
									`}
							</section>

							${i.length>0?s`
									<section class="inbox-section inbox-history-section" data-section="history">
										<details
											?open=${this._historyOpen}
											@toggle=${e=>{this._historyOpen=e.target.open}}
										>
											<summary style="cursor:pointer;font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted-foreground);margin-bottom:6px;list-style:revert;">
												History <span style="font-weight:600;">(${i.length})</span>
											</summary>
											<div style="display:flex;flex-direction:column;gap:6px;margin-top:6px;">
												${i.map(e=>s`
													<inbox-entry-row
														.entry=${e}
														.busy=${this._busyEntryIds.has(e.id)}
														@inbox-cancel=${()=>this._onEntryAction("inbox-cancel",e.id)}
														@inbox-delete=${()=>this._onEntryAction("inbox-delete",e.id)}
													></inbox-entry-row>
												`)}
											</div>
										</details>
									</section>
								`:""}
						`}
				</div>

				${this.addDialogOpen?s`<add-to-inbox-dialog
							.staffId=${this.staffId}
							@inbox-add-close=${this._closeAddDialog}
							@inbox-add-submitted=${this._closeAddDialog}
						></add-to-inbox-dialog>`:""}
			</div>
		`}};d.styles=g`
		:host {
			display: flex;
			flex-direction: column;
			min-height: 0;
			height: 100%;
		}
	`;c([p({attribute:!1})],d.prototype,"entries",2);c([p({type:String})],d.prototype,"staffId",2);c([p({type:String})],d.prototype,"sessionId",2);c([p({type:Boolean})],d.prototype,"addDialogOpen",2);c([u()],d.prototype,"_historyOpen",2);c([u()],d.prototype,"_busyEntryIds",2);d=c([f("inbox-panel")],d);
