setRoute("hr-programs")}>Programy / Kontekst firmy

Kontekst firmy

To co wpiszesz pomoże AI dostosować rozmowy do waszej rzeczywistości — branży, struktury, kultury. AI traktuje to jako sugestię, nie sztywną instrukcję.

{/* Empty state hint */} {completedCount === 0 && (

Nie wiesz od czego zacząć?

Załaduję przykładowy kontekst dla firmy SaaS 180 osób. Dostosujesz go do siebie.

)} {/* Injection warning */} {hasInjection && (

Uwaga: wykryliśmy frazę przypominającą próbę przejęcia kontroli nad AI („ignore previous”, „you are now” itp.). AI będzie traktować to jako zwykły tekst, ale warto przeformułować.

)} {/* Form */}

{fields.map(f => { const val = data[f.id] || ""; const over = val.length > f.max; return (

{f.label}

{val.length}/{f.max}

set(f.id, e.target.value)}
                style={over ? {borderColor:"var(--bad)"} : null}
              />
              <div className="field-help" style={{marginTop:6}}>{f.hint}</div>
            </div>
          );
        })}
      </div>

{/* Actions */}
      <div className="flex between" style={{marginTop:40,paddingTop:24,borderTop:"1px solid var(--line)",alignItems:"center"}}>
        <div className="muted" style={{fontSize:12}}>
          {completedCount}/{fields.length} pól wypełnionych · {totalChars} znaków
        </div>
        <div className="flex gap-12">
          <button className="btn ghost" onClick={()=>setPreviewOpen(true)}><Icon name="sparkle" size={14}/> Podgląd — jak AI to zinterpretuje</button>
          <button className="btn primary" onClick={save}>Zapisz</button>
        </div>
      </div>

{/* Version history */}
      <div style={{marginTop:48,paddingTop:24,borderTop:"1px solid var(--line)"}}>
        <div className="eyebrow" style={{marginBottom:16}}>Historia zmian</div>
        <div className="stack-8">
          {HR_CONTEXT.history.map(h => (
            <div key={h.version} style={{display:"flex",justifyContent:"space-between",alignItems:"center",padding:"12px 14px",border:"1px solid var(--line)",borderRadius:10,fontSize:13}}>
              <div style={{display:"flex",gap:14,alignItems:"center"}}>
                <span style={{fontFamily:"var(--mono)",fontSize:11,color:"var(--fg-4)",letterSpacing:".04em"}}>v{h.version}</span>
                <div>
                  <div style={{fontWeight:500}}>{h.note}</div>
                  <div className="muted" style={{fontSize:11,marginTop:2}}>{h.date} · {h.author}</div>
                </div>
              </div>
              <button className="btn link sm">Przywróć</button>
            </div>
          ))}
        </div>
      </div>

{/* Preview modal */}
      {previewOpen && (
        <div className="modal-backdrop" onClick={()=>setPreviewOpen(false)}>
          <div className="modal" onClick={e=>e.stopPropagation()} style={{maxWidth:640}}>
            <div className="modal-head">
              <div className="eyebrow">Podgląd — jak AI użyje kontekstu</div>
              <button className="icon-btn" onClick={()=>setPreviewOpen(false)}>×</button>
            </div>
            <div className="modal-body" style={{padding:"24px 28px"}}>
              <div style={{fontFamily:"var(--serif)",fontSize:22,lineHeight:1.25,marginBottom:16}}>Scenariusz wygenerowany z kontekstem</div>
              <div style={{padding:"16px 18px",background:"var(--bg-2)",border:"1px solid var(--line)",borderRadius:12,fontSize:14,lineHeight:1.6,color:"var(--fg-2)",fontFamily:"var(--serif)"}}>
                <p style={{margin:"0 0 12px"}}><strong style={{color:"var(--fg)",fontWeight:500}}>Marek, Senior PM:</strong> „Słuchaj, wiem że ostatni QBR wypadł słabo. Ale mieliśmy trzy zmiany scope'u w ciągu dwóch tygodni — squad się zatrzymał, a ja próbowałem ratować sytuację na własną rękę. Może i powinienem wcześniej zaeskalować, ale u nas się nie eskaluje — u nas się ogarnia.”</p>
                <p style={{margin:0,color:"var(--fg-3)",fontSize:12}}>AI użyło pojęć „QBR”, „scope”, „squad”, „eskalować” z Twojego glosariusza. Ton jest zgodny z opisem kultury („ludzie niechętnie mówią wprost że się nie wyrabiają”).</p>
              </div>
              <div style={{marginTop:16,fontSize:12,color:"var(--fg-4)",lineHeight:1.5}}>
                Bez kontekstu AI użyłoby generycznych nazw i neutralnego tonu korporacyjnego.
              </div>
            </div>
            <div className="modal-foot">
              <button className="btn primary" onClick={()=>setPreviewOpen(false)}>Zamknij</button>
            </div>
          </div>
        </div>
      )}

{/* Toast */}
      {toast && (
        <div className="toast">
          <div style={{display:"flex",gap:12,alignItems:"flex-start"}}>
            <div style={{width:24,height:24,borderRadius:"50%",background:"rgba(52,211,153,.18)",color:"var(--ok)",display:"grid",placeItems:"center",flexShrink:0,marginTop:2}}>
              <Icon name="check" size={13}/>
            </div>
            <div style={{flex:1,fontSize:13,lineHeight:1.5}}>{toast.msg}</div>
          </div>
        </div>
      )}
    </div>
  );
};

Object.assign(window, { HrContext });